Poprawki w stylach, oraz przebudowa image w hero

src/components/hero/Hero.astro

@@ -1,118 +1,109 @@
 ---
-import { Image } from "astro:assets";
+import type { ImageMetadata } from 'astro';
 
-type TextPosition = "right" | "left" | "center";
+interface CTA {
+  label: string;
+  href: string;
+  primary?: boolean;
+}
 
 interface Props {
   title?: string | string[];
   subtitle?: string[];
   description?: string;
   imageUrl?: string;
-  ctas?: Array<{
-    label: string;
-    href: string;
-    primary?: boolean;
-  }>;
-  textPosition?: TextPosition;
+  textPosition?: "right" | "left" | "center";
+  ctas?: CTA[];
 }
 
 const {
   title = [],
   subtitle = [],
-  description,
-  imageUrl,
-  ctas = [],
-  textPosition = "right" as TextPosition
+  description = "",
+  imageUrl = "",
+  textPosition = "right",
+  ctas = []
 } = Astro.props;
 
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
-  eager: true
-});
+// Wyciągnij nazwę bazową bez rozszerzenia
+const imageBase = imageUrl.replace(/\.(webp|png|jpg|jpeg)$/i, '');
 
-let imageAsset: ImageMetadata | null = null;
+// Importuj wszystkie obrazki
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/hero/**/*.webp',
+  { eager: true }
+);
 
-if (imageUrl) {
-  const path = `/src/assets/hero/${imageUrl}`;
-  const mod = images[path];
-  if (mod) {
-    imageAsset = mod.default;
-  }
+// Funkcja do znajdowania obrazka dla danego rozmiaru
+function findImage(folder: string): ImageMetadata | null {
+  const key = `/src/assets/hero/${folder}/${imageBase}-${folder}.webp`;
+  return images[key]?.default || null;
 }
 
-const isLCP = true;
+const mobile = findImage('mobile');
+const tablet = findImage('tablet');
+const desktop = findImage('desktop');
 ---
 
 <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"
-      loading="eager"
-      fetchpriority={isLCP ? "high" : "auto"}
-      decoding="async"
-      format="webp"
-      widths={[640, 960, 1280, 1350, 1920]}
-      sizes="100vw"
-    />
-  )}
-
-  <!-- Overlay -->
-  <div class="f-hero__overlay"></div>
-
-  <!-- Container -->
-  <div class="f-hero__container">
+  <picture>
+    {mobile && (
+      <source 
+        srcset={mobile.src} 
+        media="(max-width: 640px)"
+      />
+    )}
+    {tablet && (
+      <source 
+        srcset={tablet.src} 
+        media="(max-width: 1024px)"
+      />
+    )}
     
-    <!-- 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>
+    {desktop && (
+      <img
+        src={desktop.src}
+        alt={imageBase}
+        class="f-hero-background"
+        loading="eager"
+        fetchpriority="high"
+        decoding="async"
+      />
+    )}
+  </picture>
 
-      <!-- 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 class="f-hero-overlay"></div>
+
+  <div class="f-hero-container">
+    <div class="f-hero-content">
+      {Array.isArray(title) ? (
+        title.map(t => <h1 class="f-hero-title">{t}</h1>)
+      ) : (
+        <h1 class="f-hero-title">{title}</h1>
+      )}
+
+      {subtitle.length > 0 && (
+        <div class="f-hero-subtitles">
+          {subtitle.map((s, i) => (
+            <p class="f-hero-subtitle" style={`--delay:${i}`}>{s}</p>
           ))}
         </div>
       )}
 
-      <!-- Description -->
-      {description && (
-        <p class="f-hero__description">{description}</p>
-      )}
+      {description && <p class="f-hero-description">{description}</p>}
 
-      <!-- CTAs -->
       {ctas.length > 0 && (
-        <div class="f-hero__ctas">
-          {ctas.map((cta) => (
+        <div class="f-hero-ctas">
+          {ctas.map(cta => (
             <a 
               href={cta.href} 
-              class={cta.primary ? "btn-hero-primary" : "btn-hero-outline"}
+              class={cta.primary ? "btn btn-primary" : "btn btn-primary"}
             >
               {cta.label}
             </a>
           ))}
         </div>
       )}
-
     </div>
-
   </div>
-
 </section>

src/components/sections/SectionDefault.astro

@@ -53,7 +53,7 @@ if (section.image) {
           <div class="f-section-nav">
             <a
               href={section.button.url}
-              class="btn btn-outline"
+              class="btn btn-primary"
               title={section.button.title}
             >
               {section.button.text}