0cf181807eeaf1c593b2974c329df034fdf3b127

src/app/page.tsx

@@ -10,6 +10,8 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { CheckCircle, Flower2, Leaf, Palette, Sparkles, MessageCircle } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import TextNumberCount from "@/components/text/TextNumberCount";
 
 const handleImageClick = (imageUrl) => {
   window.open(imageUrl, '_blank', 'width=80%');
@@ -197,6 +199,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"
+        >
+          <TextNumberCount value="10K+" label="Happy Customers" description="Trusted by businesses worldwide" />
+          <TextNumberCount value="99.9%" label="Uptime" description="Reliable and always available" />
+          <TextNumberCount value="24/7" label="Support" description="Round-the-clock assistance" />
+          <TextNumberCount value="50+" label="Countries" description="Global presence and reach" />
+        </CardStack>
+      </div>
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
           logoText="MossArt"