Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import { Award, Camera, Film } from "lucide-react";
+import { Film } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,65 +31,39 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Work",
-          id: "/work",
-        },
+          name: "Work",          id: "#work"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Capabilities",          id: "#capabilities"},
+        {
+          name: "Approach",          id: "#approach"},
+        {
+          name: "Contact",          id: "#contact-cta"},
       ]}
       brandName="FPH"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
-      background={{
-        variant: "plain",
-      }}
+      <HeroOverlay
       title="Cinema for brands."
       description="Independent filmmaking for luxury, manufacturing and premium B2B."
-      mediaItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013148412-ce7dc69c.png?_wi=1",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013195785-60be8055.png",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013204519-fa22068c.png",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
-      ]}
-      mediaAnimation="opacity"
+      tag="Now showing"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013148412-ce7dc69c.png?_wi=1"
+      showDimOverlay={true}
+      showBlur={true}
+      textPosition="bottom"
     />
   </div>
 
   <div id="about" data-section="about">
-      <AboutMetric
+      <MediaAbout
       useInvertedBackground={false}
-      title="Manifesto"
-      metrics={[
-        {
-          icon: Film,
-          label: "Philosophy",
-          value: "FPH Production is the practice of Michele Floridia.",
-        },
-        {
-          icon: Award,
-          label: "Mission",
-          value: "Working with brands that refuse to look like everyone else.",
-        },
-        {
-          icon: Camera,
-          label: "Vision",
-          value: "Less content. More cinema.",
-        },
-      ]}
-      metricsAnimation="slide-up"
+      title="The Manifesto"
+      tag="Our Vision"
+      tagIcon={Film}
+      description="FPH Production is more than a studio—it is the dedicated practice of Michele Floridia. We believe in the power of the frame to elevate the ordinary. In an era of endless, disposable content, we champion the slow, the deliberate, and the cinematic. We work exclusively with brands that refuse to look like everyone else, finding beauty in precision, craftsmanship, and the silent narratives of high-end manufacturing."
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/macro-photography-of-an-artisan-hand-cra-1778013176147-28207c21.png?_wi=1"
+      className="py-24"
     />
   </div>
 
@@ -101,35 +75,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "1",
-          name: "Solo Ride",
-          price: "2026",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/high-contrast-cinematic-still-of-a-motor-1778013157603-79a411d7.png?_wi=1",
-        },
+          id: "1",          name: "Solo Ride",          price: "2026",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/high-contrast-cinematic-still-of-a-motor-1778013157603-79a411d7.png?_wi=1"},
         {
-          id: "2",
-          name: "Threshold",
-          price: "2026",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/architectural-interior-photograph-with-s-1778013167017-90f4b8cc.png?_wi=1",
-        },
+          id: "2",          name: "Threshold",          price: "2026",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/architectural-interior-photograph-with-s-1778013167017-90f4b8cc.png?_wi=1"},
         {
-          id: "3",
-          name: "The Hand",
-          price: "2026",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/macro-photography-of-an-artisan-hand-cra-1778013176147-28207c21.png",
-        },
+          id: "3",          name: "The Hand",          price: "2026",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/macro-photography-of-an-artisan-hand-cra-1778013176147-28207c21.png?_wi=2"},
         {
-          id: "4",
-          name: "Vendemmia",
-          price: "2026",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-still-from-a-vineyard-at-dawn--1778013183908-a8ada240.png",
-        },
+          id: "4",          name: "Vendemmia",          price: "2026",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-still-from-a-vineyard-at-dawn--1778013183908-a8ada240.png"},
         {
-          id: "5",
-          name: "Solo Ride B",
-          price: "2026",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/high-contrast-cinematic-still-of-a-motor-1778013244333-3623c773.png?_wi=1",
-        },
+          id: "5",          name: "Solo Ride B",          price: "2026",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/high-contrast-cinematic-still-of-a-motor-1778013244333-3623c773.png?_wi=1"},
       ]}
       title="Selected Work"
       description="Concept films directed and produced by FPH."
