|
1 | 1 | import { |
2 | | - Accordion, |
3 | | - AccordionContent, |
4 | | - AccordionItem, |
5 | | - AccordionTrigger, |
6 | | -} from "@/components/ui/accordion"; |
| 2 | + Accordion, |
| 3 | + AccordionContent, |
| 4 | + AccordionItem, |
| 5 | + AccordionTrigger, |
| 6 | +} from '@/components/ui/accordion'; |
7 | 7 |
|
8 | 8 | const faqs = [ |
9 | | - { |
10 | | - question: "How is Databuddy different from Google Analytics?", |
11 | | - answer: |
12 | | - "Databuddy is built for privacy-first analytics with no cookies required, making it GDPR and CCPA compliant out of the box. Our script is 65x faster than GA4, with a <1KB footprint that won't impact your Core Web Vitals.", |
13 | | - }, |
14 | | - { |
15 | | - question: "Do I need to add cookie consent banners?", |
16 | | - answer: |
17 | | - "No. Databuddy's analytics are completely cookieless, using privacy-preserving techniques to provide accurate analytics without tracking individual users. Our customers typically see a 30% increase in conversion rates after removing those intrusive cookie banners.", |
18 | | - }, |
19 | | - { |
20 | | - question: "What's included in the free plan?", |
21 | | - answer: |
22 | | - "Our free plan includes up to 50,000 monthly pageviews, real-time analytics, basic event tracking, and 30-day data retention. It's perfect for small websites, personal projects, or to test Databuddy before upgrading.", |
23 | | - }, |
24 | | - { |
25 | | - question: "How easy is it to implement Databuddy?", |
26 | | - answer: |
27 | | - "Implementation takes less than 5 minutes for most websites. Simply add our lightweight script to your site (we provide easy integrations for Next.js, React, WordPress, Shopify, and more), and you'll start seeing data immediately.", |
28 | | - }, |
| 9 | + { |
| 10 | + question: 'How is Databuddy different from Google Analytics?', |
| 11 | + answer: |
| 12 | + "Databuddy is built for privacy-first analytics with no cookies required, making it GDPR and CCPA compliant out of the box. Our script is 65x faster than GA4, with a <1KB footprint that won't impact your Core Web Vitals.", |
| 13 | + }, |
| 14 | + { |
| 15 | + question: 'Do I need to add cookie consent banners?', |
| 16 | + answer: |
| 17 | + "No. Databuddy's analytics are completely cookieless, using privacy-preserving techniques to provide accurate analytics without tracking individual users. Our customers typically see a 30% increase in conversion rates after removing those intrusive cookie banners.", |
| 18 | + }, |
| 19 | + { |
| 20 | + question: "What's included in the free plan?", |
| 21 | + answer: |
| 22 | + "Our free plan includes up to 10,000 monthly events, real-time analytics, basic event tracking, It's perfect for small websites, personal projects, or to test Databuddy before upgrading.", |
| 23 | + }, |
| 24 | + { |
| 25 | + question: 'How easy is it to implement Databuddy?', |
| 26 | + answer: |
| 27 | + "Implementation takes less than 5 minutes for most websites. Simply add our lightweight script to your site (we provide easy integrations for Next.js, React, WordPress, Shopify, and more), and you'll start seeing data immediately.", |
| 28 | + }, |
29 | 29 | ]; |
30 | 30 |
|
31 | 31 | export default function FAQ() { |
32 | | - return ( |
33 | | - <div className="w-full max-w-5xl mx-auto"> |
34 | | - <div className="space-y-8 lg:space-y-12"> |
35 | | - {/* Header Section */} |
36 | | - <div className="text-center lg:text-left"> |
37 | | - <h2 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-medium leading-tight max-w-2xl mx-auto lg:mx-0"> |
38 | | - Questions we think you might like answers to |
39 | | - </h2> |
40 | | - </div> |
| 32 | + return ( |
| 33 | + <div className="mx-auto w-full max-w-5xl"> |
| 34 | + <div className="space-y-8 lg:space-y-12"> |
| 35 | + {/* Header Section */} |
| 36 | + <div className="text-center lg:text-left"> |
| 37 | + <h2 className="mx-auto max-w-2xl font-medium text-2xl leading-tight sm:text-3xl lg:mx-0 lg:text-4xl xl:text-5xl"> |
| 38 | + Questions we think you might like answers to |
| 39 | + </h2> |
| 40 | + </div> |
41 | 41 |
|
42 | | - {/* FAQ Accordion */} |
43 | | - <div className="w-full"> |
44 | | - <Accordion type="single" collapsible className="w-full space-y-4"> |
45 | | - {faqs.map((faq, index) => ( |
46 | | - <AccordionItem |
47 | | - key={index} |
48 | | - value={`item-${index}`} |
49 | | - className="bg-background/50 hover:bg-background/80 transition-colors duration-200" |
50 | | - > |
51 | | - <AccordionTrigger className="text-left font-medium text-base sm:text-lg lg:text-xl py-4 sm:py-6 hover:no-underline"> |
52 | | - {faq.question} |
53 | | - </AccordionTrigger> |
54 | | - <AccordionContent className="text-muted-foreground text-sm sm:text-base leading-relaxed pb-4 sm:pb-6"> |
55 | | - {faq.answer} |
56 | | - </AccordionContent> |
57 | | - </AccordionItem> |
58 | | - ))} |
59 | | - </Accordion> |
60 | | - </div> |
61 | | - </div> |
62 | | - </div> |
63 | | - ); |
| 42 | + {/* FAQ Accordion */} |
| 43 | + <div className="w-full"> |
| 44 | + <Accordion className="w-full space-y-4" collapsible type="single"> |
| 45 | + {faqs.map((faq) => ( |
| 46 | + <AccordionItem |
| 47 | + className="bg-background/50 transition-colors duration-200 hover:bg-background/80" |
| 48 | + key={faq.question} |
| 49 | + value={faq.question} |
| 50 | + > |
| 51 | + <AccordionTrigger className="py-4 text-left font-medium text-base hover:no-underline sm:py-6 sm:text-lg lg:text-xl"> |
| 52 | + {faq.question} |
| 53 | + </AccordionTrigger> |
| 54 | + <AccordionContent className="pb-4 text-muted-foreground text-sm leading-relaxed sm:pb-6 sm:text-base"> |
| 55 | + {faq.answer} |
| 56 | + </AccordionContent> |
| 57 | + </AccordionItem> |
| 58 | + ))} |
| 59 | + </Accordion> |
| 60 | + </div> |
| 61 | + </div> |
| 62 | + </div> |
| 63 | + ); |
64 | 64 | } |
0 commit comments