From 86d95da3c65b159e29c0d9c0af2d534d2ae56c59 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 8 Jun 2026 12:00:37 +0000
Subject: [PATCH] Bob AI: Added an image to each FAQ item in the accordion.

---
 src/pages/HomePage/sections/Faq.tsx | 221 ++++++++++++++++++++++------
 1 file changed, 176 insertions(+), 45 deletions(-)

diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
index 02125ad..d8cd51d 100644
--- a/src/pages/HomePage/sections/Faq.tsx
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -1,50 +1,181 @@
-// 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 Button from "@/components/ui/Button";
+import SelectorButton from "@/components/ui/SelectorButton";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Transition from "@/components/ui/Transition";
+import Accordion from "@/components/ui/Accordion";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
-import React from 'react';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+const categories = [
+  {
+    name: "Ordering & Delivery",
+    items: [
+      {
+        question: "How do I place an online order?",
+        answer: "Simply navigate to our 'Order Now' section, select your desired items, choose pickup or delivery, and complete the checkout process. It's fast and easy!",
+        imageSrc: "https://picsum.photos/seed/1641414566/1200/800"
+      },
+      {
+        question: "What are your delivery hours and areas?",
+        answer: "We offer delivery Tuesday to Saturday, from 9 AM to 5 PM, within a 10-mile radius of our bakery. Minimum order value may apply.",
+        imageSrc: "https://picsum.photos/seed/1453898156/1200/800"
+      },
+      {
+        question: "Can I pick up my order in-store?",
+        answer: "Yes! Select 'Pickup' at checkout and choose a convenient time slot during our operating hours (8 AM - 6 PM, Tuesday to Saturday).",
+        imageSrc: "https://picsum.photos/seed/1876617433/1200/800"
+      }
+    ]
+  },
+  {
+    name: "Products & Customization",
+    items: [
+      {
+        question: "Do you offer gluten-free or vegan options?",
+        answer: "Yes, we have a selection of delicious gluten-free and vegan items. Please check our online menu or ask our staff for today's specials.",
+        imageSrc: "https://picsum.photos/seed/881220485/1200/800"
+      },
+      {
+        question: "How do I order a custom cake?",
+        answer: "For custom cakes, please fill out our inquiry form or call us directly. We'll discuss your design, flavor preferences, and provide a personalized quote.",
+        imageSrc: "https://picsum.photos/seed/1225091836/1200/800"
+      },
+      {
+        question: "Is your daily inventory updated online?",
+        answer: "While our full menu is online, daily specials and limited-time items are best confirmed by calling our store directly. We bake fresh every morning!",
+        imageSrc: "https://picsum.photos/seed/286713376/1200/800"
+      }
+    ]
+  },
+  {
+    name: "Loyalty & Rewards",
+    items: [
+      {
+        question: "How can I join your loyalty program?",
+        answer: "Sign up for our newsletter and create an account online to automatically join our loyalty program. Earn points with every purchase and enjoy exclusive discounts and offers!",
+        imageSrc: "https://picsum.photos/seed/509284976/1200/800"
+      },
+      {
+        question: "What kind of rewards do you offer?",
+        answer: "Our loyalty program offers discounts, free treats, early access to new products, and special birthday surprises!",
+        imageSrc: "https://picsum.photos/seed/412388744/1200/800"
+      }
+    ]
+  }
+];
 
