diff --git a/src/app/page.tsx b/src/app/page.tsx
index 19c6180..fe75e81 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
@@ -7,11 +7,11 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Link from 'next/link';
+
+const navItems = [{ name: "Home", id: "/" }];
 
 export default function Page() {
-  const navItems = [{ name: "Home", id: "/" }];
-  const footerColumns = [{ title: "Company", items: [{ label: "About", href: "/about" }] }];
-  
   return (
     <ThemeProvider 
       defaultButtonVariant="text-stagger" 
@@ -29,22 +29,55 @@ export default function Page() {
         <NavbarStyleApple navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroOverlay title="Welcome" description="Explore our cafe" />
+        <HeroOverlay title="Welcome to Webild" description="Innovative digital solutions for your business." />
       </div>
       <div id="about" data-section="about">
         <TextAbout title="About Us" useInvertedBackground={false} />
       </div>
       <div id="menu" data-section="menu">
-        <ProductCardOne title="Our Menu" description="Discover our selection" gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} products={[{ id: "1", name: "Item", price: "$10", imageSrc: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4" }, { id: "2", name: "Item", price: "$10", imageSrc: "https://images.unsplash.com/photo-1554118811-1e0d58224f24" }, { id: "3", name: "Item", price: "$10", imageSrc: "https://images.unsplash.com/photo-1559339352-11d035aa65de" }]} />
+        <ProductCardOne 
+            title="Our Products" 
+            description="High-quality digital products designed for growth." 
+            gridVariant="uniform-all-items-equal" 
+            animationType="slide-up" 
+            textboxLayout="default" 
+            useInvertedBackground={false} 
+            products={[
+                { id: "1", name: "Product A", price: "$99", imageSrc: "/placeholder.jpg" },
+                { id: "2", name: "Product B", price: "$199", imageSrc: "/placeholder.jpg" },
+                { id: "3", name: "Product C", price: "$299", imageSrc: "/placeholder.jpg" }
+            ]}
+        />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve testimonials={[{ id: "1", name: "John", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" }, { id: "2", name: "Jane", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330" }]} cardTitle="Reviews" cardTag="Feedback" cardAnimation="slide-up" useInvertedBackground={false} />
+        <TestimonialCardTwelve 
+            cardTitle="Testimonials" 
+            cardTag="Our Clients" 
+            cardAnimation="slide-up" 
+            useInvertedBackground={false} 
+            testimonials={[
+                { id: "1", name: "Client A", imageSrc: "/placeholder.jpg" },
+                { id: "2", name: "Client B", imageSrc: "/placeholder.jpg" }
+            ]} 
+        />
       </div>
       <div id="faq" data-section="faq">
-        <FaqBase title="FAQ" description="Common questions" faqs={[{ id: "1", title: "Question", content: "Answer" }, { id: "2", title: "Question", content: "Answer" }]} faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <FaqBase 
+            title="Frequently Asked Questions" 
+            description="Everything you need to know." 
+            faqsAnimation="slide-up" 
+            textboxLayout="default" 
+            useInvertedBackground={false} 
+            faqs={[
+                { id: "1", title: "Question 1", content: "Answer 1" },
+                { id: "2", title: "Question 2", content: "Answer 2" }
+            ]} 
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBaseCard columns={footerColumns} />
+        <FooterBaseCard 
+            columns={[{ title: "Company", items: [{ label: "Home", href: "/" }] }]} 
+        />
       </div>
     </ThemeProvider>
   );