Rezygnacja z bazy, przeniesienie danych do plików yamla

src/components/hero/Hero.astro

@@ -1,5 +1,6 @@
 ---
-import type { ImageMetadata } from 'astro';
+import { Image, getImage } from "astro:assets";
+import type { ImageMetadata } from "astro";
 
 interface CTA {
   label: string;
@@ -22,49 +23,69 @@ const {
   description = "",
   imageUrl = "",
   textPosition = "right",
-  ctas = []
+  ctas = [],
 } = Astro.props;
 
-const imageBase = imageUrl.replace(/\.(webp|png|jpg|jpeg)$/i, '');
+const imageBase = imageUrl.replace(/\.(webp|png|jpg|jpeg)$/i, "");
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
-  '/src/assets/hero/**/*.webp',
-  { eager: true }
+  "/src/assets/hero/**/*.webp",
+  { eager: true },
 );
 
 function findImage(folder: string): ImageMetadata | null {
   const key = `/src/assets/hero/${folder}/${imageBase}-${folder}.webp`;
-  return images[key]?.default || null;
+  return images[key]?.default ?? null;
 }
 
-const mobile = findImage('mobile');
-const tablet = findImage('tablet');
-const desktop = findImage('desktop');
+const mobile = findImage("mobile");
+const tablet = findImage("tablet");
+const desktop = findImage("desktop");
+
+// Generujemy prawdziwe srcsety (a nie pojedynczy URL)
+const mobileSet = mobile
+  ? await getImage({ src: mobile, widths: [480, 640], format: "webp" })
+  : null;
+
+const tabletSet = tablet
+  ? await getImage({ src: tablet, widths: [768, 1024], format: "webp" })
+  : null;
+
+// Fallback (największy, eager)
+const desktopImg = desktop
+  ? await getImage({ src: desktop, widths: [1280, 1440, 1920], format: "webp" })
+  : null;
 ---
 
 <section class={`f-hero f-hero--${textPosition}`}>
   <picture>
