src/pages/HomePage.tsx

@@ -17,7 +17,9 @@ 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';export default function HomePage(): React.JSX.Element {
+import PremiumHamperSection from './HomePage/sections/PremiumHamper';
+import ReputationManagementSection from './HomePage/sections/ReputationManagement';
+import CrmDashboardSection from './HomePage/sections/CrmDashboard';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -34,6 +36,8 @@ import PremiumHamperSection from './HomePage/sections/PremiumHamper';export defa
   <MetricsSection />
 
   <TestimonialsSection />
+      <ReputationManagementSection />
+      <CrmDashboardSection />
 
   <FaqSection />
 

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