CategoriesAllHeroNavigationFooterCall-to-ActionsFeature SectionsTestimonialsPricingContactGalleryStatsFAQServicesNewsletterAuthMiscellaneousButtons
All Components3D Cube InteractionBorder Logo GridCountdownFlip ButtonExpandable FAQsFlow ButtonGlow ButtonGrayscale CarouselInertia Zoom ParallaxLogo Cloud GridMobile Drawer NavigationPixel PreloaderProject GalleryRing ButtonShowcase CarouselSlide PreloaderSliding Stairs PreloaderStormtrooper FAQText Gradient OpacityThreads ButtonTilt HeadlineUltra Preloader
Code
app/page.tsx
1"use client";
2
3import { containerVariants, itemVariants } from "@/anim";
4import {
5 Accordion,
6 AccordionContent,
7 AccordionItem,
8 AccordionTrigger,
9} from "@/components/ui/accordion";
10import { faqData } from "@/constants";
11import { motion } from "framer-motion";
12
13const Faq = () => {
14
15 return (
16 <section className=" w-full min-h-screen flex items-center justify-center bg-white">
17 <div className=" w-full p-1.5 bg-secondary border rounded-xl max-w-2xl mx-auto mt-28 mb-12">
18 <Accordion type="single" className=" flex flex-col gap-1.5" collapsible>
19 <motion.div
20 variants={containerVariants}
21 initial="hidden"
22 animate="visible"
23 className="flex flex-col gap-1.5"
24 >
25 {faqData.map((faq, index) => (
26 <motion.div key={index} variants={itemVariants}>
27 <AccordionItem value={faq.id}>
28 <AccordionTrigger>{faq.question}</AccordionTrigger>
29 <AccordionContent>
30 {faq.answer}
31 </AccordionContent>
32 </AccordionItem>
33 </motion.div>
34 ))}
35 </motion.div>
36 </Accordion>
37 </div>
38 </section>
39 );
40}
41
42export default Faq;Installation
Initialized a project and installed the necessary dependencies to use this component.
1. Initialize a new Next.js project:
npx create-next-app@latest my-app2. Install Framer Motion
npm install framer-motion3. Initialize Shadcn UI
npx shadcn@latest init4. Install Shadcn Components
npx shadcn@latest add accordion buttonAdd Accordion Component
src/components/ui/accordion.tsx
1@import "tailwindcss";
2@import "tw-animate-css";
3
4@custom-variant dark (&:is(.dark *));
5
6@theme inline {
7 --color-background: var(--background);
8 --color-foreground: var(--foreground);
9 --font-sans: var(--font-geist-sans);
10 --font-mono: var(--font-geist-mono);
11 --color-sidebar-ring: var(--sidebar-ring);
12 --color-sidebar-border: var(--sidebar-border);
13 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14 --color-sidebar-accent: var(--sidebar-accent);
15 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16 --color-sidebar-primary: var(--sidebar-primary);
17 --color-sidebar-foreground: var(--sidebar-foreground);
18 --color-sidebar: var(--sidebar);
19 --color-chart-5: var(--chart-5);
20 --color-chart-4: var(--chart-4);
21 --color-chart-3: var(--chart-3);
22 --color-chart-2: var(--chart-2);
23 --color-chart-1: var(--chart-1);
24 --color-ring: var(--ring);
25 --color-input: var(--input);
26 --color-border: var(--border);
27 --color-destructive: var(--destructive);
28 --color-accent-foreground: var(--accent-foreground);
29 --color-accent: var(--accent);
30 --color-muted-foreground: var(--muted-foreground);
31 --color-muted: var(--muted);
32 --color-secondary-foreground: var(--secondary-foreground);
33 --color-secondary: var(--secondary);
34 --color-primary-foreground: var(--primary-foreground);
35 --color-primary: var(--primary);
36 --color-popover-foreground: var(--popover-foreground);
37 --color-popover: var(--popover);
38 --color-card-foreground: var(--card-foreground);
39 --color-card: var(--card);
40 --radius-sm: calc(var(--radius) - 4px);
41 --radius-md: calc(var(--radius) - 2px);
42 --radius-lg: var(--radius);
43 --radius-xl: calc(var(--radius) + 4px);
44}
45
46:root {
47 --radius: 0.625rem;
48 --background: oklch(97.31% 0 0);
49 --foreground: oklch(21.78% 0 0);
50 --card: oklch(1 0 0);
51 --card-foreground: oklch(21.78% 0 0);
52 --popover: oklch(1 0 0);
53 --popover-foreground: oklch(21.78% 0 0);
54 --primary: oklch(39.39% 0.222 263.86);
55 --primary-foreground: oklch(100% 0.00011 271.152);
56 --secondary: oklch(0.97 0 0);
57 --secondary-foreground: oklch(0.205 0 0);
58 --muted: oklch(0.97 0 0);
59 --muted-foreground: oklch(0.556 0 0);
60 --accent: oklch(0.97 0 0);
61 --accent-foreground: oklch(0.205 0 0);
62 --destructive: oklch(0.577 0.245 27.325);
63 --border: oklch(0.922 0 0);
64 --input: oklch(0.922 0 0);
65 --ring: oklch(0.708 0 0);
66 --chart-1: oklch(0.646 0.222 41.116);
67 --chart-2: oklch(0.6 0.118 184.704);
68 --chart-3: oklch(0.398 0.07 227.392);
69 --chart-4: oklch(0.828 0.189 84.429);
70 --chart-5: oklch(0.769 0.188 70.08);
71 --sidebar: oklch(0.985 0 0);
72 --sidebar-foreground: oklch(21.78% 0 0);
73 --sidebar-primary: oklch(0.205 0 0);
74 --sidebar-primary-foreground: oklch(0.985 0 0);
75 --sidebar-accent: oklch(0.97 0 0);
76 --sidebar-accent-foreground: oklch(0.205 0 0);
77 --sidebar-border: oklch(0.922 0 0);
78 --sidebar-ring: oklch(0.708 0 0);
79}
80
81.dark {
82 --background: oklch(0% 0 0);
83 --foreground: oklch(0.985 0 0);
84 --card: oklch(0.205 0 0);
85 --card-foreground: oklch(0.985 0 0);
86 --popover: oklch(15.43% 0 0);
87 --popover-foreground: oklch(0.985 0 0);
88 --primary: oklch(100% 0.00011 271.152);
89 --primary-foreground: oklch(0.205 0 0);
90 --secondary: oklch(0.269 0 0);
91 --secondary-foreground: oklch(0.985 0 0);
92 --muted: oklch(19.13% 0 0);
93 --muted-foreground: oklch(0.708 0 0);
94 --accent: oklch(55.9% 0.238 260.78);
95 --accent-foreground: oklch(0.985 0 0);
96 --destructive: oklch(59.56% 0.234 24.23);
97 --border: oklch(1 0 0 / 10%);
98 --input: oklch(1 0 0 / 15%);
99 --ring: oklch(0.556 0 0);
100 --chart-1: oklch(0.488 0.243 264.376);
101 --chart-2: oklch(0.696 0.17 162.48);
102 --chart-3: oklch(0.769 0.188 70.08);
103 --chart-4: oklch(0.627 0.265 303.9);
104 --chart-5: oklch(0.645 0.246 16.439);
105 --sidebar: oklch(0.205 0 0);
106 --sidebar-foreground: oklch(0.985 0 0);
107 --sidebar-primary: oklch(0.488 0.243 264.376);
108 --sidebar-primary-foreground: oklch(0.985 0 0);
109 --sidebar-accent: oklch(0.269 0 0);
110 --sidebar-accent-foreground: oklch(0.985 0 0);
111 --sidebar-border: oklch(1 0 0 / 10%);
112 --sidebar-ring: oklch(0.556 0 0);
113}
114
115@layer base {
116 * {
117 @apply border-border outline-ring/50;
118 }
119 body {
120 @apply bg-background text-foreground;
121 }
122}
123
124/* Scrollbar */
125
126/* Firefox */
127* {
128 scrollbar-width: none;
129}
130/* Chrome, Edge, and Safari */
131*::-webkit-scrollbar {
132 display: none;
133}
134/* End Scrollbar */Add Constants
src/constants/index.ts
1export const faqData = [
2 {
3 id: "item-1",
4 question: "What is Astrae?",
5 answer:
6 "Astrae is a modern landing page template designed for startups, SaaS, and businesses to create stunning websites quickly.",
7 },
8 {
9 id: "item-2",
10 question: "How do I use Astrae?",
11 answer:
12 "You can use Astrae by downloading the template files and integrating them into your project. Detailed documentation is available.",
13 },
14 {
15 id: "item-3",
16 question: "Is Astrae free?",
17 answer:
18 "Astrae offers both free and premium versions. The free version includes basic features, while the premium version unlocks advanced functionalities.",
19 },
20 {
21 id: "item-4",
22 question: "Can I customize Astrae?",
23 answer:
24 "Yes, Astrae is fully customizable. You can modify styles, layouts, and content to fit your brand's needs.",
25 },
26 {
27 id: "item-5",
28 question: "What happens after I subscribe?",
29 answer:
30 "After subscribing, you'll get instant access to all premium templates, components, and resources. You'll also receive a welcome email with your download links and getting started guide.",
31 },
32 {
33 id: "item-6",
34 question: "Can I cancel anytime?",
35 answer:
36 "Yes, you can cancel your subscription at any time. There are no long-term commitments, and you'll retain access to all downloaded templates even after cancellation.",
37 },
38 {
39 id: "item-7",
40 question: "Do I get access to future templates too?",
41 answer:
42 "Absolutely! Your subscription includes all future template releases. We regularly add new templates and components, and you'll get access to everything as long as your subscription is active.",
43 },
44 {
45 id: "item-8",
46 question: "Can I use the templates for client projects?",
47 answer:
48 "Yes, you can use Astrae templates for client projects. Our license allows commercial use, including client work, freelance projects, and agency services without any additional fees.",
49 },
50 {
51 id: "item-9",
52 question: "Do you offer refunds?",
53 answer:
54 "We offer a 30-day money-back guarantee. If you're not satisfied with your purchase for any reason, contact our support team within 30 days for a full refund.",
55 },
56];Add Global Styles
app/globals.css
1@import "tailwindcss";
2@import "tw-animate-css";
3
4@custom-variant dark (&:is(.dark *));
5
6@theme inline {
7 --color-background: var(--background);
8 --color-foreground: var(--foreground);
9 --font-sans: var(--font-geist-sans);
10 --font-mono: var(--font-geist-mono);
11 --color-sidebar-ring: var(--sidebar-ring);
12 --color-sidebar-border: var(--sidebar-border);
13 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
14 --color-sidebar-accent: var(--sidebar-accent);
15 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
16 --color-sidebar-primary: var(--sidebar-primary);
17 --color-sidebar-foreground: var(--sidebar-foreground);
18 --color-sidebar: var(--sidebar);
19 --color-chart-5: var(--chart-5);
20 --color-chart-4: var(--chart-4);
21 --color-chart-3: var(--chart-3);
22 --color-chart-2: var(--chart-2);
23 --color-chart-1: var(--chart-1);
24 --color-ring: var(--ring);
25 --color-input: var(--input);
26 --color-border: var(--border);
27 --color-destructive: var(--destructive);
28 --color-accent-foreground: var(--accent-foreground);
29 --color-accent: var(--accent);
30 --color-muted-foreground: var(--muted-foreground);
31 --color-muted: var(--muted);
32 --color-secondary-foreground: var(--secondary-foreground);
33 --color-secondary: var(--secondary);
34 --color-primary-foreground: var(--primary-foreground);
35 --color-primary: var(--primary);
36 --color-popover-foreground: var(--popover-foreground);
37 --color-popover: var(--popover);
38 --color-card-foreground: var(--card-foreground);
39 --color-card: var(--card);
40 --radius-sm: calc(var(--radius) - 4px);
41 --radius-md: calc(var(--radius) - 2px);
42 --radius-lg: var(--radius);
43 --radius-xl: calc(var(--radius) + 4px);
44}
45
46:root {
47 --radius: 0.625rem;
48 --background: oklch(97.31% 0 0);
49 --foreground: oklch(21.78% 0 0);
50 --card: oklch(1 0 0);
51 --card-foreground: oklch(21.78% 0 0);
52 --popover: oklch(1 0 0);
53 --popover-foreground: oklch(21.78% 0 0);
54 --primary: oklch(39.39% 0.222 263.86);
55 --primary-foreground: oklch(100% 0.00011 271.152);
56 --secondary: oklch(0.97 0 0);
57 --secondary-foreground: oklch(0.205 0 0);
58 --muted: oklch(0.97 0 0);
59 --muted-foreground: oklch(0.556 0 0);
60 --accent: oklch(0.97 0 0);
61 --accent-foreground: oklch(0.205 0 0);
62 --destructive: oklch(0.577 0.245 27.325);
63 --border: oklch(0.922 0 0);
64 --input: oklch(0.922 0 0);
65 --ring: oklch(0.708 0 0);
66 --chart-1: oklch(0.646 0.222 41.116);
67 --chart-2: oklch(0.6 0.118 184.704);
68 --chart-3: oklch(0.398 0.07 227.392);
69 --chart-4: oklch(0.828 0.189 84.429);
70 --chart-5: oklch(0.769 0.188 70.08);
71 --sidebar: oklch(0.985 0 0);
72 --sidebar-foreground: oklch(21.78% 0 0);
73 --sidebar-primary: oklch(0.205 0 0);
74 --sidebar-primary-foreground: oklch(0.985 0 0);
75 --sidebar-accent: oklch(0.97 0 0);
76 --sidebar-accent-foreground: oklch(0.205 0 0);
77 --sidebar-border: oklch(0.922 0 0);
78 --sidebar-ring: oklch(0.708 0 0);
79}
80
81.dark {
82 --background: oklch(0% 0 0);
83 --foreground: oklch(0.985 0 0);
84 --card: oklch(0.205 0 0);
85 --card-foreground: oklch(0.985 0 0);
86 --popover: oklch(15.43% 0 0);
87 --popover-foreground: oklch(0.985 0 0);
88 --primary: oklch(100% 0.00011 271.152);
89 --primary-foreground: oklch(0.205 0 0);
90 --secondary: oklch(0.269 0 0);
91 --secondary-foreground: oklch(0.985 0 0);
92 --muted: oklch(19.13% 0 0);
93 --muted-foreground: oklch(0.708 0 0);
94 --accent: oklch(55.9% 0.238 260.78);
95 --accent-foreground: oklch(0.985 0 0);
96 --destructive: oklch(59.56% 0.234 24.23);
97 --border: oklch(1 0 0 / 10%);
98 --input: oklch(1 0 0 / 15%);
99 --ring: oklch(0.556 0 0);
100 --chart-1: oklch(0.488 0.243 264.376);
101 --chart-2: oklch(0.696 0.17 162.48);
102 --chart-3: oklch(0.769 0.188 70.08);
103 --chart-4: oklch(0.627 0.265 303.9);
104 --chart-5: oklch(0.645 0.246 16.439);
105 --sidebar: oklch(0.205 0 0);
106 --sidebar-foreground: oklch(0.985 0 0);
107 --sidebar-primary: oklch(0.488 0.243 264.376);
108 --sidebar-primary-foreground: oklch(0.985 0 0);
109 --sidebar-accent: oklch(0.269 0 0);
110 --sidebar-accent-foreground: oklch(0.985 0 0);
111 --sidebar-border: oklch(1 0 0 / 10%);
112 --sidebar-ring: oklch(0.556 0 0);
113}
114
115@layer base {
116 * {
117 @apply border-border outline-ring/50;
118 }
119 body {
120 @apply bg-background text-foreground;
121 }
122}
123
124/* Scrollbar */
125
126/* Firefox */
127* {
128 scrollbar-width: none;
129}
130/* Chrome, Edge, and Safari */
131*::-webkit-scrollbar {
132 display: none;
133}
134/* End Scrollbar */