-    {mobile && (
-      <source 
-        srcset={mobile.src} 
+    {mobileSet && (
+      <source
+        srcset={mobileSet.srcSet.attribute}
         media="(max-width: 640px)"
+        sizes="100vw"
       />
     )}
-    {tablet && (
-      <source 
-        srcset={tablet.src} 
+
+    {tabletSet && (
+      <source
+        srcset={tabletSet.srcSet.attribute}
         media="(max-width: 1024px)"
+        sizes="100vw"
       />
     )}
-    
+
     {desktop && (
-      <img
-        src={desktop.src}
-        alt={imageBase}
+      <Image
+        src={desktop}
+        alt={Array.isArray(title) ? title.join(" ") : String(title || imageBase)}
         class="f-hero-background"
         loading="eager"
         fetchpriority="high"
         decoding="async"
+        format="webp"
+        widths={[1280, 1440, 1920]}
+        sizes="100vw"
       />
     )}
   </picture>
@@ -74,7 +95,7 @@ const desktop = findImage('desktop');
   <div class="f-hero-container">
     <div class="f-hero-content">
       {Array.isArray(title) ? (
-        title.map(t => <h1 class="f-hero-title">{t}</h1>)
+        title.map((t) => <h1 class="f-hero-title">{t}</h1>)
       ) : (
         <h1 class="f-hero-title">{title}</h1>
       )}
@@ -91,9 +112,9 @@ const desktop = findImage('desktop');
 
       {ctas.length > 0 && (
         <div class="f-hero-ctas">
-          {ctas.map(cta => (
-            <a 
-              href={cta.href} 
+          {ctas.map((cta) => (
+            <a
+              href={cta.href}
               class={cta.primary ? "btn btn-primary" : "btn btn-primary"}
             >
               {cta.label}
@@ -103,4 +124,4 @@ const desktop = findImage('desktop');
       )}
     </div>
   </div>
-</section>
+</section>

src/components/layout/Header.astro

@@ -1,5 +1,7 @@
 ---
 import MobileMenu from "../../islands/MobileMenu.jsx";
+import { Image } from "astro:assets";
+import logo from "../../assets/logo.webp";
 
 const links = [
   { name: "START", href: "/" },
@@ -21,7 +23,13 @@ const links = [
 <nav class="f-navbar">
   <div class="f-navbar-inner">
     <a href="/" class="flex items-center gap-2 font-semibold">
-      <img src="/assets/logo.webp" alt="FUZ Logo" class="f-navbar-logo" />
+      <Image
+        src={logo}
+        alt="FUZ Logo"
+        class="f-navbar-logo"
+        loading="eager"
+        decoding="async"
+      />
     </a>
 
     <div class="hidden md:flex f-navbar-links">

src/components/sections/SectionChannelsSearch.astro

@@ -1,51 +1,31 @@
 ---
-import { Image } from "astro:assets";
-import type { ImageMetadata } from "astro";
 import Markdown from "../../islands/Markdown.jsx";
-import JamboxChannelsSearch from "../../islands/jambox/JamboxChannelsSearch.jsx";
+import TvChannelsSearch from "../../islands/jambox/JamboxChannelsSearch.jsx";
 
 const props = Astro.props ?? {};
 const section = props.section ?? {};
-const index = Number(props.index ?? 0);
-
-const hasImage = !!section.image;
-const reverse = index % 2 === 1;
-
-const sectionImages = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/sections/**/*.{png,jpg,jpeg,webp,avif}",
-  { eager: true }
-);
-
-let sectionImage: ImageMetadata | null = null;
-
-if (section.image) {
-  const path = `/src/assets/sections/${section.image}`;
-  const mod = sectionImages[path];
-  if (mod) sectionImage = mod.default;
-}
 ---
 
 <section class="f-section">
-  <div class={`f-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}>
-    {sectionImage && (
-      <Image
-        src={sectionImage}
-        alt={section.title ?? "Kanały TV"}
-        class={`f-section-image ${reverse ? "md:order-1" : "md:order-2"} ${section.dimmed ? "f-image-dimmed" : ""}`}
-        loading="lazy"
-        decoding="async"
-        format="webp"
-        widths={[480, 768, 1024, 1440]}
-        sizes="100vw"
-      />
-    )}
-
-    <div class={`${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}>
+  <div class="f-section-grid md:grid-cols-1">
+    <div>
       {section.title && <h2 class="f-section-title">{section.title}</h2>}
       {section.content && <Markdown text={section.content} />}
 
-      <JamboxChannelsSearch client:load />
+      {/* wyszukiwarka działa na API/DB */}
+      <TvChannelsSearch client:load />
 
+      {section.button && (
+        <div class="f-section-nav">
+          <a
+            href={section.button.url}
+            class="btn btn-primary"
+            title={section.button.title}
+          >
+            {section.button.text}
+          </a>
+        </div>
+      )}
     </div>
   </div>
 </section>

src/components/sections/SectionDefault.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import Markdown from "../../islands/Markdown.jsx";
 
 const { section, index } = Astro.props;
@@ -19,6 +20,8 @@ if (section.image) {
   const mod = sectionImages[path];
   if (mod) sectionImage = mod.default;
 }
+
+const isAboveFold = index === 0; // możesz zmienić warunek jak chcesz
 ---
 
 <section class="f-section">
@@ -31,21 +34,20 @@ if (section.image) {
           src={sectionImage}
           alt={section.title}
           class={`f-section-image ${reverse ? "md:order-1" : "md:order-2"} ${section.dimmed ? "f-image-dimmed" : ""}`}
-          loading="lazy"
+          loading={isAboveFold ? "eager" : "lazy"}
+          fetchpriority={isAboveFold ? "high" : "auto"}
           decoding="async"
           format="webp"
           widths={[480, 768, 1024, 1440]}
-          sizes="100vw"
+          sizes="(min-width: 768px) 50vw, 100vw"
         />
       )
     }
 
-    <div
-      class={`f-section-grid ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
-    >
-      <h2 class="f-section-title">{section.title}</h2>
-
+    <div class={`${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}>
+      {section.title && <h2 class="f-section-title">{section.title}</h2>}
       <Markdown text={section.content} />
+
       {
         section.button && (
           <div class="f-section-nav">