Zmiana hero i treści

src/components/hero/Hero.astro

@@ -1,12 +1,28 @@
 ---
 import { Image } from "astro:assets";
 
+type TextPosition = "right" | "left" | "center";
+
+interface Props {
+  title?: string | string[];
+  subtitle?: string[];
+  description?: string;
+  imageUrl?: string;
+  ctas?: Array<{
+    label: string;
+    href: string;
+    primary?: boolean;
+  }>;
+  textPosition?: TextPosition;
+}
+
 const {
   title = [],
   subtitle = [],
   description,
   imageUrl,
-  ctas = []
+  ctas = [],
+  textPosition = "right" as TextPosition
 } = Astro.props;
 
 const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
@@ -18,21 +34,22 @@ let imageAsset: ImageMetadata | null = null;
 if (imageUrl) {
   const path = `/src/assets/hero/${imageUrl}`;
   const mod = images[path];
-
   if (mod) {
     imageAsset = mod.default;
   }
 }
+
 const isLCP = true;
 ---
 
-<section class="f-hero">
-
+<section class={`f-hero f-hero--${textPosition}`}>
+  
+  <!-- Background Image -->
   {imageAsset && (
     <Image
       src={imageAsset}
       alt="Światłowód FUZ, szybki internet w Wyszkowie"
-      class="f-hero-bg"
+      class="f-hero__bg"
       loading="eager"
       fetchpriority={isLCP ? "high" : "auto"}
       decoding="async"
@@ -42,44 +59,60 @@ const isLCP = true;
     />
   )}
 
-  <div class="f-hero-inner">
-    {Array.isArray(title)
-      ? title.map(line => (
-          <h1>{line}</h1>
-        ))
-      : <h1>{title}</h1>
-    }
+  <!-- Overlay -->
+  <div class="f-hero__overlay"></div>
 
-    {subtitle && Array.isArray(subtitle) && (
-      <div class="f-hero-subtitles">
-        <h2 style={`--delay:0`}>
-          {subtitle[0]}
-        </h2>
-
-        {subtitle.slice(1).map((line, i) => (
-          <p style={`--delay:${i + 1}`}>
-            {line}
-          </p>
-        ))}
+  <!-- Container -->
+  <div class="f-hero__container">
+    
+    <!-- Content -->
+    <div class="f-hero__content">
+      
+      <!-- Titles -->
+      <div class="f-hero__titles">
+        {Array.isArray(title)
+          ? title.map(line => (
+              <h1 class="f-hero__title">{line}</h1>
+            ))
+          : <h1 class="f-hero__title">{title}</h1>
+        }
       </div>
-    )}
-<!-- TODO: Przerobić ewentualnie na pojedyncze linie -->
-    {description && (
-      <p class="description">{description}</p>
-    )}
 
-    {ctas.length > 0 && (
-      <div class="f-hero-cta">
-        {ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; title: string }) => {
-          const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
-          return (
-            <a href={cta.href} class={cls}>
+      <!-- Subtitles -->
+      {subtitle && Array.isArray(subtitle) && subtitle.length > 0 && (
+        <div class="f-hero__subtitles">
+          {subtitle.map((line, i) => (
+            <p 
+              class="f-hero__subtitle"
+              style={`--delay: ${i}`}
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+      )}
+
+      <!-- Description -->
+      {description && (
+        <p class="f-hero__description">{description}</p>
+      )}
+
+      <!-- CTAs -->
+      {ctas.length > 0 && (
+        <div class="f-hero__ctas">
+          {ctas.map((cta) => (
+            <a 
+              href={cta.href} 
+              class={cta.primary ? "btn-hero-primary" : "btn-hero-outline"}
+            >
               {cta.label}
             </a>
-          );
-        })}
-      </div>
-    )}
+          ))}
+        </div>
+      )}
+
+    </div>
+
   </div>
 
 </section>