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
69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
import { Users, Layers, MapPin } from "lucide-react";
|
|
import { SectionHeading } from "@/components/ui/SectionHeading";
|
|
import { Reveal } from "@/components/ui/Reveal";
|
|
import type { SiteContent } from "@/types/content";
|
|
|
|
interface AboutStats {
|
|
trainers: number;
|
|
classes: number;
|
|
locations: number;
|
|
}
|
|
|
|
interface AboutProps {
|
|
data: SiteContent["about"];
|
|
stats: AboutStats;
|
|
}
|
|
|
|
export function About({ data: about, stats }: AboutProps) {
|
|
if (!about?.paragraphs) return null;
|
|
const statItems = [
|
|
{ icon: <Users size={22} />, value: String(stats.trainers), label: "тренеров", ariaLabel: `${stats.trainers} тренеров` },
|
|
{ icon: <Layers size={22} />, value: String(stats.classes), label: "направлений", ariaLabel: `${stats.classes} направлений` },
|
|
{ icon: <MapPin size={22} />, value: String(stats.locations), label: "зала в Минске", ariaLabel: `${stats.locations} зала в Минске` },
|
|
];
|
|
|
|
return (
|
|
<section id="about" className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808]">
|
|
<div className="section-divider absolute top-0 left-0 right-0" />
|
|
<div className="section-container">
|
|
<Reveal>
|
|
<SectionHeading centered>{about.title}</SectionHeading>
|
|
</Reveal>
|
|
|
|
<div className="mt-14 mx-auto max-w-2xl space-y-8 text-center">
|
|
{about.paragraphs.map((text) => (
|
|
<Reveal key={text}>
|
|
<p className="text-xl leading-relaxed text-neutral-600 dark:text-neutral-300 sm:text-2xl">
|
|
{text}
|
|
</p>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<Reveal>
|
|
<div className="mx-auto mt-14 grid max-w-3xl grid-cols-3 gap-4 sm:gap-8">
|
|
{statItems.map((stat, i) => (
|
|
<div
|
|
key={i}
|
|
aria-label={stat.ariaLabel}
|
|
className="group flex flex-col items-center gap-3 rounded-2xl border border-neutral-200 bg-white/80 p-6 shadow-sm shadow-gold/[0.06] transition-all duration-300 hover:border-gold/30 hover:shadow-md hover:shadow-gold/[0.1] sm:p-8 dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none dark:hover:border-gold/20 dark:hover:shadow-none"
|
|
>
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gold/10 text-gold-dark transition-colors group-hover:bg-gold/20 dark:text-gold-light" aria-hidden="true">
|
|
{stat.icon}
|
|
</div>
|
|
<span className="font-display text-3xl font-bold text-neutral-900 sm:text-4xl dark:text-white">
|
|
{stat.value}
|
|
</span>
|
|
<span className="text-sm text-neutral-500 dark:text-neutral-400">
|
|
{stat.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|