summer2026/techzaa-frontend
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refector:change faq card color

Browse Source
This commit is contained in:
sanjidaRimi023
2026-05-01 23:10:53 +06:00
parent f01b48b35f
commit b50725ae2e
1 changed files with 15 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FAQSection.tsx
+15 -31
View File
@@ -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>