Update theme fonts

Merge version_18_1782904102945 into main

src/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
 /* Web Agency - Dark Monochrome */
 @import "tailwindcss";
 @import "./styles/masks.css";
@@ -5,15 +6,15 @@
 
 :root {
   /* Dark theme with monochrome accents */
-  --background: #0a0a0a;
-  --card: #161616;
-  --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e1e1e;
-  --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
-  --background-accent: #434343;
+  --background: #f5faff;
+  --card: #ffffff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
+  --primary-cta-text: #f5faff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001122;
+  --accent: #a8cce8;
+  --background-accent: #7ba3cf;
 
   /* @layout/border-radius/soft */
   --radius: 1.5rem;
@@ -95,7 +96,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: "Inter", sans-serif;
+  --font-sans: 'Open Sans', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -144,7 +145,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: "Inter", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -157,7 +158,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 .card {

src/pages/HomePage.tsx

@@ -1,265 +1,50 @@
+// 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';
+import BentoFeaturesSection from './HomePage/sections/BentoFeatures';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-1782897341300-5vi48pfs.png?_wi=1" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=2" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=3" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=4" },
-            ]}
-            rightItems={[
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=5" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=6" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=7" },
-              { imageSrc: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782897341300-5vi48pfs.png?_wi=8" },
-            ]}
-          />
-        </div>
+        <HeroSection />
+      <MediaCarouselSection />
+      <BentoFeaturesSection />
 
-        <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>

src/pages/HomePage/sections/BentoFeatures.tsx

@@ -0,0 +1,92 @@
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Tag from "@/components/ui/Tag";
+
+export default function BentoFeaturesSection() {
+  return (
+    <section className="relative w-full py-24 bg-background" data-webild-section="bento-features" id="bento-features">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Features" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Advanced Neck Therapy"
+            variant="slide-up"
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-4"
+            gradientText={false}
+          />
+          <ScrollReveal variant="fade" delay={0.1}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Experience the next level of relaxation with our state-of-the-art neck massager.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <ScrollReveal variant="fade" delay={0.2} className="lg:col-span-2">
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col md:flex-row">
+              <div className="p-8 flex-1 flex flex-col justify-center">
+                <h3 className="text-2xl font-bold text-foreground mb-2">Deep Tissue Relief</h3>
+                <p className="text-accent">Targeted pulse technology reaches deep muscle layers to alleviate tension and promote relaxation.</p>
+              </div>
+              <div className="flex-1 min-h-[300px] relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038231-5ykedq2f.png" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.3}>
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col">
+              <div className="h-48 relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038233-cchs5lwi.png" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+              <div className="p-6 flex-1 flex flex-col justify-center">
+                <h3 className="text-xl font-bold text-foreground mb-2">Ergonomic Design</h3>
+                <p className="text-accent text-sm">Perfectly contours to your neck for maximum comfort during extended use.</p>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.4}>
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col">
+              <div className="h-48 relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038234-evwt682d.png?_wi=1" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+              <div className="p-6 flex-1 flex flex-col justify-center">
+                <h3 className="text-xl font-bold text-foreground mb-2">Sleek Aesthetics</h3>
+                <p className="text-accent text-sm">Modern design that looks as good as it feels, blending seamlessly into your lifestyle.</p>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.5} className="lg:col-span-2">
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col md:flex-row-reverse">
+              <div className="p-8 flex-1 flex flex-col justify-center">
+                <h3 className="text-2xl font-bold text-foreground mb-2">Portable Comfort</h3>
+                <p className="text-accent">Take your relaxation anywhere you go with our lightweight and travel-friendly design.</p>
+              </div>
+              <div className="flex-1 min-h-[300px] relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038234-evwt682d.png?_wi=2" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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="رَوّق"
+                description="نؤمن أن الراحة ليست رفاهية، بل جزء أساسي من يوم متوازن. لذلك صُمم رَوِّق ليكون رفيقك اليومي في العمل، والدراسة، والتنقل، وأوقات الاسترخاء، بتجربة مريحة تجمع بين البساطة والتقنية الحديثة لتمنحك شعورًا أكبر بالراحة أينما كنت"
+                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>
+  );
+}

src/pages/HomePage/sections/MediaCarousel.tsx

@@ -0,0 +1,36 @@
+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",
+    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782899518735-tk0yrtfa.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="مصمم ليكون جزءًا من يومك" gradientText={false} />
+          <TextAnimation variant="fade-blur" tag="p" className="text-lg text-accent" text="سواءًا كنت تلعب او تقرا او تسوق او مسترخي" 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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -0,0 +1,36 @@
+// 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="وش يساعدك فيه رَوّق؟"
+                description="فيه كثير علامات اجهاد و إرهاق الي تعودنا اننا نتجاهلها حتى صارت جزء مننا"
+                features={[
+                  {
+                    title: "Web Development",
+                    description: "Custom-built websites that are fast, responsive, and designed to convert.",
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703652-iz2msjpg.png",
+                  },
+                  {
+                    title: "SEO Optimization",
+                    description: "We optimize your website to rank higher on search engines and drive organic traffic.",
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703653-1jqzp5px.png",
+                  },
+                  {
+                    title: "Branding",
+                    description: "Build a memorable brand identity that resonates with your audience.",
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703654-bv6ksmeq.png",
+                  },
+                ]}
+              />
+            </div>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}