Initial commit: demo sito clinica veterinaria
This commit is contained in:
163
clinica-app/client/src/components/Navbar.tsx
Normal file
163
clinica-app/client/src/components/Navbar.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
/*
|
||||
* 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 { Menu, X, Phone, MapPin } from "lucide-react";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Chi Siamo", href: "#chi-siamo" },
|
||||
{ label: "Servizi", 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-3 group">
|
||||
<div className="w-10 h-10 rounded-full bg-[#1B4F72] flex items-center justify-center flex-shrink-0">
|
||||
<svg viewBox="0 0 40 40" fill="none" className="w-6 h-6">
|
||||
<path d="M20 8c-1.5 0-2.5 1.2-2.5 2.5S18.5 13 20 13s2.5-1.2 2.5-2.5S21.5 8 20 8z" fill="#4ECDC4"/>
|
||||
<path d="M13 11c-1.2 0-2 1-2 2.2S11.8 15.5 13 15.5s2-1 2-2.2S14.2 11 13 11z" fill="#4ECDC4"/>
|
||||
<path d="M27 11c-1.2 0-2 1-2 2.2S25.8 15.5 27 15.5s2-1 2-2.2S28.2 11 27 11z" fill="#4ECDC4"/>
|
||||
<path d="M10 17c-1.2 0-2 1-2 2.2S8.8 21.5 10 21.5s2-1 2-2.2S11.2 17 10 17z" fill="#4ECDC4"/>
|
||||
<path d="M30 17c-1.2 0-2 1-2 2.2S28.8 21.5 30 21.5s2-1 2-2.2S31.2 17 30 17z" fill="#4ECDC4"/>
|
||||
<path d="M20 17c-5 0-9 3.5-9 7.5 0 2.5 1.5 4.5 3.5 5.5.5.3 1 .5 1.5.5h8c.5 0 1-.2 1.5-.5 2-1 3.5-3 3.5-5.5 0-4-4-7.5-9-7.5z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="font-bold text-[#1B4F72] leading-tight"
|
||||
style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "1.1rem" }}
|
||||
>
|
||||
Clinica Veterinaria
|
||||
</div>
|
||||
<div
|
||||
className="text-[#4ECDC4] font-semibold leading-tight tracking-widest uppercase text-xs"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
Formiginese
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Desktop menu */}
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-[#1B4F72] font-medium text-sm hover:text-[#4ECDC4] transition-colors duration-200 relative group"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{link.label}
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#4ECDC4] transition-all duration-300 group-hover:w-full" />
|
||||
</a>
|
||||
))}
|
||||
</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) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-[#1B4F72] font-medium py-2 border-b border-gray-50 hover:text-[#4ECDC4] transition-colors"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user