Lekcja 1

src/components/Header.astro

@@ -0,0 +1,36 @@
+---
+import { House, Image, Phone } from '@lucide/astro'
+---
+
+<header class="
+    flex flex-row justify-between
+    mb-3 py-0.5 px-3 rounded-md h-14
+    bg-slate-100 drop-shadow-slate-300 drop-shadow-md
+">
+    <a class="
+        flex flex-col
+        my-auto
+        hover:text-shadow-sm text-shadow-slate-50
+        hover:scale-110
+        not-motion-reduce:transition-all
+    " href="/">
+        <h1 class="font-serif text-xl">Jakiś fotograf</h1>
+        <h5 class="text-xs font-light ml-0.5">Zdjęcia na zamówienie</h5>
+    </a>
+    <nav class="
+        flex flex-row gap-3.5 mt-auto mb-0 font-light font-xs text-center
+    ">
+        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/">
+            <House class="mx-auto" stroke-width={1} />
+            Strona główna
+        </a>
+        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/portfolio">
+            <Image class="mx-auto" stroke-width={1} />
+            Portfolio
+        </a>
+        <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1 mr-1" href="/kontakt">
+            <Phone class="mx-auto" stroke-width={1} />
+            Kontakt
+        </a>
+    </nav>
+</header>