Stylizacja i poprawki w układzie

src/components/hero/Hero.astro

@@ -38,7 +38,7 @@ const isLCP = true;
       fetchpriority={isLCP ? "high" : "auto"}
       decoding="async"
       format="webp"
-      widths={[640, 960, 1280, 1920]}
+      widths={[640, 960, 1280, 1350, 1920]}
       sizes="100vw"
     />
   )}

src/components/layout/Footer.astro

@@ -15,6 +15,7 @@ const footer = yaml.load(
         {footer.company.address.line1}<br />
         {footer.company.address.line2}
       </p>
+      <a href="/polityka-prywatnosci" title="Polityka prywatności">Polityka prywatności</a>
     </div>
 
     <div class="f-footer-col">

src/components/layout/Header.astro

@@ -20,7 +20,7 @@ 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="my-0" />
+      <img src="/assets/logo.webp" alt="FUZ Logo" class="f-navbar-logo" />
     </a>
 
     <div class="hidden md:flex f-navbar-links">

src/components/sections/SectionDefault.astro

@@ -7,13 +7,11 @@ const { section, index } = Astro.props;
 const hasImage = !!section.image;
 const reverse = index % 2 === 1;
 
-// Automatyczny import obrazów sekcji
 const sectionImages = import.meta.glob<{ default: ImageMetadata }>(
   "/src/assets/sections/**/*.{png,jpg,jpeg,webp,avif}",
   { eager: true },
 );
 
-// Znajdź obraz zgodnie z YAML
 let sectionImage: ImageMetadata | null = null;
 
 if (section.image) {
@@ -23,17 +21,16 @@ if (section.image) {
 }
 ---
 
-<section class="fuz-section">
+<section class="f-section">
   <div
-    class={`fuz-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}
+    class={`f-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}
   >
     {
       sectionImage && (
         <Image
           src={sectionImage}
           alt={section.title}
-          class={`fuz-section-image ${reverse ? "md:order-1" : "md:order-2"} 
-        ${section.dimmed ? "fuz-image-dimmed" : ""}`}
+          class={`f-section-image ${reverse ? "md:order-1" : "md:order-2"} ${section.dimmed ? "f-image-dimmed" : ""}`}
           loading="lazy"
           decoding="async"
           format="webp"
@@ -44,15 +41,16 @@ if (section.image) {
     }
 
     <div
-      class={`fuz-section text-center ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
+      class={`f-section-grid ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
     >
-      <h2 class="fuz-section-title">{section.title}</h2>
+    <!-- TODO: Styl nagłowka powinien byc trochę niżej -->
+      <h2 class="f-section-title">{section.title}</h2>
 
       <Markdown text={section.content} />
 
       {
         section.button && (
-          <div class="mt-8 flex justify-center">
+          <div class="f-section-nav">
             <a
               href={section.button.url}
               class="btn btn-outline"
@@ -65,4 +63,4 @@ if (section.image) {
       }
     </div>
   </div>
-</section>
+</section>

src/components/sections/SectionRenderer.astro

@@ -8,10 +8,8 @@ import SectionIframeChannels from "./SectionIframeChannels.astro";
 
 const { src } = Astro.props;
 
-// Load YAML
 const data = yaml.load(fs.readFileSync(src, "utf8")) ?? { sections: [] };
 
-// Markdown → HTML
 const sections = (data.sections as any[]).map((s: any) => ({
   ...s,
   html: marked(s.content || "")