77 lines
2.4 KiB
Svelte
77 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
interface FAQProps {
|
|
question: string;
|
|
answer: string;
|
|
value: string;
|
|
}
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from '@/components/ui/accordion';
|
|
|
|
const FAQList: FAQProps[] = [
|
|
{
|
|
question: 'Is this template free?',
|
|
answer: 'Yes. It is a free Shadcn/Svelte template.',
|
|
value: 'item-1',
|
|
},
|
|
{
|
|
question:
|
|
'Duis aute irure dolor in reprehenderit in voluptate velit?',
|
|
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore quidem quam consectetur sapiente, iste rerum reiciendis animi nihil nostrum sit quo, modi quod.',
|
|
value: 'item-2',
|
|
},
|
|
{
|
|
question:
|
|
'Lorem ipsum dolor sit amet Consectetur natus dolor minus quibusdam?',
|
|
answer: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore qui nostrum reiciendis veritatis.',
|
|
value: 'item-3',
|
|
},
|
|
{
|
|
question: 'Excepteur sint occaecat cupidata non proident sunt?',
|
|
answer: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit.',
|
|
value: 'item-4',
|
|
},
|
|
{
|
|
question:
|
|
'Enim ad minim veniam, quis nostrud exercitation ullamco laboris?',
|
|
answer: 'consectetur adipisicing elit. Sint labore.',
|
|
value: 'item-5',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<section id="faq" class="container md:w-175 py-24 sm:py-32">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-lg text-primary text-center mb-2 tracking-wider">
|
|
FAQS
|
|
</h2>
|
|
<h2 class="text-3xl md:text-4xl text-center font-bold">
|
|
Common Questions
|
|
</h2>
|
|
</div>
|
|
|
|
<Accordion type="single" class="w-full">
|
|
{#each FAQList as { question, answer, value }}
|
|
<AccordionItem {value}>
|
|
<AccordionTrigger class="text-left">
|
|
{question}
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
{answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
{/each}
|
|
</Accordion>
|
|
|
|
<h3 class="font-medium mt-4">
|
|
Still have questions?
|
|
<a href="#contact" class="text-muted-foreground">
|
|
<span class="underline">Contact us</span>
|
|
</a>
|
|
</h3>
|
|
</section>
|