Add hero

src/components/hero/Hero.astro

@@ -7,56 +7,58 @@ const {
   ctas = []
 } = Astro.props;
 ---
+<section class="fuz-hero">
 
-<section class="fuz-section">
-  <div class="fuz-container grid md:grid-cols-2 gap-10 items-center">
-    <div class="space-y-6">
-      {Array.isArray(title) ? (
-        <h1 class="fuz-hero-title">
-          {title.map((line) => (
-            <span class="block">{line}</span>
-          ))}
-        </h1>
-      ) : (
-        <h1 class="fuz-hero-title">{title}</h1>
-      )}
+  {imageUrl && (
+    <img
+      src={imageUrl}
+      alt="Światłowód FUZ – szybki internet w Wyszkowie"
+      class="fuz-hero-bg"
+      loading="eager"
+    />
+  )}
 
-      {Array.isArray(subtitle) && subtitle.length > 0 && (
-        <div class="fuz-hero-subtitle space-y-1">
-          {subtitle.map((line) => (
-            <p>{line}</p>
-          ))}
-        </div>
-      )}
+  <div class="fuz-hero-inner">
 
-      {description && (
-        <p class="mt-4 text-base md:text-lg text-gray-600 dark:text-gray-300 max-w-xl">
-          {description}
-        </p>
-      )}
+    <!-- Tytuł (pojedynczy lub lista) -->
+    {Array.isArray(title)
+      ? title.map(line => (
+          <h1 class="fuz-hero-title">{line}</h1>
+        ))
+      : <h1 class="fuz-hero-title">{title}</h1>
+    }
 
-      {ctas.length > 0 && (
-        <div class="mt-6 flex flex-wrap gap-3">
-          {ctas.map((cta) => (
-            <a
-              href={cta.href}
-              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"
-            >
+    <!-- Podtytuły (lista) -->
+    {subtitle && (
+      Array.isArray(subtitle)
+        ? (
+          <div class="fuz-hero-subtitles">
+            {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>