style: radically simplify layouts to be extremely modern and minimalist

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

@@ -1,94 +1,56 @@
 "use client";
 
-import {
-  ComparisonRow,
-  ConceptCode,
-  ConceptCommunication,
-  ConceptPrice,
-  ConceptPrototyping,
-  ConceptWebsite,
-} from "@/src/components/Landing";
 import { Reveal } from "@/src/components/Reveal";
 import { Section } from "@/src/components/Section";
-import {
-  H1,
-  H3,
-  LeadText,
-  BodyText,
-  MonoLabel,
-  Label,
-} from "@/src/components/Typography";
-import { Card, Container } from "@/src/components/Layout";
+import { H1, H3, LeadText, BodyText, Label } from "@/src/components/Typography";
 import { Button } from "@/src/components/Button";
-import { GradientMesh, CodeSnippet } from "@/src/components/Effects";
-import { IconList, IconListItem } from "@/src/components/IconList";
 import { HeroSection } from "@/src/components/HeroSection";
-import { GlitchText } from "@/src/components/GlitchText";
-import { Marker } from "@/src/components/Marker";
-import { PenCircle } from "@/src/components/PenCircle";
 import { Availability } from "@/src/components/Availability";
 
 export default function LandingPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      {/* Dark Hero */}
       <HeroSection />
 
-      {/* Rest of page on white */}
-
-      {/* Section 02: Was Sie bekommen */}
-      <Section
-        number="02"
-        title="Ihr Vorteil"
-        borderTop
-        effects={<GradientMesh variant="metallic" className="opacity-70" />}
-      >
-        <div className="space-y-10 md:space-y-16 relative">
+      {/* Section 02: Ihr Vorteil */}
+      <Section number="02" title="Ihr Vorteil" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="max-w-3xl">
-              Sie kümmern sich um Ihr Geschäft. <br />
-              <Marker delay={0.3}>Ich um Ihre Website.</Marker>
+            <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>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 relative z-10">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
             {[
               {
-                icon: <ConceptCommunication className="w-8 h-8" />,
                 title: "Ein Ansprechpartner",
-                text: "Sie sprechen direkt mit dem, der Ihre Website baut. Keine Agentur, keine Umwege, kein Stille-Post-Effekt.",
+                text: "Direkte Kommunikation. Keine Agentur, keine Projektmanager, kein Stille-Post-Effekt.",
               },
               {
-                icon: <ConceptPrototyping className="w-8 h-8" />,
-                title: "Schnell sichtbare Ergebnisse",
-                text: "Kein monatelanges Warten. Sie sehen erste Entwürfe innerhalb weniger Tage — nicht erst nach Wochen.",
+                title: "Fixpreis",
+                text: "Keine versteckten Kosten, keine Stundenzettel. Sie wissen exakt, was es kostet.",
               },
               {
-                icon: <ConceptPrice className="w-8 h-8" />,
-                title: "Fixpreis ohne Überraschungen",
-                text: "Sie wissen vorher, was es kostet. Kein Stundenzettel, keine Nachforderungen, keine bösen Überraschungen.",
+                title: "Schnelle Ergebnisse",
+                text: "Kein monatelanges Warten. Erste Entwürfe innerhalb weniger Tage.",
               },
               {
-                icon: <ConceptCode className="w-8 h-8" />,
                 title: "Null Arbeit für Sie",
-                text: "Keine Einarbeitung in ein CMS, keine Schulungen. Änderungen? Sagen Sie Bescheid — ich erledige das.",
+                text: "Keine CMS-Einarbeitung. Änderungen oder Updates? Eine kurze E-Mail genügt.",
               },
             ].map((item, i) => (
-              <Reveal key={i} delay={0.1 + i * 0.1}>
-                <Card
-                  variant="glass"
-                  padding="normal"
-                  techBorder
-                  className="group"
-                >
-                  <div className="space-y-4 relative z-10">
-                    <div className="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
-                      {item.icon}
-                    </div>
-                    <Label className="text-slate-900">{item.title}</Label>
-                    <BodyText className="text-slate-500">{item.text}</BodyText>
-                  </div>
-                </Card>
+              <Reveal key={i} delay={0.1 * i}>
+                <div className="space-y-4">
+                  <div className="h-px w-full bg-slate-100 mb-6" />
+                  <Label className="text-slate-900 text-lg md:text-xl font-medium tracking-tight">
+                    {item.title}
+                  </Label>
+                  <BodyText className="text-slate-500 text-base md:text-lg">
+                    {item.text}
+                  </BodyText>
+                </div>
               </Reveal>
             ))}
           </div>
