From 3ff69d69459dcc9c50ed7f9c4e1ef9ffc52fdcc9 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 13:22:47 +0300
Subject: [PATCH] feat: FAQ two-column layout, team swipe & counter, showcase
 improvements

- FAQ: split into 2 columns on desktop to reduce section height
- Team: remove description line-clamp, show full bio
- ShowcaseLayout: add swipe navigation on mobile, optional counter
- Counter shows current/total with gold accent styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/sections/FAQ.tsx      | 84 ++++++++++++++++------------
 src/components/sections/Team.tsx     |  3 +-
 src/components/ui/ShowcaseLayout.tsx | 52 ++++++++++++++++-
 3 files changed, 100 insertions(+), 39 deletions(-)

diff --git a/src/components/sections/FAQ.tsx b/src/components/sections/FAQ.tsx
index 6319bc5..673bbbd 100644
--- a/src/components/sections/FAQ.tsx
+++ b/src/components/sections/FAQ.tsx
@@ -22,43 +22,55 @@ export function FAQ() {
           <SectionHeading centered>{faq.title}</SectionHeading>
         </Reveal>
 
-        <div className="mx-auto mt-14 max-w-3xl">
-          {faq.items.map((item, i) => (
-            <Reveal key={i}>
-              <div
-                className={`border-b border-neutral-200 dark:border-white/[0.06] ${
-                  i === 0 ? "border-t" : ""
-                }`}
-              >
-                <button
-                  onClick={() => toggle(i)}
-                  className="flex w-full items-center justify-between gap-6 py-6 text-left transition-colors"
-                >
-                  <span className="text-base font-medium text-neutral-900 dark:text-white sm:text-lg">
-                    {item.question}
-                  </span>
-                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-100 transition-all duration-300 dark:bg-white/[0.06]">
-                    {openIndex === i ? (
-                      <Minus size={16} className="text-[#c9a96e]" />
-                    ) : (
-                      <Plus size={16} className="text-neutral-400 dark:text-neutral-500" />
-                    )}
-                  </span>
-                </button>
-                <div
-                  className={`grid transition-all duration-300 ease-out ${
-                    openIndex === i ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
-                  }`}
-                >
-                  <div className="overflow-hidden">
-                    <div className="pb-6 pr-14 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 sm:text-base whitespace-pre-line">
-                      {item.answer}
-                    </div>
-                  </div>
-                </div>
+        <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;
+                  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>
+                      </div>
+                    </Reveal>
+                  );
+                })}
               </div>
-            </Reveal>
-          ))}
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/src/components/sections/Team.tsx b/src/components/sections/Team.tsx
index 9ba2d4b..0a4a4bf 100644
--- a/src/components/sections/Team.tsx
+++ b/src/components/sections/Team.tsx
@@ -31,6 +31,7 @@ export function Team() {
               activeIndex={activeIndex}
               onSelect={select}
               onHoverChange={setHovering}
+              counter
               renderDetail={(member) => (
                 <div className="relative aspect-[3/4] max-h-[600px] w-full overflow-hidden rounded-2xl">
                   <Image
@@ -65,7 +66,7 @@ export function Team() {
                     )}
 
                     {member.description && (
-                      <p className="mt-4 text-sm leading-relaxed text-white/70 line-clamp-4 sm:line-clamp-6">
+                      <p className="mt-4 text-sm leading-relaxed text-white/70">
                         {member.description}
                       </p>
                     )}
diff --git a/src/components/ui/ShowcaseLayout.tsx b/src/components/ui/ShowcaseLayout.tsx
index b82be8f..5275e7d 100644
--- a/src/components/ui/ShowcaseLayout.tsx
+++ b/src/components/ui/ShowcaseLayout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useCallback } from "react";
 
 interface ShowcaseLayoutProps<T> {
   items: T[];
@@ -9,6 +9,7 @@ interface ShowcaseLayoutProps<T> {
   onHoverChange?: (hovering: boolean) => void;
   renderDetail: (item: T, index: number) => React.ReactNode;
   renderSelectorItem: (item: T, index: number, isActive: boolean) => React.ReactNode;
+  counter?: boolean;
 }
 
 export function ShowcaseLayout<T>({
@@ -18,9 +19,11 @@ export function ShowcaseLayout<T>({
   onHoverChange,
   renderDetail,
   renderSelectorItem,
+  counter = false,
 }: ShowcaseLayoutProps<T>) {
   const selectorRef = useRef<HTMLDivElement>(null);
   const activeItemRef = useRef<HTMLButtonElement>(null);
+  const detailRef = useRef<HTMLDivElement>(null);
   const [isUserInteracting, setIsUserInteracting] = useState(false);
 
   // Auto-scroll selector only when item is out of view
@@ -56,6 +59,32 @@ export function ShowcaseLayout<T>({
     }
   }, [activeIndex, isUserInteracting]);
 
+  // Swipe support on detail area
+  const touchStart = useRef<{ x: number; y: number } | null>(null);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }, []);
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (!touchStart.current) return;
+      const dx = e.changedTouches[0].clientX - touchStart.current.x;
+      const dy = e.changedTouches[0].clientY - touchStart.current.y;
+      touchStart.current = null;
+
+      // Only trigger if horizontal swipe is dominant and > 50px
+      if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) {
+        if (dx < 0 && activeIndex < items.length - 1) {
+          onSelect(activeIndex + 1);
+        } else if (dx > 0 && activeIndex > 0) {
+          onSelect(activeIndex - 1);
+        }
+      }
+    },
+    [activeIndex, items.length, onSelect],
+  );
+
   function handleMouseEnter() {
     setIsUserInteracting(true);
     onHoverChange?.(true);
@@ -74,9 +103,28 @@ export function ShowcaseLayout<T>({
     >
       {/* Detail area */}
       <div className="lg:w-[60%]">
-        <div key={activeIndex} className="showcase-detail-enter">
+        <div
+          ref={detailRef}
+          key={activeIndex}
+          className="showcase-detail-enter"
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        >
           {renderDetail(items[activeIndex], activeIndex)}
         </div>
+
+        {/* Counter */}
+        {counter && (
+          <div className="mt-3 flex items-center justify-center gap-2 lg:justify-start">
+            <span className="text-xs font-medium tabular-nums text-[#c9a96e]">
+              {String(activeIndex + 1).padStart(2, "0")}
+            </span>
+            <span className="h-[1px] w-8 bg-white/10" />
+            <span className="text-xs tabular-nums text-neutral-500">
+              {String(items.length).padStart(2, "0")}
+            </span>
+          </div>
+        )}
       </div>
 
       {/* Selector */}