diff --git a/src/app/page.tsx b/src/app/page.tsx
index ab52db4..3537afb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,41 +11,42 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Zap, Target, Star, CheckCircle } from 'lucide-react';
 
 const navItems = [{ name: "Home", id: "/" }];
 
-export default function Page() {
+export default function HomePage() {
   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">
-        <NavbarStyleFullscreen navItems={navItems} />
+        <NavbarStyleFullscreen navItems={navItems} logoText="Webild" />
       </div>
       <div id="hero" data-section="hero">
-        <HeroOverlay title="Welcome" description="Description" />
+        <HeroOverlay title="Welcome to Our Platform" description="Revolutionizing your workflow with ease." />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardMedia title="Features" description="Features desc" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[{ id: "f1", title: "Feature 1", description: "Desc 1", tag: "Tag 1" }, { id: "f2", title: "Feature 2", description: "Desc 2", tag: "Tag 2" }]} />
+        <FeatureCardMedia title="Key Features" description="Explore what we offer." animationType="slide-up" features={[{ id: "1", title: "Speed", description: "Fast as lightning.", tag: "Fast" }, { id: "2", title: "Security", description: "Safety first.", tag: "Secure" }]} />
       </div>
       <div id="services" data-section="services">
-        <ProductCardFour title="Services" description="Services desc" gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} products={[{ id: "p1", name: "Prod 1", price: "$10", variant: "V1", imageSrc: "img1" }, { id: "p2", name: "Prod 2", price: "$20", variant: "V2", imageSrc: "img2" }, { id: "p3", name: "Prod 3", price: "$30", variant: "V3", imageSrc: "img3" }]} />
+        <ProductCardFour title="Our Services" description="We provide top-notch services." gridVariant="four-items-2x2-equal-grid" animationType="slide-up" textboxLayout="split" useInvertedBackground={false} products={[{ id: "1", name: "Basic", price: "$10", variant: "Standard", imageSrc: "https://images.unsplash.com/photo-1593642532744-d377abf07dc4" }, { id: "2", name: "Pro", price: "$20", variant: "Premium", imageSrc: "https://images.unsplash.com/photo-1593642532744-d377abf07dc4" }, { id: "3", name: "Enterprise", price: "$50", variant: "Custom", imageSrc: "https://images.unsplash.com/photo-1593642532744-d377abf07dc4" }]} />
       </div>
       <div id="projects" data-section="projects">
-        <MediaAbout title="Projects" description="Projects desc" useInvertedBackground={false} />
+        <MediaAbout title="Our Journey" description="From humble beginnings to global impact." useInvertedBackground={false} />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve cardTitle="Testimonials" cardTag="Tag" cardAnimation="slide-up" useInvertedBackground={false} testimonials={[{ id: "t1", name: "Name 1", imageSrc: "img1" }, { id: "t2", name: "Name 2", imageSrc: "img2" }]} />
+        <TestimonialCardTwelve cardTitle="Client Stories" cardTag="Feedback" cardAnimation="slide-up" useInvertedBackground={false} testimonials={[{ id: "1", name: "John Doe", imageSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" }, { id: "2", name: "Jane Smith", imageSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" }]} />
       </div>
       <div id="savings" data-section="savings">
-        <MetricCardSeven title="Savings" description="Savings desc" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} metrics={[{ id: "m1", value: "10%", title: "Metric 1", items: ["Item 1"] }, { id: "m2", value: "20%", title: "Metric 2", items: ["Item 2"] }]} />
+        <MetricCardSeven title="Growth Metrics" description="Numbers that define our success." animationType="slide-up" textboxLayout="split" useInvertedBackground={false} metrics={[{ id: "1", value: "99%", title: "Satisfaction", items: ["Fast Support", "Reliable Service"] }, { id: "2", value: "500k+", title: "Users", items: ["Global Reach", "Community First"] }]} />
       </div>
       <div id="faq" data-section="faq">
-        <FaqBase title="FAQ" description="FAQ desc" faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} faqs={[{ id: "q1", title: "Q1", content: "A1" }, { id: "q2", title: "Q2", content: "A2" }]} />
+        <FaqBase title="Frequently Asked Questions" description="Answers to common queries." faqsAnimation="slide-up" textboxLayout="split" useInvertedBackground={false} faqs={[{ id: "1", title: "How does it work?", content: "Simply sign up and start building." }, { id: "2", title: "Is it free?", content: "We have a generous free tier." }]} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCenter tag="Contact" title="Get in touch" description="Contact us" useInvertedBackground={false} background={{ variant: "plain" }} />
+        <ContactCenter tag="Contact Us" title="Get in touch" description="We're here to help you grow." background={{ variant: "animated-grid" }} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
-        <FooterLogoReveal logoText="Brand" leftLink={{ text: "Link 1" }} rightLink={{ text: "Link 2" }} />
+        <FooterLogoReveal logoText="Webild" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
       </div>
     </ThemeProvider>
   );