@@ -96,195 +58,142 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 03: Der Unterschied */}
-      <Section number="03" title="Der Unterschied" variant="white" borderTop>
-        <div className="space-y-10 md:space-y-16 relative">
+      <Section number="03" title="Der Unterschied" borderTop>
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <H3 className="max-w-3xl">
-              Warum nicht einfach <br />
-              eine <Marker delay={0.4}>Agentur?</Marker>
+            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
+              Warum nicht einfach{" "}
+              <span className="text-slate-400">eine Agentur?</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 gap-8 relative z-20">
-            <ComparisonRow
-              negativeLabel="Agentur"
-              negativeText="Projektmanager, Designer, Entwickler — Sie erklären Ihr Anliegen drei Mal."
-              positiveLabel="Bei mir"
-              positiveText={
-                <>
-                  <PenCircle delay={0.5}>Ein</PenCircle> Ansprechpartner für
-                  alles. Von der ersten Idee bis zur fertigen Website.
-                </>
-              }
-              delay={0.1}
-            />
-            <ComparisonRow
-              negativeLabel="Agentur"
-              negativeText="Stundenabrechnungen, Nachträge, unklare Endkosten."
-              positiveLabel="Bei mir"
-              positiveText={
-                <>
-                  <PenCircle delay={0.5}>Fixpreis.</PenCircle> Sie wissen vorher
-                  exakt, was es kostet. Punkt.
-                </>
-              }
-              reverse
-              delay={0.2}
-            />
-            <ComparisonRow
-              negativeLabel="Baukasten"
-              negativeText="Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt."
-              positiveLabel="Bei mir"
-              positiveText={
-                <>
-                  Ich baue, Sie lehnen sich zurück. Brauchen Sie eine Änderung?{" "}
-                  <PenCircle delay={0.5}>Kurze Nachricht</PenCircle> genügt.
-                </>
-              }
-              delay={0.3}
-            />
+          <div className="space-y-12 md:space-y-0">
+            {[
+              {
+                label: "Agentur",
+                text: "Projektmanager, Designer, Entwickler — Sie erklären alles drei Mal. Stundenabrechnungen, unklare Endkosten.",
+              },
+              {
+                label: "Baukasten (Wix, etc.)",
+                text: "Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt, wenn etwas nicht funktioniert.",
+              },
+              {
+                label: "Bei mir",
+                text: "Ein Ansprechpartner. Fixpreis. Ich baue, Sie lehnen sich zurück. Sie brauchen eine Änderung? Kurze Nachricht genügt.",
+                highlight: true,
+              },
+            ].map((item, i) => (
+              <Reveal key={i} delay={0.1 * i}>
+                <div
+                  className={`grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-8 py-8 md:py-16 border-t ${item.highlight ? "border-slate-900" : "border-slate-100"}`}
+                >
+                  <div className="md:col-span-1">
+                    <Label
+                      className={`text-lg md:text-xl ${item.highlight ? "text-slate-900 font-bold" : "text-slate-400"}`}
+                    >
+                      {item.label}
+                    </Label>
+                  </div>
+                  <div className="md:col-span-3">
+                    <LeadText
+                      className={`text-xl md:text-3xl leading-snug ${item.highlight ? "text-slate-900" : "text-slate-500"}`}
+                    >
+                      {item.text}
+                    </LeadText>
+                  </div>
+                </div>
+              </Reveal>
+            ))}
           </div>
         </div>
       </Section>
 
-      {/* Section 04: Für wen */}
+      {/* Section 04: Zielgruppe */}
       <Section number="04" title="Für wen" borderTop>
