diff --git a/src/components/ui/NavbarDropdown.tsx b/src/components/ui/NavbarDropdown.tsx
index b27edb7..e3a86a8 100644
--- a/src/components/ui/NavbarDropdown.tsx
+++ b/src/components/ui/NavbarDropdown.tsx
@@ -43,7 +43,7 @@ const NavbarDropdown = ({ logo, navItems, ctaButton }: NavbarDropdownProps) => {
   return (
     <nav data-section="navbar" ref={navRef} className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
       <div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded backdrop-blur-sm card">
-        <a href="/" className="pl-2 flex items-center">\n          <img src="https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783179055454-3sn7308q.png" alt="Logo" className="h-8 w-auto" />\n        </a>
+        <a href="/" className="pl-2 text-xl font-medium text-foreground">{logo}</a>
 
         <div className="flex items-center gap-2 xl:gap-3 2xl:gap-4">
           <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} />
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 6c483de..a9a9e8e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,46 +1,265 @@
-// AUTO-GENERATED shell by per-section-migrate.
-// Section bodies live in the sibling sections/ folder (one file per section).
-// Edit those section files directly. Non-block content (wrappers,
-// non-inlinable sections) is preserved inline; extracted section blocks
-// become component refs.
-
 import { StyleProvider } from "@/components/ui/StyleProvider";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import React from 'react';
-import HeroSection from './HomePage/sections/Hero';
-import ServicesSection from './HomePage/sections/Services';
-import WorkSection from './HomePage/sections/Work';
-import PromiseSection from './HomePage/sections/Promise';
-import TestimonialsSection from './HomePage/sections/Testimonials';
-import MetricsSection from './HomePage/sections/Metrics';
-import TeamSection from './HomePage/sections/Team';
-import FaqSection from './HomePage/sections/Faq';
-import ContactSection from './HomePage/sections/Contact';
+import HeroSplitVerticalMarqueeTall from "@/components/sections/hero/HeroSplitVerticalMarqueeTall";
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+import FeaturesMediaCarousel from "@/components/sections/features/FeaturesMediaCarousel";
+import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
+import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
+import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
+import TeamStackedCards from "@/components/sections/team/TeamStackedCards";
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
 
-export default function HomePage(): React.JSX.Element {
+export default function HomePage() {
   return (
 <StyleProvider siteBackground="aurora" heroBackground="lightRaysCorner" buttonVariant="stagger">
         <SiteBackgroundSlot />
 
         
 
-        <HeroSection />
+        <div id="hero" data-section="hero">
+          <HeroSplitVerticalMarqueeTall
+            textAnimation="fade-blur"
+            tag="Award-Winning Agency"
+            title="We Build Digital Experiences"
+            description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
+            primaryButton={{ text: "Start Project", href: "#contact" }}
+            secondaryButton={{ text: "View Work", href: "#work" }}
+            leftItems={[
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=1" },
+            ]}
+            rightItems={[
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp?_wi=1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp?_wi=1" },
+            ]}
+          />
+        </div>
 
-        <ServicesSection />
+        <div id="services" data-section="services">
+          <FeaturesBento
+            textAnimation="fade-blur"
+            tag="Services"
+            title="Services That Drive Results"
+            description="We offer a full suite of digital services to help your brand stand out online."
+            features={[
+              {
+                title: "Web Development",
+                description: "Custom-built websites that are fast, responsive, and designed to convert.",
+                bentoComponent: "checklist-timeline",
+                heading: "Project Timeline",
+                subheading: "Week 1-2",
+                checklistItems: [
+                  { label: "Discovery & Strategy", detail: "Day 1-3" },
+                  { label: "Design & Prototype", detail: "Day 4-7" },
+                  { label: "Development & Launch", detail: "Day 8-14" },
+                ],
+                completedLabel: "Live",
+              },
+              {
+                title: "SEO Optimization",
+                description: "We optimize your website to rank higher on search engines and drive organic traffic.",
+                bentoComponent: "animated-bar-chart",
+              },
+              {
+                title: "Branding",
+                description: "Build a memorable brand identity that resonates with your audience.",
+                bentoComponent: "orbiting-icons",
+                centerIcon: Sparkles,
+                orbitIcons: [Palette, Layers, PenTool, Code],
+              },
+            ]}
+          />
+        </div>
 
-        <WorkSection />
+        <div id="work" data-section="work">
+          <FeaturesMediaCarousel
+            textAnimation="fade-blur"
+            tag="Our Work"
+            title="Work We're Proud Of"
+            description="A selection of projects we've crafted for clients across industries."
+            items={[
+              {
+                title: "Vitality Wellness",
+                description: "Health & wellbeing platform",
+                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp?_wi=1",
+                buttonIcon: ArrowUpRight,
+                buttonHref: "#",
+              },
+              {
+                title: "Mailflow AI",
+                description: "AI-powered email marketing platform",
+                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp?_wi=1",
+                buttonIcon: ArrowUpRight,
+                buttonHref: "#",
+              },
+              {
+                title: "Kinetic Studios",
+                description: "Motion graphics & visual effects",
+                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp?_wi=1",
+                buttonIcon: ArrowUpRight,
+                buttonHref: "#",
+              },
+            ]}
+          />
+        </div>
 
-        <PromiseSection />
+        <div id="promise" data-section="promise">
+          <FeaturesBorderGlow
+            textAnimation="fade-blur"
+            tag="Our Promise"
+            title="Why business owner Choose VisionWeb"
+            description="We deliver results that speak for themselves."
+            features={[
+              {
+                icon: Monitor,
+                title: "Responsive Design",
+                description: "Pixel-perfect websites that look stunning on every screen size and device.",
+              },
+              {
+                icon: Zap,
+                title: "Fast Turnaround",
+                description: "From concept to launch in record time without sacrificing quality.",
+              },
+              {
+                icon: Shield,
+                title: "Secure Hosting",
+                description: "Enterprise-grade security and 99.9% uptime for your website.",
+              },
+            ]}
+          />
+        </div>
 
-        <TestimonialsSection />
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialTrustCard
+            textAnimation="fade-blur"
+            quote="VisionWeb completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
+            rating={5}
+            author="— Maria Santos, CEO at Luxuria Travel"
+            avatars={[
+              { name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1" },
+              { name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=1" },
+              { name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=1" },
+              { name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg?_wi=1" },
+              { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg?_wi=1" },
+              { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg?_wi=1" },
+            ]}
+          />
+        </div>
 
-        <MetricsSection />
+        <div id="metrics" data-section="metrics">
+          <MetricsFeatureCards
+            textAnimation="fade-blur"
+            tag="Results"
+            title="Trusted by Industry Leaders"
+            description="Years of experience gorwth businesses."
+            metrics={[
+              {
+                value: "100+",
+                title: "Projects Delivered",
+                features: [
+                  "E-commerce platforms",
+                  "Corporate websites",
+                  "SaaS applications",
+                  "Mobile-first designs",
+                ],
+              },
+              {
+                value: "99%",
+                title: "Client Satisfaction",
+                features: [
+                  " delivery in 24h",
+                  "Clear communication",
+                  "Post-launch support",
+                  "Ongoing partnerships",
+                ],
+              },
+              {
+                value: "5+",
+                title: "Years Experience",
+                features: [
+                  "Industry expertise",
+                  "Award-winning work",
+                  "Global clientele",
+                  "Proven methodology",
+                ],
+              },
+            ]}
+          />
+        </div>
 
-        <TeamSection />
+        <div id="team" data-section="team">
+          <TeamStackedCards
+            textAnimation="fade-blur"
+            tag="Team"
+            title="The Team Behind the Work"
+            description="The creative minds behind your next project."
+            members={[
+              {
+                name: "Nedine Soltani",
+                role: "Lead Developer",
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
+              },
+              {
+                name: "Yahya Sahraoui",
+                role: "Creative Director",
+                imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png?_wi=1",
+              },
+              {
+                name: "Nader amri",
+                role: "UX Designer",
+                imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png?_wi=1",
+              },
+            ]}
+          />
+        </div>
 
-        <FaqSection />
+        <div id="faq" data-section="faq">
+          <FaqSimple
+            textAnimation="fade-blur"
+            tag="FAQ"
+            title="Frequently Asked Questions"
+            description="Everything you need to know about working with us."
+            items={[
+              {
+                question: "How long does a typical project take?",
+                answer: "Most projects are completed within 2-4 weeks depending on scope and complexity. We'll provide a detailed timeline during our initial consultation.",
+              },
+              {
+                question: "What is your pricing structure?",
+                answer: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support.",
+              },
+              {
+                question: "Do you offer ongoing maintenance?",
+                answer: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best.",
+              },
+              {
+                question: "Can you redesign my existing website?",
+                answer: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings.",
+              },
+              {
+                question: "What technologies do you use?",
+                answer: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites.",
+              },
+            ]}
+          />
+        </div>
 
-        <ContactSection />
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            textAnimation="fade-blur"
+            tag="Get in Touch"
+            title="Ready to Transform Your Digital Presence?"
+            description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
+            inputPlaceholder="Enter your email"
+            buttonText="Start Your Project"
+          />
+        </div>
 
         
       </StyleProvider>
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index 93eacd0..a023cd1 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -15,16 +15,16 @@ export default function HeroSection(): React.JSX.Element {
                 primaryButton={{ text: "Start Project", href: "#contact" }}
                 secondaryButton={{ text: "View Work", href: "#work" }}
                 leftItems={[
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=2" },
                 ]}
                 rightItems={[
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp" },
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
-                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp?_wi=2" },
                 ]}
               />
             </div>
diff --git a/src/pages/HomePage/sections/Team.tsx b/src/pages/HomePage/sections/Team.tsx
index 257af62..0994165 100644
--- a/src/pages/HomePage/sections/Team.tsx
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -16,17 +16,17 @@ export default function TeamSection(): React.JSX.Element {
                   {
                     name: "Nedine Soltani",
                     role: "Lead Developer",
-                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
+                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1",
                   },
                   {
                     name: "Yahya Sahraoui",
                     role: "Creative Director",
-                    imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png",
+                    imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png?_wi=2",
                   },
                   {
                     name: "Nader amri",
                     role: "UX Designer",
-                    imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png",
+                    imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png?_wi=2",
                   },
                 ]}
               />
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
index 1dd2afd..63a7c90 100644
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -13,12 +13,12 @@ export default function TestimonialsSection(): React.JSX.Element {
                 rating={5}
                 author="— Maria Santos, CEO at Luxuria Travel"
                 avatars={[
-                  { name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1" },
-                  { name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
-                  { name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp" },
-                  { name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg" },
-                  { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg" },
-                  { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg" },
+                  { name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2" },
+                  { name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=2" },
+                  { name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=2" },
+                  { name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg?_wi=2" },
+                  { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg?_wi=2" },
+                  { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg?_wi=2" },
                 ]}
               />
             </div>
diff --git a/src/pages/HomePage/sections/Work.tsx b/src/pages/HomePage/sections/Work.tsx
index 72e635a..a53c7c5 100644
--- a/src/pages/HomePage/sections/Work.tsx
+++ b/src/pages/HomePage/sections/Work.tsx
@@ -17,21 +17,21 @@ export default function WorkSection(): React.JSX.Element {
                   {
                     title: "Vitality Wellness",
                     description: "Health & wellbeing platform",
-                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp?_wi=2",
                     buttonIcon: ArrowUpRight,
                     buttonHref: "#",
                   },
                   {
                     title: "Mailflow AI",
                     description: "AI-powered email marketing platform",
-                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp?_wi=2",
                     buttonIcon: ArrowUpRight,
                     buttonHref: "#",
                   },
                   {
                     title: "Kinetic Studios",
                     description: "Motion graphics & visual effects",
-                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp?_wi=2",
                     buttonIcon: ArrowUpRight,
                     buttonHref: "#",
                   },