JUSN/Webklar
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

hiehr

Browse Source
This commit is contained in:
JUSN
2026-01-30 22:13:17 +01:00
parent 593df01f0b
commit bd07af10b5
10 changed files with 496 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
.lovable/plan.md
View File

@@ -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

45
src/components/AgitationSection.tsx Normal file
View File

@@ -0,0 +1,45 @@
const AgitationSection = () => {
return (
<section className="py-24 md:py-32 bg-secondary/30 relative overflow-hidden">
{/* Decorative element */}
<div className="absolute inset-0 opacity-5">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full border border-foreground" />
</div>
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-4xl mx-auto text-center">
<div className="label-tag mb-4">Die Realität</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
Mehr Arbeit darf nicht die einzige Antwort auf Wachstum sein.
</h2>
<div className="space-y-8 text-lg md:text-xl text-muted-foreground leading-relaxed">
<p>
Neue Kunden sollten Ihr Unternehmen nicht ins Chaos stürzen.
</p>
<p>
Wenn mehr Umsatz automatisch mehr Stress bedeutet, liegt das Problem nicht an Ihrem Markt – <span className="text-foreground font-medium">sondern an fehlenden Systemen.</span>
</p>
<div className="pt-8 border-t border-border">
<p className="text-2xl md:text-3xl text-foreground font-display font-medium uppercase tracking-tight">
Erfolgreiche Unternehmen skalieren Prozesse.
</p>
<p className="text-2xl md:text-3xl text-muted-foreground font-display font-medium uppercase tracking-tight mt-2">
Nicht Arbeitsstunden.
</p>
</div>
<p className="text-foreground font-medium pt-4">
Genau dort setzen wir an.
</p>
</div>
</div>
</div>
</section>
);
};
export default AgitationSection;

63
src/components/DifferentiationSection.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
const DifferentiationSection = () => {
return (
<section className="py-24 md:py-32 bg-secondary/20 relative">
<div className="container mx-auto px-6">
<div className="max-w-4xl mx-auto text-center">
<div className="label-tag mb-4">Der Unterschied</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
Warum Unternehmen zu uns wechseln.
</h2>
<div className="grid md:grid-cols-3 gap-8 mb-12">
<div className="p-6 border border-border rounded-lg bg-background">
<div className="text-4xl font-display font-medium text-foreground mb-2">01</div>
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
Alles aus einer Hand
</h3>
<p className="text-muted-foreground text-sm">
Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur.
</p>
</div>
<div className="p-6 border border-border rounded-lg bg-background">
<div className="text-4xl font-display font-medium text-foreground mb-2">02</div>
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
Systeme statt Inseln
</h3>
<p className="text-muted-foreground text-sm">
Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem.
</p>
</div>
<div className="p-6 border border-border rounded-lg bg-background">
<div className="text-4xl font-display font-medium text-foreground mb-2">03</div>
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
Langfristige Partnerschaft
</h3>
<p className="text-muted-foreground text-sm">
Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum.
</p>
</div>
</div>
<Link to="/kontakt">
<Button
size="lg"
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
>
Kostenlose Potenzialanalyse sichern
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
</div>
</div>
</section>
);
};
export default DifferentiationSection;

74
src/components/Hero.tsx
View File

