Update src/app/page.tsx

Merge version_6 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, BookOpenText } 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 the dedicated practice of Michele Floridia. We believe in the power of the frame to elevate the ordinary. In an era of disposable digital noise, 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. We do not just capture images; we compose legacies of visual integrity."
+      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: "Brand Campaign",          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", priceButtonProps: { text: "View Case Study" }},
         {
-          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: "Architecture Film",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/architectural-interior-photograph-with-s-1778013167017-90f4b8cc.png?_wi=1", priceButtonProps: { text: "View Case Study" }},
         {
-          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: "Craft Doc",          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", priceButtonProps: { text: "View Case Study" }},
         {
-          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: "Luxury Brand Film",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX1xH7y0jxZ0fhv28YS97mOKD2/cinematic-still-from-a-vineyard-at-dawn--1778013183908-a8ada240.png", priceButtonProps: { text: "View Case Study" }},
         {
-          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: "Extended Cut",          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", priceButtonProps: { text: "View Case Study" }},
       ]}
       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."
@@ -183,25 +113,18 @@ export default function LandingPage() {
       <FaqDouble
       textboxLayout="split"
       useInvertedBackground={false}
+      tag="Our Principles"
+      tagIcon={BookOpenText}
       faqs={[
         {
-          id: "1",
-          title: "Authorship",
-          content: "Every project is authorship, not templated work.",
-        },
+          id: "1",          title: "The Art of Authorship",          content: "Every frame we produce is an act of intentional authorship. We reject the commodity model of production, choosing instead to craft visual narratives that are deeply rooted in the unique identity of your brand, far beyond generic stock solutions."},
         {
-          id: "2",
-          title: "Collaboration",
-          content: "Specialist collaborators are brought in intentionally.",
-        },
+          id: "2",          title: "Specialist Collaboration",          content: "We curate teams based on the soul of your project. By bringing together dedicated specialists for specific needs, we ensure that every production phase is handled by masters of their craft, maintaining unparalleled quality control."},
         {
-          id: "3",
-          title: "Technology",
-          content: "AI-augmented workflows extend the human eye.",
-        },
+          id: "3",          title: "Human-Centric AI",          content: "Our adoption of AI-augmented workflows is not about speed at the cost of soul. We leverage cutting-edge tech to extend the human eye, accelerating the creative process so that we can spend more time on what truly matters: nuance, light, and composition."},
       ]}
       title="Approach"
-      description="The filmmaker's practice."
+      description="The filmmaker's practice defines the final result."
       faqsAnimation="opacity"
     />
   </div>
@@ -210,8 +133,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 +146,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 +177,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 */