H

2026-01-30 00:25:07 +01:00
parent 03cd75576c
commit 593df01f0b
92 changed files with 0 additions and 0 deletions
--- a/.lovable/plan.md
+++ b/.lovable/plan.md
@@ -0,0 +1,131 @@
+
+
+# webklar Website Komplett-Redesign
+
+Umfassende Neugestaltung der Website mit neuem Farbschema, 3D-Animationen, Partner-Logo-Animationen und Projekt-Showcase Karussell - inspiriert von animaapp.com.
+
+---
+
+## 1. Neues Farbschema
+
+Wechsel von Olivgruen zu einem modernen, tech-fokussierten Farbschema:
+
+**Vorgeschlagene Palette:**
+- **Background**: Tiefes Dunkelblau (#0a0f1a) bis Schwarz
+- **Primary Accent**: Leuchtendes Cyan (#00d4ff) oder Electric Blue
+- **Secondary Accent**: Warmes Magenta/Pink (#ff3366) 
+- **Text**: Weiss und abgestufte Grautone
+- **Gradient**: Cyan zu Magenta Verlaufe
+
+---
+
+## 2. Neue Komponenten und Features
+
+### 2.1 Header (Aktualisierung)
+- Dark Theme mit Glassmorphism
+- Hover-Animationen auf Navigation
+- Leuchtende Akzente
+
+### 2.2 Hero Section (Komplett Neu)
+- Dunkler Hintergrund mit Partikel- oder Glow-Effekten
+- Grosse, animierte Headline
+- Optional: 3D-Element oder animierte Grafik
+- Gradient-Button mit Hover-Glow
+
+### 2.3 Partner-Logo Animation (Verbessert)
+- Reibungsloses Marquee mit echten oder Platzhalter-Logos
+- Graustufeneffekt, Farbe bei Hover
+- Doppelte Animation fuer nahtlose Schleife
+
+### 2.4 Projekt-Showcase Karussell (Neu)
+Neue Komponente: `ProjectShowcase.tsx`
+- Horizontales Karussell mit Projekt-Karten
+- 3D-Hover-Effekte (Tilt/Perspektive)
+- Sanfte Uebergaenge zwischen Slides
+- Beispiel-Projekte eurer Arbeit
+
+### 2.5 3D Animationen und Effekte
+- Floating Gradient Orbs im Hintergrund
+- Glow-Effekte auf interaktiven Elementen
+- Parallax-Scrolling fuer Tiefenwirkung
+- Subtle Partikel-Animationen
+- Card-Hover mit 3D-Transform
+
+### 2.6 Services Section (Aktualisierung)
+- Dark Cards mit Glow-Border bei Hover
+- Icon-Animationen
+- Gradient-Akzente
+
+### 2.7 Process Section (Aktualisierung)
+- Leuchtende Timeline-Linie
+- Animierte Nummern-Badges
+- Staggered Fade-In beim Scrollen
+
+### 2.8 Contact und Footer (Aktualisierung)
+- Gradient CTA-Bereich
+- Dark Footer mit leuchtenden Akzenten
+
+---
+
+## 3. Technische Umsetzung
+
+### Dateien die geaendert werden:
+
+**Design System:**
+```text
+src/index.css          - Neues Farbschema, Gradient-Variablen, Glow-Utilities
+tailwind.config.ts     - Neue Farben, erweiterte Animationen
+```
+
+**Komponenten:**
+```text
+src/components/Header.tsx         - Dark Theme Anpassung
+src/components/Hero.tsx           - Komplett neu mit 3D-Effekten
+src/components/Partners.tsx       - Verbessertes Marquee
+src/components/ProjectShowcase.tsx - NEU: Karussell-Komponente
+src/components/Values.tsx         - Dark Theme Anpassung
+src/components/Services.tsx       - Glow-Cards
+src/components/Process.tsx        - Animierte Timeline
+src/components/Contact.tsx        - Gradient CTA
+src/components/Footer.tsx         - Dark Footer
+src/pages/Index.tsx               - ProjectShowcase einbinden
+```
+
+---
+
+## 4. Reihenfolge der Implementierung
+
+1. **Design System** - CSS-Variablen und Tailwind-Config
+2. **Header** - Navigation im neuen Stil
+3. **Hero** - Haupt-Eyecatcher mit Animationen
+4. **Partners** - Verbessertes Logo-Marquee
+5. **ProjectShowcase** - Neue Karussell-Komponente
+6. **Services, Values, Process** - Dark Theme Updates
+7. **Contact und Footer** - Abschluss-Sektionen
+
+---
+
+## 5. Visuelle Vorschau
+
+```text
+--------------------------------------------------+
+|  [Logo] webklar     Nav Links      [CTA Button]  |  <- Glassmorphism Header
+--------------------------------------------------+
+|                                                  |
+|         ✨ Floating Gradient Orbs ✨              |
+|                                                  |
+|        Digitale Loesungen die                    |
+|           ✨ begeistern ✨                        |  <- Animated Headline
+|                                                  |
+|      [ Jetzt Termin buchen -> ]                  |  <- Glow Button
+|                                                  |
+--------------------------------------------------+
+|   [Logo] [Logo] [Logo] [Logo] [Logo] ->          |  <- Marquee Animation
+--------------------------------------------------+
+|                                                  |
+|   Unsere Projekte                                |
+|   [Card 1] [Card 2] [Card 3] < >                 |  <- Showcase Carousel
+|                                                  |
+--------------------------------------------------+
+```
+