Add FAQ section and footer phone contact picker

app/[locale]/about/AboutContent.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   GitBranch,
   Lock,
@@ -12,6 +13,7 @@ import {
   Globe,
   Briefcase,
   Clock,
+  Plus,
 } from "lucide-react";
 import GlassCard from "@/components/ui/GlassCard";
 import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
@@ -42,6 +44,7 @@ type ApproachParagraph = TextParagraph | LinkParagraph;
 
 export default function AboutContent({ locale, dict }: AboutContentProps) {
   const t = dict.aboutPage;
+  const [openFaq, setOpenFaq] = useState<number | null>(null);
 
   return (
     <>
@@ -152,6 +155,85 @@ export default function AboutContent({ locale, dict }: AboutContentProps) {
         </div>
       </section>
 
+      {/* FAQ */}
+      <section className="relative w-full py-20 sm:py-24">
+        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={viewportConfig}
+            variants={stagger(0.06)}
+            className="mx-auto mb-14 max-w-3xl text-center"
+          >
+            <motion.h2
+              variants={fadeUp}
+              className="font-display text-display-lg font-medium tracking-tight text-gradient-fade"
+            >
+              {t.faqTitle}
+            </motion.h2>
+          </motion.div>
+
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={viewportConfig}
+            variants={stagger(0.06)}
+            className="mx-auto flex max-w-3xl flex-col gap-3"
+          >
+            {t.faq.map((item, i) => {
+              const isOpen = openFaq === i;
+              return (
+                <motion.div key={i} variants={fadeUp}>
+                  <GlassCard
+                    className={`p-0 ${isOpen ? "border-purple-400/30 shadow-glow-sm" : ""}`}
+                    hover={false}
+                  >
+                    <h3>
+                      <button
+                        type="button"
+                        onClick={() => setOpenFaq(isOpen ? null : i)}
+                        aria-expanded={isOpen}
+                        aria-controls={`faq-answer-${i}`}
+                        className="flex w-full items-center justify-between gap-4 rounded-2xl px-6 py-5 text-left transition-colors duration-300 hover:text-purple-200"
+                      >
+                        <span className="text-base font-medium text-text-primary sm:text-lg">
+                          {item.question}
+                        </span>
+                        <span
+                          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 ${
+                            isOpen ? "rotate-45 border-purple-400/50 bg-purple-500/20" : ""
+                          }`}
+                        >
+                          <Plus className="h-4 w-4" strokeWidth={1.5} />
+                        </span>
+                      </button>
+                    </h3>
+
+                    <AnimatePresence initial={false}>
+                      {isOpen && (
+                        <motion.div
+                          id={`faq-answer-${i}`}
+                          key="answer"
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: "auto", opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
+                          className="overflow-hidden"
+                        >
+                          <p className="border-t border-border/40 px-6 pb-5 pt-4 text-sm leading-relaxed text-text-secondary">
+                            {item.answer}
+                          </p>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </GlassCard>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </section>
+
       {/* Highlights */}
       <section className="relative w-full py-20 sm:py-24">
         <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">