From f01b48b35f3732935c63b42f0bee70cd8887ec49 Mon Sep 17 00:00:00 2001
From: sanjidaRimi023 <sanjidarimi023@gmail.com>
Date: Fri, 1 May 2026 22:55:38 +0600
Subject: [PATCH] refector:redesign faq section

---
 src/components/FAQSection.tsx | 213 +++++++++++++++++++---------------
 1 file changed, 121 insertions(+), 92 deletions(-)

diff --git a/src/components/FAQSection.tsx b/src/components/FAQSection.tsx
index 716526d..7fb60cf 100644
--- a/src/components/FAQSection.tsx
+++ b/src/components/FAQSection.tsx
@@ -4,135 +4,164 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { motion, useInView } from "framer-motion";
-import { ArrowRight, Mail } from "lucide-react";
-import { useRef } from "react";
+import { motion, useInView, useScroll, useSpring } from "framer-motion";
+import { ArrowUpRight, Sparkles,ShieldQuestion } from "lucide-react";
+import { useRef, useState } from "react";
 
 const faqs = [
   {
     question: "What services does TechZaa offer?",
     answer:
-      "We provide comprehensive technology solutions including web development, mobile app development, AI/ML solutions, and cloud infrastructure services. Our team specializes in creating custom software tailored to your business needs.",
+      "We provide comprehensive technology solutions including web development, mobile app development, AI/ML solutions, and cloud infrastructure services.",
+    category: "Services",
   },
   {
     question: "How long does a typical project take?",
     answer:
-      "Project timelines vary based on complexity and scope. A simple website might take 4-6 weeks, while complex enterprise applications can take 3-6 months. We provide detailed timelines during our initial consultation and keep you updated throughout the development process.",
+      "Timelines vary: simple sites take 4-6 weeks, while enterprise apps take 3-6 months. We prioritize agile delivery and constant feedback.",
+    category: "Process",
   },
   {
     question: "What is your development process?",
     answer:
-      "We follow an agile methodology with iterative development cycles. Our process includes: Discovery & Planning, UI/UX Design, Development Sprints, Quality Assurance, Deployment, and Ongoing Support. We maintain transparent communication with regular updates and demos.",
+      "We follow an agile methodology: Discovery, UI/UX Design, Development Sprints, QA, Deployment, and 24/7 Ongoing Support.",
+    category: "Workflow",
   },
   {
-    question: "Do you provide ongoing maintenance and support?",
+    question: "Do you provide maintenance?",
     answer:
-      "Yes! We offer comprehensive maintenance packages that include bug fixes, security updates, performance optimization, and feature enhancements. Our support team is available to ensure your application runs smoothly 24/7.",
+      "Yes. Our maintenance packages include security updates, performance optimization, and feature enhancements to keep you ahead.",
+    category: "Support",
   },
   {
     question: "How do you handle project pricing?",
     answer:
-      "We offer flexible pricing models including fixed-price projects, time & materials, and dedicated team arrangements. After understanding your requirements, we provide transparent quotes with no hidden costs. Contact us for a free consultation and estimate.",
-  },
-  {
-    question: "What industries do you serve?",
-    answer:
-      "We've delivered successful projects across fintech, healthcare, e-commerce, education, real estate, and SaaS industries. Our diverse experience allows us to bring cross-industry insights and best practices to every project.",
+      "Flexible models: fixed-price, time & materials, or dedicated teams. We ensure 100% transparency with no hidden costs.",
+    category: "Billing",
   },
 ];
 
 export default function FAQSection() {
-  const ref = useRef<HTMLElement>(null);
-  const isInView = useInView(ref, { once: true, margin: "-100px" });
+  const [activeItem, setActiveItem] = useState<string | undefined>(undefined);
+  const containerRef = useRef(null);
+  const isInView = useInView(containerRef, { once: true, amount: 0.2 });
+
+  // Progress bar for reading engagement
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"],
+  });
+  const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 });
 
   return (
     <section
-      id="faq"
-      ref={ref}
-      className="pb-20 relative overflow-hidden bg-background"
+      ref={containerRef}
+      className="relative min-h-screen py-24 bg-[#fafafa] dark:bg-[#050505] overflow-hidden transition-colors duration-500"
     >
-      {/* Decorative gradients */}
-      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-3xl -z-10" />
-      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-secondary/5 rounded-full blur-3xl -z-10" />
+      {/* Dynamic Background Elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[120px] animate-pulse" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-blue-500/10 blur-[120px]" />
+      </div>
 
-      <div className="container mx-auto px-4 relative z-10">
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr,1.5fr] gap-12 lg:gap-20 items-start">
-          {/* Left Column - Header and CTA */}
-          <motion.div
-            initial={{ opacity: 0, x: -30 }}
-            animate={isInView ? { opacity: 1, x: 0 } : {}}
-            transition={{ duration: 0.6 }}
-            className="flex flex-col gap-8 lg:sticky lg:top-24"
-          >
-            <div>
-              <span className="inline-flex px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase bg-primary/10 text-primary mb-4">
+      <div className="container mx-auto px-6 max-w-6xl relative z-10">
+        <div className="flex flex-col gap-16">
+          <div>
+            <div className="flex items-center gap-2 mb-6">
+              <div className="p-2 bg-primary rounded-lg text-primary-foreground">
+                <ShieldQuestion size={20} />
+              </div>
+              <span className="text-sm font-bold tracking-[0.2em] uppercase text-primary/80">
                 Got Questions?
               </span>
-              <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4 leading-[1.15]">
-                Frequently Asked <br />
-                <span className="text-primary">Questions</span>
-              </h2>
-              <p className="text-muted-foreground text-lg leading-relaxed max-w-md">
-                Everything you need to know about working with TechZaa. Can't
-                find what you're looking for? Reach out to our team.
-              </p>
             </div>
 
-            {/* Support CTA Card */}
-            <div className="p-6 rounded-2xl border border-border/50 bg-card/40 backdrop-blur-sm flex flex-col gap-5 max-w-md shadow-sm">
-              <div className="flex items-center gap-4">
-                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
-                  <Mail className="w-5 h-5" />
-                </div>
-                <div>
-                  <h4 className="font-semibold text-foreground text-sm">
-                    Still have questions?
-                  </h4>
-                  <p className="text-muted-foreground text-xs">
-                    We're here to help you out with any queries.
-                  </p>
-                </div>
-              </div>
-              <a
-                href="mailto:support@techzaa.com"
-                className="inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-10 px-4 py-2 rounded-xl w-full group"
-              >
-                Contact Support
-                <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
-              </a>
-            </div>
-          </motion.div>
+            <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 leading-tight">
+              Clear Answers <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-600">
+                For Big Ideas.
+              </span>
+            </h2>
 
-          {/* Right Column - Accordion */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className="w-full"
+            <p className="text-muted-foreground text-lg mb-0 max-w-md">
+              We believe in radical transparency. If you don't find your answer
+              here, our engineers are just a click away.
+            </p>
+          </div>
+
+          {/* Bottom Section: Interactive Accordion */}
+          <Accordion
+            type="single"
+            collapsible
+            onValueChange={setActiveItem}
+            className="w-full space-y-4"
           >
-            <Accordion type="single" collapsible className="space-y-4">
-              {faqs.map((faq, index) => (
-                <motion.div
-                  key={index}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={isInView ? { opacity: 1, y: 0 } : {}}
-                  transition={{ duration: 0.4, delay: 0.06 * index }}
+            {faqs.map((faq, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ delay: index * 0.1, duration: 0.5 }}
+              >
+                <AccordionItem
+                  value={`item-${index}`}
+                  className={`
+                    group border-none rounded-3xl transition-all duration-500 px-2
+                    ${
+                      activeItem === `item-${index}`
+                        ? "bg-white dark:bg-zinc-900 shadow-[0_20px_50px_rgba(0,0,0,0.05)] scale-[1.01]"
+                        : "bg-zinc-100/50 dark:bg-zinc-900/30 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50"
+                    }
+                  `}
                 >
-                  <AccordionItem
-                    value={`item-${index}`}
-                    className="bg-card/40 border border-border/40 rounded-2xl px-6 py-1 overflow-hidden data-[state=open]:border-primary/50 data-[state=open]:shadow-md transition-all duration-300"
-                  >
-                    <AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium text-foreground hover:text-primary transition-colors">
-                      {faq.question}
-                    </AccordionTrigger>
-                    <AccordionContent className="text-muted-foreground pt-1 pb-5 text-sm md:text-base leading-relaxed">
+                  <AccordionTrigger className="flex items-center justify-between p-6 hover:no-underline gap-4">
+                    <div className="flex items-center gap-6 text-left">
+                      <span
+                        className={`
+                        hidden sm:flex items-center justify-center w-10 h-10 rounded-full border text-xs font-bold transition-all duration-500
+                        ${
+                          activeItem === `item-${index}`
+                            ? "bg-primary border-primary text-primary-foreground rotate-[360deg]"
+                            : "border-border text-muted-foreground"
+                        }
+                      `}
+                      >
+                        {activeItem === `item-${index}` ? (
+                          <Sparkles size={14} />
+                        ) : (
+                          `0${index + 1}`
+                        )}
+                      </span>
+                      <div className="flex flex-col gap-1">
+                        <span className="text-[10px] uppercase tracking-widest font-bold text-primary opacity-0 group-data-[state=open]:opacity-100 transition-opacity">
+                          {faq.category}
+                        </span>
+                        <span className="text-lg md:text-xl font-semibold tracking-tight">
+                          {faq.question}
+                        </span>
+                      </div>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-6 pb-8 md:pl-[104px]">
+                    <div className="text-muted-foreground text-base md:text-lg leading-relaxed max-w-2xl border-l-2 border-primary/20 pl-6">
                       {faq.answer}
-                    </AccordionContent>
-                  </AccordionItem>
-                </motion.div>
-              ))}
-            </Accordion>
-          </motion.div>
+                      <div className="mt-6 flex gap-4">
+                        <button className="text-xs font-bold uppercase tracking-tighter flex items-center gap-2 text-primary hover:gap-3 transition-all">
+                          Learn More <ArrowUpRight size={14} />
+                        </button>
+                      </div>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </motion.div>
+            ))}
+          </Accordion>
+
+          {/* Bottom Indicator */}
+          <motion.div
+            style={{ scaleX }}
+            className="h-1 bg-primary/20 mt-4 rounded-full origin-left"
+          />
         </div>
       </div>
     </section>