93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from '@/components/ui/accordion';
|
|
import { Button } from '@/components/ui/button';
|
|
import Layout from '@/layouts/client/layout';
|
|
import { contact } from '@/routes';
|
|
import img1 from '@asset/img/Bespoke/bes 5.jpg';
|
|
import img4 from '@asset/img/Bespoke/Ree 6.jpg';
|
|
import img3 from '@asset/img/Bespoke/Shrek.jpg';
|
|
import img2 from '@asset/img/Bespoke/Swarovsky embedded wall hang.jpg';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
|
|
export default function Faq({
|
|
faq,
|
|
}: {
|
|
faq: [{ id: number; question: string; answer: string }];
|
|
}) {
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<Head title="FAQs" />
|
|
<section className="mx-auto grid max-w-screen-2xl grid-cols-12 gap-32 px-12 py-8 max-sm:grid-cols-1 max-sm:gap-8 max-sm:px-8">
|
|
<div className="col-span-4 flex flex-col items-start gap-4">
|
|
<div>
|
|
<h1 className="font-serif text-4xl font-medium tracking-tight">
|
|
Frequently Asked Questions
|
|
</h1>
|
|
<p>Any question, answered right here</p>
|
|
</div>
|
|
<Link href={contact()}>
|
|
<Button
|
|
className="cursor-pointer border border-primary font-serif ring-primary"
|
|
variant={'outline'}
|
|
>
|
|
Contact Now
|
|
</Button>
|
|
</Link>
|
|
|
|
<div className="mt-8 grid grid-cols-2 gap-2 max-sm:mt-2 max-sm:hidden">
|
|
<div className="flex flex-col gap-2">
|
|
<img
|
|
src={img1}
|
|
alt="Image 1"
|
|
className="rounded-lg"
|
|
/>
|
|
<img
|
|
src={img4}
|
|
alt="Image 4"
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
<div className="mt-8 flex flex-col gap-2">
|
|
<img
|
|
src={img2}
|
|
alt="Image 2"
|
|
className="rounded-lg"
|
|
/>
|
|
<img
|
|
src={img3}
|
|
alt="Image 3"
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-8 w-full">
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
className="w-full"
|
|
defaultValue="1"
|
|
>
|
|
{faq.map((item) => (
|
|
<AccordionItem value={`${item.id}`}>
|
|
<AccordionTrigger className="w-full">
|
|
{item?.question}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-2 text-gray-600">
|
|
{item?.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|