132 lines
4.2 KiB
Markdown
132 lines
4.2 KiB
Markdown
|
|
|
|
# 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
|
|
| |
|
|
+--------------------------------------------------+
|
|
```
|
|
|