diff --git a/src/app/page.tsx b/src/app/page.tsx
index bc12b4e..070e866 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,6 +13,7 @@ import { CheckCircle, Flower2, Leaf, Palette, Sparkles, MessageCircle } from "lu
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import ContactForm from "@/components/form/ContactForm";
 import CardStack from "@/components/cardStack/CardStack";
+import StatCard from "@/components/cards/StatCard";
 
 const handleImageClick = (imageUrl) => {
   window.open(imageUrl, '_blank', 'width=80%');
@@ -209,6 +210,36 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="metrics-new" data-section="metrics-new">
+        <CardStack
+          animationType="none"
+          textboxLayout="default"
+          mode="buttons"
+          gridVariant="uniform-all-items-equal"
+          title="Your Title Here"
+          description="Add your description here."
+          tag="Sample tag"
+          tagIcon={MessageCircle}
+          buttons={[
+              {
+                "text": "Get Started",
+                "href": "#"
+              },
+              {
+                "text": "Learn More",
+                "href": "#"
+              }
+            ]}
+          useInvertedBackground="noInvert"
+          ariaLabel="Card stack"
+        >
+          <StatCard value="10K+" label="Happy Customers" description="Trusted by businesses worldwide" />
+          <StatCard value="99.9%" label="Uptime" description="Reliable and always available" />
+          <StatCard value="24/7" label="Support" description="Round-the-clock assistance" />
+          <StatCard value="50+" label="Countries" description="Global presence and reach" />
+        </CardStack>
+      </div>
+
       <div id="metrics-new" data-section="metrics-new">
         <CardStack
           children="Sample children"