@@ -1,8 +1,39 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
const Hero = () => {
const [companyAge, setCompanyAge] = useState("");
useEffect(() => {
const calculateAge = () => {
const now = new Date();
const diff = now.getTime() - FOUNDING_DATE.getTime();
const totalSeconds = Math.floor(diff / 1000);
const days = Math.floor(totalSeconds / (60 * 60 * 24));
const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
const seconds = totalSeconds % 60;
const years = Math.floor(days / 365);
const remainingDays = days % 365;
if (years > 0) {
setCompanyAge(`${years}J ${remainingDays}T ${hours}h ${minutes}m ${seconds}s`);
} else {
setCompanyAge(`${days}T ${hours}h ${minutes}m ${seconds}s`);
}
};
calculateAge();
const interval = setInterval(calculateAge, 1000); // Update every second
return () => clearInterval(interval);
}, []);
return (
<section className="relative min-h-screen flex flex-col justify-center bg-background overflow-hidden pt-20">
{/* Subtle grid lines */}
@@ -16,25 +47,29 @@ const Hero = () => {
</div>
{/* Main Heading - Large Uppercase */}
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-display font-medium text-foreground mb-8 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
Wir gestalten<br />
<span className="text-muted-foreground">digitale</span><br />
Erlebnisse
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-display font-medium text-foreground mb-6 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
Wir digitalisieren<br />
<span className="text-muted-foreground">Ihr Unternehmen</span>
</h1>
{/* Subtitle */}
<p className="text-lg md:text-xl text-muted-foreground max-w-xl mb-12 animate-fade-in" style={{ animationDelay: '0.4s' }}>
Maßgeschneiderte Webentwicklung für Unternehmen, die sich von der Masse abheben wollen. Strategie, Design & Entwicklung aus einer Hand.
{/* Subheadline */}
<p className="text-xl md:text-2xl text-foreground/90 max-w-3xl mb-6 font-medium animate-fade-in" style={{ animationDelay: '0.3s' }}>
Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen.
</p>
{/* Kurztext */}
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mb-8 animate-fade-in" style={{ animationDelay: '0.4s' }}>
Die meisten Unternehmen arbeiten mit zu vielen Tools, manuellen Prozessen und ineffizienten Abläufen. Wir ersetzen Chaos durch Struktur und bauen Ihnen eine digitale Infrastruktur, die Zeit spart, Fehler reduziert und Wachstum planbar macht.
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<div className="flex flex-col sm:flex-row gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
<Link to="/kontakt">
<Button
size="lg"
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
>
Projekt starten
Kostenlose Potenzialanalyse sichern
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
@@ -43,9 +78,14 @@ const Hero = () => {
variant="outline"
className="btn-outline rounded-full px-8 py-6 text-base font-medium"
>
Projekte ansehen
System-Demo anfordern
</Button>
</div>
{/* Trust Line */}
<p className="text-sm text-muted-foreground/70 uppercase tracking-wider animate-fade-in" style={{ animationDelay: '0.55s' }}>
Für Unternehmen, die nicht stehen bleiben wollen.
</p>
</div>
</div>
@@ -54,20 +94,20 @@ const Hero = () => {
<div className="divider mb-12" />
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
<div className="animate-fade-in" style={{ animationDelay: '0.6s' }}>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">50+</div>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">10+</div>
<div className="label-tag">Projekte</div>
</div>
<div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">8+</div>
<div className="label-tag">Jahre Erfahrung</div>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">{companyAge}</div>
<div className="label-tag">Am Markt</div>
</div>
<div className="animate-fade-in" style={{ animationDelay: '0.8s' }}>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">40+</div>
<div className="label-tag">Kunden</div>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">99,9%</div>
<div className="label-tag">Systemverfügbarkeit</div>
</div>
<div className="animate-fade-in" style={{ animationDelay: '0.9s' }}>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">100%</div>
<div className="label-tag">Zufriedenheit</div>
<div className="stat-number text-4xl md:text-5xl text-foreground mb-2">🇩🇪</div>
<div className="label-tag">Serverstandort in Deutschland</div>
</div>
</div>
</div>

45
src/components/Partners.tsx
View File

@@ -1,19 +1,8 @@
const partners = [
"Microsoft",
"Google",
"Shopify",
"Stripe",
"Vercel",
"AWS",
"Figma",
"Webflow",
];
const tools = ["Cursor", "Kiro", "N8N", "Mistral", "Hetzner", "Porkbun", "Appwrite", "Traefik"];
const Partners = () => {
return (
<section className="py-16 md:py-20 bg-background border-y border-border overflow-hidden">
return <section className="py-16 md:py-20 bg-background border-y border-border overflow-hidden">
<div className="container mx-auto px-6 mb-8">
<div className="label-tag text-center">Vertraut von führenden Marken</div>
<div className="label-tag text-center">UNSERE TOOLS MIT DEN WIR ARBEITEN</div>
</div>
<div className="relative">
@@ -24,33 +13,21 @@ const Partners = () => {
{/* Marquee */}
<div className="flex overflow-hidden">
<div className="marquee">
{[...partners, ...partners].map((partner, index) => (
<div
key={`${partner}-${index}`}
className="flex items-center justify-center min-w-[160px] px-8"
>
{[...tools, ...tools].map((tool, index) => <div key={`${tool}-${index}`} className="flex items-center justify-center min-w-[160px] px-8">
<span className="text-xl md:text-2xl font-display font-medium text-muted-foreground/50 hover:text-foreground transition-colors duration-300 uppercase tracking-wider">
{partner}
{tool}
</span>
</div>
))}
</div>)}
</div>
<div className="marquee" aria-hidden="true">
{[...partners, ...partners].map((partner, index) => (
<div
key={`${partner}-dup-${index}`}
className="flex items-center justify-center min-w-[160px] px-8"
>
{[...tools, ...tools].map((tool, index) => <div key={`${tool}-dup-${index}`} className="flex items-center justify-center min-w-[160px] px-8">
<span className="text-xl md:text-2xl font-display font-medium text-muted-foreground/50 hover:text-foreground transition-colors duration-300 uppercase tracking-wider">
{partner}
{tool}
</span>
</div>
))}
</div>)}
</div>
</div>
</div>
</section>
);
</section>;
};
export default Partners;
export default Partners;

68
src/components/ProblemSection.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
const ProblemSection = () => {
const problems = [
{
icon: Calendar,
text: "Termine werden manuell koordiniert.",
},
{
icon: MessageSquareOff,
text: "Kundenanfragen gehen unter.",
},
{
icon: TrendingDown,
text: "Marketing bringt keine planbaren Ergebnisse.",
},
{
icon: Folders,
text: "Wichtige Informationen liegen verteilt in verschiedenen Tools.",
},
];
return (
<section className="py-24 md:py-32 bg-background relative">
<div className="container mx-auto px-6">
{/* Section Header */}
<div className="mb-16 md:mb-20 max-w-4xl">
<div className="label-tag mb-4">Das Problem</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
Ihr Unternehmen sollte kein zweiter Vollzeitjob sein.
</h2>
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
Zu viele Firmen verlieren täglich Umsatz durch ineffiziente Prozesse, doppelte Dateneingaben und fehlende Automationen.
</p>
</div>
{/* Problem Points */}
<div className="grid md:grid-cols-2 gap-6 mb-16">
{problems.map((problem, index) => (
<div
key={index}
className="flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
>
<div className="w-10 h-10 rounded-full border border-destructive/30 bg-destructive/10 flex items-center justify-center flex-shrink-0">
<problem.icon className="w-5 h-5 text-destructive" />
</div>
<p className="text-lg text-foreground font-medium">
{problem.text}
</p>
</div>
))}
</div>
{/* Closing Statement */}
<div className="max-w-3xl">
<p className="text-lg text-muted-foreground mb-4">
Das kostet nicht nur Zeit – es verhindert Wachstum.
</p>
<p className="text-xl md:text-2xl text-foreground font-display font-medium">
Wer heute nicht digital strukturiert ist, wird morgen abgehängt.
</p>
</div>
</div>
</section>
);
};
export default ProblemSection;

68
src/components/SolutionSection.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight, CheckCircle2 } from "lucide-react";
const SolutionSection = () => {
const benefits = [
"Alle Prozesse greifen ineinander.",
"Informationen fließen automatisch.",
"Aufgaben erledigen sich im Hintergrund.",
];
return (
<section className="py-24 md:py-32 bg-background relative">
<div className="container mx-auto px-6">
<div className="grid lg:grid-cols-2 gap-16 items-center">
{/* Left Content */}
<div>
<div className="label-tag mb-4">Die Lösung</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren.
</h2>
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
Statt isolierter Einzellösungen entwickeln wir eine zentrale digitale Infrastruktur für Ihre gesamte Firma.
</p>
<div className="space-y-4 mb-10">
{benefits.map((benefit, index) => (
<div key={index} className="flex items-center gap-3">
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0" />
<span className="text-lg text-foreground">{benefit}</span>
</div>
))}
</div>
<Link to="/kontakt">
<Button
size="lg"
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
>
Jetzt Potenzialanalyse sichern
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
</div>
{/* Right Content - Visual Element */}
<div className="relative">
<div className="aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
<div className="space-y-6">
<div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">
Sie erhalten Kontrolle, Transparenz und die Freiheit, sich auf das zu konzentrieren, was wirklich zählt:
</h3>
<div className="text-4xl md:text-5xl font-display font-medium text-primary uppercase tracking-tight">
Wachstum.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default SolutionSection;

62
src/components/Values.tsx
View File

@@ -1,59 +1,65 @@
import { Shield, Clock, Lock, Zap } from "lucide-react";
import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react";
const Values = () => {
const values = [
const features = [
{
icon: Shield,
title: "Sicherheit",
description: "Höchste Datenschutzstandards und moderne Technologien schützen Ihre Daten.",
icon: Users,
title: "Digitale Kundenplattform",
description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.",
},
{
icon: Clock,
title: "Zuverlässigkeit",
description: "Stabile Systeme mit 99.9% Uptime für Ihren kontinuierlichen Erfolg.",
icon: Cog,
title: "Automatisierte Prozesse",
description: "Reduzieren Sie manuelle Arbeit drastisch.",
},
{
icon: Lock,
title: "Datenschutz",
description: "DSGVO-konforme Lösungen – Ihre Daten bleiben in Deutschland.",
icon: MessageSquare,
title: "Intelligente Kundenkommunikation",
description: "Keine Anfrage geht mehr verloren.",
},
{
icon: Zap,
title: "Performance",
description: "Blitzschnelle Ladezeiten für beste Nutzererfahrung und SEO.",
icon: Target,
title: "Planbare Neukundengewinnung",
description: "Strukturierte Funnels statt Zufall.",
},
{
icon: BarChart3,
title: "Echtzeit-Analytics",
description: "Treffen Sie Entscheidungen auf Basis klarer Daten.",
},
{
icon: Layers,
title: "Skalierbare Infrastruktur",
description: "Ihr System wächst mit Ihrem Unternehmen.",
},
];
return (
<section id="about" className="py-24 md:py-32 bg-secondary/20 relative">
<section id="features" className="py-24 md:py-32 bg-background relative">
<div className="container mx-auto px-6">
{/* Section Header */}
<div className="mb-16 md:mb-24 max-w-3xl">
<div className="label-tag mb-4">Über uns</div>
<div className="label-tag mb-4">Was Sie bekommen</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
Worauf wir Wert legen
Alles, was Ihr Unternehmen braucht. In einem System.
</h2>
<p className="text-muted-foreground text-lg leading-relaxed">
Sicherheit ist für uns keine Nebensache, sondern die Grundlage jeder Website.
Wir setzen auf moderne Technologien und höchste Datenschutzstandards.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{values.map((value, index) => (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<div
key={value.title}
className="group"
key={feature.title}
className="group p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className="w-12 h-12 rounded-full border border-border flex items-center justify-center mb-6 group-hover:border-foreground/30 transition-colors">
<value.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
<feature.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
</div>
<h3 className="text-xl font-display font-medium text-foreground mb-3 uppercase tracking-tight">
{value.title}
{feature.title}
</h3>
<p className="text-muted-foreground text-sm leading-relaxed">
{value.description}
{feature.description}
</p>
</div>
))}

74
src/components/ui/button.tsx
View File

@@ -1,47 +1,45 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10"
}
},
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
defaultVariants: {
variant: "default",
size: "default"
}
});
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
},
);
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
className,
variant,
size,
asChild = false,
...props
}, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn("", buttonVariants({
variant,
size,
className
}))} ref={ref} {...props} />;
});
Button.displayName = "Button";
export { Button, buttonVariants };
export { Button, buttonVariants };

10
src/pages/Index.tsx
View File

@@ -1,7 +1,11 @@
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import Partners from "@/components/Partners";
import ProblemSection from "@/components/ProblemSection";
import AgitationSection from "@/components/AgitationSection";
import SolutionSection from "@/components/SolutionSection";
import Values from "@/components/Values";
import DifferentiationSection from "@/components/DifferentiationSection";
import Services from "@/components/Services";
import ProjectShowcase from "@/components/ProjectShowcase";
import Process from "@/components/Process";
@@ -14,7 +18,11 @@ const Index = () => {
<Header />
<Hero />
<Partners />
<ProblemSection />
<AgitationSection />
<SolutionSection />
<Values />
<DifferentiationSection />
<Services />
<ProjectShowcase />
<Process />
@@ -24,4 +32,4 @@ const Index = () => {
);
};
export default Index;
export default Index;