Merge version_22_1781900069686 into main

Merge version_22_1781900069686 into main

src/components/Layout.tsx

@@ -38,7 +38,7 @@ export default function Layout() {
       logo="YOURSMATE"
       logoImageSrc="http://img.b2bpic.net/free-vector/star-champion-logo-designs-inspiration-isolated-white-background_384344-1096.jpg"
       ctaButton={{
-        text: "Book Demo",        href: "#contact"}}
+        text: "Schedule a Consultation",        href: "#contact"}}
      navItems={navItems} />
       </SectionErrorBoundary>
       <main className="flex-grow">

src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
@@ -6,14 +6,14 @@
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
   --background: #0a0a0a;
-  --card: #121212;
-  --foreground: #ffffff;
-  --primary-cta: #106EFB;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #000000;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #dfff1c;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #8b9a1b;
+  --background-accent: #5d6b00;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -88,8 +88,8 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Inter Tight', sans-serif;
-  --font-tight: "Inter Tight", sans-serif;
+  --font-sans: 'Nunito Sans', sans-serif;
+  --font-tight: "Space Grotesk", sans-serif;
   --font-mono: monospace;
 
   /* Border Radius */
@@ -137,7 +137,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Inter Tight', sans-serif;
+  font-family: 'Nunito Sans', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter Tight', sans-serif;
+  font-family: 'Nunito Sans', sans-serif;
 }
 
 /* Default card/button styles. Template theme.css imports come after this file

src/pages/HomePage.tsx

@@ -1,211 +1,49 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-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 FeaturesSection from './HomePage/sections/Features';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import TrustedBySection from './HomePage/sections/TrustedBy';
+import BusinessProblemsSection from './HomePage/sections/BusinessProblems';
+import AiDemosSection from './HomePage/sections/AiDemos';
+import AutomationShowcaseSection from './HomePage/sections/AutomationShowcase';
+import PremiumHamperSection from './HomePage/sections/PremiumHamper';
+import ReputationManagementSection from './HomePage/sections/ReputationManagement';
+import CrmDashboardSection from './HomePage/sections/CrmDashboard';
+import FeaturesArrowCardsSection from './HomePage/sections/FeaturesArrowCards';export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardTiltedCarousel
-      tag="AI Operating System"
-      title="Businesses That Run Even When You Don't"
-      description="Your AI-powered operating system answers calls, books appointments, automates follow-ups, and manages customers—so you generate revenue while away."
-      primaryButton={{
-        text: "See Live Demo",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Book Strategy Call",
-        href: "#contact",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-robot-holding-biotech-pill_183364-118328.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/account-manager-using-ai-chatbot-help-talking-with-customers_482257-126148.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/work-office-doesn-t-have-boring_329181-10357.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/research-analysis-ideas-strategy-information-concept_53876-123886.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/people-holding-icons-digital-brands_53876-65398.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/server-racks-storing-ai-datasets-simulation-training-predictive-tasks_482257-124190.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
+      <TrustedBySection />
+      <BusinessProblemsSection />
+      <AiDemosSection />
+      <AutomationShowcaseSection />
+      <PremiumHamperSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="The AI Operating System for Modern Businesses"
-      descriptions={[
-        "Stop losing revenue to missed calls and manual admin. YOURSMATE™ implements a complete, AI-driven operating system that treats your business like a modern, scalable enterprise.",
-        "Whether you're a local service provider or a scaling agency, we provide the infrastructure to capture leads, book appointments, and retain customers on autopilot, 24/7.",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesBentoGrid
-      tag="System Capabilities"
-      title="Automated Infrastructure"
-      description="Every core business function, flawlessly executed by AI."
-      features={[
-        {
-          title: "24/7 AI Receptionist",
-          description: "Never miss a call. The AI handles inquiries, answers questions, and qualifies prospects instantly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-employees-using-tablet_23-2148339334.jpg",
-        },
-        {
-          title: "Smart Appointment Booking",
-          description: "Automated calendar synchronization across your platforms to ensure zero scheduling conflicts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-device_23-2149085998.jpg",
-        },
-        {
-          title: "Review Collection System",
-          description: "Automatically gather 5-star reviews from happy customers after every successful service interaction.",
-          imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-collage_23-2149631020.jpg",
-        },
-        {
-          title: "WhatsApp CRM Sync",
-          description: "Seamless customer communication via WhatsApp, integrated directly into your central business dashboard.",
-          imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038413.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
+      <FeaturesArrowCardsSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Measurable Results"
-      title="ROI You Can See"
-      description="Your growth, quantified by intelligent automation."
-      metrics={[
-        {
-          value: "100%",
-          description: "Call Coverage",
-        },
-        {
-          value: "40%",
-          description: "Time Saved",
-        },
-        {
-          value: "2.5x",
-          description: "Revenue Lift",
-        },
-        {
-          value: "0",
-          description: "Missed Leads",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Success Stories"
-      title="The Results Talk"
-      description="See why top businesses rely on YOURSMATE™ to automate their operations."
-      testimonials={[
-        {
-          name: "Dr. Sarah Johnson",
-          role: "Dentist",
-          quote: "We stopped losing patients overnight. The AI booking system is a total game changer for our clinic.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-doctor-sitting-isolated-grey_651396-917.jpg",
-        },
-        {
-          name: "Michael Chen",
-          role: "Restaurant Manager",
-          quote: "My staff focuses on the food now, not the phone. The automation handles everything perfectly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/welcome-our-restaurant_1098-15702.jpg",
-        },
-        {
-          name: "Emily Rodriguez",
-          role: "Real Estate Agent",
-          quote: "Leads get qualified while I'm out showing houses. The system pays for itself in the first week.",
-          imageSrc: "http://img.b2bpic.net/free-photo/boardroom-office-space-with-desks-stationary-tools-used-everyday-executive-tasks-company-department-place-empty-startup-coworking-space-small-business-decorations_482257-70394.jpg",
-        },
-        {
-          name: "David Kim",
-          role: "Agency Owner",
-          quote: "The whitelabel automation is exactly what my clients needed. Incredible recurring revenue boost.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-illustrator-drawing-tablet_23-2150040139.jpg",
-        },
-        {
-          name: "Priya Sharma",
-          role: "Operations Manager",
-          quote: "The reporting and CRM sync has transformed our internal efficiency. A must-have for growing teams.",
-          imageSrc: "http://img.b2bpic.net/free-photo/face-happy-male-executive-looking-camera-smiling_1262-14920.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
+      <ReputationManagementSection />
+      <CrmDashboardSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Common Questions"
-      title="Everything You Need to Know"
-      description="Clear answers to help you make an informed decision for your business."
-      items={[
-        {
-          question: "Is the AI receptionist indistinguishable from a human?",
-          answer: "Yes, our voice agents are designed with natural inflection and professional tone, trained on your specific business data for high-quality interactions.",
-        },
-        {
-          question: "Can I integrate this with my existing calendar?",
-          answer: "We integrate seamlessly with Google Calendar, Outlook, and most major industry-specific scheduling software.",
-        },
-        {
-          question: "What happens if a prospect has a complex question?",
-          answer: "The AI is designed to handle common tasks and escalate complex requests directly to your human staff, ensuring no query ever goes unanswered.",
-        },
-        {
-          question: "Do I need technical skills to get started?",
-          answer: "No technical skills required. Our team handles the entire setup, training, and deployment for your business.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Start Scaling"
-      text="Ready to turn your business into a self-running system? Book your live demo now."
-      primaryButton={{
-        text: "Book Strategy Call",
-        href: "https://calendly.com",
-      }}
-      secondaryButton={{
-        text: "See Live Demo",
-        href: "#",
-      }}
-    />
-    </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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="The AI Operating System for Modern Businesses"
+          descriptions={[
+            "Stop losing revenue to missed calls and manual admin. YOURSMATE™ implements a complete, AI-driven operating system that treats your business like a modern, scalable enterprise.",
+            "Whether you're a local service provider or a scaling agency, we provide the infrastructure to capture leads, book appointments, and retain customers on autopilot, 24/7.",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/AiDemos.tsx

@@ -0,0 +1,148 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Button from "@/components/ui/Button";
+import { Mic, PhoneCall, MessageSquare, Calendar } from "lucide-react";
+
+export default function AiDemosSection() {
+  return (
+    <section data-webild-section="ai-demos" className="relative w-full py-24 bg-card overflow-hidden">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="fade">
+          <div className="text-center mb-16">
+            <TextAnimation 
+              text="Meet Your New Best Employees" 
+              variant="fade-blur" 
+              tag="h2" 
+              className="text-4xl md:text-5xl font-tight font-bold text-foreground mb-6"
+              gradientText={false}
+            />
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Available 24/7. Never takes a sick day. Instantly responds to every lead and books appointments while you sleep.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* AI Receptionist Demo */}
+          <ScrollReveal variant="fade" delay={0.2}>
+            <div className="group relative p-8 md:p-10 rounded-[32px] border border-white/5 bg-background hover:border-primary-cta/30 transition-colors duration-500">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary-cta/5 to-transparent rounded-[32px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              
+              <div className="relative z-10">
+                <div className="flex items-center justify-between mb-8">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-full bg-primary-cta/20 flex items-center justify-center">
+                      <PhoneCall className="w-6 h-6 text-primary-cta" />
+                    </div>
+                    <h3 className="text-2xl font-tight font-bold text-foreground">AI Receptionist</h3>
+                  </div>
+                  <span className="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm font-medium flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+                    Online
+                  </span>
+                </div>
+
+                <div className="space-y-4 mb-8">
+                  <div className="flex gap-4">
+                    <div className="w-8 h-8 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <span className="text-xs font-bold text-primary-cta">AI</span>
+                    </div>
+                    <div className="bg-white/5 rounded-2xl rounded-tl-none p-4 text-sm text-foreground">
+                      "Hi, thanks for calling! How can I help you today?"
+                    </div>
+                  </div>
+                  <div className="flex gap-4 flex-row-reverse">
+                    <div className="w-8 h-8 rounded-full bg-secondary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <span className="text-xs font-bold text-secondary-cta">You</span>
+                    </div>
+                    <div className="bg-secondary-cta/10 rounded-2xl rounded-tr-none p-4 text-sm text-foreground">
+                      "I need to book an appointment for tomorrow."
+                    </div>
+                  </div>
+                  <div className="flex gap-4">
+                    <div className="w-8 h-8 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <span className="text-xs font-bold text-primary-cta">AI</span>
+                    </div>
+                    <div className="bg-white/5 rounded-2xl rounded-tl-none p-4 text-sm text-foreground">
+                      "I have 10:00 AM or 2:00 PM available. Which works better for you?"
+                    </div>
+                  </div>
+                </div>
+
+                <ul className="space-y-3 mb-8">
+                  <li className="flex items-center gap-3 text-accent text-sm">
+                    <div className="w-5 h-5 rounded-full bg-primary-cta/20 flex items-center justify-center">
+                      <Mic className="w-3 h-3 text-primary-cta" />
+                    </div>
+                    Human-like voice conversations
+                  </li>
+                  <li className="flex items-center gap-3 text-accent text-sm">
+                    <div className="w-5 h-5 rounded-full bg-primary-cta/20 flex items-center justify-center">
+                      <Calendar className="w-3 h-3 text-primary-cta" />
+                    </div>
+                    Direct calendar integration
+                  </li>
+                </ul>
+
+                <Button text="Hear a Live Demo" variant="primary" className="w-full" />
+              </div>
+            </div>
+          </ScrollReveal>
+
+          {/* Website Voice Agent Demo */}
+          <ScrollReveal variant="fade" delay={0.4}>
+            <div className="group relative p-8 md:p-10 rounded-[32px] border border-white/5 bg-background hover:border-secondary-cta/30 transition-colors duration-500">
+              <div className="absolute inset-0 bg-gradient-to-br from-secondary-cta/5 to-transparent rounded-[32px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              
+              <div className="relative z-10">
+                <div className="flex items-center justify-between mb-8">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-full bg-secondary-cta/20 flex items-center justify-center">
+                      <MessageSquare className="w-6 h-6 text-secondary-cta" />
+                    </div>
+                    <h3 className="text-2xl font-tight font-bold text-foreground">Website Voice Agent</h3>
+                  </div>
+                  <span className="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm font-medium flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+                    Listening
+                  </span>
+                </div>
+
+                <div className="relative h-48 rounded-2xl bg-white/5 border border-white/10 flex flex-col items-center justify-center mb-8 overflow-hidden">
+                  <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=2000&auto=format&fit=crop')] opacity-10 bg-cover bg-center" />
+                  
+                  <div className="relative z-10 flex flex-col items-center">
+                    <div className="w-16 h-16 rounded-full bg-secondary-cta/20 flex items-center justify-center mb-4 relative">
+                      <div className="absolute inset-0 rounded-full border border-secondary-cta/50 animate-ping" />
+                      <Mic className="w-8 h-8 text-secondary-cta" />
+                    </div>
+                    <p className="text-foreground font-medium">"Hi, how can I help you today?"</p>
+                    <p className="text-accent text-sm mt-2">Click to speak</p>
+                  </div>
+                </div>
+
+                <ul className="space-y-3 mb-8">
+                  <li className="flex items-center gap-3 text-accent text-sm">
+                    <div className="w-5 h-5 rounded-full bg-secondary-cta/20 flex items-center justify-center">
+                      <MessageSquare className="w-3 h-3 text-secondary-cta" />
+                    </div>
+                    Replaces boring contact forms
+                  </li>
+                  <li className="flex items-center gap-3 text-accent text-sm">
+                    <div className="w-5 h-5 rounded-full bg-secondary-cta/20 flex items-center justify-center">
+                      <PhoneCall className="w-3 h-3 text-secondary-cta" />
+                    </div>
+                    Qualifies leads instantly
+                  </li>
+                </ul>
+
+                <Button text="Try Website Agent" variant="secondary" className="w-full" />
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/AutomationShowcase.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import TextAnimation from '@/components/ui/TextAnimation';
+import Tag from '@/components/ui/Tag';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+
+export default function AutomationShowcaseSection() {
+  return (
+    <section data-webild-section="automation-showcase" id="automation-showcase" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="text-center mb-16 max-w-3xl mx-auto">
+          <ScrollReveal variant="fade">
+            <Tag text="Omnichannel Automation" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Engage Customers Where They Are"
+            variant="fade-blur"
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+            gradientText={false}
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-accent">
+              Turn your social channels into automated revenue engines with intelligent conversational agents.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="space-y-24">
+          {/* WhatsApp */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <ScrollReveal variant="slide-up" className="order-2 lg:order-1">
+              <div className="space-y-6">
+                <h3 className="text-3xl font-bold text-foreground">WhatsApp Business Automation</h3>
+                <p className="text-lg text-accent">
+                  Instantly respond to inquiries, qualify leads, and close sales directly through WhatsApp. Our AI agent handles the conversation naturally, 24/7, ensuring no lead goes cold.
+                </p>
+                <ul className="space-y-4">
+                  <li className="flex items-start gap-3">
+                    <div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta" />
+                    </div>
+                    <span className="text-foreground">Instant lead qualification</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta" />
+                    </div>
+                    <span className="text-foreground">Automated appointment booking</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta" />
+                    </div>
+                    <span className="text-foreground">Seamless CRM integration</span>
+                  </li>
+                </ul>
+              </div>
+            </ScrollReveal>
+            <ScrollReveal variant="fade-blur" delay={0.2} className="order-1 lg:order-2">
+              <div className="relative rounded-2xl overflow-hidden aspect-square lg:aspect-[4/3] card border border-white/5">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FMpRnLWS92KdwJDXGXZYRZiidr/uploaded-1781894905666-l0yeftni.jpg" 
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </ScrollReveal>
+          </div>
+
+          {/* Instagram */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <ScrollReveal variant="fade-blur" className="order-1">
+              <div className="relative rounded-2xl overflow-hidden aspect-square lg:aspect-[4/3] card border border-white/5">
+                <ImageOrVideo 
+                  imageSrc="https://picsum.photos/seed/811721753/1200/800" 
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </ScrollReveal>
+            <ScrollReveal variant="slide-up" delay={0.2} className="order-2">
+              <div className="space-y-6">
+                <h3 className="text-3xl font-bold text-foreground">Instagram DM Sales Funnel</h3>
+                <p className="text-lg text-accent">
+                  Convert followers into paying customers automatically. The AI engages with story replies and direct messages, driving traffic to your booking links and answering FAQs instantly.
+                </p>
+                <ul className="space-y-4">
+                  <li className="flex items-start gap-3">
+                    <div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta" />
+                    </div>
+                    <span className="text-foreground">Story reply automation</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta" />
+                    </div>
+                    <span className="text-foreground">Keyword-triggered DM flows</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <div className="w-6 h-6 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0 mt-1">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta" />
+                    </div>
+                    <span className="text-foreground">Direct booking link delivery</span>
+                  </li>
+                </ul>
+              </div>
+            </ScrollReveal>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/BusinessProblems.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+export default function BusinessProblemsSection() {
+  const [missedCalls, setMissedCalls] = useState(10);
+  const [customerValue, setCustomerValue] = useState(500);
+  
+  const yearlyLost = missedCalls * customerValue * 52;
+  const monthlyLost = Math.round(yearlyLost / 12);
+
+  return (
+    <section data-webild-section="business-problems" className="relative w-full py-24 bg-background overflow-hidden">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="fade">
+          <div className="text-center mb-16">
+            <TextAnimation 
+              text="The Hidden Cost of Missing Calls" 
+              variant="fade-blur" 
+              tag="h2" 
+              className="text-4xl md:text-5xl font-tight font-bold text-foreground mb-6"
+              gradientText={false}
+            />
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Every missed call is a missed opportunity. While you're busy running your business, potential revenue is slipping through the cracks. Let's calculate exactly how much.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <ScrollReveal variant="fade" delay={0.2}>
+            <div className="card p-8 md:p-12 rounded-[32px] border border-white/5 bg-white/5 backdrop-blur-xl shadow-2xl">
+              <h3 className="text-2xl font-tight font-bold text-foreground mb-8">Lost Revenue Calculator</h3>
+              
+              <div className="space-y-8">
+                <div>
+                  <div className="flex justify-between mb-2">
+                    <label className="text-foreground font-medium">Missed Calls per Week</label>
+                    <span className="text-secondary-cta font-bold">{missedCalls}</span>
+                  </div>
+                  <input 
+                    type="range" 
+                    min="1" 
+                    max="100" 
+                    value={missedCalls}
+                    onChange={(e) => setMissedCalls(parseInt(e.target.value))}
+                    className="w-full accent-secondary-cta"
+                  />
+                </div>
+
+                <div>
+                  <div className="flex justify-between mb-2">
+                    <label className="text-foreground font-medium">Average Customer Value ($)</label>
+                    <span className="text-secondary-cta font-bold">${customerValue}</span>
+                  </div>
+                  <input 
+                    type="range" 
+                    min="50" 
+                    max="5000" 
+                    step="50"
+                    value={customerValue}
+                    onChange={(e) => setCustomerValue(parseInt(e.target.value))}
+                    className="w-full accent-secondary-cta"
+                  />
+                </div>
+              </div>
+
+              <div className="mt-12 p-6 rounded-2xl bg-background/50 border border-white/5">
+                <p className="text-accent text-sm mb-2">Estimated Lost Revenue (Yearly)</p>
+                <div className="text-5xl font-tight font-bold text-primary-cta">
+                  ${yearlyLost.toLocaleString()}
+                </div>
+                <p className="text-accent text-sm mt-4">
+                  That's <span className="text-foreground font-semibold">${monthlyLost.toLocaleString()}</span> every month.
+                </p>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.4}>
+            <div className="space-y-8">
+              <div className="flex gap-6">
+                <div className="w-12 h-12 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0">
+                  <span className="text-primary-cta text-xl">📞</span>
+                </div>
+                <div>
+                  <h4 className="text-xl font-tight font-bold text-foreground mb-2">You Can't Answer Every Call</h4>
+                  <p className="text-accent">When you're with a client, in a meeting, or after hours, calls go to voicemail. 80% of callers won't leave a message—they just call your competitor.</p>
+                </div>
+              </div>
+              
+              <div className="flex gap-6">
+                <div className="w-12 h-12 rounded-full bg-secondary-cta/20 flex items-center justify-center shrink-0">
+                  <span className="text-secondary-cta text-xl">⏳</span>
+                </div>
+                <div>
+                  <h4 className="text-xl font-tight font-bold text-foreground mb-2">Slow Follow-ups Kill Deals</h4>
+                  <p className="text-accent">If you don't reply within 5 minutes, your chance of closing the lead drops by 400%. Manual follow-ups are too slow.</p>
+                </div>
+              </div>
+
+              <div className="flex gap-6">
+                <div className="w-12 h-12 rounded-full bg-primary-cta/20 flex items-center justify-center shrink-0">
+                  <span className="text-primary-cta text-xl">💸</span>
+                </div>
+                <div>
+                  <h4 className="text-xl font-tight font-bold text-foreground mb-2">The Solution is Automation</h4>
+                  <p className="text-accent">Stop losing money to missed calls. Our AI Receptionist answers instantly, qualifies the lead, and books the appointment directly on your calendar.</p>
+                </div>
+              </div>
+
+              <div className="pt-4">
+                <Button text="Stop Losing Revenue" variant="primary" className="w-full md:w-auto" />
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}

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="Start Scaling"
+          text="Ready to turn your business into a self-running system? Book your live demo now."
+          primaryButton={{
+            text: "Book Strategy Call",
+            href: "https://calendly.com",
+          }}
+          secondaryButton={{
+            text: "See Live Demo",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/CrmDashboard.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import TextAnimation from '@/components/ui/TextAnimation';
+import Tag from '@/components/ui/Tag';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import { LayoutDashboard, Users, TrendingUp } from 'lucide-react';
+
+export default function CrmDashboardSection() {
+  return (
+    <div data-webild-section="crm-dashboard" id="crm-dashboard">
+      <section className="relative w-full py-24 bg-card">
+        <div className="w-content-width mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <ScrollReveal variant="fade">
+                <Tag text="Centralized Control" icon={LayoutDashboard} className="mb-6" />
+              </ScrollReveal>
+              <TextAnimation
+                text="Premium CRM Dashboard"
+                variant="fade-blur"
+                tag="h2"
+                className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+                gradientText={false}
+              />
+              <ScrollReveal variant="fade" delay={0.2}>
+                <p className="text-lg text-accent mb-10">
+                  Manage all your leads, conversations, and appointments in one unified, premium interface. Never lose track of a prospect again with our intelligent tracking system.
+                </p>
+              </ScrollReveal>
+              
+              <div className="space-y-8">
+                {[
+                  {
+                    icon: Users,
+                    title: "Unified Inbox",
+                    description: "All your WhatsApp, SMS, and email conversations in one place."
+                  },
+                  {
+                    icon: LayoutDashboard,
+                    title: "Pipeline Management",
+                    description: "Drag-and-drop interface to track leads from prospect to closed deal."
+                  },
+                  {
+                    icon: TrendingUp,
+                    title: "Real-Time Analytics",
+                    description: "Monitor your ROI, conversion rates, and AI performance instantly."
+                  }
+                ].map((feature, index) => (
+                  <ScrollReveal key={index} delay={0.3 + (0.1 * index)} variant="slide-up">
+                    <div className="flex gap-4">
+                      <div className="flex-shrink-0 w-12 h-12 rounded-full bg-background flex items-center justify-center text-primary-cta">
+                        <feature.icon className="w-6 h-6" />
+                      </div>
+                      <div>
+                        <h4 className="text-xl font-semibold text-foreground mb-2">{feature.title}</h4>
+                        <p className="text-accent">{feature.description}</p>
+                      </div>
+                    </div>
+                  </ScrollReveal>
+                ))}
+              </div>
+            </div>
+            
+            <ScrollReveal delay={0.4} variant="fade">
+              <div className="relative rounded-xl overflow-hidden border border-white/10 shadow-2xl">
+                <div className="absolute inset-0 bg-gradient-to-tr from-primary-cta/20 to-transparent opacity-50 mix-blend-overlay"></div>
+                <ImageOrVideo 
+                  imageSrc="http://img.b2bpic.net/free-photo/dashboard-interface-with-data-graphs_23-2149153305.jpg" 
+                  className="w-full h-auto object-cover"
+                />
+              </div>
+            </ScrollReveal>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Plus } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import { cls } from "@/lib/utils";
+
+const items = [
+  {
+    question: "Is the AI receptionist indistinguishable from a human?",
+    answer: "Yes, our voice agents are designed with natural inflection and professional tone, trained on your specific business data for high-quality interactions."
+  },
+  {
+    question: "Can I integrate this with my existing calendar?",
+    answer: "We integrate seamlessly with Google Calendar, Outlook, and most major industry-specific scheduling software."
+  },
+  {
+    question: "What happens if a prospect has a complex question?",
+    answer: "The AI is designed to handle common tasks and escalate complex requests directly to your human staff, ensuring no query ever goes unanswered."
+  },
+  {
+    question: "Do I need technical skills to get started?",
+    answer: "No technical skills required. Our team handles the entire setup, training, and deployment for your business."
+  }
+];
+
+type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+const FaqInline = () => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const handleToggle = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <section aria-label="FAQ section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"Common Questions"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Everything You Need to Know"}
+            variant="slide-up"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"Clear answers to help you make an informed decision for your business."}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary" />}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <ScrollReveal variant="fade-blur" className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              onClick={() => handleToggle(index)}
+              className="p-3 xl:p-3.5 2xl:p-4 rounded card cursor-pointer select-none"
+            >
+              <div className="flex items-center justify-between gap-3 xl:gap-3.5 2xl:gap-4">
+                <h3 className="text-lg md:text-xl font-medium leading-snug">{item.question}</h3>
+                <div className="flex shrink-0 items-center justify-center size-8 md:size-9 rounded primary-button">
+                  <Plus
+                    className={cls(
+                      "size-3.5 md:size-4 text-primary-cta-text transition-transform duration-300",
+                      activeIndex === index && "rotate-45"
+                    )}
+                    strokeWidth={2}
+                  />
+                </div>
+              </div>
+              <AnimatePresence initial={false}>
+                {activeIndex === index && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3, ease: "easeOut" }}
+                    className="overflow-hidden"
+                  >
+                    <p className="pt-1 text-base leading-snug">{item.answer}</p>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          ))}
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function FaqSection() {
+  return (
+    <div data-webild-section="faq" id="faq">
+      <FaqInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesBentoGrid
+          tag="System Capabilities"
+          title="Automated Infrastructure"
+          description="Every core business function, flawlessly executed by AI."
+          features={[
+            {
+              title: "24/7 AI Receptionist",
+              description: "Never miss a call. The AI handles inquiries, answers questions, and qualifies prospects instantly.",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-employees-using-tablet_23-2148339334.jpg",
+            },
+            {
+              title: "Smart Appointment Booking",
+              description: "Automated calendar synchronization across your platforms to ensure zero scheduling conflicts.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-device_23-2149085998.jpg",
+            },
+            {
+              title: "Review Collection System",
+              description: "Automatically gather 5-star reviews from happy customers after every successful service interaction.",
+              imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-collage_23-2149631020.jpg",
+            },
+            {
+              title: "WhatsApp CRM Sync",
+              description: "Seamless customer communication via WhatsApp, integrated directly into your central business dashboard.",
+              imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038413.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/FeaturesArrowCards.tsx

@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (FeaturesArrowCards).
+
+import React from 'react';
+import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
+
+export default function FeaturesArrowCardsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="features-arrow-cards" id="features-arrow-cards">
+      <FeaturesArrowCards
+        items={[{"imageSrc":"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop","tags":["AI Receptionist","24/7 Availability","Lead Qualification"],"title":"Never Miss a Lead Again"},{"imageSrc":"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop","tags":["Smart Scheduling","Calendar Sync","Automated Reminders"],"title":"Frictionless Appointment Booking"},{"tags":["Review Generation","Reputation Management","Social Proof"],"title":"Automated 5-Star Reviews","imageSrc":"https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop"},{"tags":["WhatsApp CRM","Centralized Inbox","Automated Follow-ups"],"title":"Unified Customer Communication","imageSrc":"https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=2070&auto=format&fit=crop"}]}
+        tag="Core Benefits"
+        description="Explore the powerful capabilities of the Business Operating System™ designed to automate your growth and streamline your operations."
+        title="High-Impact System Features"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,112 @@
+/* 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 TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import { motion } from "motion/react";
+import TiltedCarousel from "@/components/ui/TiltedCarousel";
+
+const primaryButton = {
+  href: "#contact",
+  text: "Get Your Personalized Demo"
+};
+const secondaryButton = {
+  href: "#demo",
+  text: "Watch AI Receptionist Demo"
+};
+
+const HeroBillboardTiltedCarousel = () => {
+  return (
+    <section className="relative w-full min-h-[90vh] flex items-center justify-center bg-background overflow-hidden pt-24 pb-16">
+      {/* Background Effects */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-primary-cta/20 blur-[120px] rounded-full opacity-50" />
+        <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-secondary-cta/10 blur-[100px] rounded-full opacity-30" />
+        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay"></div>
+      </div>
+
+      <div className="w-content-width mx-auto relative z-10 flex flex-col items-center text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-8"
+        >
+          <Tag text="YOURSMATE™" className="bg-card border border-white/10 text-accent px-4 py-1.5 rounded-full text-sm font-medium tracking-wide" />
+        </motion.div>
+
+        <div className="max-w-5xl mx-auto mb-8">
+          <TextAnimation 
+            text="We Build Businesses That Run Even When You Don't." 
+            variant="fade-blur" 
+            tag="h1" 
+            className="text-5xl md:text-7xl font-bold text-foreground tracking-tight leading-[1.1]"
+            gradientText={false}
+          />
+        </div>
+
+        <motion.p 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="text-lg md:text-xl text-accent max-w-3xl mx-auto mb-12 leading-relaxed"
+        >
+          Stop losing revenue to missed calls and manual tasks. We build complete AI-powered Business Operating Systems that answer your calls, book appointments, automate follow-ups, collect Google reviews, manage customers, and help your business generate more revenue—even when you're away.
+        </motion.p>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="flex flex-col sm:flex-row items-center gap-4"
+        >
+          <Button 
+            text={primaryButton.text} 
+            href={primaryButton.href} 
+            variant="primary"
+            className="px-8 py-4 text-lg rounded-full shadow-[0_0_30px_rgba(124,92,255,0.3)] hover:shadow-[0_0_40px_rgba(124,92,255,0.5)] transition-all"
+          />
+          <Button 
+            text={secondaryButton.text} 
+            href={secondaryButton.href} 
+            variant="secondary"
+            className="px-8 py-4 text-lg rounded-full border border-white/10 transition-all flex items-center gap-2"
+          />
+        </motion.div>
+
+        {/* Dashboard Preview */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.5 }}
+          className="mt-20 w-full max-w-6xl relative"
+        >
+          <div className="absolute -inset-1 bg-gradient-to-r from-primary-cta to-secondary-cta rounded-2xl blur opacity-20"></div>
+          <div className="relative rounded-2xl border border-white/10 bg-card/80 backdrop-blur-xl overflow-hidden shadow-2xl">
+            <div className="flex items-center px-4 py-3 border-b border-white/10 bg-black/40">
+              <div className="flex gap-2">
+                <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
+                <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
+                <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
+              </div>
+              <div className="mx-auto text-xs text-accent font-mono">yoursmate.com/system</div>
+            </div>
+            <img 
+              src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2940&auto=format&fit=crop" 
+              alt="Business Operating System Dashboard" 
+              className="w-full h-auto object-cover opacity-80 mix-blend-luminosity hover:mix-blend-normal transition-all duration-700"
+            />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroBillboardTiltedCarousel />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,38 @@
+// 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 MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsSimpleCards
+          tag="Measurable Results"
+          title="ROI You Can See"
+          description="Your growth, quantified by intelligent automation."
+          metrics={[
+            {
+              value: "100%",
+              description: "Call Coverage",
+            },
+            {
+              value: "40%",
+              description: "Time Saved",
+            },
+            {
+              value: "2.5x",
+              description: "Revenue Lift",
+            },
+            {
+              value: "0",
+              description: "Missed Leads",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/PremiumHamper.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import TextAnimation from '@/components/ui/TextAnimation';
+import Tag from '@/components/ui/Tag';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import ButtonBounce from '@/components/ui/ButtonBounce';
+import BorderGlow from '@/components/ui/BorderGlow';
+
+export default function PremiumHamperSection() {
+  return (
+    <section data-webild-section="premium-hamper" id="premium-hamper" className="relative w-full bg-card overflow-hidden">
+      {/* Decorative background elements */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-primary-cta/10 rounded-full blur-[120px] pointer-events-none" />
+      
+      <div className="w-content-width mx-auto relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 items-center">
+          <ScrollReveal variant="slide-up">
+            <div className="space-y-8">
+              <Tag text="The Onboarding Experience" />
+              
+              <div className="space-y-4">
+                <TextAnimation
+                  text="Your Premium Welcome Hamper"
+                  variant="fade-blur"
+                  tag="h2"
+                  className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground"
+                  gradientText={false}
+                />
+                <p className="text-xl text-accent leading-relaxed">
+                  Joining YourSmate™ isn't just a software upgrade—it's a physical transformation of your business presence. Every new partner receives our signature luxury onboarding kit.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                <div className="relative h-full">
+                  <BorderGlow className="absolute inset-0 rounded-xl pointer-events-none" />
+                  <div className="relative p-6 bg-background/50 backdrop-blur-sm rounded-xl border border-white/5 h-full">
+                    <h4 className="text-lg font-bold text-foreground mb-2">NFC Smart Cards</h4>
+                    <p className="text-sm text-accent">Premium metal NFC cards for instant review collection and contact sharing with a single tap.</p>
+                  </div>
+                </div>
+                
+                <div className="relative h-full">
+                  <BorderGlow className="absolute inset-0 rounded-xl pointer-events-none" />
+                  <div className="relative p-6 bg-background/50 backdrop-blur-sm rounded-xl border border-white/5 h-full">
+                    <h4 className="text-lg font-bold text-foreground mb-2">Acrylic Stands</h4>
+                    <p className="text-sm text-accent">Elegant desk and counter displays with QR codes, seamlessly blending into your luxury environment.</p>
+                  </div>
+                </div>
+                
+                <div className="relative sm:col-span-2 h-full">
+                  <BorderGlow className="absolute inset-0 rounded-xl pointer-events-none" />
+                  <div className="relative p-6 bg-background/50 backdrop-blur-sm rounded-xl border border-white/5 h-full">
+                    <h4 className="text-lg font-bold text-foreground mb-2">Bespoke Packaging</h4>
+                    <p className="text-sm text-accent">Delivered in a matte-black, soft-touch magnetic box that sets the tone for our premium partnership.</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="pt-4">
+                <ButtonBounce text="Claim Your Hamper Today" variant="primary" href="#contact" />
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade-blur" delay={0.2}>
+            <div className="relative">
+              <div className="absolute inset-0 bg-gradient-to-tr from-primary-cta/20 to-transparent rounded-theme blur-2xl" />
+              <div className="relative rounded-theme overflow-hidden border border-white/10 shadow-2xl">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FMpRnLWS92KdwJDXGXZYRZiidr/uploaded-1781894905664-vxmhshzv.jpg" 
+                  className="w-full h-full object-cover aspect-[4/5] lg:aspect-square"
+                />
+                {/* Overlay gradient for luxury feel */}
+                <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/ReputationManagement.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import TextAnimation from '@/components/ui/TextAnimation';
+import Tag from '@/components/ui/Tag';
+import RatingStars from '@/components/ui/RatingStars';
+import { Star } from 'lucide-react';
+
+export default function ReputationManagementSection() {
+  return (
+    <div data-webild-section="reputation-management" id="reputation-management">
+      <section className="relative w-full py-24 bg-background">
+        <div className="w-content-width mx-auto">
+          <div className="flex flex-col items-center text-center mb-16">
+            <ScrollReveal variant="fade">
+              <Tag text="Reputation Management" icon={Star} className="mb-6" />
+            </ScrollReveal>
+            <TextAnimation
+              text="Automated 5-Star Reviews"
+              variant="fade-blur"
+              tag="h2"
+              className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+              gradientText={false}
+            />
+            <ScrollReveal variant="fade" delay={0.2}>
+              <p className="text-lg text-accent max-w-2xl mx-auto">
+                Turn happy customers into your best marketing asset. Our system automatically requests and collects Google Reviews after successful interactions, boosting your local SEO and trust.
+              </p>
+            </ScrollReveal>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                name: "Sarah Jenkins",
+                role: "Local Customer",
+                quote: "The booking process was incredibly smooth, and the service was top-notch. Highly recommend!",
+                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/smiling-doctor-sitting-isolated-grey_651396-917.jpg"
+              },
+              {
+                name: "Mark Thompson",
+                role: "Verified Buyer",
+                quote: "I was amazed by how quickly they responded to my inquiry. The AI assistant was very helpful.",
+                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/face-happy-male-executive-looking-camera-smiling_1262-14920.jpg"
+              },
+              {
+                name: "Jessica Lee",
+                role: "Client",
+                quote: "Fantastic experience from start to finish. The automated reminders kept me on track.",
+                rating: 5,
+                imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-illustrator-drawing-tablet_23-2150040139.jpg"
+              }
+            ].map((review, index) => (
+              <ScrollReveal key={index} delay={0.1 * index} variant="slide-up">
+                <div className="card p-8 h-full flex flex-col">
+                  <RatingStars rating={review.rating} className="mb-6" />
+                  <p className="text-foreground text-lg mb-8 flex-grow">"{review.quote}"</p>
+                  <div className="flex items-center gap-4">
+                    <img src={review.imageSrc} alt={review.name} className="w-12 h-12 rounded-full object-cover" />
+                    <div>
+                      <h4 className="text-foreground font-semibold">{review.name}</h4>
+                      <p className="text-accent text-sm">{review.role}</p>
+                    </div>
+                  </div>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,21 @@
+// 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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialQuoteCards
+        tag="Success Stories"
+        title="The Results Talk"
+        description="See why top businesses rely on YOURSMATE™ to automate their operations."
+        testimonials={[{"name":"Dr. Sarah Johnson","role":"Lead Dentist, SmileCare Clinic","imageSrc":"http://img.b2bpic.net/free-photo/smiling-doctor-sitting-isolated-grey_651396-917.jpg","quote":"We stopped losing patients overnight. The AI booking system is a total game changer for our clinic."},{"imageSrc":"http://img.b2bpic.net/free-photo/welcome-our-restaurant_1098-15702.jpg","quote":"My staff focuses on the food now, not the phone. The automation handles everything perfectly.","name":"Michael Chen","role":"Owner, The Golden Wok"},{"imageSrc":"http://img.b2bpic.net/free-photo/boardroom-office-space-with-desks-stationary-tools-used-everyday-executive-tasks-company-department-place-empty-startup-coworking-space-small-business-decorations_482257-70394.jpg","quote":"Leads get qualified while I'm out showing houses. The system pays for itself in the first week.","name":"Emily Rodriguez","role":"Senior Broker, Horizon Realty"},{"imageSrc":"http://img.b2bpic.net/free-photo/medium-shot-illustrator-drawing-tablet_23-2150040139.jpg","quote":"The whitelabel automation is exactly what my clients needed. Incredible recurring revenue boost.","role":"Founder, Elevate Digital","name":"David Kim"},{"imageSrc":"http://img.b2bpic.net/free-photo/face-happy-male-executive-looking-camera-smiling_1262-14920.jpg","quote":"The reporting and CRM sync has transformed our internal efficiency. A must-have for growing teams.","role":"Operations Director, Nexus Corp","name":"Priya Sharma"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/TrustedBy.tsx

@@ -0,0 +1,46 @@
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import TextAnimation from '@/components/ui/TextAnimation';
+import LoopCarousel from '@/components/ui/LoopCarousel';
+
+export default function TrustedBySection() {
+  const logos = ["Google", "Microsoft", "Amazon", "Meta", "Apple", "Netflix"];
+
+  return (
+    <div data-webild-section="trusted-by" id="trusted-by">
+      <section className="relative w-full py-24 bg-background">
+        <div className="w-content-width mx-auto flex flex-col items-center gap-12">
+          <div className="text-center">
+            <TextAnimation 
+              text="Trusted By" 
+              variant="fade-blur" 
+              tag="span" 
+              className="text-sm font-bold tracking-widest uppercase text-accent" 
+              gradientText={false} 
+            />
+            <TextAnimation 
+              text="Industry Leaders Trust YOURSMATE™" 
+              variant="slide-up" 
+              tag="h2" 
+              className="text-3xl md:text-4xl font-bold text-foreground mt-4" 
+              gradientText={false} 
+            />
+          </div>
+          
+          <ScrollReveal variant="fade-blur" delay={0.2} className="w-full overflow-hidden">
+            <LoopCarousel>
+              <div className="flex items-center gap-16 md:gap-24 pr-16 md:pr-24">
+                {logos.map((logo, index) => (
+                  <div key={index} className="flex items-center justify-center">
+                    <span className="text-2xl md:text-4xl font-bold text-accent opacity-50 hover:opacity-100 transition-opacity duration-300">
+                      {logo}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </LoopCarousel>
+          </ScrollReveal>
+        </div>
+      </section>
+    </div>
+  );
+}