hiehr
This commit is contained in:
219
.lovable/plan.md
219
.lovable/plan.md
@@ -1,131 +1,122 @@
|
||||
|
||||
|
||||
# webklar Website Komplett-Redesign
|
||||
# Komplette Landing Page Neugestaltung
|
||||
|
||||
Umfassende Neugestaltung der Website mit neuem Farbschema, 3D-Animationen, Partner-Logo-Animationen und Projekt-Showcase Karussell - inspiriert von animaapp.com.
|
||||
## Zusammenfassung
|
||||
Die gesamte Landing Page wird mit neuem Copy und neuen Sektionen umstrukturiert, um eine klare Problem-Agitation-Solution (PAS) Struktur zu schaffen.
|
||||
|
||||
## Geplante Aenderungen
|
||||
|
||||
### 1. Hero-Sektion aktualisieren (`Hero.tsx`)
|
||||
|
||||
**Neue Inhalte:**
|
||||
- **Subheadline:** "Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System - damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten muessen."
|
||||
- **Kurztext:** "Die meisten Unternehmen arbeiten mit zu vielen Tools, manuellen Prozessen und ineffizienten Ablaeufen. Wir ersetzen Chaos durch Struktur..."
|
||||
- **CTA Buttons:** "Kostenlose Potenzialanalyse sichern" + "System-Demo anfordern"
|
||||
- **Trust Line:** "Fuer Unternehmen, die nicht stehen bleiben wollen."
|
||||
|
||||
### 2. Neue Problem-Sektion erstellen (`ProblemSection.tsx`)
|
||||
|
||||
**Headline:** "Ihr Unternehmen sollte kein zweiter Vollzeitjob sein."
|
||||
|
||||
**Problempunkte:**
|
||||
- Termine werden manuell koordiniert
|
||||
- Kundenanfragen gehen unter
|
||||
- Marketing bringt keine planbaren Ergebnisse
|
||||
- Wichtige Informationen liegen verteilt in verschiedenen Tools
|
||||
|
||||
### 3. Neue Agitation-Sektion erstellen (`AgitationSection.tsx`)
|
||||
|
||||
**Headline:** "Mehr Arbeit darf nicht die einzige Antwort auf Wachstum sein."
|
||||
|
||||
**Text:** Fokus darauf, dass mehr Umsatz nicht automatisch mehr Stress bedeuten muss - es fehlen nur die richtigen Systeme.
|
||||
|
||||
### 4. Neue Solution-Sektion erstellen (`SolutionSection.tsx`)
|
||||
|
||||
**Headline:** "Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren."
|
||||
|
||||
**Kernbotschaft:** Zentrale digitale Infrastruktur statt isolierter Einzelloesungen.
|
||||
|
||||
### 5. Values-Sektion umwandeln zu Core-Value-Sektion
|
||||
|
||||
**Headline:** "Alles, was Ihr Unternehmen braucht. In einem System."
|
||||
|
||||
**6 neue Bullet-Points:**
|
||||
1. Digitale Kundenplattform
|
||||
2. Automatisierte Prozesse
|
||||
3. Intelligente Kundenkommunikation
|
||||
4. Planbare Neukundengewinnung
|
||||
5. Echtzeit-Analytics
|
||||
6. Skalierbare Infrastruktur
|
||||
|
||||
### 6. Neue Differentiation-Sektion erstellen (`DifferentiationSection.tsx`)
|
||||
|
||||
**Headline:** "Warum Unternehmen zu uns wechseln."
|
||||
|
||||
(Inhalt kann spaeter erweitert werden)
|
||||
|
||||
### 7. Index.tsx anpassen
|
||||
|
||||
Neue Sektionsreihenfolge:
|
||||
1. Header
|
||||
2. Hero (aktualisiert)
|
||||
3. Partners/Tools
|
||||
4. ProblemSection (neu)
|
||||
5. AgitationSection (neu)
|
||||
6. SolutionSection (neu)
|
||||
7. Values/CoreValue (aktualisiert)
|
||||
8. DifferentiationSection (neu)
|
||||
9. Services
|
||||
10. ProjectShowcase
|
||||
11. Process
|
||||
12. Contact
|
||||
13. Footer
|
||||
|
||||
---
|
||||
|
||||
## 1. Neues Farbschema
|
||||
## Technische Umsetzung
|
||||
|
||||
Wechsel von Olivgruen zu einem modernen, tech-fokussierten Farbschema:
|
||||
### Datei: `src/components/Hero.tsx`
|
||||
- Hauptueberschrift beibehalten oder anpassen
|
||||
- Subheadline und Kurztext ersetzen
|
||||
- CTAs aendern zu "Kostenlose Potenzialanalyse sichern" und "System-Demo anfordern"
|
||||
- Trust Line hinzufuegen
|
||||
|
||||
**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:**
|
||||
### Neue Datei: `src/components/ProblemSection.tsx`
|
||||
```text
|
||||
src/index.css - Neues Farbschema, Gradient-Variablen, Glow-Utilities
|
||||
tailwind.config.ts - Neue Farben, erweiterte Animationen
|
||||
- Sektion mit rotem Faden-Design
|
||||
- Headline + einleitender Text
|
||||
- Liste der Schmerzpunkte mit Icons
|
||||
- Abschlussstatement
|
||||
```
|
||||
|
||||
**Komponenten:**
|
||||
### Neue Datei: `src/components/AgitationSection.tsx`
|
||||
```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
|
||||
- Emotionales Design mit Kontrast
|
||||
- Headline + Fliesstext
|
||||
- Betonung: "Erfolgreiche Unternehmen skalieren Prozesse. Nicht Arbeitsstunden."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
### Neue Datei: `src/components/SolutionSection.tsx`
|
||||
```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
|
||||
| |
|
||||
+--------------------------------------------------+
|
||||
- Positives, loesungsorientiertes Design
|
||||
- Headline + Erklaerung der zentralen Infrastruktur
|
||||
- Bullet Points fuer Vorteile
|
||||
```
|
||||
|
||||
### Datei: `src/components/Values.tsx`
|
||||
- Umbenennen der Inhalte zu den 6 neuen Features
|
||||
- Icons anpassen (Users, Cog, MessageSquare, Target, BarChart, Layers)
|
||||
- Neue Headline und Beschreibungen
|
||||
|
||||
### Neue Datei: `src/components/DifferentiationSection.tsx`
|
||||
```text
|
||||
- Vergleichs- oder USP-Darstellung
|
||||
- Headline
|
||||
- (Inhalt kann spaeter erweitert werden)
|
||||
```
|
||||
|
||||
### Datei: `src/pages/Index.tsx`
|
||||
- Neue Komponenten importieren
|
||||
- Reihenfolge der Sektionen anpassen
|
||||
|
||||
|
||||
Reference in New Issue
Block a user