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:
2026-03-20 13:35:36 +03:00
parent 1bfd502930
commit 96e3333e9f
5 changed files with 79 additions and 49 deletions

View File

@@ -51,15 +51,11 @@ export default function AdminLayout({
const router = useRouter(); const router = useRouter();
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
const [unreadTotal, setUnreadTotal] = useState(0); const [unreadTotal, setUnreadTotal] = useState(0);
const isLoginPage = pathname === "/admin/login";
// Don't render admin shell on login page
if (pathname === "/admin/login") {
return <>{children}</>;
}
// Fetch unread counts — poll every 30s // Fetch unread counts — poll every 30s
// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => { useEffect(() => {
if (isLoginPage) return;
function fetchCounts() { function fetchCounts() {
adminFetch("/api/admin/unread-counts") adminFetch("/api/admin/unread-counts")
.then((r) => r.json()) .then((r) => r.json())
@@ -69,7 +65,12 @@ export default function AdminLayout({
fetchCounts(); fetchCounts();
const interval = setInterval(fetchCounts, 30000); const interval = setInterval(fetchCounts, 30000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, [isLoginPage]);
// Don't render admin shell on login page
if (isLoginPage) {
return <>{children}</>;
}
async function handleLogout() { async function handleLogout() {
await fetch("/api/logout", { method: "POST" }); await fetch("/api/logout", { method: "POST" });

View File

@@ -9,6 +9,7 @@ import { News } from "@/components/sections/News";
import { FAQ } from "@/components/sections/FAQ"; import { FAQ } from "@/components/sections/FAQ";
import { Contact } from "@/components/sections/Contact"; import { Contact } from "@/components/sections/Contact";
import { BackToTop } from "@/components/ui/BackToTop"; import { BackToTop } from "@/components/ui/BackToTop";
import { FloatingContact } from "@/components/ui/FloatingContact";
import { Header } from "@/components/layout/Header"; import { Header } from "@/components/layout/Header";
import { Footer } from "@/components/layout/Footer"; import { Footer } from "@/components/layout/Footer";
import { getContent } from "@/lib/content"; import { getContent } from "@/lib/content";
@@ -42,6 +43,7 @@ export default function HomePage() {
<FAQ data={content.faq} /> <FAQ data={content.faq} />
<Contact data={content.contact} /> <Contact data={content.contact} />
<BackToTop /> <BackToTop />
<FloatingContact />
</main> </main>
<Footer /> <Footer />
</> </>

View File

@@ -1,10 +1,9 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import { CreditCard, Building2, ScrollText, Crown, Sparkles, Instagram, Send, Phone } from "lucide-react"; import { CreditCard, Building2, ScrollText, Crown, Sparkles } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading"; import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal"; import { Reveal } from "@/components/ui/Reveal";
import { BRAND } from "@/lib/constants";
import type { SiteContent } from "@/types/content"; import type { SiteContent } from "@/types/content";
type Tab = "prices" | "rental" | "rules"; type Tab = "prices" | "rental" | "rules";
@@ -13,43 +12,8 @@ interface PricingProps {
data: SiteContent["pricing"]; data: SiteContent["pricing"];
} }
function ContactHint() {
return (
<div className="mt-5 flex flex-wrap items-center justify-center gap-3 text-xs text-neutral-500">
<span>Для записи и бронирования:</span>
<a
href={BRAND.instagram}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-pink-400 hover:text-pink-300 hover:border-pink-400/30 transition-colors"
>
<Instagram size={12} />
Instagram
</a>
<a
href="https://t.me/blackheartdancehouse"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-blue-400 hover:text-blue-300 hover:border-blue-400/30 transition-colors"
>
<Send size={12} />
Telegram
</a>
<a
href="tel:+375293897001"
className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-emerald-400 hover:text-emerald-300 hover:border-emerald-400/30 transition-colors"
>
<Phone size={12} />
Позвонить
</a>
</div>
);
}
export function Pricing({ data: pricing }: PricingProps) { export function Pricing({ data: pricing }: PricingProps) {
const [activeTab, setActiveTab] = useState<Tab>("prices"); const [activeTab, setActiveTab] = useState<Tab>("prices");
const showHint = pricing.showContactHint !== false; // default true
const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [ const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
{ id: "prices", label: "Абонементы", icon: <CreditCard size={16} /> }, { id: "prices", label: "Абонементы", icon: <CreditCard size={16} /> },
{ id: "rental", label: "Аренда зала", icon: <Building2 size={16} /> }, { id: "rental", label: "Аренда зала", icon: <Building2 size={16} /> },
@@ -166,7 +130,6 @@ export function Pricing({ data: pricing }: PricingProps) {
</div> </div>
)} )}
{showHint && <ContactHint />}
</div> </div>
</Reveal> </Reveal>
)} )}
@@ -196,7 +159,6 @@ export function Pricing({ data: pricing }: PricingProps) {
</div> </div>
))} ))}
{showHint && <ContactHint />}
</div> </div>
</Reveal> </Reveal>
)} )}

View File

@@ -19,7 +19,7 @@ export function BackToTop() {
<button <button
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
aria-label="Наверх" 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" visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
}`} }`}
> >

View 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"
/>
</>
);
}