1"use client";
2
3import { ArrowRight } from "lucide-react";
4
5const faqs = [
6  {
7    question: "How do I get started with the platform?",
8    answer:
9      "Getting started is simple. Sign up for an account, complete the quick onboarding process, and you'll have access to all features immediately. Our dashboard guides you through the setup.",
10  },
11  {
12    question: "What kind of analytics do you provide?",
13    answer:
14      "We offer comprehensive analytics including real-time data tracking, custom reports, user behavior insights, and performance metrics. All data is presented in intuitive visualizations.",
15  },
16  {
17    question: "Can I integrate with other tools?",
18    answer:
19      "Absolutely. We support integrations with over 50+ popular tools including Slack, GitHub, Notion, and more. Our API also allows for custom integrations.",
20  },
21  {
22    question: "What security measures are in place?",
23    answer:
24      "We take security seriously with enterprise-grade encryption, SOC 2 compliance, regular security audits, and GDPR compliance. Your data is protected with the highest standards.",
25  },
26];
27
28export const FaqGrid = () => {
29  return (
30    <div className="w-full min-h-screen bg-background flex items-center justify-center p-8">
31      <div className="w-full max-w-6xl">
32        <div className="text-center mb-14">
33          <h2 className="mt-4 text-4xl font-semibold text-sky-500/85">
34            Common Questions &amp; Answers
35          </h2>
36          <p className="mt-6 font-medium text-muted-foreground max-w-2xl mx-auto">
37            Find out all the essential details about our platform and how it can
38            serve your needs.
39          </p>
40        </div>
41
42        <div className="mx-auto grid gap-8 md:grid-cols-2 md:gap-12">
43          {faqs.map((faq, index) => (
44            <div key={index} className="flex gap-4">
45              <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-secondary font-mono text-xs text-primary">
46                {index + 1}
47              </span>
48              <div>
49                <h3 className="font-semibold text-foreground/90 tracking-tight mb-2">{faq.question}</h3>
50                <p className="text-sm text-muted-foreground tracking-tight">{faq.answer}</p>
51              </div>
52            </div>
53          ))}
54        </div>
55
56        <div className="mt-12 flex justify-end">
57          <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium tracking-tight hover:bg-muted rounded-xl transition-all duration-300 group">
58            Contact Support
59            <ArrowRight className="size-4.5 transition-transform duration-300 ease-out group-hover:translate-x-2" />
60          </button>
61        </div>
62      </div>
63    </div>
64  );
65};
66