Zmiana hero i treści

2025-11-26 17:54:24 +01:00
parent 9b5eb5a3ef
commit 5e8b62b3d8
11 changed files with 259 additions and 93 deletions
--- a/src/assets/hero/fiber.webp
+++ b/src/assets/hero/fiber.webp
--- a/src/components/hero/Hero.astro
+++ b/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>
+  <!-- Container -->
+  <div class="f-hero__container">
    
-        {subtitle.slice(1).map((line, i) => (
-          <p style={`--delay:${i + 1}`}>
-            {line}
-          </p>
-        ))}
+    <!-- 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>
--- a/src/content/home/hero.yaml
+++ b/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: "fiber2.webp"
+
+imageUrl: "fiber.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"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false
+
+  # - label: "Sprawdź dostępność"
+  #   href: "/mapa-zasiegu"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   primary: false
--- a/src/content/internet-swiatlowodowy/hero.yaml
+++ b/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: |
-  Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach. 
-  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
+# description: |
+#   Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach. 
+#   Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "section-fiber.webp"
 ctas:
  - label: "Zobacz ofertę Internetu + Telewizja"
--- a/src/content/internet-swiatlowodowy/page.yaml
+++ b/src/content/internet-swiatlowodowy/page.yaml
@@ -3,20 +3,20 @@ title:

 paragraphs:
  - title:
-    content: |
-      Światłowody to najbardziej zaawansowana technologia przesyłu danych. 
+    # content: |
+    #   Ś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: 
--- a/src/content/internet-telewizja/hero.yaml
+++ b/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: |
-  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.
+# description: |
+#   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.
 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ść"
-    href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false   
+  # - label: "Sprawdź dostępność"
+  #   href: "/mapa-zasiegu"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   primary: false   
--- a/src/content/internet-telewizja/page.yaml
+++ b/src/content/internet-telewizja/page.yaml
@@ -3,14 +3,14 @@ title:

 paragraphs:
  - title:
-    content: |
-      Przygotowaliśmy sześć pakietów dopasowanych do różnych potrzeb. 
+    # content: |
+    #   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

--- a/src/content/telefon/hero.yaml
+++ b/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
-description: |
-  Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
+  - 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ść"
-    href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
-    primary: false   
+  # - label: "Sprawdź dostępność"
+  #   href: "/mapa-zasiegu"
+  #   title: "Sprawdź zasięg Internetu światłowodowego FUZ"
+  #   primary: false   
--- a/src/content/telefon/page.yaml
+++ b/src/content/telefon/page.yaml
@@ -2,18 +2,18 @@ title:
  - USLUGA TELEFONU
 paragraphs:
  - title:
-    content: |
-      Od czasów Aleksandra Bella telefon przeszedł niesamowitą ewolucję. 
+    # content: |
+    #   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: |      
--- a/src/styles/hero.css
+++ b/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];
 }
--- a/src/styles/theme.css
+++ b/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;