Merge version_2_1781562698951 into main

Merge version_2_1781562698951 into main

src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
-import NavbarDropdown from '@/components/ui/NavbarDropdown';
+import NavbarFloating from '@/components/ui/NavbarFloating';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
@@ -8,32 +8,28 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
 export default function Layout() {
   const navItems = [
   {
-    "name": "Properties",
-    "href": "#properties"
+    "name": "Home",
+    "href": "#hero"
   },
   {
-    "name": "About",
+    "name": "About Musa",
     "href": "#about"
   },
   {
-    "name": "Results",
-    "href": "#results"
+    "name": "Luxury Listings",
+    "href": "#properties"
+  },
+  {
+    "name": "Success Stories",
+    "href": "#testimonials"
+  },
+  {
+    "name": "Community",
+    "href": "#social-proof"
   },
   {
     "name": "Contact",
     "href": "#contact"
-  },
-  {
-    "name": "Hero",
-    "href": "#hero"
-  },
-  {
-    "name": "Featured Carousel",
-    "href": "#featured-carousel"
-  },
-  {
-    "name": "Metrics",
-    "href": "#metrics"
   }
 ];
 
@@ -41,11 +37,11 @@ export default function Layout() {
     <StyleProvider buttonVariant="bounce" siteBackground="gridDots" heroBackground="lightRaysCenter">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarDropdown
+        <NavbarFloating
       logo="MUSA"
       ctaButton={{
-        text: "WhatsApp",
-        href: "https://wa.me/yournumber",
+        text: "Schedule Consultation",
+        href: "#contact",
       }}
      navItems={navItems} />
       </SectionErrorBoundary>

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #000000;
-  --card: #0c1a15;
+  --background: #0a0a0a;
+  --card: #111111;
   --foreground: #f8fafc;
-  --primary-cta: #10b981;
+  --primary-cta: #c8a96b;
   --primary-cta-text: #000000;
-  --secondary-cta: #1f4035;
+  --secondary-cta: #222222;
   --secondary-cta-text: #ffffff;
-  --accent: #0d5238;
-  --background-accent: #064e3b;
+  --accent: #c8a96b;
+  --background-accent: #1a1a1a;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;

src/pages/HomePage.tsx

@@ -1,320 +1,42 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FeaturedCarouselSection from './HomePage/sections/FeaturedCarousel';
+import PropertiesSection from './HomePage/sections/Properties';
+import MetricsSection from './HomePage/sections/Metrics';
+import TeamSection from './HomePage/sections/Team';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import SocialProofSection from './HomePage/sections/SocialProof';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBrand
-      brand="MUSA REAL ESTATE"
-      description="Redefining luxury living across the United States. Your bridge to the world's most exclusive properties."
-      primaryButton={{
-        text: "Book Consultation",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "View Portfolio",
-        href: "#properties",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/vertical-picture-spiral-staircase-building-sunlight-huatulco-mexico_181624-26945.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTestimonial
-      tag="About Musa"
-      quote="In the world of real estate, luxury is not just a price point; it is a lifestyle. I curate experiences that transcend expectations."
-      author="Musa"
-      role="Luxury Real Estate Influencer"
-      imageSrc="http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="featured-carousel" data-section="featured-carousel">
-    <SectionErrorBoundary name="featured-carousel">
-          <FeaturesMediaCarousel
-      tag="Featured Lifestyle"
-      title="Exclusive Property Highlights"
-      description="Explore the finest collection of luxury estates I've curated this year."
-      items={[
-        {
-          title: "Beachfront Elegance",
-          description: "Coastal living at its peak.",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/traditional-beautiful-building-moroccan-morocco_1203-5629.jpg",
-        },
-        {
-          title: "Skyline Penthouse",
-          description: "Panoramic city views.",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459254.jpg",
-        },
-        {
-          title: "Gourmet Haven",
-          description: "Designed for culinary art.",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/whole-fresh-orange-fruits-with-leaves-placed-board_114579-46680.jpg",
-        },
-        {
-          title: "Private Cinema",
-          description: "Ultimate home entertainment.",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/girls-playing-couch-with-tv_23-2147768102.jpg",
-        },
-        {
-          title: "Spa Retreat",
-          description: "Relaxation in your home.",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-design-marble-tile-toilet-bathroom-wardrobe-with-walk-closet_105762-2073.jpg",
-        },
-        {
-          title: "Garden Terrace",
-          description: "Indoor-outdoor seamless flow.",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698304.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturedCarouselSection />
 
-  <div id="properties" data-section="properties">
-    <SectionErrorBoundary name="properties">
-          <FeaturesImageBento
-      tag="Collection"
-      title="Luxury Real Estate Portfolio"
-      description="Selected residences that define excellence."
-      items={[
-        {
-          title: "The Mansion",
-          description: "Ultimate privacy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-modern-villa-with-pool-lush-greenery_23-2152008230.jpg",
-        },
-        {
-          title: "The Loft",
-          description: "Industrial luxury.",
-          imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-white-couch-coffee-table_188544-18668.jpg",
-        },
-        {
-          title: "The Villa",
-          description: "Modern classic.",
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-kitchen-interior-design_23-2151008651.jpg",
-        },
-        {
-          title: "The Estate",
-          description: "Opulence defined.",
-          imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500595.jpg",
-        },
-        {
-          title: "The Suite",
-          description: "Refined urban.",
-          imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-vintage-bathtub_23-2148291600.jpg",
-        },
-        {
-          title: "The Retreat",
-          description: "Quiet luxury.",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-architecture-with-swimming-pool_23-2151993728.jpg",
-        },
-        {
-          title: "The Reserve",
-          description: "Secured living.",
-          imageSrc: "http://img.b2bpic.net/free-photo/layered-glasses-with-shampagne_8353-9952.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PropertiesSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-      tag="Proven Results"
-      title="Market Impact"
-      description="Numbers that build trust and long-term client success."
-      metrics={[
-        {
-          value: "$500M+",
-          title: "Portfolio Value",
-          description: "Managed luxury assets.",
-          imageSrc: "http://img.b2bpic.net/free-photo/miami-luxury-house_649448-2926.jpg",
-        },
-        {
-          value: "150+",
-          title: "Happy Clients",
-          description: "Exclusive successful deals.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cafe-living-room-loft-style_1150-10726.jpg",
-        },
-        {
-          value: "20%",
-          title: "Average Gain",
-          description: "ROI for our investors.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-white-minimal-kitchen-with-wood-decoration_105762-2211.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="team" data-section="team">
-    <SectionErrorBoundary name="team">
-          <TeamOverlayCards
-      tag="Advisory Team"
-      title="Meet The Experts"
-      description="Professional support to guarantee your property journey is seamless."
-      members={[
-        {
-          name: "Alex Rivier",
-          role: "Head of Acquisitions",
-          imageSrc: "http://img.b2bpic.net/free-photo/latin-amateurs-dancing-salsa_23-2151245222.jpg",
-        },
-        {
-          name: "Sarah Chen",
-          role: "Property Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg",
-        },
-        {
-          name: "David Vark",
-          role: "Luxury Legal Advisor",
-          imageSrc: "http://img.b2bpic.net/free-photo/real-estate-satisfied-man-rejoicing-founding-perfect-home-apartment-holding-paper-house-model-sta_1258-113657.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TeamSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Social Proof"
-      title="Client Success Stories"
-      description="See why top investors and homeowners trust my guidance."
-      testimonials={[
-        {
-          name: "James L.",
-          role: "Investor",
-          quote: "Musa changed the way I view high-end property investment.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg",
-        },
-        {
-          name: "Elise M.",
-          role: "Homeowner",
-          quote: "The most seamless purchase experience I've ever had.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
-        },
-        {
-          name: "Marcus R.",
-          role: "CEO",
-          quote: "Unmatched professionalism and expertise in the market.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",
-        },
-        {
-          name: "Elena S.",
-          role: "Expat Investor",
-          quote: "A truly global standard of service and luxury.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
-        },
-        {
-          name: "Oliver K.",
-          role: "Developer",
-          quote: "Strategic vision and market understanding beyond compare.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-men-looking-away_23-2148269308.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Networks"
-      title="Trusted Partners"
-      description="Collaborating with industry leaders worldwide."
-      names={[
-        "Forbes Real Estate",
-        "Luxury Daily",
-        "Architectural Digest",
-        "Bloomberg Estate",
-        "Wall Street Journal",
-        "Luxury Living Intl",
-        "Million Dollar Listings",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <SocialProofSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Support"
-      title="Your Property Questions"
-      description="Clear answers to your investment and purchase queries."
-      categories={[
-        {
-          name: "Buying",
-          items: [
-            {
-              question: "How do we start?",
-              answer: "Consultation first.",
-            },
-            {
-              question: "Market trends?",
-              answer: "High demand luxury.",
-            },
-          ],
-        },
-        {
-          name: "Investment",
-          items: [
-            {
-              question: "ROI potential?",
-              answer: "Sustainable appreciation.",
-            },
-            {
-              question: "Hidden costs?",
-              answer: "Full transparency.",
-            },
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Ready to Start?"
-      text="Join the @musa_realestate_community. Let's find your legacy property today."
-      primaryButton={{
-        text: "Contact on WhatsApp",
-        href: "https://wa.me/yournumber",
-      }}
-      secondaryButton={{
-        text: "Visit Instagram",
-        href: "https://instagram.com/musa_realestate_community",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,22 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTestimonial
+          tag="About Musa"
+          quote="In the world of real estate, luxury is not just a price point; it is a lifestyle. I curate experiences that transcend expectations."
+          author="Musa"
+          role="Luxury Real Estate Influencer"
+          imageSrc="http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,27 @@
+// 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 ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Ready to Start?"
+          text="Join the @musa_realestate_community. Let's find your legacy property today."
+          primaryButton={{
+            text: "Contact on WhatsApp",
+            href: "https://wa.me/yournumber",
+          }}
+          secondaryButton={{
+            text: "Visit Instagram",
+            href: "https://instagram.com/musa_realestate_community",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,48 @@
+// 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 FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTabbedAccordion
+          tag="Support"
+          title="Your Property Questions"
+          description="Clear answers to your investment and purchase queries."
+          categories={[
+            {
+              name: "Buying",
+              items: [
+                {
+                  question: "How do we start?",
+                  answer: "Consultation first.",
+                },
+                {
+                  question: "Market trends?",
+                  answer: "High demand luxury.",
+                },
+              ],
+            },
+            {
+              name: "Investment",
+              items: [
+                {
+                  question: "ROI potential?",
+                  answer: "Sustainable appreciation.",
+                },
+                {
+                  question: "Hidden costs?",
+                  answer: "Full transparency.",
+                },
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/FeaturedCarousel.tsx

@@ -0,0 +1,58 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "featured-carousel" section.
+
+import React from 'react';
+import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturedCarouselSection(): React.JSX.Element {
+  return (
+    <div id="featured-carousel" data-section="featured-carousel">
+        <SectionErrorBoundary name="featured-carousel">
+              <FeaturesMediaCarousel
+          tag="Featured Lifestyle"
+          title="Exclusive Property Highlights"
+          description="Explore the finest collection of luxury estates I've curated this year."
+          items={[
+            {
+              title: "Beachfront Elegance",
+              description: "Coastal living at its peak.",
+              buttonIcon: "ArrowRight",
+              imageSrc: "http://img.b2bpic.net/free-photo/traditional-beautiful-building-moroccan-morocco_1203-5629.jpg",
+            },
+            {
+              title: "Skyline Penthouse",
+              description: "Panoramic city views.",
+              buttonIcon: "ArrowRight",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459254.jpg",
+            },
+            {
+              title: "Gourmet Haven",
+              description: "Designed for culinary art.",
+              buttonIcon: "ArrowRight",
+              imageSrc: "http://img.b2bpic.net/free-photo/whole-fresh-orange-fruits-with-leaves-placed-board_114579-46680.jpg",
+            },
+            {
+              title: "Private Cinema",
+              description: "Ultimate home entertainment.",
+              buttonIcon: "ArrowRight",
+              imageSrc: "http://img.b2bpic.net/free-photo/girls-playing-couch-with-tv_23-2147768102.jpg",
+            },
+            {
+              title: "Spa Retreat",
+              description: "Relaxation in your home.",
+              buttonIcon: "ArrowRight",
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-design-marble-tile-toilet-bathroom-wardrobe-with-walk-closet_105762-2073.jpg",
+            },
+            {
+              title: "Garden Terrace",
+              description: "Indoor-outdoor seamless flow.",
+              buttonIcon: "ArrowRight",
+              imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698304.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+
+const primaryButton = {
+  href: "#contact",
+  text: "Schedule Consultation"
+};
+const secondaryButton = {
+  href: "#properties",
+  text: "View Luxury Listings"
+};
+
+type HeroOverlayProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  avatarsSrc?: string[];
+  avatarsLabel?: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section
+      aria-label="Hero section"
+      className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
+    >
+      <HeroBackgroundSlot />
+      <ImageOrVideo
+        imageSrc={"https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80"}
+        className="absolute inset-0 w-full h-full object-cover rounded-none"
+      />
+
+      <div
+        className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
+        aria-hidden="true"
+      />
+
+      <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
+        <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
+          <div className="w-fit px-3 py-1 mb-1 text-sm card rounded border border-primary-cta/30 bg-primary-cta/10 backdrop-blur-sm">
+            <p className="text-primary-cta font-medium tracking-wider uppercase">Musa Real Estate Community</p>
+          </div>
+
+          <TextAnimation
+            text={"Transforming Dreams Into Luxury Living"}
+            variant="fade"
+            gradientText={true}
+            tag="h1"
+            className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-white text-balance"
+          />
+
+          <TextAnimation
+            text={"Helping families, investors and homeowners discover exceptional properties across the United States."}
+            variant="fade"
+            gradientText={false}
+            tag="p"
+            className="text-lg md:text-xl text-white leading-snug text-balance"
+          />
+
+          <div className="flex flex-wrap gap-3 mt-2 md:mt-3">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+          </div>
+
+          <div className="pt-8 mt-8 border-t border-white/20 flex flex-col sm:flex-row items-start sm:items-center gap-6 sm:gap-12">
+            <div>
+              <div className="text-2xl font-bold text-primary-cta mb-1">$500M+</div>
+              <div className="text-xs text-white/80 uppercase tracking-wider">Property Sold</div>
+            </div>
+            <div className="hidden sm:block w-px h-10 bg-white/20"></div>
+            <div>
+              <div className="text-2xl font-bold text-primary-cta mb-1">1,200+</div>
+              <div className="text-xs text-white/80 uppercase tracking-wider">Clients Served</div>
+            </div>
+            <div className="hidden sm:block w-px h-10 bg-white/20"></div>
+            <div>
+              <div className="text-2xl font-bold text-primary-cta mb-1">15+</div>
+              <div className="text-xs text-white/80 uppercase tracking-wider">Years Experience</div>
+            </div>
+          </div>
+
+          {undefined && undefined.length > 0 && (
+            <div className="mt-3 md:mt-4">
+              <AvatarGroup size="lg" labelClassName="text-primary-cta-text" />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,40 @@
+// 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 MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+          tag="Proven Results"
+          title="Market Impact"
+          description="Numbers that build trust and long-term client success."
+          metrics={[
+            {
+              value: "$500M+",
+              title: "Portfolio Value",
+              description: "Managed luxury assets.",
+              imageSrc: "http://img.b2bpic.net/free-photo/miami-luxury-house_649448-2926.jpg",
+            },
+            {
+              value: "150+",
+              title: "Happy Clients",
+              description: "Exclusive successful deals.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cafe-living-room-loft-style_1150-10726.jpg",
+            },
+            {
+              value: "20%",
+              title: "Average Gain",
+              description: "ROI for our investors.",
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-white-minimal-kitchen-with-wood-decoration_105762-2211.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Properties.tsx

@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "properties" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PropertiesSection(): React.JSX.Element {
+  return (
+    <div id="properties" data-section="properties">
+        <SectionErrorBoundary name="properties">
+              <FeaturesImageBento
+          tag="Collection"
+          title="Luxury Real Estate Portfolio"
+          description="Selected residences that define excellence."
+          items={[
+            {
+              title: "The Mansion",
+              description: "Ultimate privacy.",
+              imageSrc: "http://img.b2bpic.net/free-photo/luxurious-modern-villa-with-pool-lush-greenery_23-2152008230.jpg",
+            },
+            {
+              title: "The Loft",
+              description: "Industrial luxury.",
+              imageSrc: "http://img.b2bpic.net/free-photo/living-room-with-white-couch-coffee-table_188544-18668.jpg",
+            },
+            {
+              title: "The Villa",
+              description: "Modern classic.",
+              imageSrc: "http://img.b2bpic.net/free-photo/minimalist-kitchen-interior-design_23-2151008651.jpg",
+            },
+            {
+              title: "The Estate",
+              description: "Opulence defined.",
+              imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500595.jpg",
+            },
+            {
+              title: "The Suite",
+              description: "Refined urban.",
+              imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-vintage-bathtub_23-2148291600.jpg",
+            },
+            {
+              title: "The Retreat",
+              description: "Quiet luxury.",
+              imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-architecture-with-swimming-pool_23-2151993728.jpg",
+            },
+            {
+              title: "The Reserve",
+              description: "Secured living.",
+              imageSrc: "http://img.b2bpic.net/free-photo/layered-glasses-with-shampagne_8353-9952.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/SocialProof.tsx

@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="Networks"
+          title="Trusted Partners"
+          description="Collaborating with industry leaders worldwide."
+          names={[
+            "Forbes Real Estate",
+            "Luxury Daily",
+            "Architectural Digest",
+            "Bloomberg Estate",
+            "Wall Street Journal",
+            "Luxury Living Intl",
+            "Million Dollar Listings",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Team.tsx

@@ -0,0 +1,37 @@
+// 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 TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+        <SectionErrorBoundary name="team">
+              <TeamOverlayCards
+          tag="Advisory Team"
+          title="Meet The Experts"
+          description="Professional support to guarantee your property journey is seamless."
+          members={[
+            {
+              name: "Alex Rivier",
+              role: "Head of Acquisitions",
+              imageSrc: "http://img.b2bpic.net/free-photo/latin-amateurs-dancing-salsa_23-2151245222.jpg",
+            },
+            {
+              name: "Sarah Chen",
+              role: "Property Specialist",
+              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg",
+            },
+            {
+              name: "David Vark",
+              role: "Luxury Legal Advisor",
+              imageSrc: "http://img.b2bpic.net/free-photo/real-estate-satisfied-man-rejoicing-founding-perfect-home-apartment-holding-paper-house-model-sta_1258-113657.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,57 @@
+// 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 TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialRatingCards
+          tag="Social Proof"
+          title="Client Success Stories"
+          description="See why top investors and homeowners trust my guidance."
+          testimonials={[
+            {
+              name: "James L.",
+              role: "Investor",
+              quote: "Musa changed the way I view high-end property investment.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg",
+            },
+            {
+              name: "Elise M.",
+              role: "Homeowner",
+              quote: "The most seamless purchase experience I've ever had.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
+            },
+            {
+              name: "Marcus R.",
+              role: "CEO",
+              quote: "Unmatched professionalism and expertise in the market.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",
+            },
+            {
+              name: "Elena S.",
+              role: "Expat Investor",
+              quote: "A truly global standard of service and luxury.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
+            },
+            {
+              name: "Oliver K.",
+              role: "Developer",
+              quote: "Strategic vision and market understanding beyond compare.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-men-looking-away_23-2148269308.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}