feat: add FAQ section to landing page (#104)

Adding FAQ section contributed by @abhishek0wb

Author: abhishek0wb

apps/web/src/app/(main)/(landing)/page.tsx

@@ -9,6 +9,7 @@ import Navbar from '@/components/landing-sections/navbar'
 import Testimonials from '@/components/landing-sections/testimonials'
 import Video from '@/components/landing-sections/video'
 import React from 'react'
+import { FaqSection } from '@/components/faq/FaqSection'
 
 
 const Landing = () => {
@@ -20,6 +21,7 @@ const Landing = () => {
                 <Bento />
                 <Video />
                 <HowItWorks />
+                <FaqSection />
                 <Brands />
                 <Testimonials />
             </div>

apps/web/src/components/faq/FaqSection.tsx

@@ -0,0 +1,62 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import Header from "../ui/header";
+import { faqs } from "./faqData";
+
+export function FaqSection() {
+  return (
+    <div className="flex flex-col border-b border-[#252525]">
+      <Header title="Frequently Asked Questions" />
+      <div className="w-full px-[30px] lg:px-[50px] py-8 lg:py-12 relative">
+        <div
+          style={{
+            height: "100%",
+            "--pattern-fg": "#252525",
+            borderRight: "1px solid #252525",
+            backgroundImage:
+              "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
+            backgroundSize: "10px 10px",
+            backgroundAttachment: "fixed",
+          } as React.CSSProperties}
+          className="w-[30px] lg:w-[50px] absolute left-0 top-0"
+        />
+        
+        <div
+          style={{
+            height: "100%",
+            "--pattern-fg": "#252525",
+            borderLeft: "1px solid #252525",
+            backgroundImage:
+              "repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
+            backgroundSize: "10px 10px",
+            backgroundAttachment: "fixed",
+          } as React.CSSProperties}
+          className="w-[30px] lg:w-[50px] absolute right-0 top-0"
+        />
+
+        <div className="max-w-4xl mx-auto">
+          <Accordion type="single" collapsible className="w-full space-y-4">
+            {faqs.map((faq, index) => (
+              <AccordionItem 
+                value={`item-${index}`} 
+                key={index}
+                className="border border-[#252525] rounded-lg bg-[#151515]/20 backdrop-blur-xl overflow-hidden"
+              >
+                <AccordionTrigger className="px-6 py-4 text-left text-base lg:text-lg font-medium hover:bg-[#252525]/30 transition-colors [&[data-state=open]]:bg-[#252525]/50">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent className="px-6 pb-4 text-[#d1d1d1] text-sm lg:text-base leading-relaxed">
+                  {faq.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/faq/faqData.ts

@@ -0,0 +1,36 @@
+export interface FAQ {
+  question: string;
+  answer: string;
+}
+
+export const faqs: FAQ[] = [
+  {
+    question: "What is OpenSox?",
+    answer:
+      "OpenSox is a platform to help developers find and contribute to open-source projects that match their skills and interests.",
+  },
+  {
+    question: "How can I find a project to contribute to?",
+    answer:
+      "You can browse the list of projects on our main page. We provide filters to help you narrow down the projects based on language, popularity, and activity.",
+  },
+  {
+    question: "Is OpenSox free to use?",
+    answer: "Yes, OpenSox is completely free for both developers and project maintainers.",
+  },
+  {
+    question: "How are projects ranked?",
+    answer:
+      "Projects are ranked based on a combination of factors including recent activity, number of open issues, and community engagement.",
+  },
+  {
+    question: "How do I get started contributing?",
+    answer:
+      "Simply create an account, set your preferences, and start browsing projects. Our platform will help match you with projects that fit your skill level.",
+  },
+  {
+    question: "Can I suggest new features?",
+    answer:
+      "Absolutely! We welcome feedback and feature suggestions. You can reach out to us through our contact form or GitHub repository.",
+  },
+];