feat: implement industrial optimizations, hybrid dev workflow, and simplified reveal animations

apps/web/app/page.tsx

@@ -9,18 +9,25 @@ import {
   ConceptWebsite,
   DifferenceIllustration,
   HeroArchitecture,
-  HeroMainIllustration
-} 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 { BackgroundGrid, Card, Container } from '../src/components/Layout';
-import { Button } from '../src/components/Button';
+  HeroMainIllustration,
+} from "../src/components/Landing";
+import { Reveal } from "../src/components/Reveal";
+import { Marker } from "../src/components/Marker";
+import { Section } from "../src/components/Section";
+import {
+  H1,
+  H3,
+  LeadText,
+  BodyText,
+  MonoLabel,
+  Label,
+} from "../src/components/Typography";
+import { BackgroundGrid, Card, Container } from "../src/components/Layout";
+import { Button } from "../src/components/Button";
 
 export default function LandingPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-
       <BackgroundGrid />
 
       {/* Hero Section */}
@@ -33,7 +40,9 @@ export default function LandingPage() {
                 <div className="space-y-8">
                   <div className="flex items-center gap-4">
                     <div className="w-8 h-px bg-slate-900"></div>
-                    <MonoLabel className="text-slate-900">Digital Architect</MonoLabel>
+                    <MonoLabel className="text-slate-900">
+                      Digital Architect
+                    </MonoLabel>
                   </div>
                   <H1 className="text-6xl md:text-8xl">
                     Websites <br />
@@ -54,7 +63,10 @@ export default function LandingPage() {
                 <HeroArchitecture className="w-full h-full" />
               </div>
 
-              <Reveal delay={0.2} className="w-full h-full flex items-center justify-center">
+              <Reveal
+                delay={0.2}
+                className="w-full h-full flex items-center justify-center"
+              >
                 <div className="relative w-full h-full flex items-center justify-center pointer-events-none">
                   <HeroMainIllustration className="w-full h-full scale-110 md:scale-125 origin-center" />
                 </div>
@@ -65,16 +77,14 @@ export default function LandingPage() {
       </section>
 
       {/* Section 02: The Promise */}
-      <Section
-        number="02"
-        title="Das Versprechen"
-        borderTop
-      >
+      <Section number="02" title="Das Versprechen" borderTop>
         <div className="space-y-16 relative">
           <Reveal>
             <H3 className="max-w-3xl">
               Schluss mit aufgeblähten Prozessen. <br />
-              <span className="text-slate-200">Ich reduziere auf das Wesentliche.</span>
+              <span className="text-slate-200">
+                Ich reduziere auf das Wesentliche.
+              </span>
             </H3>
           </Reveal>
 
@@ -86,10 +96,22 @@ export default function LandingPage() {
                 </div>
                 <ul className="space-y-6">
                   {[
-                    { text: 'Direkte Kommunikation ohne Umwege', icon: <ConceptCommunication className="w-12 h-12" /> },
-                    { text: 'Schnelle Prototypen statt langer Konzepte', icon: <ConceptPrototyping className="w-12 h-12" /> },
-                    { text: 'Sauberer Code, der auch morgen noch läuft', icon: <ConceptCode className="w-12 h-12" /> },
-                    { text: 'Fixpreise für volle Budgetsicherheit', icon: <ConceptPrice className="w-12 h-12" /> }
+                    {
+                      text: "Direkte Kommunikation ohne Umwege",
+                      icon: <ConceptCommunication className="w-12 h-12" />,
+                    },
+                    {
+                      text: "Schnelle Prototypen statt langer Konzepte",
+                      icon: <ConceptPrototyping className="w-12 h-12" />,
+                    },
+                    {
+                      text: "Sauberer Code, der auch morgen noch läuft",
+                      icon: <ConceptCode className="w-12 h-12" />,
+                    },
+                    {
+                      text: "Fixpreise für volle Budgetsicherheit",
+                      icon: <ConceptPrice className="w-12 h-12" />,
+                    },
                   ].map((item, i) => (
                     <li key={i} className="flex items-center gap-6 group">
                       <div className="shrink-0 transition-transform duration-500 group-hover:scale-110">
@@ -109,14 +131,19 @@ export default function LandingPage() {
                 </div>
                 <ul className="space-y-4">
                   {[
-                    'Endlose Workshops ohne Ergebnis',
-                    'PowerPoint-Schlachten',
-                    'Outsourcing an Billig-Anbieter',
-                    'Wartungsverträge mit versteckten Kosten'
+                    "Endlose Workshops ohne Ergebnis",
+                    "PowerPoint-Schlachten",
+                    "Outsourcing an Billig-Anbieter",
+                    "Wartungsverträge mit versteckten Kosten",
                   ].map((item, i) => (
-                    <li key={i} className="flex items-start gap-3 decoration-slate-200 line-through">
+                    <li
+                      key={i}
+                      className="flex items-start gap-3 decoration-slate-200 line-through"
+                    >
                       <span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span>
-                      <LeadText className="text-slate-400 text-lg">{item}</LeadText>
+                      <LeadText className="text-slate-400 text-lg">
+                        {item}
+                      </LeadText>
                     </li>
                   ))}
                 </ul>
@@ -127,17 +154,15 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 03: The Difference */}
-      <Section
-        number="03"
-        title="Der Unterschied"
-        variant="white"
-        borderTop
-      >
+      <Section number="03" title="Der Unterschied" variant="white" borderTop>
         <div className="space-y-16 relative">
           <div className="flex flex-col md:flex-row gap-12 items-center">
             <Reveal className="flex-1">
               <LeadText className="text-2xl md:text-3xl leading-tight max-w-2xl relative z-10 text-slate-400">
-                Ich arbeite nicht gegen die Zeit, sondern <span className="text-slate-900">für das Ergebnis.</span> Mein Fokus liegt auf der Umsetzung, nicht auf der Verwaltung von Prozessen.
+                Ich arbeite nicht gegen die Zeit, sondern{" "}
+                <span className="text-slate-900">für das Ergebnis.</span> Mein
+                Fokus liegt auf der Umsetzung, nicht auf der Verwaltung von
+                Prozessen.
               </LeadText>
             </Reveal>
             <Reveal delay={0.2} className="w-full md:w-72 shrink-0">
@@ -168,11 +193,7 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 04: Target Group */}
-      <Section
-        number="04"
-        title="Zielgruppe"
-        borderTop
-      >
+      <Section number="04" title="Zielgruppe" borderTop>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
           <Reveal>
             <Card variant="dark" padding="normal" className="group">
@@ -180,13 +201,19 @@ export default function LandingPage() {
                 <div className="w-16 h-16 bg-white/5 rounded-xl flex items-center justify-center border border-white/10">
                   <ConceptPrice className="w-8 h-8" />
                 </div>
-                <H3 className="text-white text-3xl">Unternehmer & <br />Geschäftsführer</H3>
+                <H3 className="text-white text-3xl">
+                  Unternehmer & <br />
+                  Geschäftsführer
+                </H3>
                 <LeadText className="text-slate-400 text-lg">
-                  "Ich brauche eine Lösung, die funktioniert. Ich habe keine Zeit für technische Details."
+                  "Ich brauche eine Lösung, die funktioniert. Ich habe keine
+                  Zeit für technische Details."
                 </LeadText>
               </div>
               <div className="pt-8 border-t border-white/5 mt-8">
-                <Label className="group-hover:text-white transition-colors">Perfekt für Sie</Label>
+                <Label className="group-hover:text-white transition-colors">
+                  Perfekt für Sie
+                </Label>
               </div>
             </Card>
           </Reveal>
@@ -196,13 +223,19 @@ export default function LandingPage() {
                 <div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
                   <ConceptWebsite className="w-8 h-8" />
                 </div>
-                <H3 className="text-3xl">Marketing & <br />Vertrieb</H3>
+                <H3 className="text-3xl">
+                  Marketing & <br />
+                  Vertrieb
+                </H3>
                 <LeadText className="text-slate-400 text-lg">
-                  "Wir brauchen Landingpages und Tools, um unsere Ziele zu erreichen. Schnell und zuverlässig."
+                  "Wir brauchen Landingpages und Tools, um unsere Ziele zu
+                  erreichen. Schnell und zuverlässig."
                 </LeadText>
               </div>
               <div className="pt-8 border-t border-slate-50 mt-8">
-                <Label className="group-hover:text-slate-900 transition-colors">Perfekt für Sie</Label>
+                <Label className="group-hover:text-slate-900 transition-colors">
+                  Perfekt für Sie
+                </Label>
               </div>
             </Card>
           </Reveal>
@@ -210,12 +243,7 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 05: Services */}
-      <Section
-        number="05"
-        title="Leistungen"
-        variant="gray"
-        borderTop
-      >
+      <Section number="05" title="Leistungen" variant="gray" borderTop>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
           <Reveal delay={0.1}>
             <Card variant="white" padding="small" className="group">
@@ -225,10 +253,14 @@ export default function LandingPage() {
               <div className="space-y-4">
                 <H3 className="text-2xl">Websites</H3>
                 <BodyText>
-                  High-Performance Websites. Maßgeschneiderte Architektur statt Baukasten.
+                  High-Performance Websites. Maßgeschneiderte Architektur statt
+                  Baukasten.
                 </BodyText>
                 <div className="pt-4">
-                  <a href="/websites" className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-100 pb-1 hover:border-slate-900 transition-all">
+                  <a
+                    href="/websites"
+                    className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-100 pb-1 hover:border-slate-900 transition-all"
+                  >
                     Details
                   </a>
                 </div>
@@ -237,14 +269,19 @@ export default function LandingPage() {
           </Reveal>
 
           <Reveal delay={0.3}>
-            <Card variant="white" padding="small" className="group mt-8 md:mt-0">
+            <Card
+              variant="white"
+              padding="small"
+              className="group mt-8 md:mt-0"
+            >
               <div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                 <ConceptSystem className="w-8 h-8" />
               </div>
               <div className="space-y-4">
                 <H3 className="text-2xl">Systeme</H3>
                 <BodyText>
-                  Web-Applikationen, Portale, interne Tools. Wenn Standard an Grenzen stößt.
+                  Web-Applikationen, Portale, interne Tools. Wenn Standard an
+                  Grenzen stößt.
                 </BodyText>
               </div>
             </Card>
@@ -258,7 +295,8 @@ export default function LandingPage() {
               <div className="space-y-4">
                 <H3 className="text-2xl">Automatisierung</H3>
                 <BodyText>
-                  Verbindung von Tools, automatische Prozesse, Daten-Synchronisation.
+                  Verbindung von Tools, automatische Prozesse,
+                  Daten-Synchronisation.
                 </BodyText>
               </div>
             </Card>
@@ -267,11 +305,7 @@ export default function LandingPage() {
       </Section>
 
       {/* Section 06: Contact */}
-      <Section
-        number="06"
-        title="Kontakt"
-        borderTop
-      >
+      <Section number="06" title="Kontakt" borderTop>
         <div className="relative py-12" id="contact">
           <Reveal>
             <div className="space-y-16">
@@ -283,7 +317,8 @@ export default function LandingPage() {
               <div className="flex flex-col md:flex-row gap-16 items-start relative z-10">
                 <div className="space-y-8 flex-1">
                   <LeadText className="text-2xl md:text-3xl text-slate-400">
-                    Schreiben Sie mir kurz, worum es geht. Ich melde mich innerhalb von <span className="text-slate-900">24 Stunden</span>.
+                    Schreiben Sie mir kurz, worum es geht. Ich melde mich{" "}
+                    <span className="text-slate-900">zeitnah</span> bei Ihnen.
                   </LeadText>
                   <div className="pt-4">
                     <a
@@ -301,7 +336,9 @@ export default function LandingPage() {
                     <Label className="text-slate-900">Verfügbarkeit</Label>
                   </div>
                   <BodyText className="text-base leading-snug">
-                    Aktuell nehme ich Projekte für <span className="font-bold text-slate-900">Q2 2026</span> an.
+                    Aktuell nehme ich Projekte für{" "}
+                    <span className="font-bold text-slate-900">Q2 2026</span>{" "}
+                    an.
                   </BodyText>
                 </div>
               </div>