Relaunch Phase 1: Hero mit Deutschland-Karte, Kundenportal-Bühne, Leistungen, Preise, Unterseiten im neuen Layout
- Hero: wechselnde Überschrift (ein Durchlauf, Pause-Knopf), Karte zeichnet sich, roter Punkt auf Falkenstein - Kundenportal: Bühne mit Browserfenster und Handy-Rahmen (Desktop), Wisch-Reihe (Handy), Schrittzeile statt „So arbeiten wir“ - Leistungen als nummerierte Zeilen, Preise aus src/data/abos.ts - Unterseiten ohne eigenen Kopfbereich, Wortlaut der Rechtstexte unverändert - Tests für Hero, Kundenportal, Leistungen/Preise und Layout Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
69d006334f
commit
1c8cfa5c1c
54 files changed
+4761
-1166
No files matched your search
+79
-170
@@ -1,9 +1,25 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import CountUp from "@/components/CountUp";
|
||||
import BorderGlow from "@/components/BorderGlow";
|
||||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||||
import "./unterseiten.css";
|
||||
|
||||
/** „Der Unterschied“: nummerierte Textzeilen statt Karten (Phase 2 schreibt die ganze Seite neu). */
|
||||
const UNTERSCHIED = [
|
||||
{
|
||||
nr: "01",
|
||||
titel: "Alles aus einer Hand",
|
||||
text: "Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.",
|
||||
},
|
||||
{
|
||||
nr: "02",
|
||||
titel: "Systeme statt Inseln",
|
||||
text: "CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.",
|
||||
},
|
||||
{
|
||||
nr: "03",
|
||||
titel: "Betreuung im Abo",
|
||||
text: "Nach dem Go-live kümmern wir uns im Wartungs-Abo um Updates und kleine Änderungen.",
|
||||
},
|
||||
];
|
||||
|
||||
const About = () => {
|
||||
usePageMeta(
|
||||
@@ -12,182 +28,75 @@ const About = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-2 group">
|
||||
<span className="text-xl font-display font-medium text-foreground tracking-normal">
|
||||
WEBklar
|
||||
</span>
|
||||
<>
|
||||
<div className="wk-seite">
|
||||
<div className="wk-container">
|
||||
<div className="wk-seite__kopf">
|
||||
<span className="wk-eyebrow">Über WEBklar</span>
|
||||
<h1 className="wk-seite__titel">Digitalisierung, die im Alltag spürbar wird.</h1>
|
||||
</div>
|
||||
|
||||
<div className="wk-ueber__text">
|
||||
<p>
|
||||
WEBklar ist die Webagentur für Unternehmen, die wachsen wollen – ohne
|
||||
dass Geschäftsführung und Team unter Tool-Chaos und manuellen Abläufen leiden.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Wir verbinden <strong>Website, Prozesse und Automatisierung</strong> zu einem System. Kein
|
||||
isoliertes Redesign, kein weiteres Plugin – sondern eine Lösung, die Anfragen, Daten und Abläufe
|
||||
zusammenführt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="wk-ueber__aussage">
|
||||
<p>Unser Anspruch: weniger Reibung.</p>
|
||||
<p>Mehr planbares Wachstum.</p>
|
||||
</div>
|
||||
|
||||
<p className="wk-ueber__schluss">
|
||||
Starten Sie mit einem kostenlosen Gespräch – wir zeigen Ihnen die nächsten Schritte.
|
||||
</p>
|
||||
|
||||
<div className="wk-seite__aktionen">
|
||||
<Link to="/kontakt" className="wk-btn wk-btn--primary">
|
||||
Projekt besprechen
|
||||
</Link>
|
||||
<Link to="/">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Zurück
|
||||
</Button>
|
||||
<Link to="/" className="wk-btn wk-btn--secondary">
|
||||
Zur Startseite
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="pt-32 pb-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="label-tag mb-4">Über WEBklar</div>
|
||||
{/* Der Unterschied */}
|
||||
<section className="wk-section wk-section--alt" aria-labelledby="unterschied-titel">
|
||||
<div className="wk-container">
|
||||
<span className="wk-eyebrow">Der Unterschied</span>
|
||||
<h2 id="unterschied-titel" className="wk-h2">
|
||||
Warum Unternehmen zu uns wechseln.
|
||||
</h2>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-12">
|
||||
Digitalisierung, die im Alltag spürbar wird.
|
||||
</h1>
|
||||
|
||||
<div className="space-y-8 text-lg md:text-xl text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
WEBklar ist die Webagentur für Unternehmen, die wachsen wollen – ohne
|
||||
dass Geschäftsführung und Team unter Tool-Chaos und manuellen Abläufen leiden.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Wir verbinden{" "}
|
||||
<span className="text-foreground font-medium">
|
||||
Website, Prozesse und Automatisierung
|
||||
</span>{" "}
|
||||
zu einem System. Kein isoliertes Redesign, kein weiteres Plugin – sondern
|
||||
eine Lösung, die Anfragen, Daten und Abläufe zusammenführt.
|
||||
</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">
|
||||
Unser Anspruch: weniger Reibung.
|
||||
<ol className="wk-unterschied" role="list">
|
||||
{UNTERSCHIED.map((punkt) => (
|
||||
<li key={punkt.nr}>
|
||||
<p className="wk-unterschied__nr" aria-hidden>
|
||||
{punkt.nr}
|
||||
</p>
|
||||
<p className="text-2xl md:text-3xl text-muted-foreground font-display font-medium uppercase tracking-tight mt-2">
|
||||
Mehr planbares Wachstum.
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="wk-h3">{punkt.titel}</h3>
|
||||
<p>{punkt.text}</p>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
|
||||
<p className="text-foreground font-medium pt-4">
|
||||
Starten Sie mit einer kostenlosen Potenzialanalyse – wir zeigen Ihnen die nächsten Schritte.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Back / Contact */}
|
||||
<div className="mt-16 pt-12 border-t border-border flex flex-wrap justify-center gap-4">
|
||||
<Link to="/">
|
||||
<Button variant="outline" className="rounded-full">
|
||||
Zur Startseite
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/kontakt">
|
||||
<Button className="btn-minimal rounded-full">
|
||||
Potenzialanalyse starten
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="wk-seite__aktionen">
|
||||
<Link to="/kontakt" className="wk-btn wk-btn--primary">
|
||||
Projekt besprechen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Der Unterschied */}
|
||||
<div className="mt-24 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">
|
||||
<BorderGlow
|
||||
edgeSensitivity={30}
|
||||
glowColor="40 80 80"
|
||||
backgroundColor="hsl(0 0% 4%)"
|
||||
lightBackgroundColor="hsl(0 0% 96%)"
|
||||
borderRadius={8}
|
||||
glowRadius={30}
|
||||
glowIntensity={0.8}
|
||||
coneSpread={25}
|
||||
colors={['#c084fc', '#f472b6', '#38bdf8']}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="text-4xl font-display font-medium text-foreground mb-2">
|
||||
<CountUp from={0} to={1} duration={1} padMinLength={2} startWhen={true} />
|
||||
</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">
|
||||
Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.
|
||||
</p>
|
||||
</div>
|
||||
</BorderGlow>
|
||||
|
||||
<BorderGlow
|
||||
edgeSensitivity={30}
|
||||
glowColor="40 80 80"
|
||||
backgroundColor="hsl(0 0% 4%)"
|
||||
lightBackgroundColor="hsl(0 0% 96%)"
|
||||
borderRadius={8}
|
||||
glowRadius={30}
|
||||
glowIntensity={0.8}
|
||||
coneSpread={25}
|
||||
colors={['#c084fc', '#f472b6', '#38bdf8']}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="text-4xl font-display font-medium text-foreground mb-2">
|
||||
<CountUp from={0} to={2} duration={1} padMinLength={2} startWhen={true} />
|
||||
</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">
|
||||
CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.
|
||||
</p>
|
||||
</div>
|
||||
</BorderGlow>
|
||||
|
||||
<BorderGlow
|
||||
edgeSensitivity={30}
|
||||
glowColor="40 80 80"
|
||||
backgroundColor="hsl(0 0% 4%)"
|
||||
lightBackgroundColor="hsl(0 0% 96%)"
|
||||
borderRadius={8}
|
||||
glowRadius={30}
|
||||
glowIntensity={0.8}
|
||||
coneSpread={25}
|
||||
colors={['#c084fc', '#f472b6', '#38bdf8']}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="text-4xl font-display font-medium text-foreground mb-2">
|
||||
<CountUp from={0} to={3} duration={1} padMinLength={2} startWhen={true} />
|
||||
</div>
|
||||
<h3 className="text-lg font-display font-medium text-foreground uppercase tracking-tight mb-2">
|
||||
Betreuung im Abo
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Nach dem Go-live kümmern wir uns im Wartungs-Abo um Updates und kleine Änderungen.
|
||||
</p>
|
||||
</div>
|
||||
</BorderGlow>
|
||||
</div>
|
||||
|
||||
<Link to="/kontakt">
|
||||
<Button
|
||||
size="lg"
|
||||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||||
>
|
||||
Potenzialanalyse starten
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in new issue
Block a user