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

src/blocks/Eligibility/Component.tsx

@@ -28,11 +28,7 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({ eyebrow, title,
     <section className="py-12 md:py-20 bg-card/60 border-y border-border">
       <div className="container-premium">
         <div className="max-w-3xl mb-12">
-          {eyebrow && (
-            <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
-              // {eyebrow}
-            </div>
-          )}
+
           <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight">
             {title}
           </h2>

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>
   )

src/blocks/FAQTeaser/config.ts

@@ -3,7 +3,6 @@ import type { Block } from 'payload'
 export const FAQTeaser: Block = {
   slug: 'faqTeaser',
   fields: [
-    { name: 'eyebrow', type: 'text', localized: true },
     { name: 'title', type: 'text', required: true, localized: true },
     {
       name: 'questions',
@@ -15,6 +14,5 @@ export const FAQTeaser: Block = {
         { name: 'answer', type: 'textarea', required: true },
       ],
     },
-    { name: 'linkText', type: 'text', localized: true },
   ],
 }

src/blocks/ServicesDetailed/Component.tsx

@@ -74,14 +74,14 @@ export const ServicesDetailedBlock: React.FC<Props> = ({
                   isFirst
                     ? 'bg-foreground text-background border-0 shadow-md p-8 md:p-10'
                     : 'bg-card text-foreground border border-border shadow-xs p-6 md:p-8'
-                } rounded-none min-h-[240px] flex flex-col justify-between`}
+                } rounded-none min-h-[240px] flex flex-col justify-between overflow-hidden`}
               >
-                <div>
+                <div className="flex-1 min-w-0">
                   <div className="text-accent mb-6">
                     <Icon size={isFirst ? 32 : 28} />
                   </div>
                   <h3
-                    className={`font-heading font-bold mb-3 leading-snug ${
+                    className={`font-heading font-bold mb-3 leading-snug break-words hyphens-auto ${
                       isFirst
                         ? 'text-2xl sm:text-3xl text-background'
                         : 'text-xl sm:text-2xl text-foreground'