From 4460432d01462d97a73a2a12928f1def9c9f0c6a Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 1 Jul 2026 09:31:53 +0000
Subject: [PATCH] Bob AI: Added a media carousel section with the uploaded
 images.

---
 src/pages/HomePage.tsx                        | 273 ++----------------
 src/pages/HomePage/sections/Contact.tsx       |  20 ++
 src/pages/HomePage/sections/Faq.tsx           |  40 +++
 src/pages/HomePage/sections/Hero.tsx          |  32 ++
 src/pages/HomePage/sections/MediaCarousel.tsx |  35 +++
 src/pages/HomePage/sections/Metrics.tsx       |  50 ++++
 src/pages/HomePage/sections/Promise.tsx       |  36 +++
 src/pages/HomePage/sections/Services.tsx      |  46 +++
 src/pages/HomePage/sections/Team.tsx          |  35 +++
 src/pages/HomePage/sections/Testimonials.tsx  |  26 ++
 src/pages/HomePage/sections/Work.tsx          |  42 +++
 11 files changed, 390 insertions(+), 245 deletions(-)
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/MediaCarousel.tsx
 create mode 100644 src/pages/HomePage/sections/Metrics.tsx
 create mode 100644 src/pages/HomePage/sections/Promise.tsx
 create mode 100644 src/pages/HomePage/sections/Services.tsx
 create mode 100644 src/pages/HomePage/sections/Team.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx
 create mode 100644 src/pages/HomePage/sections/Work.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index cab1f26..7a4c755 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,265 +1,48 @@
+// 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 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";
+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';
 
-export default function HomePage() {
+
+import MediaCarouselSection from './HomePage/sections/MediaCarousel';export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="aurora" heroBackground="lightRaysCorner" buttonVariant="stagger">
         <SiteBackgroundSlot />
 
         
 
-        <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://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=1" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=2" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=3" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=4" },
-            ]}
-            rightItems={[
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=5" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=6" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=7" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=8" },
-            ]}
-          />
-        </div>
+        <HeroSection />
+      <MediaCarouselSection />
 
-        <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>
+        <ServicesSection />
 
-        <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",
-                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",
-                buttonIcon: ArrowUpRight,
-                buttonHref: "#",
-              },
-              {
-                title: "Kinetic Studios",
-                description: "Motion graphics & visual effects",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp",
-                buttonIcon: ArrowUpRight,
-                buttonHref: "#",
-              },
-            ]}
-          />
-        </div>
+        <WorkSection />
 
-        <div id="promise" data-section="promise">
-          <FeaturesBorderGlow
-            textAnimation="fade-blur"
-            tag="Our Promise"
-            title="Why Brands Choose Webild"
-            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>
+        <PromiseSection />
 
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialTrustCard
-            textAnimation="fade-blur"
-            quote="Webild 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" },
-              { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg" },
-              { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg" },
-            ]}
-          />
-        </div>
+        <TestimonialsSection />
 
-        <div id="metrics" data-section="metrics">
-          <MetricsFeatureCards
-            textAnimation="fade-blur"
-            tag="Results"
-            title="Trusted by Industry Leaders"
-            description="Years of experience building digital products that drive real results."
-            metrics={[
-              {
-                value: "100+",
-                title: "Projects Delivered",
-                features: [
-                  "E-commerce platforms",
-                  "Corporate websites",
-                  "SaaS applications",
-                  "Mobile-first designs",
-                ],
-              },
-              {
-                value: "99%",
-                title: "Client Satisfaction",
-                features: [
-                  "On-time delivery",
-                  "Clear communication",
-                  "Post-launch support",
-                  "Ongoing partnerships",
-                ],
-              },
-              {
-                value: "8+",
-                title: "Years Experience",
-                features: [
-                  "Industry expertise",
-                  "Award-winning work",
-                  "Global clientele",
-                  "Proven methodology",
-                ],
-              },
-            ]}
-          />
-        </div>
+        <MetricsSection />
 
-        <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: "Sarah Miller",
-                role: "Lead Developer",
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
-              },
-              {
-                name: "Valentina Reyes",
-                role: "Creative Director",
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=2",
-              },
-              {
-                name: "Carlos Mendoza",
-                role: "UX Designer",
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=2",
-              },
-            ]}
-          />
-        </div>
+        <TeamSection />
 
-        <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>
+        <FaqSection />
 
