diana.dolgolyova
0e626451e7
- CSS foundation: theme-aware scrollbars, section glows, glass cards with gold shadows, stronger animated borders and glow effects for light mode - Hero: consistent dark-video treatment for both themes, brighter gold gradient text, glowing CTA button - Gradient text: auto-switch to warm gold tones on light backgrounds via html:not(.dark) selector - Team profile: inverted ambient photo bg with white overlay for light, dark text/borders, gold-dark labels for contrast - All sections: text-neutral-500→600 upgrades for WCAG AA contrast, gold shadow accents on cards (About, Pricing, FAQ, DayCard, News) - Admin: replaced hardcoded #c9a96e with theme tokens, fixed select options, array editor borders, booking badges contrast - Header: white text on transparent hero, dark text after scroll - UI components: BackToTop, FloatingHearts, ShowcaseLayout tabs, SignupModal, NewsModal, GroupCard adapted for light backgrounds - Updated CLAUDE.md to reflect dual theme support
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { Instagram } from "lucide-react";
|
||
import type { TeamMember } from "@/types/content";
|
||
|
||
interface TeamMemberInfoProps {
|
||
members: TeamMember[];
|
||
activeIndex: number;
|
||
onSelect: (index: number) => void;
|
||
onOpenBio: () => void;
|
||
}
|
||
|
||
export function TeamMemberInfo({ members, activeIndex, onSelect, onOpenBio }: TeamMemberInfoProps) {
|
||
const member = members[activeIndex];
|
||
|
||
return (
|
||
<div
|
||
key={activeIndex}
|
||
className="mx-auto mt-8 max-w-lg text-center"
|
||
style={{
|
||
animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
|
||
}}
|
||
>
|
||
{member.instagram && (
|
||
<a
|
||
href={member.instagram}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-1.5 text-sm text-neutral-500 transition-colors hover:text-gold-dark dark:text-white/40 dark:hover:text-gold-light"
|
||
>
|
||
<Instagram size={14} />
|
||
{member.instagram.split("/").filter(Boolean).pop()}
|
||
</a>
|
||
)}
|
||
|
||
{(member.shortDescription || member.description) && (
|
||
<p className="mt-3 text-sm leading-relaxed text-neutral-600 dark:text-white/55 line-clamp-3">
|
||
{member.shortDescription || member.description}
|
||
</p>
|
||
)}
|
||
|
||
<button
|
||
onClick={onOpenBio}
|
||
aria-label={`Подробнее о ${member.name}`}
|
||
className="mt-3 text-sm font-medium text-gold hover:text-gold-light transition-colors cursor-pointer"
|
||
>
|
||
Подробнее →
|
||
</button>
|
||
|
||
{/* Progress dots — mobile only (desktop has carousel arrows) */}
|
||
<div className="mt-6 flex items-center justify-center gap-2 sm:hidden">
|
||
{members.map((m, i) => {
|
||
const isActive = i === activeIndex;
|
||
return (
|
||
<button
|
||
key={i}
|
||
onClick={() => onSelect(i)}
|
||
aria-label={`Перейти к ${m.name}`}
|
||
className="relative flex items-center justify-center w-8 h-8 cursor-pointer group"
|
||
>
|
||
{/* Glow ring on active */}
|
||
{isActive && (
|
||
<span className="absolute inset-0 rounded-full bg-gold/15 scale-100 animate-pulse" />
|
||
)}
|
||
<span className={`relative block rounded-full transition-all duration-500 ${
|
||
isActive
|
||
? "w-3 h-3 bg-gold shadow-[0_0_8px_rgba(201,169,110,0.5)]"
|
||
: "w-2 h-2 bg-neutral-400 group-hover:bg-neutral-500 group-hover:scale-125 dark:bg-white/20 dark:group-hover:bg-white/40"
|
||
}`} />
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|