feat(content): rewrite copy to focus on worry-free package and static sites

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

@@ -39,29 +39,30 @@ export default function WebsitesPage() {
             <Reveal>
               <div className="space-y-4">
                 <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
-                  SYSTEM ENGINEERING
+                  PROFESSIONELLE WEBSITES
                 </MonoLabel>
                 <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
-                  Websites, die einfach <br />
+                  Ihre Website. <br />
                   <span className="text-slate-400">
-                    <Marker>funktionieren.</Marker>
+                    <Marker>Komplett sorgenfrei.</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{" "}
+                Kein WordPress-Chaos. Kein Baukasten-Frust. Ich baue Ihnen eine
+                maßgeschneiderte Website, mit der Sie{" "}
                 <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
-                  maximale Performance
-                </span>
-                .
+                  null Arbeit
+                </span>{" "}
+                haben.
               </LeadText>
             </Reveal>
           </div>
 
           <div className="space-y-12">
+            {/* Keeping the ArchitectureVisualizer for visual impact, but context is different */}
             <Reveal delay={0.3} direction="up">
               <ArchitectureVisualizer />
             </Reveal>
@@ -69,24 +70,24 @@ export default function WebsitesPage() {
             <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: "Kein CMS-Zwang",
+                  sub: "Einfachheit",
+                  desc: "Sie müssen kein System lernen. Ich übernehme alle Updates.",
                 },
                 {
-                  label: "Docker",
-                  sub: "Infrastructure",
-                  desc: "Reproduzierbare Umgebungen überall.",
+                  label: "Fixpreis",
+                  sub: "Planbarkeit",
+                  desc: "Klare Kosten von Anfang an. Keine versteckten Gebühren.",
                 },
                 {
-                  label: "Directus",
-                  sub: "Management",
-                  desc: "Headless CMS für flexible Datenabfrage.",
+                  label: "Pfeilschnell",
+                  sub: "Performance",
+                  desc: "Keine langen Ladezeiten. Ihre Kunden bleiben auf der Seite.",
                 },
                 {
-                  label: "Gitea",
-                  sub: "Pipeline",
-                  desc: "Self-hosted Git & CI/CD Pipelines.",
+                  label: "Sorglos",
+                  sub: "Betreuung",
+                  desc: "Hosting, Sicherheit, Backups? Darum kümmere ich mich.",
                 },
               ].map((item, i) => (
                 <Reveal key={i} delay={0.4 + i * 0.1}>
@@ -108,7 +109,7 @@ export default function WebsitesPage() {
       {/* 02: Performance */}
       <Section
         number="02"
-        title="Performance"
+        title="Schnelligkeit"
         borderTop
         variant="gray"
         illustration={<SpeedPerformance className="w-24 h-24" />}
@@ -117,9 +118,9 @@ export default function WebsitesPage() {
         <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 />
+              Niemand wartet gerne. <br />
               <span className="text-slate-400">
-                kein Extra. Sie ist <Marker delay={0.3}>Standard.</Marker>
+                Ihre Kunden <Marker delay={0.3}>erst recht nicht.</Marker>
               </span>
             </H3>
           </Reveal>
@@ -127,18 +128,18 @@ export default function WebsitesPage() {
             <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>
+                  Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
+                  sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
+                  Websites sind auf maximale Geschwindigkeit optimiert.
                 </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",
+                    "Sofortiger Seitenaufbau ohne Verzögerung",
+                    "Automatische Bild-Optimierung für Smartphones",
+                    "Bessere Google-Platzierung (SEO) durch Top-Speed",
+                    "Höhere Zufriedenheit bei Ihren Besuchern",
                   ].map((item, i) => (
                     <IconListItem key={i} bullet>
                       <LeadText className="text-base md:text-xl">
@@ -158,11 +159,11 @@ export default function WebsitesPage() {
                   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+
+                    100%
                   </div>
-                  <Label className="mt-4">Lighthouse Score</Label>
+                  <Label className="mt-4">Fokus auf das Wesentliche</Label>
                   <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
-                    PERFORMANCE · ACCESSIBILITY · SEO
+                    SCHNELL · SICHER · ZUVERLÄSSIG
                   </span>
                 </Card>
               </Reveal>
@@ -174,27 +175,24 @@ export default function WebsitesPage() {
       {/* 03: Code-Qualität */}
       <Section
         number="03"
-        title="Code"
+        title="Qualität"
         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>
+              Handarbeit statt <br />
+              <span className="text-slate-400">Fertigbausatz.</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.
+              Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
+              Themes, die ständig aktualisiert werden müssen.
             </LeadText>
           </Reveal>
 
-          {/* Git Branch Visualization */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             <Reveal delay={0.4}>
               <CodeSnippet variant="git" />
@@ -203,21 +201,22 @@ export default function WebsitesPage() {
               <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>
+                    <Label className="text-slate-900">
+                      Saubere Programmierung
+                    </Label>
                     <BodyText>
-                      Jede Änderung ist dokumentiert. Rollbacks in Sekunden.
-                      Kein „wer hat das kaputt gemacht?".
+                      Ihre Website wird von Grund auf solide entwickelt. Kein
+                      unnötiger Ballast, der die Seite verlangsamt oder
+                      angreifbar macht.
                     </BodyText>
                   </div>
                 </Card>
                 <Card variant="glass" padding="normal" className="group">
                   <div className="space-y-2">
-                    <Label className="text-slate-900">
-                      Automatisches Deployment
-                    </Label>
+                    <Label className="text-slate-900">Zukunftssicher</Label>
                     <BodyText>
-                      Code wird geprüft, getestet und automatisch live
-                      geschaltet. Ohne manuellen Eingriff.
+                      Moderne Technologien garantieren, dass Ihre Website auch
+                      in ein paar Jahren noch perfekt und fehlerfrei läuft.
                     </BodyText>
                   </div>
                 </Card>
@@ -227,10 +226,10 @@ export default function WebsitesPage() {
         </div>
       </Section>
 
-      {/* 04: Content-System */}
+      {/* 04: Content-System -> Sorglos Paket */}
       <Section
         number="04"
-        title="Inhalte"
+        title="Das Sorglos-Paket"
         borderTop
         variant="gray"
         illustration={<LayerSeparation className="w-24 h-24" />}
@@ -241,12 +240,12 @@ export default function WebsitesPage() {
             <Reveal>
               <div className="space-y-4">
                 <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
-                  ARCHITECTURAL SEPARATION
+                  NULL AUFWAND FÜR SIE
                 </MonoLabel>
                 <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
-                  Inhalte pflegen <br />
+                  Sie haben Besseres <br />
                   <span className="text-slate-400 italic font-serif">
-                    ohne Angst.
+                    zu tun.
                   </span>
                 </H3>
               </div>
@@ -255,12 +254,11 @@ export default function WebsitesPage() {
             <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{" "}
+                  Bilder tauschen, Texte anpassen, Sicherheitsupdates
+                  einspielen? Darum kümmern Sie sich nie wieder. Das{" "}
                   <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
-                    Daten von Design
+                    erledige ich.
                   </span>
-                  .
                 </LeadText>
               </div>
             </Reveal>
@@ -277,14 +275,14 @@ export default function WebsitesPage() {
               <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.
+                    Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
+                    Sie eine Änderung brauchen, schreiben Sie mir einfach eine
+                    kurze Nachricht. Kein kompliziertes
+                    Content-Management-System (CMS), keine Schulungen.
                   </BodyText>
 
                   <div className="flex flex-wrap gap-3">
-                    {["Layout-Schutz", "Live-Vorschau", "Role-RBAC"].map(
+                    {["Änderungen inklusive", "Technik-Wartung", "Hosting"].map(
                       (tag, i) => (
                         <div
                           key={i}
@@ -301,16 +299,16 @@ export default function WebsitesPage() {
               <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>
+                    <span>SERVICE_LEVEL</span>
+                    <span className="text-green-500 font-bold">ACTIVE</span>
                   </div>
                   <p className="leading-tight">
-                    Website architecture validates all CMS payloads against the
-                    design schema before rendering.
+                    Schicken Sie einfach eine E-Mail mit den neuen Texten oder
+                    Bildern.
                   </p>
                   <div className="pt-2 border-t border-white/10 flex items-center justify-between">
-                    <span>INTEGRITY</span>
-                    <span className="text-white">100%</span>
+                    <span>STRESS</span>
+                    <span className="text-white">0%</span>
                   </div>
                 </div>
               </Reveal>
@@ -334,14 +332,15 @@ export default function WebsitesPage() {
           <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>
+                Ihre fertige <br />
+                <span className="text-slate-400">Website.</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.
+                Professionell, schnell und wartungsfrei. Sie bekommen eine
+                schlüsselfertige Lösung, die Ihr Unternehmen optimal
+                präsentiert.
               </LeadText>
             </Reveal>
           </div>
@@ -364,7 +363,7 @@ export default function WebsitesPage() {
                 href="/contact"
                 className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
               >
-                Projekt anfragen
+                Kostenlos anfragen
               </Button>
             </div>
           </Reveal>