diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: FAQ section redesign — compact cards, expand/collapse, bigger text

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-10 20:05:56 +03:00
parent 8fbbc94024
commit e42c3c7a51
2 changed files with 84 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CLAUDE.md
View File

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

82
src/components/sections/FAQ.tsx
View File

@@ -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,44 +28,52 @@ 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;
return (
<div key={col}>
{items.map((item, i) => {
const idx = offset + i;
<div className="mx-auto mt-12 max-w-3xl space-y-2.5">
{visibleItems.map((item, idx) => {
const isOpen = openIndex === idx;
return (
<Reveal key={idx}>
<div
className={`border-b border-neutral-200 dark:border-white/[0.06] ${
i === 0 ? "border-t" : ""
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 justify-between gap-4 py-5 text-left transition-colors"
className="flex w-full items-center gap-3 px-5 py-4 text-left cursor-pointer"
>
<span className="text-sm font-medium text-neutral-900 dark:text-white sm:text-base">
{/* 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>
<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>
<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 ${
openIndex === idx ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
isOpen ? "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">
<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>
</div>
@@ -68,9 +82,27 @@ export function FAQ() {
</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>