From b50725ae2ec57b8e86c8885d0d0490b594f646a5 Mon Sep 17 00:00:00 2001
From: sanjidaRimi023 <sanjidarimi023@gmail.com>
Date: Fri, 1 May 2026 23:10:53 +0600
Subject: [PATCH] refector:change faq card color

---
 src/components/FAQSection.tsx | 46 ++++++++++++-----------------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/components/FAQSection.tsx b/src/components/FAQSection.tsx
index 7fb60cf..3eb5df0 100644
--- a/src/components/FAQSection.tsx
+++ b/src/components/FAQSection.tsx
@@ -5,7 +5,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { motion, useInView, useScroll, useSpring } from "framer-motion";
-import { ArrowUpRight, Sparkles,ShieldQuestion } from "lucide-react";
+import { ArrowUpRight, ShieldQuestion, Sparkles } from "lucide-react";
 import { useRef, useState } from "react";
 
 const faqs = [
@@ -56,36 +56,30 @@ export default function FAQSection() {
   return (
     <section
       ref={containerRef}
-      className="relative min-h-screen py-24 bg-[#fafafa] dark:bg-[#050505] overflow-hidden transition-colors duration-500"
+      className="pb-20 overflow-hidden transition-colors duration-500"
     >
-      {/* 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-6 max-w-6xl relative z-10">
-        <div className="flex flex-col gap-16">
-          <div>
+      <div className="mx-auto px-6 max-w-6xl">
+        <div className="flex flex-col gap-10">
+          <div className="flex flex-col items-center">
             <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">
+              <span className="text-sm font-bold uppercase text-primary/80">
                 Got Questions?
               </span>
             </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">
+            <h2 className="text-4xl md:text-5xl font-bold">
+              Clear Answers {" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-foreground">
                 For Big Ideas.
               </span>
             </h2>
 
-            <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 className="text-muted-foreground max-w-lg text-center mt-5">
+              Everything you need to know about working with TechZaa. Can't find
+              what you're looking for? Reach out to our team.
             </p>
           </div>
 
@@ -109,8 +103,8 @@ export default function FAQSection() {
                     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"
+                        ? "bg-primary/20 shadow-[0_20px_50px_rgba(0,0,0,0.05)] scale-[1.01]"
+                        : "bg-accent"
                     }
                   `}
                 >
@@ -145,23 +139,13 @@ export default function FAQSection() {
                   <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}
-                      <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>