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

@@ -0,0 +1,28 @@
"use client";
import { useState, useEffect } from "react";
import { ChevronUp } from "lucide-react";
export function BackToTop() {
const [visible, setVisible] = useState(false);
useEffect(() => {
function handleScroll() {
setVisible(window.scrollY > 600);
}
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<button
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
aria-label="Наверх"
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-[#c9a96e]/30 bg-black/60 text-[#d4b87a] backdrop-blur-sm transition-all duration-300 hover:bg-[#c9a96e]/20 hover:border-[#c9a96e]/50 ${
visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
}`}
>
<ChevronUp size={18} />
</button>
);
}