fix(ui): improve header navigation contrast on dark theme and add frontend not-found route

src/blocks/FAQTeaser/Component.tsx

@@ -1,41 +1,68 @@
 'use client'
-import React from 'react'
-
-import Link from 'next/link'
+import React, { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronDown } from 'lucide-react'
 import type { Page } from '../../payload-types'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
 
-export const FAQTeaserBlock: React.FC<Props> = ({ eyebrow, title, questions, linkText }) => {
-  return (
-    <section className="py-20 md:py-32 bg-card/40 border-t border-border">
-      <div className="container-premium">
-        <div className="max-w-3xl mb-16 md:mb-24">
+export const FAQTeaserBlock: React.FC<Props> = ({ title, questions }) => {
+  const [openIndex, setOpenIndex] = useState<number | null>(0)
 
+  const toggleQuestion = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index)
+  }
+
+  return (
+    <section className="py-20 md:py-32 bg-card/40 border-t border-border" id="faq">
+      <div className="container-premium max-w-4xl">
+        <div className="mb-12 md:mb-16 text-center">
           <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight text-balance">
             {title}
           </h2>
         </div>
 
-        <div className="space-y-6 mb-12">
-          {questions?.map((q: NonNullable<Props['questions']>[0], index: number) => (
-            <div 
-              key={q.id || index}
-              className="py-6 border-b border-border/50 first:border-t"
-            >
-              <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-3">{q.question}</h3>
-              <p className="text-foreground/75 leading-relaxed">{q.answer}</p>
-            </div>
-          ))}
+        <div className="space-y-4">
+          {questions?.map((q: NonNullable<Props['questions']>[0], index: number) => {
+            const isOpen = openIndex === index
+            
+            return (
+              <div 
+                key={q.id || index}
+                className="bg-background border border-border overflow-hidden shadow-sm hover:shadow-md transition-shadow"
+              >
+                <button
+                  onClick={() => toggleQuestion(index)}
+                  className="w-full flex items-center justify-between p-6 text-left hover:bg-card/50 transition-colors focus:outline-none"
+                  aria-expanded={isOpen}
+                >
+                  <h3 className="font-heading text-lg sm:text-xl font-bold text-foreground pr-8">
+                    {q.question}
+                  </h3>
+                  <div className="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center shrink-0">
+                    <ChevronDown 
+                      className={`w-5 h-5 text-accent transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
+                    />
+                  </div>
+                </button>
+                <AnimatePresence initial={false}>
+                  {isOpen && (
+                    <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="p-6 pt-0 text-foreground/75 leading-relaxed border-t border-border/10">
+                        {q.answer}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            )
+          })}
         </div>
-
-        {linkText && (
-          <div className="mt-12">
-            <Link href="/faq" className="inline-block text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
-              {linkText}
-            </Link>
-          </div>
-        )}
       </div>
     </section>
   )