diff --git a/src/app/page.tsx b/src/app/page.tsx
index 65b0872..b8d2531 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
-'use client';
+"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
@@ -10,46 +10,109 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { ArrowRight, Star, Shield, Zap, CheckCircle } from 'lucide-react';
 
-const navItems = [{ name: "Home", id: "/" }];
+const navItems = [
+  { name: "Home", id: "/" },
+];
 
 export default function Page() {
   return (
-    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+    <ThemeProvider>
       <div id="nav" data-section="nav">
-        <NavbarStyleApple navItems={navItems} />
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardRotatedCarousel 
-            title="Revolutionizing Digital Experiences" 
-            description="Crafting high-impact solutions for the modern era."
-            background={{ variant: "animated-grid" }}
-            carouselItems={Array.from({ length: 6 }).map((_, i) => ({ id: `hero-${i}`, imageSrc: "https://picsum.photos/400/600" }))} 
+          title="Welcome to Webild" 
+          description="We build amazing digital experiences." 
+          background={{ variant: 'rotated-rays-animated' }}
+          carouselItems={[
+             { id: '1', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+             { id: '2', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+             { id: '3', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+             { id: '4', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+             { id: '5', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+             { id: '6', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' }
+          ]}
         />
       </div>
       <div id="trust" data-section="trust">
-        <SocialProofOne names={["Acme", "Globex", "Soylent", "Initech"]} title="Trusted by industry leaders" description="" textboxLayout="default" useInvertedBackground={false} />
+        <SocialProofOne 
+          names={["Acme", "Globex", "Soylent"]}
+          title="Trusted by Industry Leaders"
+          description="Our partners rely on us for excellence."
+        />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardMedia title="Our Services" description="We deliver excellence." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[]} />
+        <FeatureCardMedia 
+          title="Our Services" 
+          description="Tailored solutions for your needs." 
+          animationType="slide-up"
+          features={[
+            { id: '1', title: 'Consulting', description: 'Expert advice.', tag: 'Strategy' },
+            { id: '2', title: 'Development', description: 'Code that works.', tag: 'Eng' }
+          ]}
+        />
       </div>
       <div id="work" data-section="work">
-        <ProductCardOne title="Recent Projects" description="Selected works." animationType="slide-up" gridVariant="bento-grid" textboxLayout="default" useInvertedBackground={false} products={[]} />
+        <ProductCardOne 
+          title="Our Portfolio" 
+          description="Projects we are proud of." 
+          gridVariant="bento-grid" 
+          animationType="slide-up" 
+          textboxLayout="default"
+          products={[
+            { id: '1', name: 'App One', price: '$99', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+            { id: '2', name: 'App Two', price: '$199', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' },
+            { id: '3', name: 'App Three', price: '$299', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' }
+          ]}
+        />
       </div>
       <div id="process" data-section="process">
-        <MetricCardEleven title="Our Process" description="Efficiency at scale." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} metrics={[]} />
+        <MetricCardEleven 
+          title="Our Process" 
+          description="How we get things done." 
+          animationType="slide-up" 
+          metrics={[
+            { id: '1', value: '100%', title: 'Delivered', description: 'Always.', imageSrc: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b' }
+          ]}
+        />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo title="Client Stories" description="What they say about us." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} testimonials={[]} />
+        <TestimonialCardTwo 
+          title="What They Say" 
+          description="Client feedback."
+          animationType="slide-up" 
+          textboxLayout="default"
+          testimonials={[
+             { id: '1', name: 'Jane Doe', role: 'CEO', testimonial: 'Fantastic work!', icon: Star }
+          ]}
+        />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitMedia title="FAQ" description="Common questions answered." faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} faqs={[]} />
+        <FaqSplitMedia 
+          title="Common Questions" 
+          description="Need help?"
+          faqsAnimation="slide-up" 
+          textboxLayout="default"
+          faqs={[
+            { id: '1', title: 'How does it work?', content: 'Simple.' }
+          ]}
+        />
       </div>
       <div id="cta" data-section="cta">
-        <ContactText text="Ready to start?" background={{ variant: "plain" }} useInvertedBackground={false} />
+        <ContactText 
+          text="Ready to start?" 
+          background={{ variant: 'rotated-rays-static' }}
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterSimple columns={[]} bottomLeftText="© 2024 Webild" bottomRightText="All rights reserved." />
+        <FooterSimple 
+          columns={[{ title: 'About', items: [{ label: 'Contact', href: '/contact' }] }]}
+          bottomLeftText="© 2024 Webild"
+          bottomRightText="All rights reserved."
+        />
       </div>
     </ThemeProvider>
   );