Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -8,9 +8,10 @@ import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwen
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import { AlertTriangle, CheckCircle, Clock, Database, DollarSign, MessageSquare, TrendingUp, Zap, Smartphone, Repeat } from "lucide-react";
+import { AlertTriangle, CheckCircle, Clock, Database, MessageSquare, TrendingUp, Zap, Smartphone, Repeat } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -52,15 +53,13 @@ export default function LandingPage() {
         </div>
 
         <div id="problem" data-section="problem">
-          <AboutMetric
+           <AboutMetric
             useInvertedBackground={false}
-            title="Most businesses lose leads because:"
+            title="Most businesses lose leads because of manual bottlenecks."
             metrics={[
               { icon: Clock, label: "Slow response times", value: "Kill sales" },
               { icon: Repeat, label: "Inconsistent follow-ups", value: "Lose trust" },
               { icon: Database, label: "Disorganized pipelines", value: "Leak revenue" },
-              { icon: Smartphone, label: "Missing mobile touchpoints", value: "Drop interest" },
-              { icon: AlertTriangle, label: "Data quality issues", value: "Waste budget" },
             ]}
             metricsAnimation="slide-up"
           />
@@ -100,20 +99,16 @@ export default function LandingPage() {
         </div>
 
         <div id="results" data-section="results">
-          <MetricCardOne
+          <MetricCardEleven
             animationType="slide-up"
             textboxLayout="split"
-            gridVariant="uniform-all-items-equal"
-            useInvertedBackground={false}
-            metrics={[
-              { id: "m1", value: "10x", title: "Faster response", description: "Compared to manual teams", icon: Zap },
-              { id: "m2", value: "45%", title: "Conversion rate boost", description: "Through qualified outreach", icon: TrendingUp },
-              { id: "m3", value: "20+", title: "Hours saved", description: "Per week per representative", icon: Clock },
-              { id: "m4", value: "300%", title: "ROI on ad spend", description: "More leads contacted faster", icon: DollarSign },
-              { id: "m5", value: "98%", title: "Accuracy rate", description: "In lead qualification", icon: CheckCircle },
-            ]}
             title="Outcomes That Scale"
             description="Proven results for ambitious businesses."
+            metrics={[
+              { id: "m1", value: "10x", title: "Faster response", description: "Compared to manual teams", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bhqm1aPoPuyRgha5eR2nuZzma9/automated-messaging-notification-system--1774951917452-a0aea228.png" },
+              { id: "m2", value: "45%", title: "Conversion rate boost", description: "Through qualified outreach", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bhqm1aPoPuyRgha5eR2nuZzma9/crm-integration-visualization-nodes-conn-1774951926504-86f20ab0.png" }
+            ]}
+            useInvertedBackground={false}
           />
         </div>