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>
This commit is contained in:
@@ -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">
|
||||
{classes.items.map((item) => (
|
||||
<Reveal key={item.name} className="h-full">
|
||||
<div
|
||||
className="group relative h-full min-h-[280px] cursor-pointer overflow-hidden rounded-2xl"
|
||||
onClick={() => setSelectedClass(item)}
|
||||
>
|
||||
{/* Background image */}
|
||||
{item.images && item.images[0] && (
|
||||
<Image
|
||||
src={item.images[0]}
|
||||
alt={item.name}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
/>
|
||||
)}
|
||||
<div className="mt-14">
|
||||
<Reveal>
|
||||
<ShowcaseLayout<ClassItem>
|
||||
items={classes.items}
|
||||
activeIndex={activeIndex}
|
||||
onSelect={select}
|
||||
onHoverChange={setHovering}
|
||||
renderDetail={(item) => (
|
||||
<div>
|
||||
{/* Hero image */}
|
||||
{item.images && item.images[0] && (
|
||||
<div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
|
||||
<Image
|
||||
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 */}
|
||||
<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" />
|
||||
{/* Icon + name overlay */}
|
||||
<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 */}
|
||||
<div className="absolute inset-0 bg-[#c9a96e]/0 transition-all duration-500 group-hover:bg-[#c9a96e]/5" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative flex h-full flex-col justify-end p-6">
|
||||
{/* 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]">
|
||||
{/* Description */}
|
||||
{item.detailedDescription && (
|
||||
<div className="mt-5 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 whitespace-pre-line">
|
||||
{item.detailedDescription}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{item.name}
|
||||
</h3>
|
||||
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-white/60 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
{/* Hover arrow */}
|
||||
<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">
|
||||
<span>Подробнее</span>
|
||||
<ArrowRight size={14} />
|
||||
<div className="min-w-0">
|
||||
<p
|
||||
className={`text-sm font-semibold truncate transition-colors ${
|
||||
isActive
|
||||
? "text-[#c9a96e]"
|
||||
: "text-neutral-700 dark:text-neutral-300"
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-500 truncate">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
)}
|
||||
/>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ClassModal
|
||||
classItem={selectedClass}
|
||||
onClose={() => setSelectedClass(null)}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 scrollRef = useRef<HTMLDivElement>(null);
|
||||
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",
|
||||
});
|
||||
}
|
||||
const { activeIndex, select, setHovering } = useShowcaseRotation({
|
||||
totalItems: team.members.length,
|
||||
});
|
||||
|
||||
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 */}
|
||||
<Reveal>
|
||||
<div className="relative mt-10">
|
||||
{/* Scroll container */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
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">
|
||||
<div className="mt-10">
|
||||
<Reveal>
|
||||
<ShowcaseLayout<TeamMember>
|
||||
items={team.members}
|
||||
activeIndex={activeIndex}
|
||||
onSelect={select}
|
||||
onHoverChange={setHovering}
|
||||
renderDetail={(member) => (
|
||||
<div className="relative aspect-[3/4] max-h-[600px] w-full overflow-hidden rounded-2xl">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
width={260}
|
||||
height={347}
|
||||
className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
fill
|
||||
className="object-cover photo-filter"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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" />
|
||||
{/* Gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
|
||||
|
||||
{/* Gold glow on hover */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#c9a96e]/15 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
{/* Text over photo */}
|
||||
<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 */}
|
||||
<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" />
|
||||
{member.instagram && (
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Side navigation arrows */}
|
||||
<button
|
||||
onClick={() => scroll("left")}
|
||||
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"
|
||||
aria-label="Назад"
|
||||
>
|
||||
<ChevronLeft size={22} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scroll("right")}
|
||||
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"
|
||||
aria-label="Вперёд"
|
||||
>
|
||||
<ChevronRight size={22} />
|
||||
</button>
|
||||
)}
|
||||
renderSelectorItem={(member, _i, isActive) => (
|
||||
<div className="flex items-center gap-3 p-2.5 lg:p-3">
|
||||
{/* Thumbnail */}
|
||||
<div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-lg lg:h-14 lg:w-14">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
fill
|
||||
className="object-cover photo-filter"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p
|
||||
className={`text-sm font-semibold truncate transition-colors ${
|
||||
isActive
|
||||
? "text-[#c9a96e]"
|
||||
: "text-neutral-700 dark:text-neutral-300"
|
||||
}`}
|
||||
>
|
||||
{member.name}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-500 truncate">
|
||||
{member.role}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Reveal>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<TeamMemberModal
|
||||
member={selectedMember}
|
||||
onClose={() => setSelectedMember(null)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user