58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
import { company, mainNavigation } from "@/lib/site-content";
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-alpine-100/70 bg-white/90 backdrop-blur">
|
|
<div className="bg-alpine-900 text-alpine-50">
|
|
<div className="container-shell flex flex-wrap items-center justify-between gap-2 py-2 text-xs sm:text-sm">
|
|
<p>{company.region} | Persoenlicher IT- und Telekom-Service</p>
|
|
<div className="flex flex-wrap gap-4">
|
|
<a className="hover:text-copper-200" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
|
|
{company.phone}
|
|
</a>
|
|
<a className="hover:text-copper-200" href={`mailto:${company.email}`}>
|
|
{company.email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container-shell flex flex-wrap items-center justify-between gap-6 py-4">
|
|
<Link className="group inline-flex items-center gap-3" href="/">
|
|
<Image
|
|
alt="TeleNetSystems Logo"
|
|
className="h-10 w-auto transition group-hover:scale-[1.02]"
|
|
src="/assets/logo/logo-systems-9fd0db14.png"
|
|
width={190}
|
|
height={50}
|
|
priority
|
|
/>
|
|
<span className="font-heading text-sm uppercase tracking-[0.22em] text-alpine-700">
|
|
Reutte | Tirol
|
|
</span>
|
|
</Link>
|
|
|
|
<nav aria-label="Hauptnavigation" className="w-full overflow-x-auto pb-1 lg:w-auto lg:pb-0">
|
|
<ul className="flex min-w-max items-center gap-2 text-sm font-semibold text-alpine-700">
|
|
{mainNavigation.map((item) => (
|
|
<li key={item.href}>
|
|
<Link className="nav-chip" href={item.href}>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<Link className="btn-primary ml-2" href="/#kontakt">
|
|
Beratung anfragen
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|