diff --git a/src/app/page.tsx b/src/app/page.tsx
index 503c3df..e990c74 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
 import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterCard from "@/components/sections/footer/FooterCard";
+import CardStack from "@/components/cardStack/CardStack";
 import { Award, CheckCircle, Hammer, Star, TrendingUp, Image, Facebook, Linkedin } from "lucide-react";
 
 export default function LandingPage() {
@@ -43,7 +44,12 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
+        <CardStack
+          mode="buttons"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
           title="Oakville's Trusted Roofing & Guttering Experts"
           description="Premium materials. Expert craftsmanship. Homes protected for generations."
           tag="15+ Years of Excellence"
@@ -53,12 +59,16 @@ export default function LandingPage() {
             { text: "Get Your Free Quote", href: "#contact" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/home-clay-roof-tile_657883-716.jpg"
-          imageAlt="Luxury home with pristine roof at golden hour"
-          showDimOverlay={true}
-          showBlur={true}
           ariaLabel="Hero section for Roofing & Guttering Oakville"
-        />
+        >
+          <div className="relative w-full h-96 overflow-hidden rounded-lg">
+            <img
+              src="http://img.b2bpic.net/free-photo/home-clay-roof-tile_657883-716.jpg"
+              alt="Luxury home with pristine roof at golden hour"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </CardStack>
       </div>
 
       <div id="about" data-section="about">
@@ -238,4 +248,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file