226 lines
8.6 KiB
TypeScript
226 lines
8.6 KiB
TypeScript
/*
|
|
* DESIGN: "Clinical Warmth"
|
|
* Navbar sticky con blur su scroll, logo a sinistra, menu a destra
|
|
* Blu petrolio come colore primario, Cormorant Garamond per il brand name
|
|
*/
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronDown, Menu, X, Phone, MapPin } from "lucide-react";
|
|
|
|
type NavLink = {
|
|
label: string;
|
|
href: string;
|
|
children?: Array<{
|
|
label: string;
|
|
href: string;
|
|
}>;
|
|
};
|
|
|
|
const navLinks: NavLink[] = [
|
|
{ label: "Chi Siamo", href: "#chi-siamo" },
|
|
{
|
|
label: "Servizi",
|
|
href: "#servizi",
|
|
children: [
|
|
{ label: "Visite cliniche e medicina preventiva", href: "#servizi" },
|
|
{ label: "Ecografia", href: "#servizi" },
|
|
{ label: "Radiologia", href: "#servizi" },
|
|
{ label: "Laboratorio", href: "#servizi" },
|
|
{ label: "Ematologia", href: "#servizi" },
|
|
{ label: "Biochimica", href: "#servizi" },
|
|
{ label: "Urine", href: "#servizi" },
|
|
{ label: "Citologia", href: "#servizi" },
|
|
{ label: "Coagulazione", href: "#servizi" },
|
|
{ label: "Endoscopia", href: "#servizi" },
|
|
{ label: "Laparoscopia", href: "#servizi" },
|
|
],
|
|
},
|
|
{
|
|
label: "Visite Specialistiche",
|
|
href: "#servizi",
|
|
children: [
|
|
{ label: "Oncologia", href: "#servizi" },
|
|
{ label: "Dermatologia", href: "#servizi" },
|
|
{ label: "Oculistica", href: "#servizi" },
|
|
{ label: "Nutrizione", href: "#servizi" },
|
|
{ label: "Ortopedia", href: "#servizi" },
|
|
],
|
|
},
|
|
{ label: "Il Team", href: "#team" },
|
|
{ label: "News", href: "#news" },
|
|
{ label: "Contatti", href: "#contatti" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 80);
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{/* Top bar informativa */}
|
|
<div className="bg-[#1B4F72] text-white text-sm py-2 hidden md:block">
|
|
<div className="container flex justify-between items-center">
|
|
<div className="flex items-center gap-6">
|
|
<span className="flex items-center gap-1.5">
|
|
<MapPin size={13} className="text-[#4ECDC4]" />
|
|
Via Quattro Passi, 16 — Formigine (MO)
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<Phone size={13} className="text-[#4ECDC4]" />
|
|
059 839.62.63 | 320 532.24.39 (urgenze 24h)
|
|
</span>
|
|
</div>
|
|
<span className="text-[#4ECDC4] font-semibold tracking-wide text-xs uppercase">
|
|
Reperibilità 24h · 7 giorni su 7
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navbar principale */}
|
|
<nav
|
|
className={`sticky top-0 z-50 transition-all duration-300 ${
|
|
scrolled
|
|
? "bg-white/95 backdrop-blur-md shadow-md"
|
|
: "bg-white shadow-sm"
|
|
}`}
|
|
>
|
|
<div className="container flex items-center justify-between h-16 md:h-20">
|
|
{/* Logo */}
|
|
<a href="#" className="flex items-center gap-2 md:gap-3 group shrink-0">
|
|
<img
|
|
src="/images/logo_high.png"
|
|
alt="Simbolo Clinica Veterinaria Formiginese"
|
|
className="h-10 md:h-14 w-auto object-contain"
|
|
/>
|
|
<img
|
|
src="/images/logo_low.png"
|
|
alt="Clinica Veterinaria Formiginese"
|
|
className="h-8 md:h-11 w-auto object-contain"
|
|
/>
|
|
</a>
|
|
|
|
{/* Desktop menu */}
|
|
<div className="hidden md:flex items-center gap-6">
|
|
{navLinks.map((link) => (
|
|
<div key={link.label} className="relative group py-7">
|
|
<a
|
|
href={link.href}
|
|
className="text-[#1B4F72] font-medium text-sm hover:text-[#4ECDC4] transition-colors duration-200 relative inline-flex items-center gap-1.5"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
{link.label}
|
|
{link.children && (
|
|
<ChevronDown
|
|
size={14}
|
|
className="transition-transform duration-200 group-hover:rotate-180"
|
|
/>
|
|
)}
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#4ECDC4] transition-all duration-300 group-hover:w-full" />
|
|
</a>
|
|
|
|
{link.children && (
|
|
<div className="absolute left-0 top-full w-72 rounded-2xl border border-gray-100 bg-white/95 p-3 shadow-xl backdrop-blur-md opacity-0 invisible translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
|
|
<div className="grid gap-1">
|
|
{link.children.map((child) => (
|
|
<a
|
|
key={child.label}
|
|
href={child.href}
|
|
className="rounded-xl px-3 py-2 text-sm text-[#1B4F72]/80 hover:bg-[#F5F0E8] hover:text-[#1B4F72] transition-colors"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
{child.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA buttons */}
|
|
<div className="hidden md:flex items-center gap-3">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-[#1B4F72] text-[#1B4F72] hover:bg-[#1B4F72] hover:text-white transition-all duration-200"
|
|
onClick={() => document.getElementById("registrazione")?.scrollIntoView({ behavior: "smooth" })}
|
|
>
|
|
Accedi
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="bg-[#4ECDC4] hover:bg-[#3ab5ad] text-white font-semibold shadow-sm transition-all duration-200"
|
|
onClick={() => document.getElementById("prenotazione")?.scrollIntoView({ behavior: "smooth" })}
|
|
>
|
|
Prenota Visita
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile hamburger */}
|
|
<button
|
|
className="md:hidden p-2 text-[#1B4F72]"
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
aria-label="Menu"
|
|
>
|
|
{mobileOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{mobileOpen && (
|
|
<div className="md:hidden bg-white border-t border-gray-100 px-4 py-4 flex flex-col gap-4 shadow-lg">
|
|
{navLinks.map((link) => (
|
|
<div key={link.label} className="border-b border-gray-50 pb-2">
|
|
<a
|
|
href={link.href}
|
|
className="text-[#1B4F72] font-medium py-2 hover:text-[#4ECDC4] transition-colors flex items-center justify-between"
|
|
onClick={() => setMobileOpen(false)}
|
|
>
|
|
{link.label}
|
|
{link.children && <ChevronDown size={15} className="text-[#4ECDC4]" />}
|
|
</a>
|
|
{link.children && (
|
|
<div className="grid gap-1 pl-3 pt-1">
|
|
{link.children.map((child) => (
|
|
<a
|
|
key={child.label}
|
|
href={child.href}
|
|
className="rounded-lg px-3 py-1.5 text-sm text-[#1B4F72]/70 hover:bg-[#F5F0E8] hover:text-[#1B4F72] transition-colors"
|
|
onClick={() => setMobileOpen(false)}
|
|
>
|
|
{child.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
<div className="flex flex-col gap-2 pt-2">
|
|
<Button
|
|
variant="outline"
|
|
className="border-[#1B4F72] text-[#1B4F72] w-full"
|
|
onClick={() => { setMobileOpen(false); document.getElementById("registrazione")?.scrollIntoView({ behavior: "smooth" }); }}
|
|
>
|
|
Accedi / Registrati
|
|
</Button>
|
|
<Button
|
|
className="bg-[#4ECDC4] hover:bg-[#3ab5ad] text-white w-full font-semibold"
|
|
onClick={() => { setMobileOpen(false); document.getElementById("prenotazione")?.scrollIntoView({ behavior: "smooth" }); }}
|
|
>
|
|
Prenota Visita
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|