Add hero

src/components/hero/Hero.astro

@@ -7,56 +7,58 @@ const {
   ctas = []
 } = Astro.props;
 ---
+<section class="fuz-hero">
 
-<section class="fuz-section">
+  {imageUrl && (
-  <div class="fuz-container grid md:grid-cols-2 gap-10 items-center">
+    <img
-    <div class="space-y-6">
+      src={imageUrl}
-      {Array.isArray(title) ? (
+      alt="Światłowód FUZ – szybki internet w Wyszkowie"
-        <h1 class="fuz-hero-title">
+      class="fuz-hero-bg"
-          {title.map((line) => (
+      loading="eager"
-            <span class="block">{line}</span>
+    />
-          ))}
+  )}
-        </h1>
-      ) : (
-        <h1 class="fuz-hero-title">{title}</h1>
-      )}
 
-      {Array.isArray(subtitle) && subtitle.length > 0 && (
+  <div class="fuz-hero-inner">
-        <div class="fuz-hero-subtitle space-y-1">
-          {subtitle.map((line) => (
-            <p>{line}</p>
-          ))}
-        </div>
-      )}
 
-      {description && (
+    <!-- Tytuł (pojedynczy lub lista) -->
-        <p class="mt-4 text-base md:text-lg text-gray-600 dark:text-gray-300 max-w-xl">
+    {Array.isArray(title)
-          {description}
+      ? title.map(line => (
-        </p>
+          <h1 class="fuz-hero-title">{line}</h1>
-      )}
+        ))
+      : <h1 class="fuz-hero-title">{title}</h1>
+    }
 
-      {ctas.length > 0 && (
+    <!-- Podtytuły (lista) -->
-        <div class="mt-6 flex flex-wrap gap-3">
+    {subtitle && (
-          {ctas.map((cta) => (
+      Array.isArray(subtitle)
-            <a
+        ? (
-              href={cta.href}
+          <div class="fuz-hero-subtitles">
-              class="inline-flex items-center rounded-full px-5 py-2.5 text-sm font-medium bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400"
+            {subtitle.map((line, i) => (
-            >
+              <h2 class="fuz-hero-subtitle" style={`--delay:${i}`}>{line}</h2>
+            ))}
+          </div>
+        )
+        : (
+          <h2 class="fuz-hero-subtitle">{subtitle}</h2>
+        )
+    )}
+
+    <!-- Opis -->
+    {description && (
+      <p class="fuz-hero-description">{description}</p>
+    )}
+
+    <!-- CTA -->
+    {ctas.length > 0 && (
+      <div class="fuz-hero-cta gap-4">
+        {ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; }) => {
+          const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
+          return (
+            <a href={cta.href} class={cls}>
               {cta.label}
             </a>
-          ))}
+          );
-        </div>
+        })}
-      )}
-    </div>
-
-    {imageUrl && (
-      <div class="relative aspect-video md:aspect-[4/3] overflow-hidden rounded-3xl border border-slate-200/70 dark:border-slate-700/70">
-        <img
-          src={imageUrl}
-          alt=""
-          loading="lazy"
-          class="h-full w-full object-cover"
-        />
       </div>
     )}
   </div>

src/content/home/hero.yaml

@@ -1,13 +1,24 @@
 title:
-  - "Dlaczego FUZ?"
+  - "Internet światłowodowy i radiowy w Wyszkowie i okolicach FUZ"
 subtitle:
-  - "Lokalny operator – znamy Twoją okolicę"
+  - DLACZEGO FUZ
+  - "Lokalny operator, znamy Twoją okolicę"
   - "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."
+
+description: |
+  Szybki i stabilny Internet światłowodowy i radiowy w Wyszkowie oraz okolicach. 
+  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "/images/fiber2.webp"
 ctas:
+  - label: "Zobacz ofertę Internetu Światłowodowego"
+    href: "/internet-swiatlowodowy"
+    primary: true
+  - label: "Zobacz ofertę Internetu + Telewizja"
+    href: "/internet-telewizja"
+    primary: false
   - label: "Sprawdź dostępność"
     href: "/mapa-zasiegu"
