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:
28
src/components/ui/BackToTop.tsx
Normal file
28
src/components/ui/BackToTop.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user