feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

apps/web/app/websites/page.tsx

@@ -46,6 +46,7 @@ export default function WebsitesPage() {
         }
         description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
         backgroundSymbol="W"
+        className="px-5 md:px-0"
       />
 
       {/* 01: Architektur – WIE ich baue */}
@@ -55,9 +56,9 @@ export default function WebsitesPage() {
         borderTop
         illustration={<SystemArchitecture className="w-24 h-24" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Systeme, nicht Broschüren. <br />
               <span className="text-slate-400">
                 Jede Website ist Ingenieursarbeit.
@@ -65,7 +66,7 @@ export default function WebsitesPage() {
             </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+            <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-400">
               Ich entwickle Websites von Grund auf – mit modernen Frameworks,
               eigener Infrastruktur und einem Deployment-Prozess, der{" "}
               <span className="text-slate-900">
@@ -79,7 +80,7 @@ export default function WebsitesPage() {
 
           {/* Tech Stack Visual */}
           <Reveal delay={0.4}>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
               {[
                 { label: "Next.js", sub: "Framework" },
                 { label: "TypeScript", sub: "Sprache" },
@@ -93,11 +94,11 @@ export default function WebsitesPage() {
                   techBorder
                   className="group text-center"
                 >
-                  <div className="space-y-2">
-                    <Label className="text-slate-900 text-sm">
+                  <div className="space-y-1 md:space-y-2">
+                    <Label className="text-slate-900 text-xs md:text-sm">
                       {item.label}
                     </Label>
-                    <span className="block text-[9px] font-mono text-slate-300 uppercase tracking-widest">
+                    <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 uppercase tracking-widest">
                       {item.sub}
                     </span>
                   </div>
@@ -124,9 +125,9 @@ export default function WebsitesPage() {
         illustration={<SpeedPerformance className="w-24 h-24" />}
         effects={<GradientMesh variant="metallic" className="opacity-60" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Geschwindigkeit ist <br />
               <span className="text-slate-400">
                 <Marker delay={0.3} color="rgba(148,163,184,0.15)">
@@ -135,17 +136,17 @@ export default function WebsitesPage() {
               </span>
             </H3>
           </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
-            <div className="md:col-span-7 space-y-8">
+          <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-xl text-slate-400">
+                <LeadText className="text-lg md:text-xl 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-4">
+                <IconList className="space-y-2 md:space-y-4">
                   {[
                     "Server-Side Rendering für sofortige Inhalte",
                     "Automatische Bild-Optimierung (WebP, AVIF)",
@@ -153,7 +154,9 @@ export default function WebsitesPage() {
                     "Core Web Vitals im grünen Bereich",
                   ].map((item, i) => (
                     <IconListItem key={i} bullet>
-                      <LeadText className="text-lg md:text-xl">{item}</LeadText>
+                      <LeadText className="text-base md:text-xl">
+                        {item}
+                      </LeadText>
                     </IconListItem>
                   ))}
                 </IconList>
@@ -165,13 +168,13 @@ export default function WebsitesPage() {
                   variant="glass"
                   padding="normal"
                   techBorder
-                  className="text-center group"
+                  className="text-center group py-10 md:py-12"
                 >
-                  <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
+                  <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-[9px] font-mono text-slate-300 mt-2 tracking-wider">
+                  <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
                     PERFORMANCE · ACCESSIBILITY · SEO
                   </span>
                 </Card>
@@ -188,9 +191,9 @@ export default function WebsitesPage() {
         borderTop
         illustration={<SolidFoundation className="w-24 h-24" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <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>
@@ -210,7 +213,7 @@ export default function WebsitesPage() {
               <CodeSnippet variant="git" />
             </Reveal>
             <Reveal delay={0.5}>
-              <div className="space-y-6">
+              <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>
@@ -246,17 +249,17 @@ export default function WebsitesPage() {
         illustration={<LayerSeparation className="w-24 h-24" />}
         effects={<GradientMesh variant="subtle" className="opacity-60" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Inhalte pflegen <br />
               <span className="text-slate-400">ohne Angst.</span>
             </H3>
           </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
-            <div className="md:col-span-7">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
+            <div className="md:col-span-12 lg:col-span-7">
               <Reveal delay={0.2}>
-                <LeadText className="text-xl md:text-2xl text-slate-400">
+                <LeadText className="text-lg md:text-2xl text-slate-400">
                   Technik und Inhalt sind{" "}
                   <span className="text-slate-900">
                     <Marker color="rgba(255,235,59,0.5)">
@@ -268,7 +271,7 @@ export default function WebsitesPage() {
                 </LeadText>
               </Reveal>
             </div>
-            <div className="md:col-span-5">
+            <div className="md:col-span-12 lg:col-span-5">
               <Reveal delay={0.4}>
                 <Card
                   variant="glass"
@@ -281,7 +284,7 @@ export default function WebsitesPage() {
                       <div className="w-2 h-2 rounded-full bg-green-500"></div>
                       <Label className="text-slate-900">Sie dürfen</Label>
                     </div>
-                    <BodyText className="font-medium">
+                    <BodyText className="font-medium text-sm md:text-base">
                       Texte, Bilder und Inhalte frei bearbeiten.
                     </BodyText>
                   </div>
@@ -290,7 +293,7 @@ export default function WebsitesPage() {
                       <div className="w-2 h-2 rounded-full bg-slate-300"></div>
                       <Label>Geschützt</Label>
                     </div>
-                    <BodyText className="line-through">
+                    <BodyText className="line-through text-xs md:text-base">
                       Design, Layout, Code-Struktur.
                     </BodyText>
                   </div>
@@ -308,15 +311,15 @@ export default function WebsitesPage() {
         borderTop
         illustration={<TaskDone className="w-24 h-24" />}
       >
-        <div className="space-y-16">
+        <div className="space-y-8 md:space-y-16">
           <Reveal>
-            <H3 className="text-4xl md:text-6xl tracking-tighter">
+            <H3 className="text-2xl md:text-5xl tracking-tighter">
               Was Sie konkret <br />
               <span className="text-slate-400">bekommen.</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
             {[
               {
                 title: "Ihr Code",
@@ -332,10 +335,12 @@ export default function WebsitesPage() {
               },
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
-                <div className="space-y-4 group">
+                <div className="space-y-3 md:space-y-4 group">
                   <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
-                  <H4 className="text-2xl">{item.title}</H4>
-                  <LeadText className="text-lg text-slate-400">
+                  <H4 className="text-lg md:text-2xl font-bold">
+                    {item.title}
+                  </H4>
+                  <LeadText className="text-sm md:text-lg text-slate-400">
                     {item.desc}
                   </LeadText>
                 </div>
@@ -344,14 +349,16 @@ export default function WebsitesPage() {
           </div>
 
           <Reveal delay={0.4}>
-            <div className="pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
+            <div className="pt-10 md:pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 md:gap-8">
               <div className="space-y-2">
                 <Label>Bereit?</Label>
-                <LeadText className="text-2xl">
+                <LeadText className="text-xl md:text-2xl">
                   Lassen Sie uns über Ihr Projekt sprechen.
                 </LeadText>
               </div>
-              <Button href="/contact">Projekt anfragen</Button>
+              <Button href="/contact" className="w-full md:w-auto">
+                Projekt anfragen
+              </Button>
             </div>
           </Reveal>
         </div>