diff --git a/src/app/page.tsx b/src/app/page.tsx
index d94fa59..b390e35 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,13 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import CardStack from '@/components/cardStack/CardStack';
+import { Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -25,95 +23,60 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        { name: "Work", id: "/" },
-        { name: "About", id: "/about" },
-        { name: "Contact", id: "/contact" },
-      ]}
-      brandName="Ben McDill"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Work", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Ben McDill"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{ variant: "gradient-bars" }}
-      title="Ben McDill"
-      description="Director & Cinematographer telling stories through the lens."
-      imageSrc="http://img.b2bpic.net/free-photo/lovely-couple-love-embracing-corridor_8353-7513.jpg"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardScroll
+            background={{ variant: "gradient-bars" }}
+            title="Ben McDill"
+            description="Director & Cinematographer telling stories through the lens."
+            imageSrc="http://img.b2bpic.net/free-photo/lovely-couple-love-embracing-corridor_8353-7513.jpg"
+          />
+        </div>
 
-  <div id="films" data-section="films">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        { id: "p1", name: "Neon Dreams", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/pieces-portrait-concept-with-beautiful-woman_23-2149412306.jpg" },
-        { id: "p2", name: "Silent Horizon", price: "2022", imageSrc: "http://img.b2bpic.net/free-photo/dramatic-sun-rays-breaking-through-dark-clouds-mountains_84443-85655.jpg" },
-        { id: "p3", name: "Broken Echoes", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/jacket-white-shirt-hang-peg-hay-roll_1304-2730.jpg" },
-        { id: "p4", name: "Midnight Train", price: "2021", imageSrc: "http://img.b2bpic.net/free-photo/blurry-sportsman-night-street_23-2147752843.jpg" },
-        { id: "p5", name: "Golden Hour", price: "2024", imageSrc: "http://img.b2bpic.net/free-photo/wild-flowers-near-blurred-woman_23-2147781165.jpg" },
-        { id: "p6", name: "Urban Pulse", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/contemporary-dance-performance_1385-2149.jpg" },
-      ]}
-      title="Selected Shorts"
-      description="Hover to preview the atmosphere. Click for full project insights."
-    />
-  </div>
+        <div id="film-stills" data-section="film-stills">
+          <CardStack
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="two-items-per-row"
+            title="Film Stills"
+            description="A collection of frames from recent projects."
+            tag="Portfolio"
+            tagIcon={Zap}
+          >
+            <div className="aspect-video bg-neutral-800 rounded-lg overflow-hidden">
+              <img src="http://img.b2bpic.net/free-photo/pieces-portrait-concept-with-beautiful-woman_23-2149412306.jpg" alt="Film still 1" className="w-full h-full object-cover" />
+            </div>
+            <div className="aspect-video bg-neutral-800 rounded-lg overflow-hidden">
+              <img src="http://img.b2bpic.net/free-photo/dramatic-sun-rays-breaking-through-dark-clouds-mountains_84443-85655.jpg" alt="Film still 2" className="w-full h-full object-cover" />
+            </div>
+            <div className="aspect-video bg-neutral-800 rounded-lg overflow-hidden">
+              <img src="http://img.b2bpic.net/free-photo/jacket-white-shirt-hang-peg-hay-roll_1304-2730.jpg" alt="Film still 3" className="w-full h-full object-cover" />
+            </div>
+            <div className="aspect-video bg-neutral-800 rounded-lg overflow-hidden">
+              <img src="http://img.b2bpic.net/free-photo/blurry-sportsman-night-street_23-2147752843.jpg" alt="Film still 4" className="w-full h-full object-cover" />
+            </div>
+          </CardStack>
+        </div>
 
-  <div id="metric" data-section="metric">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Production Reach"
-      description="Impact statistics from recent cinematic projects."
-      metrics={[
-        { id: "m1", value: "12+", title: "Films Directed", items: ["Short form", "Documentary"] },
-        { id: "m2", value: "5+", title: "Years Experience", items: ["Agency", "Freelance"] },
-        { id: "m3", value: "200k+", title: "Views", items: ["Online", "Festivals"] },
-      ]}
-    />
-  </div>
-
-  <div id="feature" data-section="feature">
-      <FeatureCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Core Services"
-      description="Tailored production solutions for every medium."
-      features={[
-        { title: "Directing", description: "Creative vision from concept to cut.", imageSrc: "http://img.b2bpic.net/free-photo/people-working-together-new-movie_23-2149066317.jpg" },
-        { title: "Cinematography", description: "Lighting and composition that speaks.", imageSrc: "http://img.b2bpic.net/free-photo/man-filming-with-professional-camera_23-2149066354.jpg" },
-      ]}
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Trusted By"
-      description="Collaboration partners across the creative industry."
-      names={[
-        "FilmFest Global",        "Modern Arts",        "Urban Beat",        "Cinema Core",        "Visuals Inc"]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/solid-green-wall-textured-backdrop_53876-143106.jpg?_wi=1"
-      logoText="BM"
-      columns={[
-        { title: "Navigation", items: [{ label: "Work", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/solid-green-wall-textured-backdrop_53876-143106.jpg?_wi=1"
+            logoText="BM"
+            columns={[
+              { title: "Navigation", items: [{ label: "Work", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );