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">
+  <!-- Overlay -->
+  <div class="f-hero__overlay"></div>
+
+  <!-- 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>{line}</h1>
+              <h1 class="f-hero__title">{line}</h1>
             ))
-      : <h1>{title}</h1>
+          : <h1 class="f-hero__title">{title}</h1>
         }
+      </div>
 
-    {subtitle && Array.isArray(subtitle) && (
+      <!-- Subtitles -->
-      <div class="f-hero-subtitles">
+      {subtitle && Array.isArray(subtitle) && subtitle.length > 0 && (
-        <h2 style={`--delay:0`}>
+        <div class="f-hero__subtitles">
-          {subtitle[0]}
+          {subtitle.map((line, i) => (
-        </h2>
+            <p 
-
+              class="f-hero__subtitle"
-        {subtitle.slice(1).map((line, i) => (
+              style={`--delay: ${i}`}
-          <p style={`--delay:${i + 1}`}>
+            >
               {line}
             </p>
           ))}
         </div>
       )}
-<!-- TODO: Przerobić ewentualnie na pojedyncze linie -->
+
+      <!-- Description -->
       {description && (
-      <p class="description">{description}</p>
+        <p class="f-hero__description">{description}</p>
       )}
 
+      <!-- CTAs -->
       {ctas.length > 0 && (
-      <div class="f-hero-cta">
+        <div class="f-hero__ctas">
-        {ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; title: string }) => {
+          {ctas.map((cta) => (
-          const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
+            <a 
-          return (
+              href={cta.href} 
-            <a href={cta.href} class={cls}>
+              class={cta.primary ? "btn-hero-primary" : "btn-hero-outline"}
+            >
               {cta.label}
             </a>
-          );
+          ))}
-        })}
         </div>
       )}
+
+    </div>
+
   </div>
 
 </section>

src/content/home/hero.yaml

@@ -1,17 +1,16 @@
 title:
-  - "Internet światłowodowy w Wyszkowie i okolicach FUZ"
+  - "Internet i Telewizja FUZ"
 subtitle:
-  - DLACZEGO FUZ?
+  - W Wyszkowie i okolicach
   - "Lokalny operator, znamy Twoją okolicę,"
   - "Realny serwis, szybkie wsparcie,"
   - "Stabilna infrastruktura światłowodowa,"
 
 description: |
-  Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach. 
+
-  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
+imageUrl: "fiber.webp"
-imageUrl: "fiber2.webp"
 ctas:
-  - label: "Zobacz ofertę Internetu Światłowodowego"
+  - label: "Zobacz ofertę Internetu"
     href: "/internet-swiatlowodowy"
     title: "Przejdź do oferty Internetu światłowodowego"
     primary: false
@@ -19,7 +18,8 @@ ctas:
     href: "/internet-telewizja"
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
-  - label: "Sprawdź dostępność"
+
-    href: "/mapa-zasiegu"
+  # - label: "Sprawdź dostępność"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   href: "/mapa-zasiegu"
-    primary: false
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   primary: false

src/content/internet-swiatlowodowy/hero.yaml

@@ -1,15 +1,14 @@
 title:
-  - "Internet światłowodowy w Wyszkowie i okolicach"
+  - "Internet światłowodowy"
 subtitle:
-  - DLACZEGO INTERNET FUZ
   - Internet bez kompromisów
   - Szybkie i stabilne łącze
   - Optymalna oferta
   - Lokalny operator, znamy Twoją okolicę
 
-description: |
+# description: |
-  Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach. 
+#   Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach. 
-  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
+#   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "section-fiber.webp"
 ctas:
   - label: "Zobacz ofertę Internetu + Telewizja"

src/content/internet-swiatlowodowy/page.yaml

@@ -3,20 +3,20 @@ title:
 
 paragraphs:
   - title:
-    content: |
+    # content: |
-      Światłowody to najbardziej zaawansowana technologia przesyłu danych. 
+    #   Światłowody to najbardziej zaawansowana technologia przesyłu danych. 
       
-      Gwarantują błyskawiczną prędkość, stabilność i niezawodność bez względu na warunki.
+    #   Gwarantują błyskawiczną prędkość, stabilność i niezawodność bez względu na warunki.
 
-      Dedykowane pasmo,pełna prędkość tylko dla Ciebie.
+    #   Dedykowane pasmo,pełna prędkość tylko dla Ciebie.
 
-      Stała jakość, pogoda ani liczba użytkowników w sieci nie mają znaczenia.
+    #   Stała jakość, pogoda ani liczba użytkowników w sieci nie mają znaczenia.
 
-      Wiele urządzeń jednocześnie, komputer, telefon, tablet, konsola wszystko działa płynnie.
+    #   Wiele urządzeń jednocześnie, komputer, telefon, tablet, konsola wszystko działa płynnie.
 
-      Światłowód to również dostęp do telewizji i telefonu w najwyższej jakości.
+    #   Światłowód to również dostęp do telewizji i telefonu w najwyższej jakości.
   
-      Sprawdź naszą pełną ofertę i wybierz rozwiązanie dopasowane do Twoich potrzeb.
+    #   Sprawdź naszą pełną ofertę i wybierz rozwiązanie dopasowane do Twoich potrzeb.
 
   - title:
     content: 

src/content/internet-telewizja/hero.yaml

@@ -1,17 +1,16 @@
 title:
   - Internet plus telewizja w pakiecie
 subtitle:
-  - DLACZEGO INTERNET + TELEWIZJA FUZ ?
   - Internet bez kompromisów
   - Bogata oferta kanałów telewizyjnych
   - Wszystko, czego potrzebujesz w jednym pakiecie
 
-description: |
+# description: |
-  Szybki i stabilny Internet światłowodowy w pakiecie z telewizją w Wyszkowie oraz okolicach. 
+#   Szybki i stabilny Internet światłowodowy w pakiecie z telewizją w Wyszkowie oraz okolicach. 
-  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
+#   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "section-tv.webp"
 ctas:
-  - label: "Zobacz ofertę internetu światłowodowego"
+  - label: "Zobacz ofertę internetu"
     href: "/internet-swiatlowodowy"
     title: "Przejdź do oferty Internetu światłowodowego"
     primary: false
@@ -21,7 +20,7 @@ ctas:
     title: "Przejdź do oferty telefonu"
     primary: false
 
-  - label: "Sprawdź dostępność"
+  # - label: "Sprawdź dostępność"
-    href: "/mapa-zasiegu"
+  #   href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false   
+  #   primary: false   

src/content/internet-telewizja/page.yaml

@@ -3,14 +3,14 @@ title:
 
 paragraphs:
   - title:
-    content: |
+    # content: |
-      Przygotowaliśmy sześć pakietów dopasowanych do różnych potrzeb. 
+    #   Przygotowaliśmy sześć pakietów dopasowanych do różnych potrzeb. 
   
-      Wybierając którykolwiek z nich, zyskujesz nie tylko korzystną cenę, ale przede wszystkim wygodę i oszczędność czasu.
+    #   Wybierając którykolwiek z nich, zyskujesz nie tylko korzystną cenę, ale przede wszystkim wygodę i oszczędność czasu.
 
-      Jedna umowa, jeden rachunek, jedno miejsce kontaktu. Internet, telewizja i telefon – wszystko w jednym miejscu. Jeśli masz pytania lub potrzebujesz pomocy, jesteśmy do Twojej dyspozycji.
+    #   Jedna umowa, jeden rachunek, jedno miejsce kontaktu. Internet, telewizja i telefon – wszystko w jednym miejscu. Jeśli masz pytania lub potrzebujesz pomocy, jesteśmy do Twojej dyspozycji.
 
-      Oszczędzaj czas i ciesz się prostotą, wszystko czego potrzebujesz, w jednym miejscu.
+    #   Oszczędzaj czas i ciesz się prostotą, wszystko czego potrzebujesz, w jednym miejscu.
 
 # Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów
 

src/content/telefon/hero.yaml

@@ -1,15 +1,16 @@
 title:
-  - Telefon dodatek do internetu światłowodowego
+  - Telefon usługa dodatkowa
 subtitle:
-  - DLACZEGO TELFON FUZ ?
   - Niezawodna łączność głosowa dzięki technologii VoIP
   - Atrakcyjne ceny 
-  - Wszystko, czego potrzebujesz w jednym miejscu
+  - Bez telefonu jak bez ręki
-description: |
+
-  Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
+  # - Wszystko, czego potrzebujesz w jednym miejscu
+# description: |
+#   Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
 imageUrl: section-telefon.webp
 ctas:
-  - label: "Zobacz ofertę internetu światłowodowego"
+  - label: "Zobacz ofertę internetu"
     href: "/internet-swiatlowodowy"
     title: "Przejdź do oferty Internetu światłowodowego"
     primary: false
@@ -19,7 +20,7 @@ ctas:
     title: "Przejdź do oferty Internet + Telewizja w FUZ"
     primary: false
 
-  - label: "Sprawdź dostępność"
+  # - label: "Sprawdź dostępność"
-    href: "/mapa-zasiegu"
+  #   href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false   
+  #   primary: false   

src/content/telefon/page.yaml

@@ -2,18 +2,18 @@ title:
   - USLUGA TELEFONU
 paragraphs:
   - title:
-    content: |
+    # content: |
-      Od czasów Aleksandra Bella telefon przeszedł niesamowitą ewolucję. 
+    #   Od czasów Aleksandra Bella telefon przeszedł niesamowitą ewolucję. 
       
-      Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
+    #   Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
   
-      Ale są też tacy, którzy używają go po prostu do rozmów. I to w zupełności wystarczy.
+    #   Ale są też tacy, którzy używają go po prostu do rozmów. I to w zupełności wystarczy.
 
-      Stworzyliśmy zróżnicowaną ofertę, abyś mógł wybrać rozwiązanie idealnie dopasowane do swoich potrzeb.
+    #   Stworzyliśmy zróżnicowaną ofertę, abyś mógł wybrać rozwiązanie idealnie dopasowane do swoich potrzeb.
       
-      Od prostej linii telefonicznej po rozbudowane opcje.
+    #   Od prostej linii telefonicznej po rozbudowane opcje.
 
-      Zapoznaj się z naszymi propozycjami i wybierz to, co jest dla Ciebie najlepsze.
+    #   Zapoznaj się z naszymi propozycjami i wybierz to, co jest dla Ciebie najlepsze.
 
   - title:
     content: |      

src/styles/hero.css

@@ -1,4 +1,4 @@
-.f-hero {
+/* .f-hero {
   @apply relative overflow-hidden text-center py-28 px-6;
 }
 
@@ -46,4 +46,137 @@
     opacity: 1;
     transform: translateY(0);
   }
+} */
+
+
+/* ==========================================
+   HERO COMPONENT STYLES - TAILWIND
+   ========================================== */
+
+/* Base Hero Section */
+.f-hero {
+  @apply relative min-h-[500px] md:min-h-[600px] h-5/6;
+  @apply flex items-center overflow-hidden;
+}
+
+/* Background Image */
+.f-hero__bg {
+  @apply absolute inset-0 w-full h-full object-cover z-0;
+}
+
+/* Overlay - Mobile (jednolity) */
+.f-hero__overlay {
+  @apply absolute inset-0 z-[1] bg-black/30;
+}
+
+/* Overlay - Desktop Right */
+.f-hero--right .f-hero__overlay {
+  @apply md:bg-gradient-to-r md:from-transparent md:via-transparent md:via-50% md:to-black/60 md:to-50%;
+}
+
+/* Overlay - Desktop Left */
+.f-hero--left .f-hero__overlay {
+  @apply md:bg-gradient-to-l md:from-transparent md:via-transparent md:via-50% md:to-black/75 md:to-50%;
+}
+
+/* Overlay - Center */
+.f-hero--center .f-hero__overlay {
+  @apply bg-black/60;
+}
+
+/* Container - Mobile */
+.f-hero__container {
+  @apply relative z-[2] w-full max-w-[1400px] mx-auto;
+  @apply px-6 md:px-8 py-12 md:py-16;
+  @apply grid grid-cols-1 gap-8;
+}
+
+/* Container - Desktop Right */
+.f-hero--right .f-hero__container {
+  @apply md:grid-cols-2;
+}
+
+.f-hero--right .f-hero__content {
+  @apply md:col-start-2;
+}
+
+/* Container - Desktop Left */
+.f-hero--left .f-hero__container {
+  @apply md:grid-cols-2;
+}
+
+.f-hero--left .f-hero__content {
+  @apply md:col-start-1;
+}
+
+/* Container - Center */
+.f-hero--center .f-hero__container {
+  @apply md:grid-cols-1 md:max-w-4xl md:text-center;
+}
+
+/* Content */
+.f-hero__content {
+  @apply flex flex-col gap-6 text-[--f-hero-text] mx-8;
+}
+
+/* Titles Container */
+.f-hero__titles {
+  @apply space-y-2;
+}
+
+/* Title */
+.f-hero__title {
+  @apply text-4xl md:text-5xl lg:text-6xl;
+  @apply font-bold leading-tight m-0;
+  @apply drop-shadow-lg;
+}
+
+/* Subtitles Container */
+.f-hero__subtitles {
+  @apply space-y-4;
+}
+
+/* Subtitle with Animation */
+.f-hero__subtitle {
+  @apply text-lg md:text-xl lg:text-2xl pl-9;
+  @apply leading-relaxed m-0;
+  @apply opacity-0 animate-fade-in-up;
+  animation-delay: calc(var(--delay, 0) * 150ms);
+}
+
+/* Description */
+.f-hero__description {
+  @apply text-base md:text-lg leading-relaxed;
+  @apply opacity-90 max-w-2xl m-0;
+}
+
+/* CTAs */
+.f-hero__ctas {
+  @apply flex flex-wrap gap-4 mt-2;
+}
+
+/* Animation Keyframes */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+.btn-hero-primary,
+.btn-hero-outline{
+   @apply inline-flex items-center justify-center font-semibold rounded-lg px-6 py-3 text-base transition-all duration-200 cursor-pointer select-none;
+   @apply border border-solid border-[--btn-hero-border] text-[--btn-hero-text] bg-[--btn-hero-background];
+}
+
+.btn-hero-outline:hover {
+  @apply bg-[--btn-outline-background-hover] text-[--btn-outline-text-hover];
 }

src/styles/theme.css

@@ -100,6 +100,7 @@
   --f-autocomplete-hover-bg: var(--surface4-light);
   --f-autocomplete-hover-text: var(--surface2-light);
 
+  --f-hero-text: var(--surface2-light);
   -fuz-hero-from: #3b82f6;
   /* niebieski - kolor początkowy */
   --fuz-hero-to: #8b5cf6;