feat: showcase layout, photo filter, team specializations, scroll UX

- Replace modals with ShowcaseLayout for Team and Classes sections
- Add warm photo filter matching dark/gold color scheme
- Replace generic "Тренер" with actual specializations per member
- Fix heart logo color animation loop (seamless repeat)
- Style scrollbar with gold theme, pause auto-rotation on hover
- Auto-scroll only when active item is out of view

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ui/ClassModal.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import Image from "next/image";
-import { X, Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
-import type { ClassItem } from "@/types";
-
-const iconMap: Record<string, React.ReactNode> = {
-  flame: <Flame size={20} />,
-  sparkles: <Sparkles size={20} />,
-  wind: <Wind size={20} />,
-  zap: <Zap size={20} />,
-  star: <Star size={20} />,
-  monitor: <Monitor size={20} />,
-};
-
-interface ClassModalProps {
-  classItem: ClassItem | null;
-  onClose: () => void;
-}
-
-export function ClassModal({ classItem, onClose }: ClassModalProps) {
-  useEffect(() => {
-    if (!classItem) return;
-
-    document.body.style.overflow = "hidden";
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.body.style.overflow = "";
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [classItem, onClose]);
-
-  if (!classItem) return null;
-
-  const heroImage = classItem.images?.[0];
-
-  return (
-    <div
-      className="modal-overlay fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-lg sm:items-center sm:p-4"
-      onClick={onClose}
-    >
-      <div
-        className="modal-content relative flex w-full max-h-[90vh] flex-col overflow-hidden rounded-t-3xl bg-white sm:max-w-2xl sm:rounded-3xl dark:bg-[#111]"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Hero image banner */}
-        {heroImage && (
-          <div className="relative h-52 w-full shrink-0 sm:h-64">
-            <Image
-              src={heroImage}
-              alt={classItem.name}
-              fill
-              className="object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
-
-            {/* Close button */}
-            <button
-              onClick={onClose}
-              className="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-sm transition-all hover:bg-black/60 hover:text-white"
-              aria-label="Закрыть"
-            >
-              <X size={16} />
-            </button>
-
-            {/* Title on image */}
-            <div className="absolute bottom-0 left-0 right-0 p-6">
-              <div className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 text-white backdrop-blur-sm">
-                  {iconMap[classItem.icon]}
-                </div>
-                <h3 className="text-2xl font-bold text-white">
-                  {classItem.name}
-                </h3>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Content */}
-        <div className="overflow-y-auto">
-          {/* Title fallback when no image */}
-          {!heroImage && (
-            <div className="flex items-center justify-between p-6 pb-0">
-              <div className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#c9a96e]/10 text-[#a08050] dark:bg-[#c9a96e]/10 dark:text-[#d4b87a]">
-                  {iconMap[classItem.icon]}
-                </div>
-                <h3 className="heading-text text-xl font-bold">
-                  {classItem.name}
-                </h3>
-              </div>
-              <button
-                onClick={onClose}
-                className="rounded-full p-1.5 text-neutral-400 transition-all hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-500 dark:hover:bg-white/[0.05] dark:hover:text-white"
-                aria-label="Закрыть"
-              >
-                <X size={18} />
-              </button>
-            </div>
-          )}
-
-          {classItem.detailedDescription && (
-            <div className="p-6 text-sm leading-relaxed whitespace-pre-line text-neutral-600 dark:text-neutral-300">
-              {classItem.detailedDescription}
-            </div>
-          )}
-
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/ui/HeroLogo.tsx

@@ -21,17 +21,16 @@ export function HeroLogo({ className = "", size = 220, animated = false }: HeroL
         <defs>
           <linearGradient id="heart-gradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
             <stop offset="0%" stopColor="#000">
-              <animate attributeName="stop-color" values="#000;#c9a96e;#000" dur="6s" repeatCount="indefinite" />
+              <animate attributeName="stop-color" values="#000;#c9a96e;#000;#000;#000" dur="6s" repeatCount="indefinite" />
             </stop>
-            <stop offset="40%" stopColor="#000">
-              <animate attributeName="stop-color" values="#000;#000;#c9a96e" dur="6s" repeatCount="indefinite" />
+            <stop offset="35%" stopColor="#000">
+              <animate attributeName="stop-color" values="#000;#000;#c9a96e;#000;#000" dur="6s" repeatCount="indefinite" />
             </stop>
-            <stop offset="60%" stopColor="#c9a96e">
-              <animate attributeName="stop-color" values="#c9a96e;#000;#000" dur="6s" repeatCount="indefinite" />
+            <stop offset="65%" stopColor="#000">
+              <animate attributeName="stop-color" values="#000;#000;#000;#c9a96e;#000" dur="6s" repeatCount="indefinite" />
             </stop>
             <stop offset="100%" stopColor="#000">
-              <animate attributeName="stop-color" values="#000;#c9a96e;#000" dur="6s" repeatCount="indefinite" />
-              <animate attributeName="offset" values="1;1;1" dur="6s" repeatCount="indefinite" />
+              <animate attributeName="stop-color" values="#000;#000;#000;#c9a96e;#000" dur="6s" repeatCount="indefinite" />
             </stop>
           </linearGradient>
         </defs>

src/components/ui/ShowcaseLayout.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+
+interface ShowcaseLayoutProps<T> {
+  items: T[];
+  activeIndex: number;
+  onSelect: (index: number) => void;
+  onHoverChange?: (hovering: boolean) => void;
+  renderDetail: (item: T, index: number) => React.ReactNode;
+  renderSelectorItem: (item: T, index: number, isActive: boolean) => React.ReactNode;
+}
+
+export function ShowcaseLayout<T>({
+  items,
+  activeIndex,
+  onSelect,
+  onHoverChange,
+  renderDetail,
+  renderSelectorItem,
+}: ShowcaseLayoutProps<T>) {
+  const selectorRef = useRef<HTMLDivElement>(null);
+  const activeItemRef = useRef<HTMLButtonElement>(null);
+  const [isUserInteracting, setIsUserInteracting] = useState(false);
+
+  // Auto-scroll selector only when item is out of view
+  useEffect(() => {
+    if (isUserInteracting) return;
+
+    const container = selectorRef.current;
+    const activeEl = activeItemRef.current;
+    if (!container || !activeEl) return;
+
+    const isHorizontal = window.innerWidth < 1024;
+
+    if (isHorizontal) {
+      const elLeft = activeEl.offsetLeft;
+      const elRight = elLeft + activeEl.offsetWidth;
+      const scrollLeft = container.scrollLeft;
+      const viewRight = scrollLeft + container.offsetWidth;
+
+      if (elLeft < scrollLeft || elRight > viewRight) {
+        const left = elLeft - container.offsetWidth / 2 + activeEl.offsetWidth / 2;
+        container.scrollTo({ left, behavior: "smooth" });
+      }
+    } else {
+      const elTop = activeEl.offsetTop;
+      const elBottom = elTop + activeEl.offsetHeight;
+      const scrollTop = container.scrollTop;
+      const viewBottom = scrollTop + container.offsetHeight;
+
+      if (elTop < scrollTop || elBottom > viewBottom) {
+        const top = elTop - container.offsetHeight / 2 + activeEl.offsetHeight / 2;
+        container.scrollTo({ top, behavior: "smooth" });
+      }
+    }
+  }, [activeIndex, isUserInteracting]);
+
+  function handleMouseEnter() {
+    setIsUserInteracting(true);
+    onHoverChange?.(true);
+  }
+
+  function handleMouseLeave() {
+    setIsUserInteracting(false);
+    onHoverChange?.(false);
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-6 lg:flex-row lg:gap-8"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Detail area */}
+      <div className="lg:w-[60%]">
+        <div key={activeIndex} className="showcase-detail-enter">
+          {renderDetail(items[activeIndex], activeIndex)}
+        </div>
+      </div>
+
+      {/* Selector */}
+      <div className="lg:w-[40%]">
+        <div
+          ref={selectorRef}
+          className="styled-scrollbar flex gap-3 overflow-x-auto pb-2 lg:max-h-[600px] lg:flex-col lg:overflow-y-auto lg:overflow-x-visible lg:pb-0 lg:pr-1"
+        >
+          {items.map((item, i) => (
+            <button
+              key={i}
+              ref={i === activeIndex ? activeItemRef : null}
+              onClick={() => onSelect(i)}
+              className={`flex-shrink-0 cursor-pointer rounded-xl border-2 text-left transition-all duration-300 ${
+                i === activeIndex
+                  ? "border-[#c9a96e]/60 bg-[#c9a96e]/10 dark:bg-[#c9a96e]/5"
+                  : "border-transparent bg-neutral-100 hover:bg-neutral-200 dark:bg-white/[0.03] dark:hover:bg-white/[0.06]"
+              }`}
+            >
+              {renderSelectorItem(item, i, i === activeIndex)}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ui/TeamMemberModal.tsx

@@ -1,91 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import Image from "next/image";
-import { X, Instagram } from "lucide-react";
-import type { TeamMember } from "@/types";
-
-interface TeamMemberModalProps {
-  member: TeamMember | null;
-  onClose: () => void;
-}
-
-export function TeamMemberModal({ member, onClose }: TeamMemberModalProps) {
-  useEffect(() => {
-    if (!member) return;
-
-    document.body.style.overflow = "hidden";
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.body.style.overflow = "";
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [member, onClose]);
-
-  if (!member) return null;
-
-  return (
-    <div
-      className="modal-overlay fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-lg sm:items-center sm:p-4"
-      onClick={onClose}
-    >
-      <div
-        className="modal-content relative flex w-full max-h-[90vh] flex-col overflow-hidden rounded-t-3xl bg-white sm:max-w-lg sm:rounded-3xl dark:bg-[#111]"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Hero photo */}
-        <div className="relative h-72 w-full shrink-0 sm:h-80">
-          <Image
-            src={member.image}
-            alt={member.name}
-            fill
-            className="object-cover"
-          />
-          {/* Gradient overlay */}
-          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
-
-          {/* Close button */}
-          <button
-            onClick={onClose}
-            className="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-sm transition-all hover:bg-black/60 hover:text-white"
-            aria-label="Закрыть"
-          >
-            <X size={16} />
-          </button>
-
-          {/* Name + Instagram on photo */}
-          <div className="absolute bottom-0 left-0 right-0 p-6">
-            <h3 className="text-2xl font-bold text-white">
-              {member.name}
-            </h3>
-            {member.instagram && (
-              <a
-                href={member.instagram}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="mt-2 inline-flex items-center gap-2 text-sm text-white/70 transition-colors hover:text-[#d4b87a]"
-              >
-                <Instagram size={15} className="shrink-0" />
-                <span>{member.instagram.split("/").filter(Boolean).pop()}</span>
-              </a>
-            )}
-          </div>
-        </div>
-
-        {/* Description */}
-        {member.description && (
-          <div className="overflow-y-auto p-6">
-            <p className="text-sm leading-relaxed text-neutral-600 dark:text-neutral-300">
-              {member.description}
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}