-        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-10 relative z-10">
+        <div className="space-y-16 md:space-y-32">
           <Reveal>
-            <Card variant="glass" padding="normal" techBorder className="group">
-              <div className="space-y-4 md:space-y-6 relative overflow-hidden">
-                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
-                  <ConceptPrice className="w-6 h-6 md:w-8 md:h-8" />
-                </div>
-                <H3 className="text-xl md:text-3xl">
-                  Unternehmer & <br />
-                  Geschäftsführer
+            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
+              Fokus auf das <span className="text-slate-400">Wesentliche.</span>
+            </H3>
+          </Reveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
+            <Reveal>
+              <div className="space-y-8">
+                <H3 className="text-2xl md:text-4xl">
+                  Unternehmer & Geschäftsführer
                 </H3>
-                <LeadText className="text-slate-400 text-base md:text-lg">
+                <LeadText className="text-slate-500">
                   Sie brauchen eine professionelle Website, die Ihr Unternehmen
                   repräsentiert — ohne sich selbst mit Technik beschäftigen zu
                   müssen. Ich übernehme alles.
                 </LeadText>
               </div>
-              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
-                <Label className="group-hover:text-slate-900 transition-colors">
-                  Perfekt für Sie
-                </Label>
-              </div>
-            </Card>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <Card variant="glass" padding="normal" techBorder className="group">
-              <div className="space-y-6 relative overflow-hidden">
-                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
-                  <ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
-                </div>
-                <H3 className="text-xl md:text-3xl">
-                  Selbstständige & <br />
-                  kleine Teams
+            </Reveal>
+            <Reveal delay={0.2}>
+              <div className="space-y-8">
+                <H3 className="text-2xl md:text-4xl">
+                  Selbstständige & kleine Teams
                 </H3>
-                <LeadText className="text-slate-400 text-base md:text-lg">
+                <LeadText className="text-slate-500">
                   Sie wollen online sichtbar sein, aber keine Zeit in eine
-                  Website stecken. Ich liefere Ihnen eine fertige Lösung — Sie
-                  konzentrieren sich auf Ihre Kunden.
+                  Website stecken. Ich liefere eine fertige Lösung, damit Sie
+                  sich auf Ihre Kunden konzentrieren können.
                 </LeadText>
               </div>
-              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
-                <Label className="group-hover:text-slate-900 transition-colors">
-                  Perfekt für Sie
-                </Label>
-              </div>
-            </Card>
-          </Reveal>
+            </Reveal>
+          </div>
         </div>
       </Section>
 
       {/* Section 05: Leistungen */}
