142 lines
4.7 KiB
TypeScript
142 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion"
|
|
import { ArrowRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
import Link from "next/link"
|
|
import {
|
|
PublicPageHeader,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
|
|
interface FAQItem {
|
|
question: string
|
|
answer: string
|
|
}
|
|
|
|
interface FAQSectionProps {
|
|
faqs: FAQItem[]
|
|
className?: string
|
|
}
|
|
|
|
export function FAQSection({ faqs, className }: FAQSectionProps) {
|
|
if (!faqs || faqs.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className={cn("py-16 md:py-24 bg-background", className)}>
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow="FAQs"
|
|
title="Frequently asked questions"
|
|
description="Everything you need to know about our vending machine services."
|
|
className="mb-12 md:mb-16"
|
|
/>
|
|
|
|
<PublicSurface className="space-y-4 p-4 md:p-5">
|
|
<Accordion type="single" collapsible className="w-full space-y-4">
|
|
{faqs.map((faq, index) => (
|
|
<AccordionItem
|
|
key={index}
|
|
value={`item-${index}`}
|
|
className="group border-none"
|
|
>
|
|
<AccordionTrigger
|
|
className="
|
|
relative
|
|
px-6 py-5
|
|
text-left
|
|
bg-white/95
|
|
border border-border/60
|
|
rounded-[1.5rem]
|
|
shadow-[0_10px_28px_rgba(15,23,42,0.06)]
|
|
hover:border-primary/30
|
|
transition-all duration-300
|
|
hover:bg-muted/30
|
|
data-[state=open]:bg-muted/30
|
|
data-[state=open]:border-primary/30
|
|
data-[state=open]:shadow-[0_16px_38px_rgba(15,23,42,0.08)]
|
|
no-underline
|
|
"
|
|
>
|
|
<div className="flex items-start gap-4 flex-1 pr-8">
|
|
<div
|
|
className="
|
|
flex-shrink-0
|
|
w-10 h-10
|
|
rounded-lg
|
|
bg-secondary/10
|
|
flex items-center justify-center
|
|
group-hover:bg-secondary/20
|
|
transition-all duration-300
|
|
group-data-[state=open]:bg-secondary/20
|
|
"
|
|
>
|
|
<span className="text-sm font-bold text-secondary">
|
|
{String(index + 1).padStart(2, "0")}
|
|
</span>
|
|
</div>
|
|
<span
|
|
className="
|
|
text-base md:text-lg
|
|
font-semibold
|
|
text-foreground
|
|
group-hover:text-primary
|
|
transition-colors duration-300
|
|
group-data-[state=open]:text-primary
|
|
"
|
|
>
|
|
{faq.question}
|
|
</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent
|
|
className="
|
|
px-6 py-4
|
|
text-muted-foreground
|
|
leading-relaxed
|
|
bg-white/95
|
|
border-x border-b border-border/60
|
|
rounded-b-[1.5rem]
|
|
border-t-0
|
|
shadow-[0_10px_28px_rgba(15,23,42,0.06)]
|
|
mt-[-1px]
|
|
"
|
|
>
|
|
<div
|
|
className="prose prose-sm max-w-none prose-headings:text-foreground prose-a:text-secondary hover:prose-a:text-secondary prose-strong:text-foreground prose-ul:list-disc prose-ol:list-decimal prose-li:my-2"
|
|
dangerouslySetInnerHTML={{ __html: faq.answer }}
|
|
/>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</PublicSurface>
|
|
|
|
{/* Footer CTA */}
|
|
<div className="mt-12 text-center">
|
|
<p className="text-muted-foreground mb-4">Still have questions?</p>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="rounded-full font-semibold shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl"
|
|
>
|
|
<Link href="/contact-us" className="inline-flex items-center gap-2">
|
|
Contact Us
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|