diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Diana Dolgolyova
2026-03-10 13:25:53 +03:00
parent 3ff69d6945
commit 26e78edf5c
4 changed files with 90 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/sections/Pricing.tsx
View File

@@ -54,28 +54,38 @@ export function Pricing() {
{pricing.subtitle}
</p>
<div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-white/[0.06]">
{pricing.items.map((item, i) => (
<div
key={i}
className={`group flex items-center justify-between gap-4 px-6 py-5 transition-colors hover:bg-neutral-50 dark:hover:bg-white/[0.03] ${
i > 0 ? "border-t border-neutral-100 dark:border-white/[0.04]" : ""
}`}
>
<div>
<p className="font-medium text-neutral-900 dark:text-white">
{item.name}
</p>
{item.note && (
<p className="mt-0.5 text-sm text-neutral-500 dark:text-neutral-400">
{item.note}
</p>
)}
{pricing.items.map((item, i) => {
const isPopular = i === 0;
return (
<div
key={i}
className={`group flex items-center justify-between gap-4 px-6 py-5 transition-colors hover:bg-neutral-50 dark:hover:bg-white/[0.03] ${
i > 0 ? "border-t border-neutral-100 dark:border-white/[0.04]" : ""
} ${isPopular ? "bg-[#c9a96e]/[0.04] dark:bg-[#c9a96e]/[0.03]" : ""}`}
>
<div>
<div className="flex items-center gap-2">
<p className="font-medium text-neutral-900 dark:text-white">
{item.name}
</p>
{isPopular && (
<span className="rounded-full bg-[#c9a96e]/15 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-[#a08050] dark:text-[#d4b87a]">
Популярный
</span>
)}
</div>
{item.note && (
<p className="mt-0.5 text-sm text-neutral-500 dark:text-neutral-400">
{item.note}
</p>
)}
</div>
<span className="shrink-0 font-display text-xl font-bold text-[#a08050] dark:text-[#d4b87a]">
{item.price}
</span>
</div>
<span className="shrink-0 font-display text-xl font-bold text-[#a08050] dark:text-[#d4b87a]">
{item.price}
</span>
</div>
))}
);
})}
</div>
</div>
</Reveal>