diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a084f70..08efc31 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,8 +11,8 @@ import { DM_Serif_Display, Inter } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Home',
-  description: 'Welcome to our website',
+  title: 'Home | Webild',
+  description: 'Next-generation digital solutions for modern businesses.',
 };
 
 const dmSerif = DM_Serif_Display({ variable: "--font-dm-serif", subsets: ["latin"], weight: ["400"] }); const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e5e3de9..1d92936 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,44 +11,113 @@ import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
 
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" }
+];
+
 export default function HomePage() {
-  const navItems = [{ name: "Home", id: "/" }];
   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="Innovating the Future"
-            description="Transforming ideas into reality with advanced digital solutions."
-            background={{ variant: "animated-grid" }}
-            carouselItems={Array.from({ length: 6 }).map((_, i) => ({ id: `h${i}`, imageSrc: `https://picsum.photos/seed/${i}/800/600` }))}
+        <HeroBillboardRotatedCarousel
+          title="Build Your Future"
+          description="Next-generation digital solutions for modern businesses."
+          background={{ variant: "gradient-bars" }}
+          carouselItems={[
+            { id: "1", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 1" },
+            { id: "2", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 2" },
+            { id: "3", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 3" },
+            { id: "4", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 4" },
+            { id: "5", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 5" },
+            { id: "6", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 6" }
+          ]}
         />
       </div>
       <div id="trust" data-section="trust">
-        <SocialProofOne names={["TechCorp", "InnovateAI", "GlobalSystems"]} title="Trusted By Leaders" description="Partnering with industry pioneers." textboxLayout="default" useInvertedBackground={false} />
+        <SocialProofOne
+          names={["Google", "Microsoft", "Amazon", "Netflix"]}
+          title="Trusted by Industry Leaders"
+          description="Scaling businesses across the globe."
+        />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardMedia title="Our Services" description="We provide cutting edge digital services." features={[{ id: "f1", title: "Design", description: "High quality", tag: "New" }, { id: "f2", title: "Code", description: "High quality", tag: "Dev" }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <FeatureCardMedia
+          title="Our Services"
+          description="We provide comprehensive solutions."
+          animationType="slide-up"
+          features={[
+            { id: "1", title: "Web Design", description: "Crafting beautiful interfaces.", tag: "Design" },
+            { id: "2", title: "Cloud Infrastructure", description: "Scaling your operations.", tag: "Cloud" }
+          ]}
+        />
       </div>
       <div id="work" data-section="work">
-        <ProductCardOne title="Our Portfolio" description="Showcasing our recent work." products={[{ id: "p1", name: "Product", price: "$10", imageSrc: "https://picsum.photos/seed/p1/400/400" }, { id: "p2", name: "Product", price: "$20", imageSrc: "https://picsum.photos/seed/p2/400/400" }, { id: "p3", name: "Product", price: "$30", imageSrc: "https://picsum.photos/seed/p3/400/400" }]} gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <ProductCardOne
+          title="Our Work"
+          description="Showcasing our recent projects."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          products={[
+            { id: "1", name: "Landing Page", price: "$500", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" },
+            { id: "2", name: "Mobile App", price: "$1500", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" },
+            { id: "3", name: "SaaS Platform", price: "$5000", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" }
+          ]}
+        />
       </div>
       <div id="process" data-section="process">
-        <MetricCardEleven title="Our Process" description="How we deliver excellence." metrics={[{ id: "m1", value: "100%", title: "Success", description: "Proven track record", imageSrc: "https://picsum.photos/seed/m1/400/400" }, { id: "m2", value: "24/7", title: "Support", description: "Always available", imageSrc: "https://picsum.photos/seed/m2/400/400" }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <MetricCardEleven
+          title="Our Process"
+          description="Efficiency in every step."
+          animationType="slide-up"
+          metrics={[
+            { id: "1", value: "100%", title: "Satisfaction", description: "Our primary goal.", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" },
+            { id: "2", value: "50+", title: "Projects", description: "Successfully completed.", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" }
+          ]}
+        />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo title="Client Voices" description="What our partners say about us." testimonials={[{ id: "t1", name: "John", role: "CEO", testimonial: "Great work!" }, { id: "t2", name: "Jane", role: "CTO", testimonial: "Highly recommended." }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <TestimonialCardTwo
+          title="Client Feedback"
+          description="What our clients say about us."
+          animationType="slide-up"
+          textboxLayout="default"
+          testimonials={[
+            { id: "1", name: "John Doe", role: "CEO", testimonial: "Fantastic work!" },
+            { id: "2", name: "Jane Smith", role: "CTO", testimonial: "Professional and quick." }
+          ]}
+        />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitMedia title="Questions?" description="Answers to common inquiries." faqs={[{ id: "q1", title: "What?", content: "Yes." }, { id: "q2", title: "Who?", content: "Us." }]} faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} mediaAnimation="slide-up" imageSrc="https://picsum.photos/seed/faq/400/400" />
+        <FaqSplitMedia
+          title="Frequently Asked Questions"
+          description="Answers to common questions."
+          mediaAnimation="slide-up"
+          faqsAnimation="slide-up"
+          textboxLayout="default"
+          faqs={[
+            { id: "1", title: "How do I start?", content: "Contact us through the form." },
+            { id: "2", title: "What is the cost?", content: "Pricing varies by project." }
+          ]}
+        />
       </div>
       <div id="cta" data-section="cta">
-        <ContactText text="Ready to start your journey?" background={{ variant: "plain" }} useInvertedBackground={false} />
+        <ContactText
+          text="Ready to start your project? Contact us today."
+          background={{ variant: "gradient-bars" }}
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterSimple columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} bottomLeftText="© 2024 TechCorp" bottomRightText="All rights reserved." />
+        <FooterSimple
+          columns={[{ title: "Company", items: [{ label: "About" }, { label: "Contact" }] }]}
+          bottomLeftText="© 2024 Webild"
+          bottomRightText="All rights reserved."
+        />
       </div>
     </ThemeProvider>
   );