Add FAQs to pricing page

app/(website)/pricing/page.tsx

@@ -3,6 +3,12 @@ import { Card } from "./card";
 import { Button } from "@/components/ui/button";
 import { Metadata } from "next";
 import { absoluteUrl } from "@/lib/absolute-url";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
 
 export const metadata: Metadata = {
     title: "Pricing",
@@ -115,6 +121,47 @@ function Content() {
                     </Button>
                 </Card>
             </div>
+
+            <h2 className="mt-6 text-2xl font-bold">FAQ</h2>
+            <Accordion type="single" collapsible>
+                <AccordionItem value="money">
+                    <AccordionTrigger>
+                        Do we need to pay money to No Deploy?
+                    </AccordionTrigger>
+                    <AccordionContent>
+                        No, you don't have to pay to any costs. No Deploy will
+                        pay all the costs for you since your code hadn't
+                        deployed to anywhere
+                    </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="over-limit">
+                    <AccordionTrigger>
+                        What should I do if I went over my limit?
+                    </AccordionTrigger>
+                    <AccordionContent>
+                        Since we hope developers don't have to worry about
+                        anything. Nothing will be affected after going over your
+                        limit
+                    </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="usage">
+                    <AccordionTrigger>
+                        How does the usage being calculated?
+                    </AccordionTrigger>
+                    <AccordionContent>
+                        We don't calculate your usage, because we have no limit
+                        on anything
+                    </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="change-plan">
+                    <AccordionTrigger>
+                        How do I upgrade or downgrade to another plan?
+                    </AccordionTrigger>
+                    <AccordionContent>
+                        You can delete your account and create another one
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
         </div>
     );
 }

components/ui/accordion.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item
+        ref={ref}
+        className={cn("border-b", className)}
+        {...props}
+    />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                "flex flex-1 items-center justify-between py-4 font-medium [&[data-state=open]>svg]:rotate-180",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className={cn(
+            "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+            className
+        )}
+        {...props}
+    >
+        <div className="pb-4 pt-0">{children}</div>
+    </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package.json

@@ -9,6 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
+        "@radix-ui/react-accordion": "^1.1.1",
         "@radix-ui/react-dialog": "^1.0.3",
         "@radix-ui/react-select": "^1.2.1",
         "@types/node": "18.16.3",