@@ -142,37 +96,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          tag: "01",
-          title: "Brand Film",
-          subtitle: "Cinematic identity",
-          description: "Stories that say what a brand is.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013215018-e59bf483.png",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
+          tag: "01",          title: "Brand Film",          subtitle: "Cinematic identity",          description: "Stories that say what a brand is.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013215018-e59bf483.png",          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3"},
         {
-          tag: "02",
-          title: "Product Film",
-          subtitle: "Macro detail",
-          description: "Objects deserving of proper sight.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013148412-ce7dc69c.png?_wi=2",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
+          tag: "02",          title: "Product Film",          subtitle: "Macro detail",          description: "Objects deserving of proper sight.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-black-and-white-film-footage-s-1778013148412-ce7dc69c.png?_wi=2",          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3"},
         {
-          tag: "03",
-          title: "Commercial",
-          subtitle: "Full direction",
-          description: "From concept to delivery.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/high-contrast-cinematic-still-of-a-motor-1778013157603-79a411d7.png?_wi=2",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
+          tag: "03",          title: "Commercial",          subtitle: "Full direction",          description: "From concept to delivery.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/high-contrast-cinematic-still-of-a-motor-1778013157603-79a411d7.png?_wi=2",          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3"},
         {
-          tag: "04",
-          title: "AI-Augmented",
-          subtitle: "Modern workflow",
-          description: "Cinema-grade visions in days.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/architectural-interior-photograph-with-s-1778013167017-90f4b8cc.png?_wi=2",
-          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3",
-        },
+          tag: "04",          title: "AI-Augmented",          subtitle: "Modern workflow",          description: "Cinema-grade visions in days.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/architectural-interior-photograph-with-s-1778013167017-90f4b8cc.png?_wi=2",          imageAlt: "Cinematic black and white film footage showing a vast, winding road through Italian hills. Shot on 3"},
       ]}
       title="Capabilities"
       description="Professional services with cinematic vision."
@@ -185,20 +115,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "1",
-          title: "Authorship",
-          content: "Every project is authorship, not templated work.",
-        },
+          id: "1",          title: "Authorship",          content: "Every project is authorship, not templated work."},
         {
-          id: "2",
-          title: "Collaboration",
-          content: "Specialist collaborators are brought in intentionally.",
-        },
+          id: "2",          title: "Collaboration",          content: "Specialist collaborators are brought in intentionally."},
         {
-          id: "3",
-          title: "Technology",
-          content: "AI-augmented workflows extend the human eye.",
-        },
+          id: "3",          title: "Technology",          content: "AI-augmented workflows extend the human eye."},
       ]}
       title="Approach"
       description="The filmmaker's practice."
@@ -210,8 +131,7 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       title="Have a project worth filming?"
       description="info@fphproduction.com"
       mediaAnimation="opacity"
@@ -224,30 +144,27 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "FPH PRODUCTION",
-          items: [
+          title: "FPH PRODUCTION",          items: [
             {
-              label: "Crema, Italy",
-              href: "#",
-            },
+              label: "Crema, Italy",              href: "#"},
           ],
         },
         {
-          title: "Work",
-          items: [
+          title: "Navigation",          items: [
             {
-              label: "Concept Films",
-              href: "/work",
-            },
+              label: "Work",              href: "#work"},
+            {
+              label: "Capabilities",              href: "#capabilities"},
+            {
+              label: "Approach",              href: "#approach"},
+            {
+              label: "Contact",              href: "#contact-cta"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy & Disclosures",
-              href: "/legal",
-            },
+              label: "Privacy & Disclosures",              href: "#"},
           ],
         },
       ]}
@@ -258,4 +175,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,14 +10,14 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
+  --background: #0a0a0a;
   --card: #111111;
-  --foreground: #F2EDE4;
-  --primary-cta: #C8332A;
+  --foreground: #f2ede4;
+  --primary-cta: #c8332a;
   --primary-cta-text: #F2EDE4;
   --secondary-cta: #111111;
   --secondary-cta-text: #F2EDE4;
-  --accent: #4A4744;
+  --accent: #4a4744;
   --background-accent: #111111;
 
   /* text sizing - set by ThemeProvider */