-  - label: "Zobacz ofertę"
+    primary: false
-    href: "/oferta"
+  # - label: "Zobacz ofertę"
+  #   href: "/oferta"

src/styles/base.css

@@ -1,3 +1,5 @@
 @import "./tailwind.css";
 @import "./theme.css";
 @import "./navbar.css";
+@import "./hero.css";
+@import "./buttons.css";

src/styles/buttons.css

@@ -0,0 +1,38 @@
+/* Podstawowe ustawienia wspólne */
+.btn {
+  @apply inline-flex items-center justify-center 
+         font-semibold rounded-lg px-6 py-3
+         text-base transition-all duration-200
+         cursor-pointer select-none;
+}
+
+/* Wariant główny */
+.btn-primary {
+  background-color: var(--btn-bg);
+  color: var(--btn-text);
+}
+
+.btn-primary:hover {
+  filter: brightness(0.95);
+}
+
+/* Wariant outline */
+.btn-outline {
+  background-color: transparent;
+  border: 2px solid var(--btn-outline-border);
+  color: var(--btn-outline-text);
+}
+
+.btn-outline:hover {
+  background-color: var(--btn-outline-bg-hover);
+}
+
+/* Wariant ghost (bez obramowania) */
+.btn-ghost {
+  background-color: transparent;
+  color: var(--btn-ghost-text);
+}
+
+.btn-ghost:hover {
+  background-color: var(--btn-ghost-hover-bg);
+}

src/styles/hero.css

@@ -0,0 +1,57 @@
+.fuz-hero {
+  @apply relative overflow-hidden text-center py-32 px-6;
+
+  background: linear-gradient(
+    to right,
+    var(--fuz-hero-from),
+    var(--fuz-hero-to)
+  );
+  color: var(--fuz-text);
+}
+
+.fuz-hero-bg {
+  @apply absolute top-0 left-0 w-full h-full object-cover;
+  opacity: 0.3;
+}
+
+.fuz-hero-inner {
+  @apply relative max-w-7xl mx-auto;
+  color: var(--fuz-text);
+}
+
+.fuz-hero-title {
+  @apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
+  color: var(--fuz-text);
+}
+
+.fuz-hero-subtitle {
+  @apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
+  color: var(--fuz-text-subtle);
+
+  /* Animacja główna */
+  animation-name: fade-in;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+
+  /* Opóźnienie zależne od numeru elementu */
+  animation-delay: calc(var(--delay) * 0.3s);
+}
+.fuz-hero-description {
+  @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
+  color: var(--fuz-text-subtle);
+}
+
+.fuz-hero-cta {
+  @apply flex justify-center items-center flex-wrap gap-4 mt-8;
+}
+
+.fuz-hero-cta .btn-primary {
+  background-color: var(--fuz-accent);
+  color: white;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

src/styles/theme.css

@@ -2,12 +2,37 @@
   --fuz-bg: #ffffff;
   --fuz-text: #1a1a1a;
   --fuz-accent: #0066ff;
+  --fuz-accent: #0094ff;
+  --fuz-accent-text: #ffffff;
+
+  /* Buttons */
+  --btn-bg: var(--fuz-accent);
+  --btn-text: var(--fuz-accent-text);
+
+  --btn-outline-border: var(--fuz-accent);
+  --btn-outline-text: var(--fuz-accent);
+  --btn-outline-bg-hover: rgba(0, 148, 255, 0.07);
+
+  --btn-ghost-text: var(--fuz-text);
+  --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
 }
 
 :root.dark {
-  --fuz-bg: #0d1117;
   --fuz-text: #e6edf3;
+  --fuz-bg: #0d1117;
   --fuz-accent: #58a6ff;
+  --fuz-accent-text: #0d1117;
+
+  /* Buttons */
+  --btn-bg: var(--fuz-accent);
+  --btn-text: var(--fuz-accent-text);
+
+  --btn-outline-border: var(--fuz-accent);
+  --btn-outline-text: var(--fuz-accent);
+  --btn-outline-bg-hover: rgba(88, 166, 255, 0.15);
+
+  --btn-ghost-text: var(--fuz-text);
+  --btn-ghost-hover-bg: rgba(255,255,255,0.08);
 }
 
 /* Ustawienia bazowe motywu */