4.2 KiB
4.2 KiB
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:
src/index.css - Neues Farbschema, Gradient-Variablen, Glow-Utilities
tailwind.config.ts - Neue Farben, erweiterte Animationen
Komponenten:
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
- Design System - CSS-Variablen und Tailwind-Config
- Header - Navigation im neuen Stil
- Hero - Haupt-Eyecatcher mit Animationen
- Partners - Verbessertes Logo-Marquee
- ProjectShowcase - Neue Karussell-Komponente
- Services, Values, Process - Dark Theme Updates
- Contact und Footer - Abschluss-Sektionen
5. Visuelle Vorschau
+--------------------------------------------------+
| [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
| |
+--------------------------------------------------+