diff --git a/src/app/page.tsx b/src/app/page.tsx
index fdcab30..fabc059 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -27,13 +27,13 @@ export default function Home() {
         <HeroSignup title="Welcome" description="Build faster." tag="New" background={{ variant: "plain" }} />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardTwentyFour title="Services" description="Our core offerings." features={[{ id: "1", title: "Service 1", author: "Admin", description: "High quality service.", tags: ["pro"] }, { id: "2", title: "Service 2", author: "Admin", description: "High quality service.", tags: ["pro"] }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <FeatureCardTwentyFour title="Services" description="Our core offerings." features={[{ id: "1", title: "Service 1", author: "Admin", description: "High quality service.", tags: ["pro"], videoSrc: "https://example.com/video1.mp4" }, { id: "2", title: "Service 2", author: "Admin", description: "High quality service.", tags: ["pro"], videoSrc: "https://example.com/video2.mp4" }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="why" data-section="why">
-        <MetricCardSeven title="Why Us" metrics={[{ id: "1", value: "100%", title: "Uptime", items: [] }, { id: "2", value: "24/7", title: "Support", items: [] }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <MetricCardSeven title="Why Us" description="Our track record." metrics={[{ id: "1", value: "100%", title: "Uptime", items: [] }, { id: "2", value: "24/7", title: "Support", items: [] }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="projects" data-section="projects">
-        <ProductCardThree title="Projects" products={[{ id: "1", name: "Proj 1", price: "$10", imageSrc: "/img.jpg" }, { id: "2", name: "Proj 2", price: "$20", imageSrc: "/img.jpg" }, { id: "3", name: "Proj 3", price: "$30", imageSrc: "/img.jpg" }]} gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <ProductCardThree title="Projects" description="Our latest work." products={[{ id: "1", name: "Proj 1", price: "$10", imageSrc: "/img.jpg" }, { id: "2", name: "Proj 2", price: "$20", imageSrc: "/img.jpg" }, { id: "3", name: "Proj 3", price: "$30", imageSrc: "/img.jpg" }]} gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="about" data-section="about">
         <MetricSplitMediaAbout title="About" description="Our mission." metrics={[{ value: "10+ years", title: "Experience" }, { value: "500+ projects", title: "Delivered" }]} mediaAnimation="slide-up" metricsAnimation="slide-up" useInvertedBackground={false} />