feat: dark luxury redesign with black heart branding
Complete visual overhaul: dark-only mode, rose/crimson accent system, glassmorphism header, animated hero with floating hearts and glow orbs, photo-backed cards, infinite team carousel with drag support, redesigned modals with hero images, black heart logo with rose glow silhouette. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import Image from "next/image";
|
||||
import { Instagram } from "lucide-react";
|
||||
import { Instagram, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { siteContent } from "@/data/content";
|
||||
import { SectionHeading } from "@/components/ui/SectionHeading";
|
||||
import { Reveal } from "@/components/ui/Reveal";
|
||||
@@ -12,51 +12,179 @@ 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",
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="team" className="surface-base section-padding">
|
||||
<section id="team" className="relative section-padding bg-neutral-50 dark:bg-[#050505]">
|
||||
<div className="section-divider absolute top-0 left-0 right-0" />
|
||||
|
||||
<div className="section-container">
|
||||
<Reveal>
|
||||
<SectionHeading>{team.title}</SectionHeading>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{team.members.map((member, i) => (
|
||||
<Reveal key={i}>
|
||||
{/* 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
|
||||
className="card flex h-full cursor-pointer flex-col items-center text-center transition-transform hover:scale-[1.02]"
|
||||
onClick={() => setSelectedMember(member)}
|
||||
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)}
|
||||
>
|
||||
<div className="mx-auto h-32 w-32 overflow-hidden rounded-full">
|
||||
{/* Photo */}
|
||||
<div className="aspect-[3/4] w-full overflow-hidden">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
width={128}
|
||||
height={128}
|
||||
className="h-full w-full object-cover"
|
||||
width={260}
|
||||
height={347}
|
||||
className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="heading-text mt-4 text-lg font-semibold">{member.name}</h3>
|
||||
{member.instagram && (
|
||||
<span
|
||||
className="nav-link mt-1 inline-flex gap-1.5 text-sm"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Instagram size={14} className="shrink-0 mt-[3px]" />
|
||||
<a
|
||||
href={member.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
{/* 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" />
|
||||
|
||||
{/* Rose glow on hover */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-rose-900/20 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
|
||||
{/* 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-rose-400 sm:text-sm"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{member.instagram.split("/").filter(Boolean).pop()}
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
<Instagram size={12} className="shrink-0" />
|
||||
<a
|
||||
href={member.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{member.instagram.split("/").filter(Boolean).pop()}
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
))}
|
||||
</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-rose-500/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-rose-500/30 hover:text-white sm:flex"
|
||||
aria-label="Вперёд"
|
||||
>
|
||||
<ChevronRight size={22} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<TeamMemberModal
|
||||
member={selectedMember}
|
||||
|
||||
Reference in New Issue
Block a user