Merge version_22_1781900069686 into main

Merge version_22_1781900069686 into main

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

@@ -15,21 +15,31 @@ import ContactSection from './HomePage/sections/Contact';
 
 import TrustedBySection from './HomePage/sections/TrustedBy';
 import BusinessProblemsSection from './HomePage/sections/BusinessProblems';
-import AiDemosSection from './HomePage/sections/AiDemos';export default function HomePage(): React.JSX.Element {
+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/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/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/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>
+  );
+}