fix(web): correct relative imports in opengraph-image routes

apps/web/app/(site)/websites/page.tsx

@@ -0,0 +1,375 @@
+"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>
+  );
+}