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,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk: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";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0B0B0F;
-  --card: #121216;
-  --foreground: #F7F4EE;
-  --primary-cta: #7C5CFF;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #18D5C2;
-  --secondary-cta-text: #0B0B0F;
-  --accent: #D8D8D8;
-  --background-accent: #7C5CFF;
+  --background: #0a0a0a;
+  --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,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Inter', sans-serif;
+  --font-sans: 'Nunito Sans', sans-serif;
   --font-tight: "Space Grotesk", sans-serif;
   --font-mono: monospace;
 
@@ -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

@@ -13,19 +13,33 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
-import TrustedBySection from './HomePage/sections/TrustedBy';export default function HomePage(): React.JSX.Element {
+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 (
 <>
   <HeroSection />
       <TrustedBySection />
+      <BusinessProblemsSection />
+      <AiDemosSection />
+      <AutomationShowcaseSection />
+      <PremiumHamperSection />
 
   <AboutSection />
 
   <FeaturesSection />
+      <FeaturesArrowCardsSection />
 
   <MetricsSection />
 
   <TestimonialsSection />
+      <ReputationManagementSection />
+      <CrmDashboardSection />
 
   <FaqSection />
 

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/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

@@ -1,38 +1,120 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "faq" section.
+/* 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";
 
-import React from 'react';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+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);
+  };
 
-export default function FaqSection(): React.JSX.Element {
   return (
-    <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>
+    <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/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

@@ -51,7 +51,7 @@ const HeroBillboardTiltedCarousel = () => {
           transition={{ duration: 0.5, delay: 0.2 }}
           className="text-lg md:text-xl text-accent max-w-3xl mx-auto mb-12 leading-relaxed"
         >
-          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.
+          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 
@@ -70,7 +70,7 @@ const HeroBillboardTiltedCarousel = () => {
             text={secondaryButton.text} 
             href={secondaryButton.href} 
             variant="secondary"
-            className="px-8 py-4 text-lg rounded-full bg-card border border-white/10 hover:bg-white/5 transition-all flex items-center gap-2"
+            className="px-8 py-4 text-lg rounded-full border border-white/10 transition-all flex items-center gap-2"
           />
         </motion.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

@@ -10,42 +10,11 @@ export default function TestimonialsSection(): React.JSX.Element {
     <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",
-            },
-          ]}
-        />
+        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>
   );