feat: floating contact bar, remove pricing contact links, fix admin hooks
- Add FloatingContact bar (Записаться + Instagram) visible while scrolling - Hides on hero and near contact section, centered at bottom - Move BackToTop button up to avoid overlap - Remove redundant ContactHint from Pricing section (floating bar covers it) - Fix React hooks order violation in AdminLayout (early return before useEffect) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -19,7 +19,7 @@ export function BackToTop() {
|
||||
<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-gold/30 bg-black/60 text-gold-light backdrop-blur-sm transition-all duration-300 hover:bg-gold/20 hover:border-gold/50 ${
|
||||
className={`fixed bottom-20 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-gold/30 bg-black/60 text-gold-light backdrop-blur-sm transition-all duration-300 hover:bg-gold/20 hover:border-gold/50 ${
|
||||
visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
|
||||
65
src/components/ui/FloatingContact.tsx
Normal file
65
src/components/ui/FloatingContact.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Instagram } from "lucide-react";
|
||||
import { BRAND } from "@/lib/constants";
|
||||
import { SignupModal } from "./SignupModal";
|
||||
|
||||
export function FloatingContact() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
function handleScroll() {
|
||||
const contactEl = document.getElementById("contact");
|
||||
|
||||
const pastHero = window.scrollY > window.innerHeight * 0.7;
|
||||
const reachedContact = contactEl
|
||||
? window.scrollY + window.innerHeight > contactEl.offsetTop + 100
|
||||
: false;
|
||||
|
||||
setVisible(pastHero && !reachedContact);
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
handleScroll();
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`fixed bottom-6 left-1/2 z-40 -translate-x-1/2 flex items-center gap-3 rounded-full border border-gold/20 bg-black/80 px-2 py-2 backdrop-blur-md shadow-lg shadow-black/40 transition-all duration-400 ${
|
||||
visible
|
||||
? "translate-y-0 opacity-100"
|
||||
: "translate-y-6 opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="rounded-full bg-gold px-5 py-2 text-sm font-semibold text-black transition-colors hover:bg-gold-light"
|
||||
>
|
||||
Записаться
|
||||
</button>
|
||||
|
||||
<a
|
||||
href={BRAND.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
className="flex h-9 w-9 items-center justify-center rounded-full border border-gold/30 text-gold-light transition-colors hover:bg-gold/20 hover:border-gold/50"
|
||||
>
|
||||
<Instagram size={18} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<SignupModal
|
||||
open={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
title="Записаться на занятие"
|
||||
subtitle="Оставьте контактные данные и мы свяжемся с вами"
|
||||
endpoint="/api/group-booking"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user