| 268 | } |
| 269 | |
| 270 | function FAQList() { |
| 271 | const [openIndex, setOpenIndex] = useState<number | null>(null) |
| 272 | |
| 273 | return ( |
| 274 | <div className="divide-y divide-zinc-800/60"> |
| 275 | {faqs.map((faq, i) => { |
| 276 | const isOpen = openIndex === i |
| 277 | return ( |
| 278 | <motion.div |
| 279 | key={i} |
| 280 | initial={{ opacity: 0, filter: 'blur(8px)', x: 20 }} |
| 281 | whileInView={{ opacity: 1, filter: 'blur(0px)', x: 0 }} |
| 282 | viewport={{ once: true, amount: 0.5 }} |
| 283 | transition={{ duration: 0.5, delay: i * 0.1 }} |
| 284 | className={cn( |
| 285 | 'transition-all duration-300', |
| 286 | isOpen && 'bg-acid-matrix/[0.03]', |
| 287 | )} |
| 288 | > |
| 289 | <button |
| 290 | onClick={() => { |
| 291 | if (!isOpen) { |
| 292 | posthog.capture(AnalyticsEvent.FREEBUFF_HOME_FAQ_OPENED, { |
| 293 | question: faq.question, |
| 294 | }) |
| 295 | } |
| 296 | setOpenIndex(isOpen ? null : i) |
| 297 | }} |
| 298 | className="w-full flex items-center gap-4 px-4 py-5 text-left transition-all duration-300 cursor-pointer group" |
| 299 | > |
| 300 | <span |
| 301 | className={cn( |
| 302 | 'flex-shrink-0 font-mono text-xs transition-colors duration-300', |
| 303 | isOpen |
| 304 | ? 'text-acid-matrix' |
| 305 | : 'text-zinc-600 group-hover:text-zinc-400', |
| 306 | )} |
| 307 | > |
| 308 | {String(i + 1).padStart(2, '0')} |
| 309 | </span> |
| 310 | <span |
| 311 | className={cn( |
| 312 | 'font-semibold flex-1 transition-colors duration-300', |
| 313 | isOpen |
| 314 | ? 'text-white' |
| 315 | : 'text-zinc-300 group-hover:text-white', |
| 316 | )} |
| 317 | > |
| 318 | {faq.question} |
| 319 | </span> |
| 320 | <motion.span |
| 321 | animate={{ rotate: isOpen ? 180 : 0 }} |
| 322 | transition={{ duration: 0.25 }} |
| 323 | className={cn( |
| 324 | 'flex-shrink-0 transition-colors duration-300', |
| 325 | isOpen ? 'text-acid-matrix' : 'text-zinc-600', |
| 326 | )} |
| 327 | > |