feat: FAQ section redesign — compact cards, expand/collapse, bigger text
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user