Zmiana hero i treści
This commit is contained in:
BIN
src/assets/hero/fiber.webp
Normal file
BIN
src/assets/hero/fiber.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
@@ -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>
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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: |
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user