-export default function FaqSection(): React.JSX.Element {
-  return (
-    <div id="faq" data-section="faq">
-        <SectionErrorBoundary name="faq">
-              <FaqTabbedAccordion
-          tag="Your Questions, Answered"
-          title="Got a Craving? We've Got Answers!"
-          description="Find quick answers to the most common questions about our products, ordering process, custom requests, and more."
-          categories={[
-            {
-              name: "Ordering & Delivery",          items: [
-                {
-                  question: "How do I place an online order?",              answer: "Simply navigate to our 'Order Now' section, select your desired items, choose pickup or delivery, and complete the checkout process. It's fast and easy!"},
-                {
-                  question: "What are your delivery hours and areas?",              answer: "We offer delivery Tuesday to Saturday, from 9 AM to 5 PM, within a 10-mile radius of our bakery. Minimum order value may apply."},
-                {
-                  question: "Can I pick up my order in-store?",              answer: "Yes! Select 'Pickup' at checkout and choose a convenient time slot during our operating hours (8 AM - 6 PM, Tuesday to Saturday)."},
-              ],
-            },
-            {
-              name: "Products & Customization",          items: [
-                {
-                  question: "Do you offer gluten-free or vegan options?",              answer: "Yes, we have a selection of delicious gluten-free and vegan items. Please check our online menu or ask our staff for today's specials."},
-                {
-                  question: "How do I order a custom cake?",              answer: "For custom cakes, please fill out our inquiry form or call us directly. We'll discuss your design, flavor preferences, and provide a personalized quote."},
-                {
-                  question: "Is your daily inventory updated online?",              answer: "While our full menu is online, daily specials and limited-time items are best confirmed by calling our store directly. We bake fresh every morning!"},
-              ],
-            },
-            {
-              name: "Loyalty & Rewards",          items: [
-                {
-                  question: "How can I join your loyalty program?",              answer: "Sign up for our newsletter and create an account online to automatically join our loyalty program. Earn points with every purchase and enjoy exclusive discounts and offers!"},
-                {
-                  question: "What kind of rewards do you offer?",              answer: "Our loyalty program offers discounts, free treats, early access to new products, and special birthday surprises!"},
-              ],
-            },
-          ]}
-        />
-        </SectionErrorBoundary>
+type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+type FaqCategory = {
+  name: string;
+  items: FaqItem[];
+};
+
+interface FaqTabbedAccordionProps {
+  tag: string;
+  title: string;
+  description: string;
+  categories: FaqCategory[];
+  cta?: {
+    name: string;
+    role: string;
+    buttonText: string;
+    buttonHref: string;
+  } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+}
+
+const FaqInline = () => {
+  const [activeCategory, setActiveCategory] = useState(categories[0]?.name || "");
+
+  const currentItems = categories.find((c) => c.name === activeCategory)?.items || [];
+  const accordionItems = currentItems.map((item) => ({ 
+    title: item.question, 
+    content: (
+      <div className="flex flex-col gap-4">
+        <p>{item.answer}</p>
+        {item.imageSrc && (
+          <div className="w-full h-48 md:h-64 rounded-md overflow-hidden">
+            <ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
+          </div>
+        )}
       </div>
+    )
+  }));
+
+  return (
+    <section aria-label="FAQ section" className="py-20">
+      <div className="w-content-width mx-auto">
+        <div className="card rounded flex flex-col gap-6 md:gap-10 p-6 md:p-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>{"Your Questions, Answered"}</p>
+            </div>
+
+            <TextAnimation
+              text={"Got a Craving? We've Got Answers!"}
+              variant="fade"
+              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={"Find quick answers to the most common questions about our products, ordering process, custom requests, and more."}
+              variant="fade"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+            />
+
+            <SelectorButton
+              options={categories.map((c) => ({ value: c.name, label: c.name }))}
+              activeValue={activeCategory}
+              onValueChange={setActiveCategory}
+              className="mt-2 md:mt-3"
+            />
+          </div>
+
+          <ScrollReveal variant="fade-blur">
+            <Transition key={activeCategory} whileInView={false} className="">
+              <Accordion items={accordionItems} />
+            </Transition>
+          </ScrollReveal>
+
+          {undefined && (
+            <>
+              <div className="w-full h-px bg-foreground/5" />
+              <div className="flex flex-col md:flex-row md:items-center gap-6 justify-between">
+                <div className="flex items-center gap-3">
+                  <ImageOrVideo
+                    imageSrc={undefined.imageSrc}
+                    videoSrc={undefined.videoSrc}
+                    className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
+                  />
+                  <div className="flex flex-col min-w-0">
+                    <span className="text-base text-foreground font-semibold leading-snug truncate">{undefined.name}</span>
+                    <span className="text-base text-foreground/75 leading-snug truncate">{undefined.role}</span>
+                  </div>
+                </div>
+                <Button text={undefined.buttonText} href={undefined.buttonHref} variant="primary" />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function FaqSection() {
+  return (
+    <div data-webild-section="faq" id="faq">
+      <FaqInline />
+    </div>
   );
 }
-- 
2.49.1