From e42c3c7a5176d138c6ddb9681580529f35cfdb81 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 20:05:56 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20FAQ=20section=20redesign=20=E2=80=94=20?=
 =?UTF-8?q?compact=20cards,=20expand/collapse,=20bigger=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                       |   6 ++
 src/components/sections/FAQ.tsx | 124 ++++++++++++++++++++------------
 2 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 901321d..28af5ae 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -72,6 +72,12 @@ src/
 - 2 addresses in Minsk, Yandex Maps embed with markers
 - Contact: phone, Instagram
 
+## AST Index
+- **Always use the AST index** at `memory/ast-index.md` when searching for components, props, hooks, types, or styles
+- Contains: component tree, all exports, props, hooks, client/server status, CSS classes, keyframes
+- Covers all 31 TS/TSX files + 4 CSS files
+- Update the index when adding/removing/renaming files or exports
+
 ## Git
 - Remote: Gitea at `git.dolgolyov-family.by`
 - User: diana.dolgolyova
diff --git a/src/components/sections/FAQ.tsx b/src/components/sections/FAQ.tsx
index 673bbbd..d74413b 100644
--- a/src/components/sections/FAQ.tsx
+++ b/src/components/sections/FAQ.tsx
@@ -1,19 +1,25 @@
 "use client";
 
 import { useState } from "react";
-import { Plus, Minus } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 
+const VISIBLE_COUNT = 4;
+
 export function FAQ() {
   const { faq } = siteContent;
   const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const [expanded, setExpanded] = useState(false);
 
   function toggle(index: number) {
     setOpenIndex(openIndex === index ? null : index);
   }
 
+  const visibleItems = expanded ? faq.items : faq.items.slice(0, VISIBLE_COUNT);
+  const hasMore = faq.items.length > VISIBLE_COUNT;
+
   return (
     <section id="faq" className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808]">
       <div className="section-divider absolute top-0 left-0 right-0" />
@@ -22,55 +28,81 @@ export function FAQ() {
           <SectionHeading centered>{faq.title}</SectionHeading>
         </Reveal>
 
-        <div className="mx-auto mt-14 grid max-w-5xl gap-x-10 lg:grid-cols-2">
-          {[0, 1].map((col) => {
-            const half = Math.ceil(faq.items.length / 2);
-            const items = col === 0 ? faq.items.slice(0, half) : faq.items.slice(half);
-            const offset = col === 0 ? 0 : half;
+        <div className="mx-auto mt-12 max-w-3xl space-y-2.5">
+          {visibleItems.map((item, idx) => {
+            const isOpen = openIndex === idx;
             return (
-              <div key={col}>
-                {items.map((item, i) => {
-                  const idx = offset + i;
-                  return (
-                    <Reveal key={idx}>
-                      <div
-                        className={`border-b border-neutral-200 dark:border-white/[0.06] ${
-                          i === 0 ? "border-t" : ""
-                        }`}
-                      >
-                        <button
-                          onClick={() => toggle(idx)}
-                          className="flex w-full items-center justify-between gap-4 py-5 text-left transition-colors"
-                        >
-                          <span className="text-sm font-medium text-neutral-900 dark:text-white sm:text-base">
-                            {item.question}
-                          </span>
-                          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 transition-all duration-300 dark:bg-white/[0.06]">
-                            {openIndex === idx ? (
-                              <Minus size={14} className="text-[#c9a96e]" />
-                            ) : (
-                              <Plus size={14} className="text-neutral-400 dark:text-neutral-500" />
-                            )}
-                          </span>
-                        </button>
-                        <div
-                          className={`grid transition-all duration-300 ease-out ${
-                            openIndex === idx ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
-                          }`}
-                        >
-                          <div className="overflow-hidden">
-                            <div className="pb-5 pr-10 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 whitespace-pre-line">
-                              {item.answer}
-                            </div>
-                          </div>
-                        </div>
+              <Reveal key={idx}>
+                <div
+                  className={`rounded-xl border transition-all duration-300 ${
+                    isOpen
+                      ? "border-[#c9a96e]/30 bg-gradient-to-br from-[#c9a96e]/[0.06] via-transparent to-[#c9a96e]/[0.03] shadow-md shadow-[#c9a96e]/5"
+                      : "border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
+                  }`}
+                >
+                  <button
+                    onClick={() => toggle(idx)}
+                    className="flex w-full items-center gap-3 px-5 py-4 text-left cursor-pointer"
+                  >
+                    {/* Number badge */}
+                    <span
+                      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold transition-colors duration-300 ${
+                        isOpen
+                          ? "bg-[#c9a96e] text-black"
+                          : "bg-[#c9a96e]/10 text-[#a08050] dark:text-[#d4b87a]"
+                      }`}
+                    >
+                      {idx + 1}
+                    </span>
+
+                    <span className="flex-1 text-sm sm:text-base font-medium text-neutral-900 dark:text-white leading-snug">
+                      {item.question}
+                    </span>
+
+                    <ChevronDown
+                      size={16}
+                      className={`shrink-0 transition-all duration-300 ${
+                        isOpen ? "text-[#c9a96e] rotate-180" : "text-neutral-400 dark:text-neutral-500"
+                      }`}
+                    />
+                  </button>
+
+                  <div
+                    className={`grid transition-all duration-300 ease-out ${
+                      isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+                    }`}
+                  >
+                    <div className="overflow-hidden">
+                      <div className="px-5 pb-4 pl-14 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 whitespace-pre-line">
+                        {item.answer}
                       </div>
-                    </Reveal>
-                  );
-                })}
-              </div>
+                    </div>
+                  </div>
+                </div>
+              </Reveal>
             );
           })}
+
+          {/* Show more / less */}
+          {hasMore && (
+            <Reveal>
+              <div className="pt-2 text-center">
+                <button
+                  onClick={() => {
+                    setExpanded(!expanded);
+                    if (expanded) setOpenIndex(null);
+                  }}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-5 py-2 text-sm font-medium text-neutral-600 transition-all hover:border-[#c9a96e]/40 hover:text-[#c9a96e] dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-neutral-400 dark:hover:border-[#c9a96e]/30 dark:hover:text-[#c9a96e] cursor-pointer"
+                >
+                  {expanded ? "Скрыть" : `Ещё ${faq.items.length - VISIBLE_COUNT} вопросов`}
+                  <ChevronDown
+                    size={14}
+                    className={`transition-transform duration-300 ${expanded ? "rotate-180" : ""}`}
+                  />
+                </button>
+              </div>
+            </Reveal>
+          )}
         </div>
       </div>
     </section>