Merge version_11_1780919855741 into main #8
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user