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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user