66 lines
2.9 KiB
TypeScript
66 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Plus, Minus } from 'lucide-react';
|
|
|
|
const QUESTIONS = [
|
|
{
|
|
q: "Do I have to track calories forever?",
|
|
a: "No. You track to learn the system. Many users track strictly for 8-12 weeks to calibrate their eye, then transition to intuitive eating using the app only for high-level guidance or audits."
|
|
},
|
|
{
|
|
q: "Does it work for cutting and bulking?",
|
|
a: "Yes. FitMate manages the surplus or deficit dynamically based on your rate of weight change (Trend Weight). If you're bulking too fast (gaining fat), it pulls back calories. If you're stalling on a cut, it adjusts down."
|
|
},
|
|
{
|
|
q: "How does the Adherence Buffer work?",
|
|
a: "If you overeat by 600 calories on Friday, FitMate doesn't shame you. It simply spreads that surplus as a small reduction (-200 kcal) over the next 3 days to keep your weekly average on target."
|
|
},
|
|
{
|
|
q: "Can I use it with intermittent fasting?",
|
|
a: "Absolutely. The app focuses on daily macronutrient totals. Whether you eat them in a 4-hour window or an 12-hour window is up to your preference."
|
|
}
|
|
];
|
|
|
|
export const FAQ: React.FC = () => {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<section id="faq" className="py-24 bg-black border-t border-white/5 scroll-mt-32">
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-12 text-center tracking-tight">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{QUESTIONS.map((item, idx) => (
|
|
<div key={idx} className="border border-white/10 rounded-2xl bg-surfaceHighlight/30 overflow-hidden">
|
|
<button
|
|
onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
|
|
className="w-full flex items-center justify-between p-6 text-left focus:outline-none"
|
|
>
|
|
<span className="font-semibold text-white text-lg">{item.q}</span>
|
|
<span className="text-primary-400">
|
|
{openIndex === idx ? <Minus size={20} /> : <Plus size={20} />}
|
|
</span>
|
|
</button>
|
|
<AnimatePresence>
|
|
{openIndex === idx && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: "easeInOut" }}
|
|
>
|
|
<div className="px-6 pb-6 text-gray-400 leading-relaxed border-t border-white/5 pt-4">
|
|
{item.a}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |