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