Улучшить мобильное меню и форму заявки, добавить номер лида и заменить middleware на proxy
All checks were successful
Auto Deploy / deploy (push) Successful in 22s
All checks were successful
Auto Deploy / deploy (push) Successful in 22s
This commit is contained in:
deonisii
@@ -4,6 +4,7 @@ import Link from "next/link";
|
||||
import { Menu, X, Send, MessageCircle, FileText } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
type NavLink = {
|
||||
href: string;
|
||||
@@ -17,6 +18,7 @@ export default function MobileMenu({
|
||||
}) {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
const canUsePortal = typeof window !== "undefined";
|
||||
|
||||
useEffect(() => {
|
||||
if (mobileOpen) {
|
||||
@@ -38,128 +40,137 @@ export default function MobileMenu({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 hover:bg-white/10 transition-colors"
|
||||
className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 transition-colors hover:bg-white/10 md:hidden"
|
||||
aria-label="Открыть меню"
|
||||
>
|
||||
<Menu className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{mobileOpen && (
|
||||
<div className="fixed inset-0 z-[999] md:hidden bg-black">
|
||||
<div className="flex h-full flex-col bg-black">
|
||||
<div className="flex items-center justify-between px-4 py-4 border-b border-white/10">
|
||||
<div>
|
||||
<div className="text-2xl font-bold leading-none">WorkParking</div>
|
||||
<div className="mt-2 text-sm text-neutral-500">
|
||||
Апгрейд дворовых шлагбаумов
|
||||
{canUsePortal &&
|
||||
mobileOpen &&
|
||||
createPortal(
|
||||
<div className="fixed inset-0 z-[999] w-screen overflow-x-hidden bg-black/90 backdrop-blur-xl md:hidden">
|
||||
<div className="flex min-h-dvh w-full flex-col bg-[radial-gradient(circle_at_top,#133222_0%,#090909_42%,#050505_100%)]">
|
||||
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-xl font-semibold leading-none tracking-[-0.03em]">
|
||||
WorkParking
|
||||
</div>
|
||||
<div className="mt-1 text-xs uppercase tracking-[0.18em] text-neutral-500">
|
||||
Smart entry systems
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="inline-flex items-center justify-center rounded-xl border border-white/10 p-2 text-neutral-300 transition-colors hover:bg-white/5 hover:text-white"
|
||||
aria-label="Закрыть меню"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="inline-flex items-center justify-center rounded-xl border border-white/10 p-2 text-neutral-300 hover:bg-white/5 hover:text-white transition-colors"
|
||||
aria-label="Закрыть меню"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-4 py-5">
|
||||
<div className="mx-auto w-full max-w-none">
|
||||
<Link
|
||||
href="/contacts#lead-form"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="mb-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-sm font-semibold text-white transition-colors hover:bg-emerald-500"
|
||||
>
|
||||
<FileText className="w-5 h-5" />
|
||||
Оставить заявку
|
||||
</Link>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-6">
|
||||
<Link
|
||||
href="/contacts"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="mb-8 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-base font-semibold text-white hover:bg-emerald-500 transition-colors"
|
||||
>
|
||||
<FileText className="w-5 h-5" />
|
||||
Оставить заявку
|
||||
</Link>
|
||||
<nav className="flex w-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] px-4 py-1">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
|
||||
<nav className="flex flex-col">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={[
|
||||
"block w-full border-b border-white/10 py-3.5 text-base transition-colors last:border-b-0",
|
||||
isActive
|
||||
? "text-emerald-300"
|
||||
: "text-white hover:text-emerald-300",
|
||||
].join(" ")}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={[
|
||||
"border-b border-white/10 py-4 text-lg transition-colors",
|
||||
isActive
|
||||
? "text-emerald-300"
|
||||
: "text-white hover:text-emerald-300",
|
||||
].join(" ")}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<div className="mt-6 grid w-full gap-4">
|
||||
<div className="w-full rounded-3xl border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||
Контакты
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
||||
Контакты
|
||||
<div className="flex flex-col gap-2 text-sm">
|
||||
<a
|
||||
href="tel:+79999698149"
|
||||
className="text-neutral-200 transition-colors hover:text-emerald-300"
|
||||
>
|
||||
+7 (999) 969-81-49
|
||||
</a>
|
||||
<a
|
||||
href="mailto:sale@parkflow.ru"
|
||||
className="text-neutral-200 transition-colors hover:text-emerald-300"
|
||||
>
|
||||
sale@parkflow.ru
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@parkflow.ru"
|
||||
className="text-neutral-200 transition-colors hover:text-emerald-300"
|
||||
>
|
||||
info@parkflow.ru
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full rounded-3xl border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
|
||||
Мы в сети
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-sm">
|
||||
<a
|
||||
href="#"
|
||||
className="rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
|
||||
>
|
||||
VK
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
Telegram
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
|
||||
>
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
MAX
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-1 text-xs text-neutral-500">
|
||||
ООО «Пракфлоу» • ИНН 7777773333
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 text-base">
|
||||
<a
|
||||
href="tel:+79999698149"
|
||||
className="text-neutral-200 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
+7 (999) 969-81-49
|
||||
</a>
|
||||
<a
|
||||
href="mailto:sale@parkflow.ru"
|
||||
className="text-neutral-200 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
sale@parkflow.ru
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@parkflow.ru"
|
||||
className="text-neutral-200 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
info@parkflow.ru
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
|
||||
Мы в сети
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 text-base">
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
VK
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
Telegram
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
MAX
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 pb-6 text-sm text-neutral-500">
|
||||
ООО «Пракфлоу» • ИНН 7777773333
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user