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 & 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