376 lines
14 KiB
TypeScript
376 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { Reveal } from "../../src/components/Reveal";
|
||
import { Section } from "../../src/components/Section";
|
||
import {
|
||
SpeedPerformance,
|
||
SolidFoundation,
|
||
LayerSeparation,
|
||
TaskDone,
|
||
} from "../../src/components/Landing";
|
||
import {
|
||
H3,
|
||
LeadText,
|
||
BodyText,
|
||
Label,
|
||
MonoLabel,
|
||
} from "../../src/components/Typography";
|
||
import { Card } from "../../src/components/Layout";
|
||
import { Button } from "../../src/components/Button";
|
||
import { IconList, IconListItem } from "../../src/components/IconList";
|
||
import {
|
||
GradientMesh,
|
||
CodeSnippet,
|
||
AbstractCircuit,
|
||
CMSVisualizer,
|
||
ArchitectureVisualizer,
|
||
ResultVisualizer,
|
||
} from "../../src/components/Effects";
|
||
import { Marker } from "../../src/components/Marker";
|
||
|
||
export default function WebsitesPage() {
|
||
return (
|
||
<div className="flex flex-col bg-white overflow-hidden relative">
|
||
<AbstractCircuit />
|
||
|
||
<Section className="pt-24 pb-12 md:pt-40 md:pb-24">
|
||
<div className="space-y-12 md:space-y-24">
|
||
<div className="space-y-6 md:space-y-10 max-w-5xl">
|
||
<Reveal>
|
||
<div className="space-y-4">
|
||
<MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
|
||
SYSTEM ENGINEERING
|
||
</MonoLabel>
|
||
<H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
|
||
Websites, die einfach <br />
|
||
<span className="text-slate-400">
|
||
<Marker>funktionieren.</Marker>
|
||
</span>
|
||
</H3>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
|
||
Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur
|
||
für{" "}
|
||
<span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
|
||
maximale Performance
|
||
</span>
|
||
.
|
||
</LeadText>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="space-y-12">
|
||
<Reveal delay={0.3} direction="up">
|
||
<ArchitectureVisualizer />
|
||
</Reveal>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{[
|
||
{
|
||
label: "Next.js",
|
||
sub: "Architecture",
|
||
desc: "React-Framework für maximale SEO & Speed.",
|
||
},
|
||
{
|
||
label: "Docker",
|
||
sub: "Infrastructure",
|
||
desc: "Reproduzierbare Umgebungen überall.",
|
||
},
|
||
{
|
||
label: "Directus",
|
||
sub: "Management",
|
||
desc: "Headless CMS für flexible Datenabfrage.",
|
||
},
|
||
{
|
||
label: "Gitea",
|
||
sub: "Pipeline",
|
||
desc: "Self-hosted Git & CI/CD Pipelines.",
|
||
},
|
||
].map((item, i) => (
|
||
<Reveal key={i} delay={0.4 + i * 0.1}>
|
||
<div className="space-y-2 p-6 rounded-2xl border border-slate-50 bg-white shadow-sm hover:border-slate-200 transition-all group">
|
||
<Label className="text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-widest text-[10px]">
|
||
{item.label}
|
||
</Label>
|
||
<BodyText className="text-xs text-slate-400">
|
||
{item.desc}
|
||
</BodyText>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 02: Performance */}
|
||
<Section
|
||
number="02"
|
||
title="Performance"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<SpeedPerformance className="w-24 h-24" />}
|
||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||
>
|
||
<div className="space-y-8 md:space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||
Geschwindigkeit ist <br />
|
||
<span className="text-slate-400">
|
||
kein Extra. Sie ist <Marker delay={0.3}>Standard.</Marker>
|
||
</span>
|
||
</H3>
|
||
</Reveal>
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
|
||
<div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
|
||
Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
|
||
Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
|
||
<span className="text-slate-900">Reproduzierbar.</span>
|
||
</LeadText>
|
||
</Reveal>
|
||
<Reveal delay={0.4}>
|
||
<IconList className="space-y-2 md:space-y-4">
|
||
{[
|
||
"Server-Side Rendering für sofortige Inhalte",
|
||
"Automatische Bild-Optimierung (WebP, AVIF)",
|
||
"Lighthouse-Score 90+ als Mindeststandard",
|
||
"Core Web Vitals im grünen Bereich",
|
||
].map((item, i) => (
|
||
<IconListItem key={i} bullet>
|
||
<LeadText className="text-base md:text-xl">
|
||
{item}
|
||
</LeadText>
|
||
</IconListItem>
|
||
))}
|
||
</IconList>
|
||
</Reveal>
|
||
</div>
|
||
<div className="md:col-span-5">
|
||
<Reveal delay={0.6}>
|
||
<Card
|
||
variant="glass"
|
||
padding="normal"
|
||
techBorder
|
||
className="text-center group py-10 md:py-12"
|
||
>
|
||
<div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
|
||
90+
|
||
</div>
|
||
<Label className="mt-4">Lighthouse Score</Label>
|
||
<span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
|
||
PERFORMANCE · ACCESSIBILITY · SEO
|
||
</span>
|
||
</Card>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 03: Code-Qualität */}
|
||
<Section
|
||
number="03"
|
||
title="Code"
|
||
borderTop
|
||
illustration={<SolidFoundation className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-8 md:space-y-12">
|
||
<Reveal>
|
||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||
Keine Plugins. <br />
|
||
<span className="text-slate-400">Keine Abhängigkeiten.</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
|
||
Ihre Website besteht aus{" "}
|
||
<span className="text-slate-900">Ihrem Code</span>. Kein
|
||
WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
|
||
nachvollziehbar.
|
||
</LeadText>
|
||
</Reveal>
|
||
|
||
{/* Git Branch Visualization */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<Reveal delay={0.4}>
|
||
<CodeSnippet variant="git" />
|
||
</Reveal>
|
||
<Reveal delay={0.5}>
|
||
<div className="space-y-4 md:space-y-6">
|
||
<Card variant="glass" padding="normal" className="group">
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-900">Versionskontrolle</Label>
|
||
<BodyText>
|
||
Jede Änderung ist dokumentiert. Rollbacks in Sekunden.
|
||
Kein „wer hat das kaputt gemacht?".
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
<Card variant="glass" padding="normal" className="group">
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-900">
|
||
Automatisches Deployment
|
||
</Label>
|
||
<BodyText>
|
||
Code wird geprüft, getestet und automatisch live
|
||
geschaltet. Ohne manuellen Eingriff.
|
||
</BodyText>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 04: Content-System */}
|
||
<Section
|
||
number="04"
|
||
title="Inhalte"
|
||
borderTop
|
||
variant="gray"
|
||
illustration={<LayerSeparation className="w-24 h-24" />}
|
||
effects={<GradientMesh variant="subtle" className="opacity-60" />}
|
||
>
|
||
<div className="space-y-12 md:space-y-20">
|
||
<div className="space-y-6 md:space-y-10 max-w-5xl">
|
||
<Reveal>
|
||
<div className="space-y-4">
|
||
<MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
|
||
ARCHITECTURAL SEPARATION
|
||
</MonoLabel>
|
||
<H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
|
||
Inhalte pflegen <br />
|
||
<span className="text-slate-400 italic font-serif">
|
||
ohne Angst.
|
||
</span>
|
||
</H3>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.2}>
|
||
<div className="space-y-6">
|
||
<LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
|
||
Vergessen Sie zerschossene Layouts nach einem Textupdate.
|
||
Meine Websites trennen{" "}
|
||
<span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
|
||
Daten von Design
|
||
</span>
|
||
.
|
||
</LeadText>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||
<div className="lg:col-span-8 relative">
|
||
<Reveal delay={0.4} direction="up">
|
||
<CMSVisualizer className="w-full mx-auto" />
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="lg:col-span-4 space-y-8">
|
||
<Reveal delay={0.5}>
|
||
<div className="space-y-4">
|
||
<BodyText className="text-slate-500 leading-relaxed">
|
||
Durch eine krisenfeste Headless-Architektur (Directus)
|
||
bewegen Sie sich in einem geschützten Sandkasten – während
|
||
das Frontend-System die visuelle Integrität Ihrer Marke
|
||
garantiert.
|
||
</BodyText>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
{["Layout-Schutz", "Live-Vorschau", "Role-RBAC"].map(
|
||
(tag, i) => (
|
||
<div
|
||
key={i}
|
||
className="px-3 py-1 bg-white border border-slate-100 rounded-full text-[10px] font-mono text-slate-400"
|
||
>
|
||
{tag}
|
||
</div>
|
||
),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.6}>
|
||
<div className="p-6 bg-slate-900 rounded-2xl shadow-xl text-[10px] font-mono text-white/50 space-y-3">
|
||
<div className="flex justify-between items-center text-white/90">
|
||
<span>PROTOCOL</span>
|
||
<span className="text-green-500 font-bold">ENFORCED</span>
|
||
</div>
|
||
<p className="leading-tight">
|
||
Website architecture validates all CMS payloads against the
|
||
design schema before rendering.
|
||
</p>
|
||
<div className="pt-2 border-t border-white/10 flex items-center justify-between">
|
||
<span>INTEGRITY</span>
|
||
<span className="text-white">100%</span>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
|
||
<Reveal delay={0.7}>
|
||
<div className="p-px w-full bg-gradient-to-r from-transparent via-slate-100 to-transparent" />
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 05: Was Sie bekommen */}
|
||
<Section
|
||
number="05"
|
||
title="Ergebnis"
|
||
borderTop
|
||
illustration={<TaskDone className="w-24 h-24" />}
|
||
>
|
||
<div className="space-y-12 md:space-y-24">
|
||
<div className="max-w-4xl space-y-6">
|
||
<Reveal>
|
||
<H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
|
||
Was Sie konkret <br />
|
||
<span className="text-slate-400">bekommen.</span>
|
||
</H3>
|
||
</Reveal>
|
||
<Reveal delay={0.2}>
|
||
<LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
|
||
Keine halben Sachen. Ich liefere Ihnen ein schlüsselfertiges
|
||
System mit voller Kontrolle und Transparenz.
|
||
</LeadText>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<Reveal delay={0.3} direction="up">
|
||
<ResultVisualizer />
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.5}>
|
||
<div className="pt-10 md:pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
|
||
<div className="space-y-3">
|
||
<MonoLabel className="text-blue-500">
|
||
BEREIT FÜR DEN NÄCHSTEN SCHRITT?
|
||
</MonoLabel>
|
||
<div className="text-xl md:text-3xl font-bold tracking-tight text-slate-900">
|
||
Lassen Sie uns über Ihr Projekt sprechen.
|
||
</div>
|
||
</div>
|
||
<Button
|
||
href="/contact"
|
||
className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
|
||
>
|
||
Projekt anfragen
|
||
</Button>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|