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/app/styles/animations.css

@@ -200,6 +200,38 @@
   transform: translateY(0);
 }
 
+/* ===== Showcase ===== */
+
+@keyframes showcase-detail-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes showcase-image-enter {
+  from {
+    opacity: 0;
+    transform: scale(1.03);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.showcase-detail-enter {
+  animation: showcase-detail-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.showcase-detail-enter img {
+  animation: showcase-image-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
 /* ===== Modal ===== */
 
 @keyframes modal-fade-in {
@@ -270,6 +302,11 @@
     animation: none !important;
   }
 
+  .showcase-detail-enter,
+  .showcase-detail-enter img {
+    animation: none !important;
+  }
+
   .glow-hover:hover {
     transform: none;
   }

src/app/styles/theme.css

@@ -88,3 +88,38 @@
 .glass-card:hover {
   @apply dark:border-[#c9a96e]/15 dark:bg-white/[0.06];
 }
+
+/* ===== Photo Filter ===== */
+
+.photo-filter {
+  filter: saturate(0.7) sepia(0.15) brightness(0.95) contrast(1.05);
+}
+
+:is(.dark) .photo-filter {
+  filter: saturate(0.6) sepia(0.2) brightness(0.9) contrast(1.1);
+}
+
+/* ===== Custom Scrollbar ===== */
+
+.styled-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(201, 169, 110, 0.25) transparent;
+}
+
+.styled-scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.styled-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(201, 169, 110, 0.25);
+  border-radius: 4px;
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(201, 169, 110, 0.4);
+}

src/components/sections/Classes.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useState } from "react";
 import Image from "next/image";
-import { Flame, Sparkles, Wind, Zap, Star, Monitor, ArrowRight } from "lucide-react";
+import { Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
-import { ClassModal } from "@/components/ui/ClassModal";
+import { ShowcaseLayout } from "@/components/ui/ShowcaseLayout";
+import { useShowcaseRotation } from "@/hooks/useShowcaseRotation";
 import type { ClassItem } from "@/types";
 
 const iconMap: Record<string, React.ReactNode> = {
@@ -20,7 +20,10 @@ const iconMap: Record<string, React.ReactNode> = {
 
 export function Classes() {
   const { classes } = siteContent;
-  const [selectedClass, setSelectedClass] = useState<ClassItem | null>(null);
+  const { activeIndex, select, setHovering } = useShowcaseRotation({
+    totalItems: classes.items.length,
+    autoPlayInterval: 5000,
+  });
 
   return (
     <section id="classes" className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808]">
@@ -30,60 +33,79 @@ export function Classes() {
           <SectionHeading centered>{classes.title}</SectionHeading>
         </Reveal>
 
-        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="mt-14">
-          {classes.items.map((item) => (
+          <Reveal>
-            <Reveal key={item.name} className="h-full">
+            <ShowcaseLayout<ClassItem>
-              <div
+              items={classes.items}
-                className="group relative h-full min-h-[280px] cursor-pointer overflow-hidden rounded-2xl"
+              activeIndex={activeIndex}
-                onClick={() => setSelectedClass(item)}
+              onSelect={select}
-              >
+              onHoverChange={setHovering}
-                {/* Background image */}
+              renderDetail={(item) => (
-                {item.images && item.images[0] && (
+                <div>
-                  <Image
+                  {/* Hero image */}
-                    src={item.images[0]}
+                  {item.images && item.images[0] && (
-                    alt={item.name}
+                    <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
-                    fill
+                      <Image
-                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+                        src={item.images[0]}
-                  />
+                        alt={item.name}
-                )}
+                        fill
+                        className="object-cover photo-filter"
+                      />
+                      {/* Gradient overlay */}
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
 
-                {/* Dark gradient overlay */}
+                      {/* Icon + name overlay */}
-                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/10 transition-all duration-500 group-hover:from-black/95 group-hover:via-black/50" />
+                      <div className="absolute bottom-0 left-0 right-0 p-6">
+                        <div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-[#c9a96e]/20 text-[#d4b87a] backdrop-blur-sm">
+                          {iconMap[item.icon]}
+                        </div>
+                        <h3 className="text-2xl font-bold text-white">
+                          {item.name}
+                        </h3>
+                      </div>
+                    </div>
+                  )}
 
-                {/* Gold tint on hover */}
+                  {/* Description */}
-                <div className="absolute inset-0 bg-[#c9a96e]/0 transition-all duration-500 group-hover:bg-[#c9a96e]/5" />
+                  {item.detailedDescription && (
-
+                    <div className="mt-5 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 whitespace-pre-line">
-                {/* Content */}
+                      {item.detailedDescription}
-                <div className="relative flex h-full flex-col justify-end p-6">
+                    </div>
-                  {/* Icon badge */}
+                  )}
-                  <div className="mb-3 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-white backdrop-blur-sm transition-all duration-300 group-hover:bg-[#c9a96e]/20 group-hover:text-[#d4b87a]">
+                </div>
+              )}
+              renderSelectorItem={(item, _i, isActive) => (
+                <div className="flex items-center gap-3 p-3">
+                  {/* Icon */}
+                  <div
+                    className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
+                      isActive
+                        ? "bg-[#c9a96e]/20 text-[#d4b87a]"
+                        : "bg-neutral-200/50 text-neutral-500 dark:bg-white/[0.06] dark:text-neutral-400"
+                    }`}
+                  >
                     {iconMap[item.icon]}
                   </div>
-
+                  <div className="min-w-0">
-                  <h3 className="text-xl font-semibold text-white">
+                    <p
-                    {item.name}
+                      className={`text-sm font-semibold truncate transition-colors ${
-                  </h3>
+                        isActive
-
+                          ? "text-[#c9a96e]"
-                  <p className="mt-1.5 text-sm leading-relaxed text-white/60 line-clamp-2">
+                          : "text-neutral-700 dark:text-neutral-300"
-                    {item.description}
+                      }`}
-                  </p>
+                    >
-
+                      {item.name}
-                  {/* Hover arrow */}
+                    </p>
-                  <div className="mt-3 flex items-center gap-1.5 text-sm font-medium text-[#d4b87a] opacity-0 translate-y-2 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">
+                    <p className="text-xs text-neutral-500 dark:text-neutral-500 truncate">
-                    <span>Подробнее</span>
+                      {item.description}
-                    <ArrowRight size={14} />
+                    </p>
                   </div>
                 </div>
-              </div>
+              )}
-            </Reveal>
+            />
-          ))}
+          </Reveal>
         </div>
       </div>
-
-      <ClassModal
-        classItem={selectedClass}
-        onClose={() => setSelectedClass(null)}
-      />
     </section>
   );
 }

src/components/sections/Team.tsx

@@ -1,100 +1,19 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback } from "react";
 import Image from "next/image";
-import { Instagram, ChevronLeft, ChevronRight } from "lucide-react";
+import { Instagram } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
-import { TeamMemberModal } from "@/components/ui/TeamMemberModal";
+import { ShowcaseLayout } from "@/components/ui/ShowcaseLayout";
+import { useShowcaseRotation } from "@/hooks/useShowcaseRotation";
 import type { TeamMember } from "@/types";
 
 export function Team() {
   const { team } = siteContent;
-  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
+  const { activeIndex, select, setHovering } = useShowcaseRotation({
-  const scrollRef = useRef<HTMLDivElement>(null);
+    totalItems: team.members.length,
-  const scrollTimer = useRef<ReturnType<typeof setTimeout>>(null);
+  });
-  const isDragging = useRef(false);
-  const dragStartX = useRef(0);
-  const dragScrollLeft = useRef(0);
-  const dragMoved = useRef(false);
-
-  // Render 3 copies: [clone] [original] [clone]
-  const tripled = [...team.members, ...team.members, ...team.members];
-
-  // On mount, jump to the middle set (no animation)
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    requestAnimationFrame(() => {
-      const cardWidth = el.scrollWidth / 3;
-      el.scrollLeft = cardWidth;
-    });
-  }, []);
-
-  // When scroll settles, check if we need to loop
-  const handleScroll = useCallback(() => {
-    if (scrollTimer.current) clearTimeout(scrollTimer.current);
-    scrollTimer.current = setTimeout(() => {
-      const el = scrollRef.current;
-      if (!el) return;
-      const oneSetWidth = el.scrollWidth / 3;
-      if (el.scrollLeft < oneSetWidth * 0.3) {
-        el.style.scrollBehavior = "auto";
-        el.scrollLeft += oneSetWidth;
-        el.style.scrollBehavior = "";
-      }
-      if (el.scrollLeft > oneSetWidth * 1.7) {
-        el.style.scrollBehavior = "auto";
-        el.scrollLeft -= oneSetWidth;
-        el.style.scrollBehavior = "";
-      }
-    }, 100);
-  }, []);
-
-  // Mouse drag handlers
-  function handleMouseDown(e: React.MouseEvent) {
-    const el = scrollRef.current;
-    if (!el) return;
-    isDragging.current = true;
-    dragMoved.current = false;
-    dragStartX.current = e.pageX;
-    dragScrollLeft.current = el.scrollLeft;
-    el.style.scrollBehavior = "auto";
-    el.style.scrollSnapType = "none";
-    el.style.cursor = "grabbing";
-  }
-
-  function handleMouseMove(e: React.MouseEvent) {
-    if (!isDragging.current || !scrollRef.current) return;
-    e.preventDefault();
-    const dx = e.pageX - dragStartX.current;
-    if (Math.abs(dx) > 3) dragMoved.current = true;
-    scrollRef.current.scrollLeft = dragScrollLeft.current - dx;
-  }
-
-  function handleMouseUp() {
-    if (!isDragging.current || !scrollRef.current) return;
-    isDragging.current = false;
-    scrollRef.current.style.scrollBehavior = "";
-    scrollRef.current.style.scrollSnapType = "";
-    scrollRef.current.style.cursor = "";
-  }
-
-  function handleCardClick(member: TeamMember) {
-    // Don't open modal if user was dragging
-    if (dragMoved.current) return;
-    setSelectedMember(member);
-  }
-
-  function scroll(direction: "left" | "right") {
-    if (!scrollRef.current) return;
-    const amount = scrollRef.current.offsetWidth * 0.7;
-    scrollRef.current.scrollBy({
-      left: direction === "left" ? -amount : amount,
-      behavior: "smooth",
-    });
-  }
 
   return (
     <section id="team" className="section-glow relative section-padding bg-neutral-50 dark:bg-[#050505]">
@@ -104,92 +23,86 @@ export function Team() {
         <Reveal>
           <SectionHeading centered>{team.title}</SectionHeading>
         </Reveal>
-      </div>
 
-      {/* Carousel wrapper */}
+        <div className="mt-10">
-      <Reveal>
+          <Reveal>
-        <div className="relative mt-10">
+            <ShowcaseLayout<TeamMember>
-          {/* Scroll container */}
+              items={team.members}
-          <div
+              activeIndex={activeIndex}
-            ref={scrollRef}
+              onSelect={select}
-            onScroll={handleScroll}
+              onHoverChange={setHovering}
-            onMouseDown={handleMouseDown}
+              renderDetail={(member) => (
-            onMouseMove={handleMouseMove}
+                <div className="relative aspect-[3/4] max-h-[600px] w-full overflow-hidden rounded-2xl">
-            onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
-            className="flex cursor-grab gap-4 overflow-x-auto px-6 pb-4 sm:px-8 scroll-smooth snap-x snap-mandatory select-none lg:px-[max(2rem,calc((100vw-72rem)/2+2rem))]"
-            style={{ scrollbarWidth: "none" }}
-          >
-            {tripled.map((member, i) => (
-              <div
-                key={`${i}-${member.name}`}
-                className="group relative w-[220px] shrink-0 cursor-pointer snap-start overflow-hidden rounded-2xl sm:w-[260px]"
-                onClick={() => handleCardClick(member)}
-              >
-                {/* Photo */}
-                <div className="aspect-[3/4] w-full overflow-hidden">
                   <Image
                     src={member.image}
                     alt={member.name}
-                    width={260}
+                    fill
-                    height={347}
+                    className="object-cover photo-filter"
-                    className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                   />
-                </div>
 
-                {/* Gradient overlay */}
+                  {/* Gradient overlay */}
-                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 transition-opacity duration-500 group-hover:opacity-100" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
 
-                {/* Gold glow on hover */}
+                  {/* Text over photo */}
-                <div className="absolute inset-0 bg-gradient-to-t from-[#c9a96e]/15 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+                  <div className="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
+                    <h3 className="text-2xl font-bold text-white sm:text-3xl">
+                      {member.name}
+                    </h3>
+                    <p className="mt-1 text-sm font-medium text-[#d4b87a]">
+                      {member.role}
+                    </p>
 
-                {/* Content */}
+                    {member.instagram && (
-                <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-1 transition-transform duration-500 group-hover:translate-y-0">
-                  <h3 className="text-base font-semibold text-white sm:text-lg">
-                    {member.name}
-                  </h3>
-                  {member.instagram && (
-                    <span
-                      className="mt-1 inline-flex items-center gap-1.5 text-xs text-white/60 transition-colors hover:text-[#d4b87a] sm:text-sm"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Instagram size={12} className="shrink-0" />
                       <a
                         href={member.instagram}
                         target="_blank"
                         rel="noopener noreferrer"
+                        className="mt-2 inline-flex items-center gap-1.5 text-sm text-white/60 transition-colors hover:text-[#d4b87a]"
                       >
+                        <Instagram size={14} />
                         {member.instagram.split("/").filter(Boolean).pop()}
                       </a>
-                    </span>
+                    )}
-                  )}
+
+                    {member.description && (
+                      <p className="mt-4 text-sm leading-relaxed text-white/70 line-clamp-4 sm:line-clamp-6">
+                        {member.description}
+                      </p>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
-            ))}
+              renderSelectorItem={(member, _i, isActive) => (
-          </div>
+                <div className="flex items-center gap-3 p-2.5 lg:p-3">
-
+                  {/* Thumbnail */}
-          {/* Side navigation arrows */}
+                  <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg lg:h-14 lg:w-14">
-          <button
+                    <Image
-            onClick={() => scroll("left")}
+                      src={member.image}
-            className="absolute left-2 top-1/2 -translate-y-1/2 hidden h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur-sm transition-all hover:bg-[#c9a96e]/30 hover:text-white sm:flex"
+                      alt={member.name}
-            aria-label="Назад"
+                      fill
-          >
+                      className="object-cover photo-filter"
-            <ChevronLeft size={22} />
+                    />
-          </button>
+                  </div>
-          <button
+                  <div className="min-w-0">
-            onClick={() => scroll("right")}
+                    <p
-            className="absolute right-2 top-1/2 -translate-y-1/2 hidden h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur-sm transition-all hover:bg-[#c9a96e]/30 hover:text-white sm:flex"
+                      className={`text-sm font-semibold truncate transition-colors ${
-            aria-label="Вперёд"
+                        isActive
-          >
+                          ? "text-[#c9a96e]"
-            <ChevronRight size={22} />
+                          : "text-neutral-700 dark:text-neutral-300"
-          </button>
+                      }`}
+                    >
+                      {member.name}
+                    </p>
+                    <p className="text-xs text-neutral-500 dark:text-neutral-500 truncate">
+                      {member.role}
+                    </p>
+                  </div>
+                </div>
+              )}
+            />
+          </Reveal>
         </div>
-      </Reveal>
+      </div>
-
-      <TeamMemberModal
-        member={selectedMember}
-        onClose={() => setSelectedMember(null)}
-      />
     </section>
   );
 }

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">
+            <stop offset="35%" stopColor="#000">
-              <animate attributeName="stop-color" values="#000;#000;#c9a96e" dur="6s" repeatCount="indefinite" />
+              <animate attributeName="stop-color" values="#000;#000;#c9a96e;#000;#000" dur="6s" repeatCount="indefinite" />
             </stop>
-            <stop offset="60%" stopColor="#c9a96e">
+            <stop offset="65%" stopColor="#000">
-              <animate attributeName="stop-color" values="#c9a96e;#000;#000" dur="6s" repeatCount="indefinite" />
+              <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="stop-color" values="#000;#000;#000;#c9a96e;#000" dur="6s" repeatCount="indefinite" />
-              <animate attributeName="offset" values="1;1;1" 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>
-  );
-}

src/data/content.ts

@@ -25,7 +25,7 @@ export const siteContent: SiteContent = {
     members: [
       {
         name: "Виктор Артёмов",
-        role: "Тренер",
+        role: "Pole Fitness · Exotic · Strip",
         image: "/images/team/viktor-artyomov.webp",
         instagram: "https://instagram.com/viktor.artyomov/",
         description:
@@ -33,7 +33,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Анна Тарыба",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/anna-taryba.webp",
         instagram: "https://instagram.com/annataryba/",
         description:
@@ -41,7 +41,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Анастасия Чалей",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/anastasia-chaley.webp",
         instagram: "https://instagram.com/nastya_chaley/",
         description:
@@ -49,7 +49,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Ольга Демидова",
-        role: "Тренер",
+        role: "Pole Dance",
         image: "/images/team/olga-demidova.webp",
         instagram: "https://instagram.com/don_olga_red/",
         description:
@@ -57,7 +57,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Ирина Третьякович",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/irina-tretyukovich.webp",
         instagram: "https://instagram.com/irkatretya/",
         description:
@@ -65,7 +65,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Надежда Сыч",
-        role: "Тренер",
+        role: "Exotic Pole Dance · Body Plastic",
         image: "/images/team/nadezhda-sukh.webp",
         instagram: "https://instagram.com/nadja.dance/",
         description:
@@ -73,7 +73,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Ирина Карпусь",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/irina-karpus.webp",
         instagram: "https://instagram.com/karpus_iri/",
         description:
@@ -81,7 +81,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Юлия Книга",
-        role: "Тренер",
+        role: "Erotic Pole Dance",
         image: "/images/team/yuliya-kniga.webp",
         instagram: "https://instagram.com/knigynzel/",
         description:
@@ -89,7 +89,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Алёна Чигилейчик",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/elena-chigileychik.webp",
         instagram: "https://instagram.com/alenachygi/",
         description:
@@ -97,7 +97,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Елена Тарасевич",
-        role: "Тренер",
+        role: "Body Plastic",
         image: "/images/team/elena-tarasevic.webp",
         instagram: "https://instagram.com/cerceia/",
         description:
@@ -105,7 +105,7 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Кристина Войтович",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/kristina-voytovich.webp",
         instagram: "https://instagram.com/chris_voytovich/",
         description:
@@ -113,35 +113,35 @@ export const siteContent: SiteContent = {
       },
       {
         name: "Екатерина Матлахова",
-        role: "Тренер",
+        role: "Exotic · Pole Dance",
         image: "/images/team/ekaterina-matlakhova.webp",
         description:
           "Создаю чувственные хореографии, где женственность расцветает в сексуальных движениях, изящных линиях и плавных переходах, подкреплённых эстетичными силовыми элементами. В моих танцах рождаются богини!",
       },
       {
         name: "Лилия Огурцова",
-        role: "Тренер",
+        role: "Exotic · Pole Dance",
         image: "/images/team/liliya-ogurtsova.webp",
         description:
           "Я проведу вас в мир акцентных и чарующих хореографий. Мои занятия наполнены мистическим вайбом, драйвом и энергией. Уделяю особое внимание развитию силы, прокачке тела и чистоте движений, а также эмоциональной подаче в танце.",
       },
       {
         name: "Наталья Анцух",
-        role: "Тренер",
+        role: "Exotic Pole Dance",
         image: "/images/team/natalya-antsukh.webp",
         description:
           "Каждое занятие — это праздник для тела и души, где стиль, грация и внутренняя сила объединяются воедино. Новичок или профессионал — я научу вас танцевать с уверенностью, раскрывать свою женственность и получать удовольствие от каждого движения.",
       },
       {
         name: "Яна Артюкевич",
-        role: "Тренер",
+        role: "Pole Dance",
         image: "/images/team/yana-artyukevich.webp",
         description:
           "На моих занятиях вы научитесь красиво и уверенно владеть своим телом, освоите базовые трюки и элементы на пилоне — шаг за шагом, в уютной и вдохновляющей атмосфере. Укрепим мышцы, улучшим растяжку и осанку, а в процессе — почувствуете невероятную уверенность, сексуальность и внутреннюю силу.",
       },
       {
         name: "Анжела Бобко",
-        role: "Тренер",
+        role: "Pole Dance",
         image: "/images/team/anzhela-bobko.webp",
         description:
           "Мой индивидуальный подход и внимательное отношение к каждому ученику создают атмосферу доверия и поддержки. Со мной вы не просто осваиваете технику — вы преодолеваете себя и становитесь лучшей версией себя.",

src/hooks/useShowcaseRotation.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+
+interface UseShowcaseRotationOptions {
+  totalItems: number;
+  autoPlayInterval?: number;
+  pauseDuration?: number;
+}
+
+export function useShowcaseRotation({
+  totalItems,
+  autoPlayInterval = 4000,
+  pauseDuration = 10000,
+}: UseShowcaseRotationOptions) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const pausedUntil = useRef(0);
+  const hoveringRef = useRef(false);
+
+  const select = useCallback(
+    (index: number) => {
+      setActiveIndex(index);
+      pausedUntil.current = Date.now() + pauseDuration;
+    },
+    [pauseDuration],
+  );
+
+  const setHovering = useCallback((hovering: boolean) => {
+    hoveringRef.current = hovering;
+  }, []);
+
+  useEffect(() => {
+    if (totalItems <= 1) return;
+
+    const id = setInterval(() => {
+      if (hoveringRef.current) return;
+      if (Date.now() < pausedUntil.current) return;
+      setActiveIndex((prev) => (prev + 1) % totalItems);
+    }, autoPlayInterval);
+
+    return () => clearInterval(id);
+  }, [totalItems, autoPlayInterval]);
+
+  return { activeIndex, select, setHovering };
+}