changes
This commit is contained in:
Julian Vollmer
parent
dd22decfbf
commit
ddc53783f1
|
|
@ -7,36 +7,40 @@ import { RouterModule } from '@angular/router';
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, RouterModule],
|
imports: [CommonModule, RouterModule],
|
||||||
template: `
|
template: `
|
||||||
<footer class="bg-gray-900 text-white">
|
<footer class="bg-primary-900 text-cream-200">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
|
||||||
|
|
||||||
<!-- Company Info -->
|
<!-- Company Info -->
|
||||||
<div class="col-span-1 md:col-span-2">
|
<div class="col-span-1 md:col-span-2">
|
||||||
<div class="flex items-center mb-4">
|
<div class="flex items-center mb-5">
|
||||||
<img src="assets/logo.png" alt="Florale Emotion Logo" class="h-16 w-auto mr-4 filter brightness-0 invert opacity-80">
|
<img src="assets/logo.png" alt="Florale Emotion Logo" class="h-16 w-auto mr-4 filter brightness-0 invert opacity-70">
|
||||||
<div>
|
<div>
|
||||||
<div class="logo-script text-2xl text-white">Florale</div>
|
<div class="logo-script text-2xl" style="color:#FAF8F4;">Florale</div>
|
||||||
<div class="logo-caps text-sm text-gray-300 -mt-1">EMOTION</div>
|
<div class="logo-caps text-xs -mt-1" style="color:#D4C3A6;">EMOTION</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-300 mb-4">
|
<p class="text-sm text-primary-300 mb-5 leading-relaxed" style="font-family:'Cormorant Garamond',serif; font-size:1rem;">
|
||||||
Ihr Spezialist für einzigartige Blumenarrangements bei Hochzeiten, Beerdigungen und besonderen Events.
|
Ihr Spezialist für einzigartige Blumenarrangements bei Hochzeiten,
|
||||||
Wir schaffen emotionale Momente mit der Schönheit der Natur.
|
Trauerfeiern und besonderen Events in der Region Göttingen.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex space-x-4">
|
<div class="flex space-x-4">
|
||||||
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors duration-200">
|
<!-- Instagram -->
|
||||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<a href="#" class="text-primary-500 hover:text-cream-300 transition-colors duration-200">
|
||||||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors duration-200">
|
<!-- Facebook -->
|
||||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<a href="#" class="text-primary-500 hover:text-cream-300 transition-colors duration-200">
|
||||||
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="text-gray-400 hover:text-primary-400 transition-colors duration-200">
|
<!-- TikTok -->
|
||||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<a href="#" class="text-primary-500 hover:text-cream-300 transition-colors duration-200">
|
||||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.097.118.112.221.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z.017-.001z"/>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -44,38 +48,40 @@ import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
<!-- Quick Links -->
|
<!-- Quick Links -->
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-lg font-semibold mb-4">Schnellzugriff</h4>
|
<h4 class="logo-caps text-xs text-primary-400 mb-5">Navigation</h4>
|
||||||
<ul class="space-y-2">
|
<ul class="space-y-3">
|
||||||
<li><a routerLink="/portfolio" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Portfolio</a></li>
|
<li><a routerLink="/portfolio" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Portfolio</a></li>
|
||||||
<li><a routerLink="/services" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Services</a></li>
|
<li><a routerLink="/services" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Services</a></li>
|
||||||
<li><a routerLink="/about" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Über uns</a></li>
|
<li><a routerLink="/about" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Über uns</a></li>
|
||||||
<li><a routerLink="/contact" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Kontakt</a></li>
|
<li><a routerLink="/contact" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Kontakt</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Contact Info -->
|
<!-- Contact Info -->
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-lg font-semibold mb-4">Kontakt</h4>
|
<h4 class="logo-caps text-xs text-primary-400 mb-5">Kontakt</h4>
|
||||||
<ul class="space-y-2 text-gray-300">
|
<ul class="space-y-3 text-primary-300 text-sm" style="font-family:'Cormorant Garamond',serif;">
|
||||||
<li class="flex items-center">
|
<li class="flex items-center gap-2">
|
||||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="w-4 h-4 text-primary-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
||||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
|
||||||
</svg>
|
</svg>
|
||||||
info@florale-emotion.de
|
info@florale-emotion.de
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-start">
|
<li class="flex items-start gap-2">
|
||||||
<svg class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Krebeck · Region Göttingen<br><span class="text-gray-500 text-xs">Werkstattbetrieb · kein Ladenlokal</span></span>
|
<span>Krebeck · Region Göttingen<br>
|
||||||
|
<span class="text-xs text-primary-500">Werkstattbetrieb · kein Ladenlokal</span>
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
<div class="border-t border-primary-800 mt-12 pt-8 text-center">
|
||||||
<p>© 2024 Florale Emotion. Alle Rechte vorbehalten.</p>
|
<p class="logo-caps text-xs text-primary-600">© 2025 Florale Emotion · Alle Rechte vorbehalten</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,16 @@ import { RouterModule } from '@angular/router';
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, RouterModule],
|
imports: [CommonModule, RouterModule],
|
||||||
template: `
|
template: `
|
||||||
<header class="bg-white shadow-sm sticky top-0 z-50">
|
<header class="bg-cream-100 border-b border-primary-200 sticky top-0 z-50">
|
||||||
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div class="flex justify-between items-center h-16">
|
<div class="flex justify-between items-center h-20">
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
<a routerLink="/" class="flex items-center space-x-3">
|
<a routerLink="/" class="flex items-center space-x-3">
|
||||||
<img src="assets/logo.png" alt="Florale Emotion Logo" class="h-12 w-auto">
|
<img src="assets/logo.png" alt="Florale Emotion Logo" class="h-14 w-auto">
|
||||||
<div class="hidden sm:block">
|
<div class="hidden sm:block">
|
||||||
<div class="logo-script text-2xl">Florale</div>
|
<div class="logo-script text-2xl">Florale</div>
|
||||||
<div class="logo-caps text-sm -mt-1">EMOTION</div>
|
<div class="logo-caps text-xs -mt-1">EMOTION</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,42 +24,41 @@ import { RouterModule } from '@angular/router';
|
||||||
<!-- Desktop Navigation -->
|
<!-- Desktop Navigation -->
|
||||||
<div class="hidden md:block">
|
<div class="hidden md:block">
|
||||||
<div class="ml-10 flex items-baseline space-x-8">
|
<div class="ml-10 flex items-baseline space-x-8">
|
||||||
<a routerLink="/"
|
<a routerLink="/"
|
||||||
routerLinkActive="text-primary-600 border-b-2 border-primary-600"
|
routerLinkActive="text-primary-900 border-b border-primary-700"
|
||||||
[routerLinkActiveOptions]="{exact: true}"
|
[routerLinkActiveOptions]="{exact: true}"
|
||||||
class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/portfolio"
|
<a routerLink="/portfolio"
|
||||||
routerLinkActive="text-primary-600 border-b-2 border-primary-600"
|
routerLinkActive="text-primary-900 border-b border-primary-700"
|
||||||
class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
|
||||||
Portfolio
|
Portfolio
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/services"
|
<a routerLink="/services"
|
||||||
routerLinkActive="text-primary-600 border-b-2 border-primary-600"
|
routerLinkActive="text-primary-900 border-b border-primary-700"
|
||||||
class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
|
||||||
Services
|
Services
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/about"
|
<a routerLink="/about"
|
||||||
routerLinkActive="text-primary-600 border-b-2 border-primary-600"
|
routerLinkActive="text-primary-900 border-b border-primary-700"
|
||||||
class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
|
||||||
Über uns
|
Über uns
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/contact"
|
<a routerLink="/contact"
|
||||||
routerLinkActive="text-primary-600 border-b-2 border-primary-600"
|
class="btn-primary text-xs py-2 px-5">
|
||||||
class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
|
Anfrage
|
||||||
Kontakt
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile menu button -->
|
<!-- Mobile menu button -->
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<button (click)="toggleMobileMenu()"
|
<button (click)="toggleMobileMenu()"
|
||||||
class="text-gray-700 hover:text-primary-600 focus:outline-none focus:text-primary-600">
|
class="text-primary-700 hover:text-primary-900 focus:outline-none">
|
||||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path *ngIf="!isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
<path *ngIf="!isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<path *ngIf="isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
<path *ngIf="isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -67,36 +66,35 @@ import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
<!-- Mobile Navigation -->
|
<!-- Mobile Navigation -->
|
||||||
<div *ngIf="isMobileMenuOpen" class="md:hidden">
|
<div *ngIf="isMobileMenuOpen" class="md:hidden">
|
||||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
|
<div class="px-2 pt-2 pb-4 space-y-1 border-t border-primary-200 bg-cream-100">
|
||||||
<a routerLink="/"
|
<a routerLink="/"
|
||||||
(click)="closeMobileMenu()"
|
(click)="closeMobileMenu()"
|
||||||
routerLinkActive="text-primary-600 bg-primary-50"
|
routerLinkActive="text-primary-900"
|
||||||
[routerLinkActiveOptions]="{exact: true}"
|
[routerLinkActiveOptions]="{exact: true}"
|
||||||
class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/portfolio"
|
<a routerLink="/portfolio"
|
||||||
(click)="closeMobileMenu()"
|
(click)="closeMobileMenu()"
|
||||||
routerLinkActive="text-primary-600 bg-primary-50"
|
routerLinkActive="text-primary-900"
|
||||||
class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
|
||||||
Portfolio
|
Portfolio
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/services"
|
<a routerLink="/services"
|
||||||
(click)="closeMobileMenu()"
|
(click)="closeMobileMenu()"
|
||||||
routerLinkActive="text-primary-600 bg-primary-50"
|
routerLinkActive="text-primary-900"
|
||||||
class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
|
||||||
Services
|
Services
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/about"
|
<a routerLink="/about"
|
||||||
(click)="closeMobileMenu()"
|
(click)="closeMobileMenu()"
|
||||||
routerLinkActive="text-primary-600 bg-primary-50"
|
routerLinkActive="text-primary-900"
|
||||||
class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
|
||||||
Über uns
|
Über uns
|
||||||
</a>
|
</a>
|
||||||
<a routerLink="/contact"
|
<a routerLink="/contact"
|
||||||
(click)="closeMobileMenu()"
|
(click)="closeMobileMenu()"
|
||||||
routerLinkActive="text-primary-600 bg-primary-50"
|
class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
|
||||||
class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
|
|
||||||
Kontakt
|
Kontakt
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,153 +9,130 @@ import { SEOService } from '../../services/seo.service';
|
||||||
imports: [CommonModule, RouterModule],
|
imports: [CommonModule, RouterModule],
|
||||||
template: `
|
template: `
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="relative bg-gradient-to-br from-primary-50 to-accent-50 py-20">
|
<section class="bg-cream-100 py-24 border-b border-primary-200">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div class="text-center">
|
<div class="text-center fade-in">
|
||||||
<div class="mb-8 fade-in">
|
<img src="assets/logo.png" alt="Florale Emotion Logo" class="h-48 md:h-60 mx-auto mb-8">
|
||||||
<img src="assets/logo.png" alt="Florale Emotion Logo" class="h-32 md:h-40 mx-auto mb-6">
|
<div class="divider-botanical mb-8"><span>✦</span></div>
|
||||||
<div class="logo-script text-5xl md:text-7xl mb-2">Florale</div>
|
<p class="font-caps text-lg md:text-xl text-secondary-700 mb-10 max-w-2xl mx-auto leading-relaxed" style="font-family:'Cormorant Garamond',serif; letter-spacing:0.05em;">
|
||||||
<div class="logo-caps text-xl md:text-2xl mb-3">EMOTION</div>
|
Einzigartige Blumenarrangements für Ihre besonderen Momente —
|
||||||
<div class="logo-subtitle text-sm md:text-base mb-1">BLUMENWERKSTATT</div>
|
Hochzeiten, Trauerfeiern und unvergessliche Events in der Region Göttingen.
|
||||||
<div class="font-serif text-sm md:text-base text-primary-600 italic">Event- und Trauerfloristik</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto slide-up">
|
|
||||||
Einzigartige Blumenarrangements für Ihre besonderen Momente -
|
|
||||||
Hochzeiten, Beerdigungen und unvergessliche Events
|
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center slide-up">
|
<div class="flex flex-col sm:flex-row gap-4 justify-center slide-up">
|
||||||
<a routerLink="/portfolio" class="btn-primary">
|
<a routerLink="/portfolio" class="btn-primary">Portfolio ansehen</a>
|
||||||
Portfolio ansehen
|
<a routerLink="/contact" class="btn-secondary">Beratung anfragen</a>
|
||||||
</a>
|
|
||||||
<a routerLink="/contact" class="btn-secondary">
|
|
||||||
Beratung anfragen
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Services Overview -->
|
<!-- Services Overview -->
|
||||||
<section class="py-16 bg-white">
|
<section class="py-20 bg-cream-200">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div class="text-center mb-12">
|
<div class="text-center mb-14 section-title-ornament">
|
||||||
<h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-4">
|
<h2 class="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
|
||||||
Unsere Services
|
Unsere Services
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
<p class="font-caps text-base text-secondary-600 max-w-xl mx-auto" style="font-family:'Cormorant Garamond',serif;">
|
||||||
Von romantischen Hochzeiten bis zu würdevollen Abschieden -
|
Von romantischen Hochzeiten bis zu würdevollen Abschieden
|
||||||
wir gestalten jeden Anlass mit der passenden floralen Note.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
<!-- Hochzeiten -->
|
<!-- Hochzeiten -->
|
||||||
<div class="card text-center group hover:shadow-xl transition-shadow duration-300">
|
<div class="card card-hover text-center group">
|
||||||
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors duration-300">
|
<div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
|
||||||
<svg class="w-8 h-8 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
|
<h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Hochzeiten</h3>
|
||||||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
|
<p class="text-secondary-700 mb-6 leading-relaxed text-sm">
|
||||||
</svg>
|
Romantische Brautsträuße, elegante Tischdekorationen und traumhafter
|
||||||
</div>
|
Kirchenschmuck für Ihren schönsten Tag.
|
||||||
<h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Hochzeiten</h3>
|
|
||||||
<p class="text-gray-600 mb-4">
|
|
||||||
Romantische Brautsträuße, elegante Tischdekorationen und traumhafte Kirchenschmuck
|
|
||||||
für Ihren schönsten Tag.
|
|
||||||
</p>
|
</p>
|
||||||
<a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
|
<a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
|
||||||
Mehr erfahren →
|
Mehr erfahren →
|
||||||
</a>
|
</a>
|
||||||
|
<div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Beerdigungen -->
|
<!-- Trauerfloristik -->
|
||||||
<div class="card text-center group hover:shadow-xl transition-shadow duration-300">
|
<div class="card card-hover text-center group">
|
||||||
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gray-200 transition-colors duration-300">
|
<div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
|
||||||
<svg class="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
|
<h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Trauerfloristik</h3>
|
||||||
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
<p class="text-secondary-700 mb-6 leading-relaxed text-sm">
|
||||||
</svg>
|
Würdevolle Kränze, Gestecke und Sargschmuck für einen respektvollen
|
||||||
</div>
|
Abschied von Ihren Liebsten.
|
||||||
<h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Trauerfloristik</h3>
|
|
||||||
<p class="text-gray-600 mb-4">
|
|
||||||
Würdevolle Kränze, Gestecke und Sargschmuck für einen respektvollen Abschied
|
|
||||||
von Ihren Liebsten.
|
|
||||||
</p>
|
</p>
|
||||||
<a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
|
<a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
|
||||||
Mehr erfahren →
|
Mehr erfahren →
|
||||||
</a>
|
</a>
|
||||||
|
<div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Events -->
|
<!-- Events -->
|
||||||
<div class="card text-center group hover:shadow-xl transition-shadow duration-300">
|
<div class="card card-hover text-center group">
|
||||||
<div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary-200 transition-colors duration-300">
|
<div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
|
||||||
<svg class="w-8 h-8 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
|
<h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Events & Feiern</h3>
|
||||||
<path fill-rule="evenodd" d="M10 2L3 7v11a2 2 0 002 2h10a2 2 0 002-2V7l-7-5zM10 18a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
<p class="text-secondary-700 mb-6 leading-relaxed text-sm">
|
||||||
</svg>
|
Festliche Dekorationen für Geburtstage, Jubiläen, Firmenfeiern
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Events & Feiern</h3>
|
|
||||||
<p class="text-gray-600 mb-4">
|
|
||||||
Festliche Dekorationen für Geburtstage, Jubiläen, Firmenfeiern
|
|
||||||
und alle besonderen Anlässe.
|
und alle besonderen Anlässe.
|
||||||
</p>
|
</p>
|
||||||
<a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
|
<a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
|
||||||
Mehr erfahren →
|
Mehr erfahren →
|
||||||
</a>
|
</a>
|
||||||
|
<div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Portfolio Preview -->
|
<!-- Portfolio Preview -->
|
||||||
<section class="py-16 bg-gray-50">
|
<section class="py-20 bg-cream-100">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div class="text-center mb-12">
|
<div class="text-center mb-14 section-title-ornament">
|
||||||
<h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-4">
|
<h2 class="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
|
||||||
Unsere Arbeiten
|
Unsere Arbeiten
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
<p class="font-caps text-base text-secondary-600 max-w-xl mx-auto" style="font-family:'Cormorant Garamond',serif;">
|
||||||
Lassen Sie sich von unseren bisherigen Projekten inspirieren und
|
Lassen Sie sich von unseren bisherigen Projekten inspirieren
|
||||||
entdecken Sie die Vielfalt unserer floralen Kunstwerke.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
|
||||||
<div *ngFor="let item of portfolioPreview" class="group cursor-pointer">
|
<div *ngFor="let item of portfolioPreview" class="group cursor-pointer">
|
||||||
<div class="relative overflow-hidden rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
|
<div class="relative overflow-hidden border border-primary-200">
|
||||||
<div class="aspect-w-4 aspect-h-3 bg-gray-200">
|
<div class="w-full h-64 bg-gradient-to-br from-cream-300 to-primary-100 flex items-center justify-center">
|
||||||
<div class="w-full h-64 bg-gradient-to-br from-primary-200 to-secondary-200 flex items-center justify-center">
|
<span class="font-serif text-secondary-600 text-sm italic">{{ item.title }}</span>
|
||||||
<span class="text-gray-600 font-medium">{{ item.title }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
|
<div class="absolute inset-0 bg-primary-900 bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-400 flex items-center justify-center">
|
||||||
<span class="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
<span class="logo-caps text-xs text-cream-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300 tracking-widest">
|
||||||
Ansehen
|
Ansehen
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mt-3 text-lg font-medium text-gray-900">{{ item.title }}</h3>
|
<div class="pt-3 pb-1 border-b border-primary-200">
|
||||||
<p class="text-gray-600">{{ item.category }}</p>
|
<h3 class="font-serif text-base text-primary-900">{{ item.title }}</h3>
|
||||||
|
<p class="logo-caps text-xs text-secondary-600 mt-1">{{ item.category }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<a routerLink="/portfolio" class="btn-primary">
|
<a routerLink="/portfolio" class="btn-primary">Komplettes Portfolio ansehen</a>
|
||||||
Komplettes Portfolio ansehen
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="py-16 bg-primary-600">
|
<section class="py-20 bg-primary-900">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
<h2 class="text-3xl md:text-4xl font-serif font-bold text-white mb-4">
|
<div class="w-12 h-px bg-primary-600 mx-auto mb-8"></div>
|
||||||
|
<h2 class="text-3xl md:text-4xl font-serif font-light text-cream-100 mb-4">
|
||||||
Bereit für Ihr nächstes Event?
|
Bereit für Ihr nächstes Event?
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
|
<p class="text-base text-primary-300 mb-10 max-w-xl mx-auto leading-relaxed" style="font-family:'Cormorant Garamond',serif; font-size:1.1rem;">
|
||||||
Kontaktieren Sie uns für eine persönliche Beratung und lassen Sie uns
|
Kontaktieren Sie uns für eine persönliche Beratung — wir kommen zu Ihnen.
|
||||||
gemeinsam Ihre floralen Träume verwirklichen.
|
|
||||||
</p>
|
</p>
|
||||||
<a routerLink="/contact" class="bg-white text-primary-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition-colors duration-200 inline-block">
|
<a routerLink="/contact" class="btn-ghost">Jetzt Kontakt aufnehmen</a>
|
||||||
Jetzt Kontakt aufnehmen
|
<div class="w-12 h-px bg-primary-600 mx-auto mt-8"></div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
|
|
@ -2,76 +2,174 @@
|
||||||
@import 'tailwindcss/components';
|
@import 'tailwindcss/components';
|
||||||
@import 'tailwindcss/utilities';
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
/* Global Styles */
|
/* ============================================
|
||||||
|
GLOBAL – Warmcreme-Basis passend zum Logo
|
||||||
|
============================================ */
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #FAF8F4;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.7;
|
||||||
color: #1f2937;
|
color: #2C2420;
|
||||||
|
background-color: #FAF8F4;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: 'Playfair Display', serif;
|
font-family: 'Playfair Display', serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: #2C2420;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
LOGO-TYPOGRAFIE
|
||||||
|
============================================ */
|
||||||
.logo-script {
|
.logo-script {
|
||||||
font-family: 'Dancing Script', cursive;
|
font-family: 'Dancing Script', cursive;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #4f4135;
|
color: #2C2420;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-caps {
|
.logo-caps {
|
||||||
font-family: 'Cormorant Garamond', serif;
|
font-family: 'Cormorant Garamond', serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.2em;
|
letter-spacing: 0.25em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #61544a;
|
color: #4e3226;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-subtitle {
|
.logo-subtitle {
|
||||||
font-family: 'Cormorant Garamond', serif;
|
font-family: 'Cormorant Garamond', serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.18em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #8d7968;
|
color: #7a5440;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Components */
|
/* ============================================
|
||||||
|
BUTTONS – schlicht, elegant, tinte-basiert
|
||||||
|
============================================ */
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@apply bg-primary-700 hover:bg-primary-800 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 shadow-md hover:shadow-lg;
|
@apply inline-block font-caps text-sm tracking-widest uppercase
|
||||||
|
bg-primary-900 hover:bg-ink-900 text-cream-100
|
||||||
|
py-3 px-8 border border-primary-900
|
||||||
|
transition-all duration-300
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-2;
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
@apply bg-white hover:bg-primary-50 text-primary-700 font-medium py-3 px-6 rounded-lg border border-primary-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 shadow-md hover:shadow-lg;
|
@apply inline-block font-caps text-sm tracking-widest uppercase
|
||||||
|
bg-transparent hover:bg-primary-900 text-primary-900 hover:text-cream-100
|
||||||
|
py-3 px-8 border border-primary-900
|
||||||
|
transition-all duration-300
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-2;
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
@apply inline-block font-caps text-sm tracking-widest uppercase
|
||||||
|
bg-transparent hover:bg-cream-200 text-cream-100 hover:text-primary-900
|
||||||
|
py-3 px-8 border border-cream-300
|
||||||
|
transition-all duration-300;
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
CARDS – kein schwerer Schatten, dezente Linie
|
||||||
|
============================================ */
|
||||||
.card {
|
.card {
|
||||||
@apply bg-white rounded-xl shadow-lg p-6 border border-gray-100;
|
@apply bg-cream-50 rounded-none p-8 border border-primary-200;
|
||||||
|
box-shadow: 0 2px 16px 0 rgba(44, 36, 32, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
@apply card transition-all duration-300 hover:border-primary-400;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 4px 28px 0 rgba(44, 36, 32, 0.10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
FORMULARE
|
||||||
|
============================================ */
|
||||||
.input-field {
|
.input-field {
|
||||||
@apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200;
|
@apply w-full px-4 py-3 border border-primary-300 bg-cream-50
|
||||||
|
focus:ring-1 focus:ring-primary-700 focus:border-primary-700
|
||||||
|
transition-colors duration-200 rounded-none;
|
||||||
|
color: #2C2420;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textarea-field {
|
.textarea-field {
|
||||||
@apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200 resize-y min-h-[120px];
|
@apply w-full px-4 py-3 border border-primary-300 bg-cream-50
|
||||||
|
focus:ring-1 focus:ring-primary-700 focus:border-primary-700
|
||||||
|
transition-colors duration-200 resize-y min-h-[120px] rounded-none;
|
||||||
|
color: #2C2420;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animations */
|
/* ============================================
|
||||||
|
ORNAMENTE & TRENNER
|
||||||
|
============================================ */
|
||||||
|
.divider-botanical {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #D4C3A6;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #8A7355;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title-ornament {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '— ✦ —';
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #A68D64;
|
||||||
|
letter-spacing: 0.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
ANIMATIONEN
|
||||||
|
============================================ */
|
||||||
.fade-in {
|
.fade-in {
|
||||||
animation: fadeIn 0.6s ease-in-out;
|
animation: fadeIn 0.8s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(20px);
|
transform: translateY(16px);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -80,16 +178,16 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-up {
|
.slide-up {
|
||||||
animation: slideUp 0.8s ease-out;
|
animation: slideUp 1s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideUp {
|
@keyframes slideUp {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(40px);
|
transform: translateY(32px);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,52 +6,79 @@ module.exports = {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
// Warmcreme – der Hintergrundton des Logos
|
||||||
|
cream: {
|
||||||
|
50: '#FDFCF9',
|
||||||
|
100: '#FAF8F4',
|
||||||
|
200: '#F5F1EA',
|
||||||
|
300: '#EDE5D8',
|
||||||
|
400: '#E2D8C8',
|
||||||
|
500: '#D4C9B5',
|
||||||
|
},
|
||||||
|
// Tinte – der Zeichenton des Logos (warmes Dunkelbraun/Charcoal)
|
||||||
|
ink: {
|
||||||
|
50: '#f5f1ee',
|
||||||
|
100: '#e8ddd6',
|
||||||
|
200: '#d0bcb0',
|
||||||
|
300: '#b39380',
|
||||||
|
400: '#956d58',
|
||||||
|
500: '#7a5440',
|
||||||
|
600: '#624030',
|
||||||
|
700: '#4e3226',
|
||||||
|
800: '#3a251c',
|
||||||
|
900: '#2C1E16',
|
||||||
|
},
|
||||||
primary: {
|
primary: {
|
||||||
50: '#f8f7f4',
|
50: '#FAF8F4',
|
||||||
100: '#f0ede6',
|
100: '#F2EDE3',
|
||||||
200: '#e1dcc9',
|
200: '#E5DAC8',
|
||||||
300: '#cfc5a3',
|
300: '#D4C3A6',
|
||||||
400: '#b8a67d',
|
400: '#BEA880',
|
||||||
500: '#a08862',
|
500: '#A68D64',
|
||||||
600: '#8a7355',
|
600: '#8A7355',
|
||||||
700: '#725e47',
|
700: '#6E5740',
|
||||||
800: '#5e4e3d',
|
800: '#503D2E',
|
||||||
900: '#4f4135',
|
900: '#2C2420',
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
50: '#f7f6f4',
|
50: '#F7F5F2',
|
||||||
100: '#efede8',
|
100: '#EFEDE8',
|
||||||
200: '#ddd8d0',
|
200: '#DDD8D0',
|
||||||
300: '#c7beb0',
|
300: '#C7BEB0',
|
||||||
400: '#aea08c',
|
400: '#AEA08C',
|
||||||
500: '#9a8674',
|
500: '#9A8674',
|
||||||
600: '#8d7968',
|
600: '#8D7968',
|
||||||
700: '#756457',
|
700: '#756457',
|
||||||
800: '#61544a',
|
800: '#61544A',
|
||||||
900: '#50463e',
|
900: '#50463E',
|
||||||
},
|
},
|
||||||
accent: {
|
accent: {
|
||||||
50: '#fdf8f6',
|
50: '#FDF8F6',
|
||||||
100: '#f2e8e5',
|
100: '#F2E8E5',
|
||||||
200: '#eaddd7',
|
200: '#EAD7D0',
|
||||||
300: '#e0cec7',
|
300: '#D8BEB4',
|
||||||
400: '#d2bab0',
|
400: '#C0998E',
|
||||||
500: '#bfa094',
|
500: '#A87B6E',
|
||||||
600: '#a18072',
|
600: '#8C6054',
|
||||||
700: '#977669',
|
700: '#724A40',
|
||||||
800: '#846358',
|
800: '#5A3830',
|
||||||
900: '#43302b',
|
900: '#3D2520',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||||
serif: ['Playfair Display', 'serif'],
|
serif: ['Playfair Display', 'serif'],
|
||||||
script: ['Dancing Script', 'cursive'],
|
script: ['Dancing Script', 'cursive'],
|
||||||
caps: ['Cormorant Garamond', 'serif'],
|
caps: ['Cormorant Garamond', 'serif'],
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'botanical': '0 2px 12px 0 rgba(44, 36, 32, 0.08)',
|
||||||
|
'botanical-md': '0 4px 24px 0 rgba(44, 36, 32, 0.10)',
|
||||||
|
'botanical-lg': '0 8px 40px 0 rgba(44, 36, 32, 0.12)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('@tailwindcss/typography'),
|
require('@tailwindcss/typography'),
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue