feat: about stats cards, pricing popular badge, back-to-top button

- About: add 3 stat cards (13 trainers, 6 styles, 2 locations)
- Pricing: highlight first plan with gold "Популярный" badge
- BackToTop: floating gold button appears after 600px scroll

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 13:25:53 +03:00
parent 3ff69d6945
commit 26e78edf5c
4 changed files with 90 additions and 21 deletions

View File

@@ -1,7 +1,14 @@
import { Users, Layers, MapPin } from "lucide-react";
import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
const stats = [
{ icon: <Users size={22} />, value: "13", label: "тренеров" },
{ icon: <Layers size={22} />, value: "6", label: "направлений" },
{ icon: <MapPin size={22} />, value: "2", label: "зала в Минске" },
];
export function About() {
const { about } = siteContent;
@@ -22,6 +29,28 @@ export function About() {
</Reveal>
))}
</div>
{/* Stats */}
<Reveal>
<div className="mx-auto mt-14 grid max-w-3xl grid-cols-3 gap-4 sm:gap-8">
{stats.map((stat, i) => (
<div
key={i}
className="group flex flex-col items-center gap-3 rounded-2xl border border-neutral-200 bg-white/50 p-6 transition-all duration-300 hover:border-[#c9a96e]/30 sm:p-8 dark:border-white/[0.06] dark:bg-white/[0.02] dark:hover:border-[#c9a96e]/20"
>
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-[#a08050] transition-colors group-hover:bg-[#c9a96e]/20 dark:text-[#d4b87a]">
{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>
);