diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c89b1df..e5815f3 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: 'NexusAI | Next-Gen Autonomous Agent Platform', description: 'Deploy, manage, and scale intelligent AI agents with NexusAI. Build powerful autonomous workflows designed for the future of enterprise automation.' };
+export const metadata: Metadata = { title: 'BuildCraft | Next-Gen Website Builder', description: 'Craft stunning websites in minutes without writing a single line of code.' };
 
 export default function RootLayout({
   children,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 364a164..bbc02eb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
-import SplitAbout from "@/components/sections/about/SplitAbout";
-import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import TextAbout from "@/components/sections/about/TextAbout";
+import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBase from "@/components/sections/footer/FooterBase";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { LayoutTemplate, Layers, Wand2, Zap, Star, Rocket, Palette } from "lucide-react";
 
@@ -26,63 +26,61 @@ export default function WebsiteBuilderPage() {
             borderRadius="rounded"
             contentWidth="medium"
             sizing="medium"
-            background="none"
+            background="circleGradient"
             cardStyle="glass-elevated"
             primaryButtonStyle="gradient"
             secondaryButtonStyle="glass"
             headingFontWeight="bold"
         >
-            <NavbarStyleFullscreen
-                navItems={navItems}
-                brandName="BuildCraft"
-            />
-            <HeroBillboardScroll
-                background={{ variant: "sparkles-gradient" }}
-                tag="Next-Gen Website Builder"
-                tagIcon={Rocket}
-                title="Craft Stunning Websites in Minutes"
-                description="The all-in-one platform for designers and founders to build, customize, and launch professional websites without writing a single line of code."
-                buttons={[{ text: "Start Building", href: "#templates" }]}
-                mediaItems={[
-                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-2hfn9ssm.png", imageAlt: "Interface Preview 1" },
-                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-ropmip58.png", imageAlt: "Interface Preview 2" }
-                ]}
-            />
-            <div id="templates">
-                <FeatureCardNine
+            <div id="nav" data-section="nav">
+                <NavbarStyleFullscreen
+                    navItems={navItems}
+                    brandName="BuildCraft"
+                />
+            </div>
+            <div id="hero" data-section="hero">
+                <HeroSplitDualMedia
+                    background={{ variant: "sparkles-gradient" }}
+                    tag="Next-Gen Website Builder"
+                    tagIcon={Rocket}
+                    title="Craft Stunning Websites in Minutes"
+                    description="The all-in-one platform for designers and founders to build, customize, and launch professional websites without writing a single line of code."
+                    buttons={[{ text: "Start Building", href: "#templates" }]}
+                    mediaItems={[
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-2hfn9ssm.png", imageAlt: "Interface Preview 1" },
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-ropmip58.png", imageAlt: "Interface Preview 2" }
+                    ]}
+                    rating={5}
+                    ratingText="Loved by 10,000+ creators"
+                />
+            </div>
+            <div id="templates" data-section="templates">
+                <FeatureCardEight
                     title="Explore Our Design Interfaces"
                     description="Take a look at the high-fidelity design interfaces we've integrated for your next project."
                     tag="UI Gallery"
                     tagIcon={LayoutTemplate}
-                    animationType="slide-up"
                     textboxLayout="default"
-                    showStepNumbers={true}
-                    useInvertedBackground={false}
                     features={[
                         {
-                            title: "Dashboard Preview",                            description: "Modern interface design with intuitive controls and clear data visualization.",                            phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-d6yxdtuz.jpg" },
-                            phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-g69931lg.jpg" }
+                            title: "Dashboard Preview",                            description: "Modern interface design with intuitive controls and clear data visualization.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-d6yxdtuz.jpg",                            imageAlt: "Dashboard Preview"
+                        },
+                        {
+                            title: "Admin Panel",                            description: "Robust admin panel for managing your site assets.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D9u9a4niXOwkTd0Vfg7jUohDTF/uploaded-1777708840347-g69931lg.jpg",                            imageAlt: "Admin Panel"
                         }
                     ]}
                 />
             </div>
-            <div id="features">
-                <SplitAbout
+            <div id="features" data-section="features">
+                <TextAbout
                     tag="Customization"
                     tagIcon={Palette}
                     title="Design Without Limits"
-                    description="Drag-and-drop your way to perfection. Our intuitive editor gives you full control over typography, colors, and layout structure."
-                    textboxLayout="split"
-                    useInvertedBackground={false}
-                    bulletPoints={[
-                        { title: "Drag & Drop", description: "Simply move blocks to where you want them.", icon: Layers },
-                        { title: "Smart Styling", description: "Apply global styles that adapt automatically.", icon: Wand2 },
-                        { title: "Responsive Design", description: "Websites that look great on any device.", icon: Zap },
-                    ]}
+                    buttons={[{ text: "Learn More" }]}
                 />
             </div>
-            <div id="pricing">
-                <PricingCardTwo
+            <div id="pricing" data-section="pricing">
+                <PricingCardThree
                     title="Transparent Pricing"
                     description="Pick a plan that grows with your business."
                     animationType="slide-up"
@@ -90,44 +88,48 @@ export default function WebsiteBuilderPage() {
                     useInvertedBackground={false}
                     plans={[
                         {
-                            id: "basic",                            badge: "Starter",                            price: "$19/mo",                            subtitle: "Everything you need to launch.",                            buttons: [{ text: "Get Started" }],
+                            id: "basic",                            name: "Starter",                            price: "$19/mo",                            buttons: [{ text: "Get Started" }],
                             features: ["1 Custom Domain", "Drag & Drop Editor", "Basic Hosting"]
                         },
                         {
-                            id: "pro",                            badge: "Best Value",                            badgeIcon: Star,
-                            price: "$49/mo",                            subtitle: "Unlock all power features.",                            buttons: [{ text: "Get Started" }],
+                            id: "pro",                            name: "Pro",                            badge: "Best Value",                            badgeIcon: Star,
+                            price: "$49/mo",                            buttons: [{ text: "Get Started" }],
                             features: ["Unlimited Domains", "Custom CSS", "Priority Support", "Advanced Analytics"]
                         }
                     ]}
                 />
             </div>
-            <FaqSplitText
-                sideTitle="Need Help?"
-                sideDescription="Check out our FAQs or contact our support team."
-                faqs={[
-                    { id: "1", title: "Do I need to code?", content: "Not at all! BuildCraft is a 100% no-code platform." },
-                    { id: "2", title: "Can I export my site?", content: "Yes, Pro users can export their static code anytime." },
-                ]}
-                faqsAnimation="slide-up"
-                useInvertedBackground={false}
-            />
-            <div id="contact">
-                <ContactSplitForm
+            <div id="faq" data-section="faq">
+                <FaqSplitMedia
+                    title="Need Help?"
+                    description="Check out our FAQs or contact our support team."
+                    faqs={[
+                        { id: "1", title: "Do I need to code?", content: "Not at all! BuildCraft is a 100% no-code platform." },
+                        { id: "2", title: "Can I export my site?", content: "Yes, Pro users can export their static code anytime." },
+                    ]}
+                    faqsAnimation="slide-up"
+                    textboxLayout="split"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="contact" data-section="contact">
+                <ContactSplit
+                    tag="Get in Touch"
                     title="Ready to Launch Your Project?"
                     description="Tell us about your next project and we'll help you get started."
                     useInvertedBackground={false}
-                    inputs={[
-                        { name: "name", type: "text", placeholder: "Full Name" },
-                        { name: "email", type: "email", placeholder: "Email Address" }
-                    ]}
                     buttonText="Connect With Us"
                 />
             </div>
-            <FooterLogoReveal
-                logoText="BuildCraft"
-                leftLink={{ text: "Privacy Policy", href: "#" }}
-                rightLink={{ text: "Terms of Service", href: "#" }}
-            />
+            <div id="footer" data-section="footer">
+                <FooterBase
+                    logoText="BuildCraft"
+                    columns={[
+                        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+                        { title: "Company", items: [{ label: "Contact", href: "#contact" }] }
+                    ]}
+                />
+            </div>
         </ThemeProvider>
     );
 }
\ No newline at end of file