Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -23,8 +23,7 @@ export default function HomePage() {
 
   const footerColumns = [
     {
-      title: "Diensten",
-      items: [
+      title: "Diensten",      items: [
         { label: "Gevelreclame", href: "/services" },
         { label: "Belettering", href: "/services" },
         { label: "Carwrap", href: "/services" },
@@ -32,8 +31,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Bedrijf",
-      items: [
+      title: "Bedrijf",      items: [
         { label: "Over ons", href: "/" },
         { label: "Portfolio", href: "/" },
         { label: "Contact", href: "/" },
@@ -41,8 +39,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Contact",
-      items: [
+      title: "Contact",      items: [
         { label: "hello@luux.nl", href: "mailto:hello@luux.nl" },
         { label: "+31 (0)162 123 456", href: "tel:+31162123456" },
         { label: "Dongen, Nederland", href: "/" },
@@ -85,6 +82,8 @@ export default function HomePage() {
           imageSrc="http://img.b2bpic.net/free-vector/minimal-style-architect-instagram-stories-template_23-2149423815.jpg?_wi=1"
           imageAlt="Premium signage and branding showcase"
           showDimOverlay={true}
+          containerClassName="motion-safe:animate-fade-in-up"
+          imageClassName="motion-safe:animate-image-reveal"
         />
       </div>
 
@@ -94,24 +93,18 @@ export default function HomePage() {
           description="Van concept tot installatie. Wij bieden een volledige reeks van professionele tekenoplossingen voor uw merk."
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
+          animationType="blur-reveal"
           tag="Services"
           negativeCard={{
             items: [
-              "Gevelreclame",
-              "Interieur signing",
-              "Wandaankleding",
-            ],
+              "Gevelreclame",              "Interieur signing",              "Wandaankleding"],
           }}
           positiveCard={{
             items: [
-              "Belettering",
-              "Carwrap",
-              "Dechrome",
-              "Full colour belettering",
-              "Wayfinding",
-            ],
+              "Belettering",              "Carwrap",              "Dechrome",              "Full colour belettering",              "Wayfinding"],
           }}
+          containerClassName="motion-safe:scroll-smooth"
+          cardClassName="motion-safe:hover:scale-105 transition-transform duration-300"
         />
       </div>
 
@@ -121,42 +114,20 @@ export default function HomePage() {
           description="Een selectie van ons meest indrukwekkende werk. Elk project getuigt van precisie, creativiteit en aandacht voor detail."
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
+          animationType="scale-rotate"
           gridVariant="bento-grid"
           products={[
             {
-              id: "1",
-              name: "Restaurant Façade",
-              price: "Premium",
-              variant: "Gevelreclame",
-              imageSrc: "http://img.b2bpic.net/free-photo/photo-swimming-pool-trampolines_23-2148326836.jpg?_wi=1",
-              imageAlt: "Restaurant storefront signage",
-            },
+              id: "1",              name: "Restaurant Façade",              price: "Premium",              variant: "Gevelreclame",              imageSrc: "http://img.b2bpic.net/free-photo/photo-swimming-pool-trampolines_23-2148326836.jpg?_wi=1",              imageAlt: "Restaurant storefront signage"},
             {
-              id: "2",
-              name: "Brand Identity",
-              price: "Full Suite",
-              variant: "Belettering",
-              imageSrc: "http://img.b2bpic.net/free-vector/modern-tech-stationery-design_1051-694.jpg?_wi=1",
-              imageAlt: "Complete brand identity signage",
-            },
+              id: "2",              name: "Brand Identity",              price: "Full Suite",              variant: "Belettering",              imageSrc: "http://img.b2bpic.net/free-vector/modern-tech-stationery-design_1051-694.jpg?_wi=1",              imageAlt: "Complete brand identity signage"},
             {
-              id: "3",
-              name: "Fleet Wrapping",
-              price: "Fleet Project",
-              variant: "Carwrap",
-              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-geometric-business-card-template_23-2149957726.jpg?_wi=1",
-              imageAlt: "Vehicle wrap design and installation",
-            },
+              id: "3",              name: "Fleet Wrapping",              price: "Fleet Project",              variant: "Carwrap",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-geometric-business-card-template_23-2149957726.jpg?_wi=1",              imageAlt: "Vehicle wrap design and installation"},
             {
-              id: "4",
-              name: "Retail Interior",
-              price: "Complete",
-              variant: "Interieur Signing",
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-looking-window-display-clothing-store_23-2147889079.jpg?_wi=1",
-              imageAlt: "Retail interior signage design",
-            },
+              id: "4",              name: "Retail Interior",              price: "Complete",              variant: "Interieur Signing",              imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-looking-window-display-clothing-store_23-2147889079.jpg?_wi=1",              imageAlt: "Retail interior signage design"},
           ]}
+          cardClassName="motion-safe:hover:shadow-xl motion-safe:hover:scale-110 transition-all duration-300 cursor-pointer"
+          imageClassName="motion-safe:hover:zoom-in transition-transform duration-500"
         />
       </div>
 
@@ -166,48 +137,33 @@ export default function HomePage() {
           description="Een doordachte aanpak van concept tot voltooiing. Elke fase is gericht op het creëren van prachtige, duurzame resultaten."
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
+          animationType="depth-3d"
           gridVariant="uniform-all-items-equal"
           metrics={[
             {
-              id: "1",
-              value: "01",
-              title: "Concept",
-              description: "Wij luisteren naar uw visie en onderzoeken uw merk diepgaand.",
-              icon: Lightbulb,
+              id: "1",              value: "01",              title: "Concept",              description: "Wij luisteren naar uw visie en onderzoeken uw merk diepgaand.",              icon: Lightbulb,
             },
             {
-              id: "2",
-              value: "02",
-              title: "Design",
-              description: "Onze creatieve team ontwikkelt unieke, impactvolle ontwerpen.",
-              icon: Palette,
+              id: "2",              value: "02",              title: "Design",              description: "Onze creatieve team ontwikkelt unieke, impactvolle ontwerpen.",              icon: Palette,
             },
             {
-              id: "3",
-              value: "03",
-              title: "Production",
-              description: "Precisie en kwaliteit in elke stap van de productie.",
-              icon: Wrench,
+              id: "3",              value: "03",              title: "Production",              description: "Precisie en kwaliteit in elke stap van de productie.",              icon: Wrench,
             },
             {
-              id: "4",
-              value: "04",
-              title: "Installation",
-              description: "Professionele plaatsing die uw project tot leven brengt.",
-              icon: CheckCircle,
+              id: "4",              value: "04",              title: "Installation",              description: "Professionele plaatsing die uw project tot leven brengt.",              icon: CheckCircle,
             },
           ]}
+          cardClassName="motion-safe:hover:translate-y-[-8px] transition-transform duration-300"
         />
       </div>
 
       <div id="trust" data-section="trust">
         <MetricSplitMediaAbout
           title="Waarom Luux Sign & More"
-          description="Wij geloven dat uitzonderlijke signage meer is dan alleen zichtbaarheid. Het gaat om het creëren van merkervaringen die blijven hangen."
+          description="Met 15+ jaar ervaring hebben we 500+ merken getransformeerd door signage die niet alleen opvalt, maar ook resultaten levert—gemiddeld 98% klantentevredenheid."
           tag="Expertise"
           useInvertedBackground={false}
-          mediaAnimation="slide-up"
+          mediaAnimation="blur-reveal"
           metricsAnimation="slide-up"
           imageSrc="http://img.b2bpic.net/free-photo/mechanic-with-face-mask-going-through-reports-while-talking-customer-auto-repair-shop_637285-11549.jpg?_wi=1"
           imageAlt="Craftsmanship in progress"
@@ -216,6 +172,7 @@ export default function HomePage() {
             { value: "500+", title: "Projects Completed" },
             { value: "98%", title: "Client Satisfaction" },
           ]}
+          mediaWrapperClassName="motion-safe:parallax-element"
         />
       </div>
 
@@ -229,6 +186,7 @@ export default function HomePage() {
           ]}
           useInvertedBackground={false}
           background={{ variant: "plain" }}
+          containerClassName="motion-safe:animate-fade-in"
         />
       </div>