-      <Section number="05" title="Leistungen" variant="gray" borderTop>
-        <div className="space-y-0 relative z-20">
+      <Section number="05" title="Leistungen" borderTop>
+        <div className="space-y-0">
           {[
             {
-              num: "01",
-              binary: "00000001",
               title: "Websites",
-              text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Von der Firmenwebsite bis zur Landingpage.",
-              tags: ["Firmenwebsite", "Landingpage", "Responsive", "SEO"],
+              text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Ohne Overhead.",
               href: "/websites",
             },
             {
-              num: "02",
-              binary: "00000010",
               title: "Sorglos-Paket",
-              text: "Änderungen, Wartung, Sicherheit, Updates — alles inklusive. Sie sagen Bescheid, ich erledige das. Ein Jahr, ein Paket, null Aufwand.",
-              tags: ["Wartung", "Änderungen", "Sicherheit", "Updates"],
+              text: "Änderungen, Wartung, Sicherheit — alles inklusive. Sie sagen Bescheid, ich erledige das.",
               href: "/contact",
             },
             {
-              num: "03",
-              binary: "00000011",
               title: "Web-Anwendungen",
-              text: "Wenn eine einfache Website nicht reicht: Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
-              tags: ["Portale", "Dashboards", "Automatisierung", "Tools"],
+              text: "Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
               href: "/contact",
             },
           ].map((service, i) => (
-            <Reveal key={i} delay={0.1 + i * 0.15}>
-              <div className="group py-8 md:py-12 lg:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
-                <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-10 lg:gap-16">
-                  {/* Number + Binary */}
-                  <div className="shrink-0 flex md:block items-baseline gap-4">
-                    <span className="text-4xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
-                      {service.num}
-                    </span>
-                    <span
-                      className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700 leading-none"
-                      aria-hidden="true"
-                    >
-                      {service.binary}
-                    </span>
-                  </div>
-
-                  {/* Content */}
-                  <div className="flex-1 space-y-4 md:space-y-6">
-                    <H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
-                      <GlitchText
-                        trigger="inView"
-                        delay={0.2 + i * 0.15}
-                        duration={0.6}
-                      >
-                        {service.title}
-                      </GlitchText>
+            <Reveal key={i} delay={0.1 * i}>
+              <a href={service.href} className="group block">
+                <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 py-12 md:py-20 border-b border-slate-100 transition-colors hover:border-slate-300">
+                  <div className="space-y-4 max-w-2xl">
+                    <H3 className="text-3xl md:text-5xl group-hover:translate-x-2 transition-transform duration-500">
+                      {service.title}
                     </H3>
-                    <BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
+                    <LeadText className="text-slate-400 group-hover:text-slate-600 transition-colors">
                       {service.text}
-                    </BodyText>
-                    {/* Tags */}
-                    <div className="flex flex-wrap gap-2">
-                      {service.tags.map((tag, j) => (
-                        <span
-                          key={j}
-                          className="px-3 py-1 text-[8px] md:text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
+                    </LeadText>
                   </div>
-
-                  {/* Arrow */}
-                  <div className="md:self-center shrink-0 pt-4 md:pt-0">
-                    <Button
-                      href={service.href}
-                      variant="ghost"
-                      size="normal"
-                      showArrow
-                      className="w-full md:w-auto"
+                  <div className="text-slate-300 group-hover:text-slate-900 transition-colors pb-1">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
                     >
-                      Details
-                    </Button>
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                      <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
                   </div>
                 </div>
-              </div>
+              </a>
             </Reveal>
           ))}
         </div>
@@ -292,40 +201,39 @@ export default function LandingPage() {
 
       {/* Section 06: Contact */}
       <Section number="06" title="Kontakt" borderTop>
-        <div className="relative py-4 md:py-12" id="contact">
+        <div className="relative py-12 md:py-32" id="contact">
           <Reveal>
-            <div className="space-y-8 md:space-y-12 lg:space-y-16">
-              <H1 className="text-4xl md:text-6xl lg:text-8xl">
+            <div className="space-y-12 md:space-y-24">
+              <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>
               </H1>
 
-              <div className="flex flex-col md:flex-row gap-6 md:gap-10 lg:gap-16 items-start relative z-10">
-                <div className="space-y-4 md:space-y-8 flex-1">
-                  <LeadText className="text-lg md:text-3xl text-slate-400">
-                    Beschreiben Sie kurz, was Sie brauchen. Ich melde mich{" "}
-                    <span className="text-slate-900 border-b-2 border-slate-900/10">
-                      <Marker>innerhalb von 24 Stunden</Marker>
-                    </span>{" "}
-                    mit einem konkreten Vorschlag.
+              <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.
                   </LeadText>
-                  <div className="pt-2 md:pt-4">
+                  <div className="pt-4">
                     <Button
                       href="/contact"
                       size="large"
-                      className="w-full md:w-auto"
+                      className="text-lg px-8 py-4"
                     >
                       Kostenlos anfragen
                     </Button>
                   </div>
                 </div>
 
-                <div className="w-full md:w-72 space-y-4 md:space-y-6 p-6 glass rounded-2xl border border-slate-100">
+                <div className="w-full md:w-80 space-y-4 pt-4 md:pt-0">
                   <div className="flex items-center gap-3">
-                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <Label className="text-slate-900">Verfügbarkeit</Label>
+                    <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
+                    <Label className="text-slate-900 text-sm">
+                      Verfügbarkeit
+                    </Label>
                   </div>
-                  <BodyText className="text-sm md:text-base leading-snug">
+                  <BodyText className="text-slate-500">
                     Aktuell nehme ich Projekte für{" "}
                     <span className="font-bold text-slate-900">
                       <Availability />