150 lines
5.1 KiB
TypeScript
150 lines
5.1 KiB
TypeScript
'use client'
|
|
|
|
import * as React from "react"
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion"
|
|
import { HelpCircle, ArrowRight } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import Link from "next/link"
|
|
|
|
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-gradient-to-b from-background via-background to-muted/20", className)}>
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
{/* Header */}
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-primary to-secondary mb-6 shadow-lg animate-pulse">
|
|
<HelpCircle className="w-8 h-8 text-primary-foreground" />
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Everything you need to know about our vending machine services
|
|
</p>
|
|
</div>
|
|
|
|
{/* FAQ Accordion */}
|
|
<div className="space-y-4">
|
|
<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-card
|
|
border border-border
|
|
rounded-xl
|
|
shadow-sm
|
|
hover:shadow-md
|
|
hover:border-primary/50
|
|
transition-all duration-300
|
|
hover:bg-accent/50
|
|
data-[state=open]:bg-accent/50
|
|
data-[state=open]:border-primary
|
|
data-[state=open]:shadow-lg
|
|
data-[state=open]:shadow-primary/10
|
|
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-gradient-to-br from-primary/10 to-secondary/10
|
|
flex items-center justify-center
|
|
group-hover:from-primary/20 group-hover:to-secondary/20
|
|
transition-all duration-300
|
|
group-data-[state=open]:from-primary/20 group-data-[state=open]:to-secondary/20
|
|
">
|
|
<span className="text-sm font-bold text-primary">
|
|
{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-card
|
|
border-x border-b border-border
|
|
rounded-b-xl
|
|
border-t-0
|
|
shadow-sm
|
|
mt-[-1px]
|
|
">
|
|
<div
|
|
className="prose prose-sm max-w-none prose-headings:text-foreground prose-a:text-primary prose-strong:text-foreground prose-ul:list-disc prose-ol:list-decimal prose-li:my-2"
|
|
dangerouslySetInnerHTML={{ __html: faq.answer }}
|
|
/>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
|
|
{/* Footer CTA */}
|
|
<div className="mt-12 text-center">
|
|
<p className="text-muted-foreground mb-4">
|
|
Still have questions?
|
|
</p>
|
|
<Link
|
|
href="/contact-us"
|
|
className="
|
|
inline-flex
|
|
items-center
|
|
gap-2
|
|
px-6 py-3
|
|
rounded-lg
|
|
bg-gradient-to-r from-primary to-secondary
|
|
text-primary-foreground
|
|
font-semibold
|
|
shadow-lg
|
|
hover:shadow-xl
|
|
hover:scale-105
|
|
transition-all duration-300
|
|
"
|
|
>
|
|
Contact Us
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|