diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 70c8fa3..36aeef4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,7 +18,7 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = { title: 'Webild Project', description: 'Professional web solutions.'excellence de la beauté chez Chez Iyad. Soins premium, K-Beauty et parfumerie d'exception. Prenez soin de votre beauté à Ouled Fayet, Cheraga.', openGraph: { title: 'Chez Iyad | Cosmétiques de Luxe & Soins à Ouled Fayet', description: 'Découvrez l'excellence de la beauté chez Chez Iyad. Soins premium, K-Beauty et parfumerie d'exception.', type: 'website' } };
+export const metadata: Metadata = { title: 'Welcome to our platform', description: 'Premium services and products tailored for your needs.'excellence de la beauté chez Chez Iyad. Soins premium, K-Beauty et parfumerie d'exception. Prenez soin de votre beauté à Ouled Fayet, Cheraga.', openGraph: { title: 'Chez Iyad | Cosmétiques de Luxe & Soins à Ouled Fayet', description: 'Découvrez l'excellence de la beauté chez Chez Iyad. Soins premium, K-Beauty et parfumerie d'exception.', type: 'website' } };
 
 export default function RootLayout({
   children,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index af147d1..2b577a8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,53 +1,103 @@
-'use client';
-
+"use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import Link from 'next/link';
-
-export default function Page() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Contact", id: "/contact" }
-  ];
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import Link from "next/link";
 
+export default function Home() {
+  const navItems = [{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }];
   return (
     <ThemeProvider>
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay 
-          navItems={navItems} 
-          brandName="Webild"
-        />
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardRotatedCarousel 
-          title="Welcome"
-          description="Description"
-          background={{ variant: "plain" }}
-          carouselItems={[]}
+          title="Welcome" 
+          description="Experience the future" 
+          background={{ variant: "plain" }} 
+          carouselItems={[{id: "1"}, {id: "2"}, {id: "3"}, {id: "4"}, {id: "5"}, {id: "6"}]} 
+        />
+      </div>
+      <div id="social-proof" data-section="social-proof">
+        <SocialProofOne names={["Brand A", "Brand B"]} title="Trusted By" description="Industry leaders" />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour 
+          title="Products" 
+          description="Shop our collection" 
+          gridVariant="asymmetric-60-wide-40-narrow" 
+          animationType="opacity" 
+          useInvertedBackground={false} 
+          textboxLayout="default" 
+          products={[{id: "1", name: "P1", price: "$10", variant: "A", imageSrc: "img1"}, {id: "2", name: "P2", price: "$20", variant: "B", imageSrc: "img2"}, {id: "3", name: "P3", price: "$30", variant: "C", imageSrc: "img3"}]} 
+        />
+      </div>
+      <div id="ingredients" data-section="ingredients">
+        <FeatureCardSix 
+          title="Ingredients" 
+          description="Natural components" 
+          textboxLayout="default" 
+          features={[{title: "F1", description: "D1", imageSrc: "img1"}, {title: "F2", description: "D2", imageSrc: "img2"}]} 
+        />
+      </div>
+      <div id="influencers" data-section="influencers">
+        <FeatureCardOne 
+          title="Influencers" 
+          description="Meet our partners" 
+          textboxLayout="default" 
+          animationType="opacity" 
+          features={[{title: "I1", description: "D1", imageSrc: "img1"}, {title: "I2", description: "D2", imageSrc: "img2"}]} 
+        />
+      </div>
+      <div id="metrics" data-section="metrics">
+        <MetricCardEleven 
+          title="Metrics" 
+          description="Our growth" 
+          animationType="opacity" 
+          textboxLayout="default" 
+          metrics={[{id: "m1", value: "10", title: "T1", description: "D1", imageSrc: "img1"}, {id: "m2", value: "20", title: "T2", description: "D2", imageSrc: "img2"}]} 
+        />
+      </div>
+      <div id="blog" data-section="blog">
+        <BlogCardOne 
+          title="Blog" 
+          description="Latest news" 
+          animationType="opacity" 
+          textboxLayout="default" 
+          blogs={[{id: "b1", category: "Cat", title: "T1", excerpt: "E1", imageSrc: "img1", authorName: "A", authorAvatar: "", date: "2023"}, {id: "b2", category: "Cat", title: "T2", excerpt: "E2", imageSrc: "img2", authorName: "A", authorAvatar: "", date: "2023"}]} 
+        />
+      </div>
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia 
+          title="FAQ" 
+          description="Questions answered" 
+          faqsAnimation="opacity" 
+          textboxLayout="default" 
+          faqs={[{id: "q1", title: "T1", content: "C1"}, {id: "q2", title: "T2", content: "C2"}]} 
         />
       </div>
       <div id="contact" data-section="contact">
         <ContactSplitForm 
-          title="Contact Us"
-          description="Get in touch"
-          inputs={[{ name: "email", type: "email", placeholder: "Email" }, { name: "name", type: "text", placeholder: "Name" }]}
-          useInvertedBackground={false}
+          title="Contact" 
+          description="Get in touch" 
+          inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]} 
+          useInvertedBackground={false} 
         />
       </div>
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis 
-          logoText="Webild"
-          columns={[]}
+          logoText="Brand" 
+          columns={[{items: [{label: "Link"}]}]} 
         />
       </div>
     </ThemeProvider>