diff --git a/src/assets/hero/fiber.webp b/src/assets/hero/fiber.webp new file mode 100644 index 0000000..cf6364c Binary files /dev/null and b/src/assets/hero/fiber.webp differ diff --git a/src/components/hero/Hero.astro b/src/components/hero/Hero.astro index 82caf02..b3427e4 100644 --- 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; --- -
- +
+ + {imageAsset && ( Światłowód FUZ, szybki internet w Wyszkowie )} -
- {Array.isArray(title) - ? title.map(line => ( -

{line}

- )) - :

{title}

- } + +
- {subtitle && Array.isArray(subtitle) && ( -
-

- {subtitle[0]} -

- - {subtitle.slice(1).map((line, i) => ( -

- {line} -

- ))} + +
+ + +
+ + +
+ {Array.isArray(title) + ? title.map(line => ( +

{line}

+ )) + :

{title}

+ }
- )} - - {description && ( -

{description}

- )} - {ctas.length > 0 && ( -
- {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 ( - + + {subtitle && Array.isArray(subtitle) && subtitle.length > 0 && ( +
+ {subtitle.map((line, i) => ( +

+ {line} +

+ ))} +
+ )} + + + {description && ( +

{description}

+ )} + + + {ctas.length > 0 && ( +
+ {ctas.map((cta) => ( + {cta.label} - ); - })} -
- )} + ))} +
+ )} + +
+
\ No newline at end of file diff --git a/src/content/home/hero.yaml b/src/content/home/hero.yaml index ff09a11..438f403 100644 --- 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 diff --git a/src/content/internet-swiatlowodowy/hero.yaml b/src/content/internet-swiatlowodowy/hero.yaml index 6b24afe..fb476aa 100644 --- 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" diff --git a/src/content/internet-swiatlowodowy/page.yaml b/src/content/internet-swiatlowodowy/page.yaml index 33b5092..c086753 100644 --- 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: diff --git a/src/content/internet-telewizja/hero.yaml b/src/content/internet-telewizja/hero.yaml index b407a3d..a94babd 100644 --- 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 diff --git a/src/content/internet-telewizja/page.yaml b/src/content/internet-telewizja/page.yaml index 05cf707..fddb68f 100644 --- 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 diff --git a/src/content/telefon/hero.yaml b/src/content/telefon/hero.yaml index c63e194..3e1a63a 100644 --- 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 diff --git a/src/content/telefon/page.yaml b/src/content/telefon/page.yaml index ce284d1..2573195 100644 --- 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: | diff --git a/src/styles/hero.css b/src/styles/hero.css index 7ca1c99..25ce6ad 100644 --- 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]; } \ No newline at end of file diff --git a/src/styles/theme.css b/src/styles/theme.css index d1f046f..387c40b 100644 --- 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;