add faq

app/page.tsx

@@ -9,6 +9,7 @@ import { LampContainer} from "@/components/ui/lamp";
 import TeamSection from "@/components/team";
 import { InfiniteMovingCardsDemo } from "@/components/testimonials";
 import PricingSection from "@/components/price-section";
+import FAQS from "@/components/faq";
 
 export default function Home() {
   return (
@@ -72,6 +73,7 @@ export default function Home() {
       <TeamSection />
       <InfiniteMovingCardsDemo />
       <PricingSection />
+      <FAQS />
       </div>
     </div>
   );

components/faq.tsx

@@ -0,0 +1,53 @@
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+  } from "@/components/ui/accordion"
+
+
+
+const FAQS = () => {
+    return ( 
+        <div className=" mt-0 md:py-10 text-white w-3/4
+        rounded-3xl
+        
+        ">
+          <div className=" p-10 md:p-4 md:px-20">
+            <div className="text-3xl md:text-7xl font-bold text-black">
+              Have questions ?
+            </div>
+            <div className="  font-semibold text-3xl md:text-6xl text-gradient bg-gradient-to-r from-emerald-600 to-blue-300 bg-clip-text text-transparent">
+              Get answers.
+            </div>
+            <Accordion type="single" collapsible>
+    <AccordionItem value="item-1">
+      <AccordionTrigger>What is your turnaround time</AccordionTrigger>
+      <AccordionContent>
+      Our standard turnaround time for video editing projects is typically 1-3 business days. However, the exact time may vary depending on the complexity and length of the project. We strive to deliver high-quality results within a reasonable timeframe to meet our clients' needs.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="item-2">
+      <AccordionTrigger>How do you handle revisions?</AccordionTrigger>
+      <AccordionContent>
+       We offer a certain number of revisions as part of our editing packages to ensure that the final product meets your expectations. Once we deliver the initial draft, you can review it and request revisions based on specific changes or adjustments you'd like to make. 
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="item-3">
+      <AccordionTrigger>
+      What file formats do you support?
+      </AccordionTrigger>
+      <AccordionContent>
+      We support a wide range of file formats to accommodate different needs and preferences. Some of the common file formats we work with include MP4, MOV, AVI, WMV, MKV, and more. 
+
+      </AccordionContent>
+    </AccordionItem>
+
+  </Accordion>
+
+
+          </div>
+        </div> );
+}
+
+export default FAQS;

components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { PlusCircle } 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 pt-10 pb-6 font-semibold text-2xl md:text-4xl transition-all hover:underline [&[data-state=open]>svg]:rotate-45",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <PlusCircle className="h-8 w-8 md:h-10 md:w-10 shrink-0 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="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }