Faq page done

app/faq/page.tsx

@@ -0,0 +1,10 @@
+import { FaqBanner, Togle } from "@/components/pages/faq";
+
+export default function Page() {
+  return (
+    <div >
+      <FaqBanner />
+      <Togle />
+    </div>
+  );
+}

components/pages/faq/answearQuestions.tsx

@@ -0,0 +1,83 @@
+import Link from "next/link";
+import FAQAccordion from "./faqAccardion";
+
+const faqItems = [
+  {
+    id: "faq-1",
+    question: "How do I become a firefighter?",
+    answer:
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel sit amet adipiscing sem neque.",
+  },
+  {
+    id: "faq-2",
+    question: "What equipment do firefighters use?",
+    answer:
+      "Firefighters use specialized equipment including protective gear, breathing apparatus, fire hoses, ladders, and various rescue tools. Each piece of equipment is designed to keep firefighters safe while they perform their duties. Our team is trained extensively on all equipment and safety protocols.",
+  },
+  {
+    id: "faq-3",
+    question: "Do firefighters only fight fires?",
+    answer:
+      "No, modern firefighters respond to a wide variety of emergencies including medical calls, vehicle accidents, hazardous material incidents, and rescue operations. They serve as first responders and are trained in emergency medical services to provide life-saving care to the community.",
+  },
+  {
+    id: "faq-4",
+    question: "What are the work hours for firefighters?",
+    answer:
+      "Firefighters typically work shifts that vary by department. Many operate on a schedule of 24 hours on duty followed by 48-72 hours off duty. This schedule allows for adequate rest and recovery while ensuring continuous emergency response coverage for the community.",
+  },
+  {
+    id: "faq-5",
+    question: "How long is firefighter training?",
+    answer:
+      "Initial firefighter training typically takes 12-18 weeks of full-time instruction at a fire academy. After this, firefighters continue receiving ongoing training throughout their careers. Our department invests heavily in continuous education to maintain the highest standards of service.",
+  },
+  {
+    id: "faq-6",
+    question: "What is required to apply for the firefighter position?",
+    answer:
+      "Candidates must be at least 18 years old, have a high school diploma or GED, possess a valid drivers license, and pass a background check and medical examination. Physical fitness is essential, and candidates must pass the Candidate Physical Ability Test (CPAT).",
+  },
+];
+
+export function Togle() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c]">
+      <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        {/* Header Section */}
+        <div className="mb-16 flex items-start justify-between gap-8 lg:gap-12">
+          <div className="flex items-center md:col-span-1">
+            <h1
+              className="bg-linear-to-br from-white via-white/50 to-black
+  text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
+            >
+              About <br /> Work
+            </h1>
+          </div>
+
+          {/* FAQ Section */}
+          <div className="md:col-span-2">
+            <FAQAccordion items={faqItems} />
+          </div>
+        </div>
+        {/* ASK QUESTION */}
+        <div className="space-y-8 w-full mt-10 ">
+          <h1
+            className="text-center bg-linear-to-br from-white via-white/50 to-black
+  text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
+          >
+            Still Have Question?
+          </h1>
+          <p className="text-center text-white/80 text-lg">
+            Nullam dictum felis eu pede mollis pretium integer tincidunt.
+          </p>
+          <div className="w-full flex items-center justify-center">
+            <Link href={'/contact'} className="mx-auto shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+              ASK A QUESTION
+            </Link>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

components/pages/faq/faqAccardion.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import * as Accordion from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+interface FAQAccordionProps {
+  items: FAQItem[];
+}
+
+export default function FAQAccordion({ items }: FAQAccordionProps) {
+  return (
+    <Accordion.Root type="single" collapsible className="w-full">
+      {items.map((item, index) => (
+        <Accordion.Item key={item.id} value={item.id} className="border-b border-slate-700 py-6">
+          <Accordion.Trigger className="group flex w-full items-center justify-between text-left">
+            <h3 className="text-lg font-bold uppercase tracking-wide text-white transition-colors duration-300 group-hover:text-red-600 md:text-xl">
+              {item.question}
+            </h3>
+            <div className="ml-4 shrink-0">
+              <ChevronDown
+                className="h-6 w-6 text-red-600 transition-transform duration-300 group-data-[state=open]:rotate-180"
+                aria-hidden="true"
+              />
+            </div>
+          </Accordion.Trigger>
+
+          <Accordion.Content className="overflow-hidden pt-4 text-gray-400 animate-in fade-in slide-in-from-top-2 duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-2">
+            <p className="leading-relaxed text-sm md:text-base">{item.answer}</p>
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  );
+}

components/pages/faq/faqBanner.tsx

@@ -0,0 +1,39 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+export function FaqBanner() {
+  return (
+    <section className="relative w-full h-[55vh] min-h-100 overflow-hidden pt-10">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/about/aboutBanner.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+
+      {/* Gradient Overlay - Bottom-left to top-right */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          background: `linear-gradient(to top right, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
+        }}
+      />
+
+      <div className="max-w-250 w-full mx-auto px-4">
+        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
+          <div className="spacw-y-4 ">
+            <DotAnimatsiya />
+            <p
+              className=" bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+            >
+              GENERAL <br /> QUESTIONS
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/faq/index.ts

@@ -0,0 +1,2 @@
+export { FaqBanner } from "./faqBanner";
+export { Togle } from "./answearQuestions";