-        <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>
+        <ContactSection />
 
         
       </StyleProvider>
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..c44c274
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,20 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..2df713a
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..be7569d
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplitVerticalMarqueeTall from "@/components/sections/hero/HeroSplitVerticalMarqueeTall";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <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://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=1" },
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=2" },
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=3" },
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897581401-6ksjynw9.png?_wi=4" },
+                ]}
+                rightItems={[
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=5" },
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=6" },
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=7" },
+                  { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897661738-s65yo90k.png?_wi=8" },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/MediaCarousel.tsx b/src/pages/HomePage/sections/MediaCarousel.tsx
new file mode 100644
index 0000000..b7809d7
--- /dev/null
+++ b/src/pages/HomePage/sections/MediaCarousel.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Carousel from '@/components/ui/Carousel';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import TextAnimation from '@/components/ui/TextAnimation';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+
+export default function MediaCarouselSection() {
+  const images = [
+    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092527-2qlsj3la.png",
+    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092529-kmn0xb0w.png",
+    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092530-w252bepw.png"
+  ];
+
+  return (
+    <section id="media-carousel" data-webild-section="media-carousel" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="mb-12 text-center">
+          <TextAnimation variant="fade-blur" tag="h2" className="text-4xl md:text-5xl font-bold text-foreground mb-4" text="Product Gallery" gradientText={false} />
+          <TextAnimation variant="fade-blur" tag="p" className="text-lg text-accent" text="Take a closer look at our product." gradientText={false} />
+        </div>
+        <ScrollReveal variant="slide-up">
+          <Carousel className="w-full">
+            {images.map((src, index) => (
+              <div key={index} className="w-[85vw] sm:w-[60vw] md:w-[45vw] lg:w-[30vw] flex-shrink-0 pr-4">
+                <div className="relative aspect-square w-full overflow-hidden rounded-lg card">
+                  <ImageOrVideo imageSrc={src} className="w-full h-full object-cover" />
+                </div>
+              </div>
+            ))}
+          </Carousel>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..e8f103b
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,50 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+              <MetricsFeatureCards
+                textAnimation="fade-blur"
+                tag="Results"
+                title="Trusted by Industry Leaders"
+                description="Years of experience building digital products that drive real results."
+                metrics={[
+                  {
+                    value: "100+",
+                    title: "Projects Delivered",
+                    features: [
+                      "E-commerce platforms",
+                      "Corporate websites",
+                      "SaaS applications",
+                      "Mobile-first designs",
+                    ],
+                  },
+                  {
+                    value: "99%",
+                    title: "Client Satisfaction",
+                    features: [
+                      "On-time delivery",
+                      "Clear communication",
+                      "Post-launch support",
+                      "Ongoing partnerships",
+                    ],
+                  },
+                  {
+                    value: "8+",
+                    title: "Years Experience",
+                    features: [
+                      "Industry expertise",
+                      "Award-winning work",
+                      "Global clientele",
+                      "Proven methodology",
+                    ],
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Promise.tsx b/src/pages/HomePage/sections/Promise.tsx
new file mode 100644
index 0000000..911336c
--- /dev/null
+++ b/src/pages/HomePage/sections/Promise.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "promise" section.
+
+import React from 'react';
+import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
+
+export default function PromiseSection(): React.JSX.Element {
+  return (
+    <div id="promise" data-section="promise">
+              <FeaturesBorderGlow
+                textAnimation="fade-blur"
+                tag="Our Promise"
+                title="Why Brands Choose Webild"
+                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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..f90852d
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,46 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <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>
+  );
+}
diff --git a/src/pages/HomePage/sections/Team.tsx b/src/pages/HomePage/sections/Team.tsx
new file mode 100644
index 0000000..4d86b24
--- /dev/null
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -0,0 +1,35 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamStackedCards from "@/components/sections/team/TeamStackedCards";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <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: "Sarah Miller",
+                    role: "Lead Developer",
+                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
+                  },
+                  {
+                    name: "Valentina Reyes",
+                    role: "Creative Director",
+                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=2",
+                  },
+                  {
+                    name: "Carlos Mendoza",
+                    role: "UX Designer",
+                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=2",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..a6a819a
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+              <TestimonialTrustCard
+                textAnimation="fade-blur"
+                quote="Webild 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" },
+                  { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg" },
+                  { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg" },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Work.tsx b/src/pages/HomePage/sections/Work.tsx
new file mode 100644
index 0000000..72e635a
--- /dev/null
+++ b/src/pages/HomePage/sections/Work.tsx
@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "work" section.
+
+import React from 'react';
+import FeaturesMediaCarousel from "@/components/sections/features/FeaturesMediaCarousel";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
+
+export default function WorkSection(): React.JSX.Element {
+  return (
+    <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",
+                    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",
+                    buttonIcon: ArrowUpRight,
+                    buttonHref: "#",
+                  },
+                  {
+                    title: "Kinetic Studios",
+                    description: "Motion graphics & visual effects",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp",
+                    buttonIcon: ArrowUpRight,
+                    buttonHref: "#",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
-- 
2.49.1