style: modernize About and Websites pages with subtle effects and friendlier CTA wording

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

@@ -12,10 +12,13 @@ import {
   MonoLabel,
 } from "@/src/components/Typography";
 import { Button } from "@/src/components/Button";
+import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
+import { GlitchText } from "@/src/components/GlitchText";
 
 export default function AboutPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
+      <AbstractCircuit />
       {/* Hero Section */}
       <section className="relative pt-24 md:pt-40 pb-12 md:pb-24 overflow-hidden border-b border-slate-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
@@ -186,27 +189,36 @@ export default function AboutPage() {
       </Section>
 
       {/* Section 04: CTA */}
-      <Section number="04" title="Kontakt" borderTop>
-        <div className="py-12 md:py-24">
+      <Section
+        number="04"
+        title="Kontakt"
+        borderTop
+        effects={<GradientMesh variant="metallic" className="opacity-60" />}
+      >
+        <div className="py-12 md:py-24 relative z-10">
           <div className="space-y-16 md:space-y-24">
             <Reveal>
               <H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                 Bereit, das Thema <br />
-                <span className="text-slate-400">abzuhaken?</span>
+                <span className="text-slate-400">
+                  <GlitchText delay={0.5} duration={1}>
+                    abzuhaken?
+                  </GlitchText>
+                </span>
               </H3>
             </Reveal>
 
             <Reveal delay={0.2}>
               <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
                 <LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
-                  Lassen Sie uns das Thema Website ein für alle Mal sinnvoll
-                  lösen.
+                  Schreiben Sie mir einfach – wir finden die beste Lösung für
+                  Ihre Website.
                 </LeadText>
                 <Button
                   href="/contact"
                   className="w-full md:w-auto px-12 py-6 text-xl"
                 >
-                  Kostenlos anfragen
+                  Sagen Sie Hallo
                 </Button>
               </div>
             </Reveal>

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

@@ -6,19 +6,25 @@ import { H1, H3, LeadText, BodyText, Label } from "@/src/components/Typography";
 import { Button } from "@/src/components/Button";
 import { HeroSection } from "@/src/components/HeroSection";
 import { Availability } from "@/src/components/Availability";
+import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
+import { Marker } from "@/src/components/Marker";
+import { GlitchText } from "@/src/components/GlitchText";
 
 export default function LandingPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
+      <AbstractCircuit />
       <HeroSection />
 
       {/* Section 02: Ihr Vorteil */}
       <Section number="02" title="Ihr Vorteil" borderTop>
-        <div className="space-y-16 md:space-y-32">
+        <div className="space-y-16 md:space-y-32 relative z-10">
           <Reveal>
             <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
               Sie kümmern sich um Ihr Geschäft.{" "}
-              <span className="text-slate-400">Ich um Ihre Website.</span>
+              <span className="text-slate-400">
+                Ich um Ihre <Marker delay={0.3}>Website.</Marker>
+              </span>
             </H3>
           </Reveal>
 
@@ -163,7 +169,7 @@ export default function LandingPage() {
             {
               title: "Web-Anwendungen",
               text: "Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
-              href: "/contact",
+              href: "/showcase",
             },
           ].map((service, i) => (
             <Reveal key={i} delay={0.1 * i}>
@@ -200,20 +206,29 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 06: Contact */}
-      <Section number="06" title="Kontakt" borderTop>
+      <Section
+        number="06"
+        title="Kontakt"
+        borderTop
+        effects={<GradientMesh variant="metallic" className="opacity-60" />}
+      >
         <div className="relative py-12 md:py-32" id="contact">
           <Reveal>
-            <div className="space-y-12 md:space-y-24">
+            <div className="space-y-12 md:space-y-24 relative z-10">
               <H1 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
-                Klingt gut? <br />
-                <span className="text-slate-400">Lassen Sie uns reden.</span>
+                Bereit für den Start? <br />
+                <span className="text-slate-400">
+                  <GlitchText delay={0.5} duration={1}>
+                    Sagen Sie Hallo.
+                  </GlitchText>
+                </span>
               </H1>
 
               <div className="flex flex-col md:flex-row gap-12 md:gap-24 items-start">
                 <div className="space-y-8 flex-1">
                   <LeadText className="text-2xl md:text-4xl text-slate-500 leading-snug">
-                    Beschreiben Sie kurz, was Sie brauchen. Ich melde mich
-                    innerhalb von 24 Stunden mit einem konkreten Vorschlag.
+                    Schreiben Sie mir kurz, was Sie vorhaben. Ich melde mich
+                    innerhalb von 24 Stunden bei Ihnen.
                   </LeadText>
                   <div className="pt-4">
                     <Button
@@ -221,7 +236,7 @@ export default function LandingPage() {
                       size="large"
                       className="text-lg px-8 py-4"
                     >
-                      Kostenlos anfragen
+                      Jetzt Nachricht schreiben
                     </Button>
                   </div>
                 </div>

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

@@ -12,10 +12,13 @@ import {
 } from "@/src/components/Typography";
 import { Button } from "@/src/components/Button";
 import { Marker } from "@/src/components/Marker";
+import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
+import { GlitchText } from "@/src/components/GlitchText";
 
 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-16 md:space-y-32">
           <div className="space-y-10 max-w-4xl">
@@ -201,27 +204,36 @@ export default function WebsitesPage() {
       </Section>
 
       {/* 05: CTA */}
-      <Section number="05" title="Ergebnis" borderTop>
-        <div className="py-12 md:py-24">
+      <Section
+        number="05"
+        title="Ergebnis"
+        borderTop
+        effects={<GradientMesh variant="metallic" className="opacity-60" />}
+      >
+        <div className="py-12 md:py-24 relative z-10">
           <div className="space-y-16 md:space-y-24">
             <Reveal>
               <H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                 Ihre fertige <br />
-                <span className="text-slate-400">Website.</span>
+                <span className="text-slate-400">
+                  <GlitchText delay={0.5} duration={1}>
+                    Website.
+                  </GlitchText>
+                </span>
               </H3>
             </Reveal>
 
             <Reveal delay={0.2}>
               <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
                 <LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
-                  Professionell, schnell und wartungsfrei. Schlüsselfertig für
-                  Ihr Unternehmen.
+                  Kein Stress, kein Overhead. Schreiben Sie mir einfach eine
+                  Nachricht.
                 </LeadText>
                 <Button
                   href="/contact"
                   className="w-full md:w-auto px-12 py-6 text-xl"
                 >
-                  Projekt starten
+                  Sagen Sie Hallo
                 </Button>
               </div>
             </Reveal>