fix all pages
This commit is contained in:
sanjidaRimi023
@@ -5,6 +5,7 @@ import {
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { ArrowRight, Mail } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
const faqs = [
|
||||
@@ -28,21 +29,11 @@ const faqs = [
|
||||
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.",
|
||||
},
|
||||
{
|
||||
question: "What technologies do you work with?",
|
||||
answer:
|
||||
"Our tech stack includes React, Next.js, Node.js, Python, TypeScript, AWS, Google Cloud, and more. We stay current with industry trends and select the best technologies for each project's specific requirements.",
|
||||
},
|
||||
{
|
||||
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: "Can you work with our existing team?",
|
||||
answer:
|
||||
"Absolutely! We frequently collaborate with in-house teams, providing additional expertise and resources. Whether you need staff augmentation, specialized skills, or full project delivery, we adapt to your working style and processes.",
|
||||
},
|
||||
{
|
||||
question: "What industries do you serve?",
|
||||
answer:
|
||||
@@ -55,64 +46,94 @@ export default function FAQSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
||||
|
||||
return (
|
||||
<section id="faq" ref={ref} className="py-24 relative overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 right-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
|
||||
<div className="absolute bottom-1/4 left-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
|
||||
</div>
|
||||
<section
|
||||
id="faq"
|
||||
ref={ref}
|
||||
className="pb-20 relative overflow-hidden bg-background"
|
||||
>
|
||||
{/* 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" />
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
|
||||
Got Questions?
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
|
||||
Frequently Asked{" "}
|
||||
<span className="text-primary neon-text-glow">Questions</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
|
||||
Everything you need to know about working with TechZaa. Can't find
|
||||
what you're looking for? Reach out to our team.
|
||||
</p>
|
||||
</motion.div>
|
||||
<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">
|
||||
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>
|
||||
|
||||
{/* FAQ Accordion */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="max-w-3xl mx-auto"
|
||||
>
|
||||
<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.1 * index }}
|
||||
{/* 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"
|
||||
>
|
||||
<AccordionItem
|
||||
value={`item-${index}`}
|
||||
className="glass border border-border/50 rounded-xl px-6 overflow-hidden data-[state=open]:border-primary/50 transition-colors"
|
||||
Contact Support
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
<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 }}
|
||||
>
|
||||
<AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium hover:text-primary transition-colors">
|
||||
{faq.question}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-muted-foreground pb-5 text-sm md:text-base leading-relaxed">
|
||||
{faq.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</motion.div>
|
||||
))}
|
||||
</Accordion>
|
||||
</motion.div>
|
||||
<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">
|
||||
{faq.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</motion.div>
|
||||
))}
|
||||
</Accordion>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user