Add Navbar

src/components/layout/Header.astro

@@ -1,16 +1,21 @@
 ---
-const nav = [
+import MobileMenu from "../../islands/MobileMenu.jsx";
-  { href: "/", label: "Strona główna" },
+
-  { href: "/internet", label: "Internet" },
+const links = [
-  { href: "/telewizja", label: "Telewizja" },
+  { name: "START", href: "/" },
-  { href: "/internet-telewizja", label: "Internet + TV" },
+  { name: "INTERNET ŚWIATŁOWODOWY", href: "/internet-swiatlowodowy" },
-  { href: "/mapa-zasiegu", label: "Mapa zasięgu" },
+  { name: "INTERNET I TELEWIZJA", href: "/internet-telewizja" },
-  { href: "/kontakt", label: "Kontakt" }
+  { name: "INTERNET RADIOWY", href: "/internet-radiowy" },
+  { name: "TELEFON", href: "/telefon" },
+  { name: "ZASIĘG SIECI", href: "/mapa-zasiegu" },
+  { name: "KONTAKT", href: "/kontakt" }
 ];
 ---
 
-<header class="fuz-header">
+<nav class="fuz-navbar">
-  <div class="fuz-container flex items-center justify-between py-3">
+  <div class="fuz-navbar-inner">
+
+    <!-- Logo -->
     <a href="/" class="flex items-center gap-2 font-semibold">
       <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-sky-500 text-white text-sm font-bold">
         F
@@ -18,12 +23,14 @@ const nav = [
       <span>FUZ</span>
     </a>
 
-    <nav class="hidden md:flex items-center gap-6 text-sm">
+    <!-- Linki desktop -->
-      {nav.map((item) => (
+    <div class="hidden md:flex fuz-navbar-links">
-        <a href={item.href} class="hover:text-sky-600 dark:hover:text-sky-400">
+      {links.map(link => (
-          {item.label}
+        <a href={link.href} class="fuz-navbar-link">{link.name}</a>
-        </a>
       ))}
-    </nav>
     </div>
-</header>
+
+    <!-- Mobilne menu (hamburger + panel) -->
+    <MobileMenu client:load links={links} />
+  </div>
+</nav>

src/content/home/hero.yaml

@@ -5,7 +5,7 @@ subtitle:
   - "Realny serwis, szybkie wsparcie"
   - "Stabilna infrastruktura światłowodowa i radiowa"
 description: "Internet i telewizja od ludzi, którzy naprawdę są na miejscu. Bez infolinii z końca świata."
-imageUrl: "/images/hero/fiber-example.jpg"
+imageUrl: "/images/fiber2.webp"
 ctas:
   - label: "Sprawdź dostępność"
     href: "/mapa-zasiegu"

src/islands/MobileMenu.jsx

@@ -0,0 +1,36 @@
+import { useState } from "preact/hooks";
+/**
+ * @typedef {{ name: string; href: string }} MenuLink
+ * @param {{ links: MenuLink[] }} props
+ */
+export default function MobileMenu({ links = [] }) {
+  const [open, setOpen] = useState(false);
+
+  const toggle = () => setOpen(o => !o);
+
+  return (
+    <>
+      {/* Ikona hamburgera */}
+      <button
+        onClick={toggle}
+        class="fuz-mobile-toggle md:hidden"
+        aria-label="Menu mobilne"
+      >
+        {open ? "✖" : "☰"}
+      </button>
+
+      {/* Panel mobilny */}
+      <div class={`fuz-mobile-menu ${open ? "open" : ""}`}>
+        {links.map(link => (
+          <a
+            href={link.href}
+            class="fuz-mobile-link"
+            onClick={() => setOpen(false)}
+          >
+            {link.name}
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}

src/pages/internet-radiowy/index.astro

@@ -0,0 +1,20 @@
+---
+import DefaultLayout from "../../layouts/DefaultLayout.astro";
+
+const seo = {
+  title: "Internet – FUZ",
+  description: "Internet – FUZ",
+  canonical: "/internet"
+};
+---
+
+<DefaultLayout seo={seo}>
+  <section class="fuz-section">
+    <div class="fuz-container">
+      <h1 class="fuz-hero-title">Internet Radiowy– FUZ</h1>
+      <p class="mt-4 text-gray-600 dark:text-gray-300">
+        Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
+      </p>
+    </div>
+  </section>
+</DefaultLayout>

src/pages/telefon/index.astro

@@ -11,7 +11,7 @@ const seo = {
 <DefaultLayout seo={seo}>
   <section class="fuz-section">
     <div class="fuz-container">
-      <h1 class="fuz-hero-title">Telewizja – FUZ</h1>
+      <h1 class="fuz-hero-title">Telefon – FUZ</h1>
       <p class="mt-4 text-gray-600 dark:text-gray-300">
         Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
       </p>

src/styles/base.css

@@ -1,2 +1,3 @@
 @import "./tailwind.css";
 @import "./theme.css";
+@import "./navbar.css";

src/styles/navbar.css

@@ -0,0 +1,43 @@
+.fuz-navbar {
+  @apply w-full bg-[var(--fuz-bg)] text-[var(--fuz-text)] shadow-sm sticky top-0 z-50;
+}
+
+.fuz-navbar-inner {
+  @apply max-w-7xl mx-auto flex items-center justify-between py-4 px-4;
+}
+
+.fuz-navbar-logo {
+  @apply text-2xl font-bold text-[var(--fuz-text)];
+}
+
+.fuz-accent {
+  color: var(--fuz-accent);
+}
+
+.fuz-navbar-links {
+  @apply gap-6;
+}
+
+.fuz-navbar-link {
+  @apply text-base hover:text-[var(--fuz-accent)] transition-colors;
+}
+
+.fuz-mobile-toggle {
+  @apply text-3xl p-2 text-[var(--fuz-text)];
+}
+
+/* Panel mobilny */
+.fuz-mobile-menu {
+  @apply fixed top-0 right-0 h-full w-64 bg-[var(--fuz-bg)] shadow-lg 
+         transform translate-x-full transition-transform duration-300
+         flex flex-col gap-4 p-6;
+}
+
+.fuz-mobile-menu.open {
+  @apply translate-x-0;
+}
+
+.fuz-mobile-link {
+  @apply text-lg py-2 border-b border-gray-300 dark:border-gray-700
+         text-[var(--fuz-text)] hover:text-[var(--fuz-accent)];
+}