Add hero
This commit is contained in:
dm
@@ -7,56 +7,58 @@ const {
|
||||
ctas = []
|
||||
} = Astro.props;
|
||||
---
|
||||
<section class="fuz-hero">
|
||||
|
||||
<section class="fuz-section">
|
||||
<div class="fuz-container grid md:grid-cols-2 gap-10 items-center">
|
||||
<div class="space-y-6">
|
||||
{Array.isArray(title) ? (
|
||||
<h1 class="fuz-hero-title">
|
||||
{title.map((line) => (
|
||||
<span class="block">{line}</span>
|
||||
))}
|
||||
</h1>
|
||||
) : (
|
||||
<h1 class="fuz-hero-title">{title}</h1>
|
||||
)}
|
||||
{imageUrl && (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Światłowód FUZ – szybki internet w Wyszkowie"
|
||||
class="fuz-hero-bg"
|
||||
loading="eager"
|
||||
/>
|
||||
)}
|
||||
|
||||
{Array.isArray(subtitle) && subtitle.length > 0 && (
|
||||
<div class="fuz-hero-subtitle space-y-1">
|
||||
{subtitle.map((line) => (
|
||||
<p>{line}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div class="fuz-hero-inner">
|
||||
|
||||
{description && (
|
||||
<p class="mt-4 text-base md:text-lg text-gray-600 dark:text-gray-300 max-w-xl">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
<!-- Tytuł (pojedynczy lub lista) -->
|
||||
{Array.isArray(title)
|
||||
? title.map(line => (
|
||||
<h1 class="fuz-hero-title">{line}</h1>
|
||||
))
|
||||
: <h1 class="fuz-hero-title">{title}</h1>
|
||||
}
|
||||
|
||||
{ctas.length > 0 && (
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
{ctas.map((cta) => (
|
||||
<a
|
||||
href={cta.href}
|
||||
class="inline-flex items-center rounded-full px-5 py-2.5 text-sm font-medium bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400"
|
||||
>
|
||||
<!-- Podtytuły (lista) -->
|
||||
{subtitle && (
|
||||
Array.isArray(subtitle)
|
||||
? (
|
||||
<div class="fuz-hero-subtitles">
|
||||
{subtitle.map((line, i) => (
|
||||
<h2 class="fuz-hero-subtitle" style={`--delay:${i}`}>{line}</h2>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<h2 class="fuz-hero-subtitle">{subtitle}</h2>
|
||||
)
|
||||
)}
|
||||
|
||||
<!-- Opis -->
|
||||
{description && (
|
||||
<p class="fuz-hero-description">{description}</p>
|
||||
)}
|
||||
|
||||
<!-- CTA -->
|
||||
{ctas.length > 0 && (
|
||||
<div class="fuz-hero-cta gap-4">
|
||||
{ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; }) => {
|
||||
const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
|
||||
return (
|
||||
<a href={cta.href} class={cls}>
|
||||
{cta.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{imageUrl && (
|
||||
<div class="relative aspect-video md:aspect-[4/3] overflow-hidden rounded-3xl border border-slate-200/70 dark:border-slate-700/70">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
title:
|
||||
- "Dlaczego FUZ?"
|
||||
- "Internet światłowodowy i radiowy w Wyszkowie i okolicach FUZ"
|
||||
subtitle:
|
||||
- "Lokalny operator – znamy Twoją okolicę"
|
||||
- DLACZEGO FUZ
|
||||
- "Lokalny operator, znamy Twoją okolicę"
|
||||
- "Realny serwis, szybkie wsparcie"
|
||||
- "Stabilna infrastruktura światłowodowa i radiowa"
|
||||
description: "Internet i telewizja od ludzi, którzy naprawdę są na miejscu. Bez infolinii z końca świata."
|
||||
|
||||
description: |
|
||||
Szybki i stabilny Internet światłowodowy i radiowy w Wyszkowie oraz okolicach.
|
||||
Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
|
||||
imageUrl: "/images/fiber2.webp"
|
||||
ctas:
|
||||
- label: "Zobacz ofertę Internetu Światłowodowego"
|
||||
href: "/internet-swiatlowodowy"
|
||||
primary: true
|
||||
- label: "Zobacz ofertę Internetu + Telewizja"
|
||||
href: "/internet-telewizja"
|
||||
primary: false
|
||||
- label: "Sprawdź dostępność"
|
||||
href: "/mapa-zasiegu"
|
||||
- label: "Zobacz ofertę"
|
||||
href: "/oferta"
|
||||
primary: false
|
||||
# - label: "Zobacz ofertę"
|
||||
# href: "/oferta"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "./tailwind.css";
|
||||
@import "./theme.css";
|
||||
@import "./navbar.css";
|
||||
@import "./navbar.css";
|
||||
@import "./hero.css";
|
||||
@import "./buttons.css";
|
||||
38
src/styles/buttons.css
Normal file
38
src/styles/buttons.css
Normal file
@@ -0,0 +1,38 @@
|
||||
/* Podstawowe ustawienia wspólne */
|
||||
.btn {
|
||||
@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;
|
||||
}
|
||||
|
||||
/* Wariant główny */
|
||||
.btn-primary {
|
||||
background-color: var(--btn-bg);
|
||||
color: var(--btn-text);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
/* Wariant outline */
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--btn-outline-border);
|
||||
color: var(--btn-outline-text);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--btn-outline-bg-hover);
|
||||
}
|
||||
|
||||
/* Wariant ghost (bez obramowania) */
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--btn-ghost-text);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background-color: var(--btn-ghost-hover-bg);
|
||||
}
|
||||
57
src/styles/hero.css
Normal file
57
src/styles/hero.css
Normal file
@@ -0,0 +1,57 @@
|
||||
.fuz-hero {
|
||||
@apply relative overflow-hidden text-center py-32 px-6;
|
||||
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--fuz-hero-from),
|
||||
var(--fuz-hero-to)
|
||||
);
|
||||
color: var(--fuz-text);
|
||||
}
|
||||
|
||||
.fuz-hero-bg {
|
||||
@apply absolute top-0 left-0 w-full h-full object-cover;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.fuz-hero-inner {
|
||||
@apply relative max-w-7xl mx-auto;
|
||||
color: var(--fuz-text);
|
||||
}
|
||||
|
||||
.fuz-hero-title {
|
||||
@apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
|
||||
color: var(--fuz-text);
|
||||
}
|
||||
|
||||
.fuz-hero-subtitle {
|
||||
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
|
||||
color: var(--fuz-text-subtle);
|
||||
|
||||
/* Animacja główna */
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
/* Opóźnienie zależne od numeru elementu */
|
||||
animation-delay: calc(var(--delay) * 0.3s);
|
||||
}
|
||||
.fuz-hero-description {
|
||||
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
|
||||
color: var(--fuz-text-subtle);
|
||||
}
|
||||
|
||||
.fuz-hero-cta {
|
||||
@apply flex justify-center items-center flex-wrap gap-4 mt-8;
|
||||
}
|
||||
|
||||
.fuz-hero-cta .btn-primary {
|
||||
background-color: var(--fuz-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@@ -2,12 +2,37 @@
|
||||
--fuz-bg: #ffffff;
|
||||
--fuz-text: #1a1a1a;
|
||||
--fuz-accent: #0066ff;
|
||||
--fuz-accent: #0094ff;
|
||||
--fuz-accent-text: #ffffff;
|
||||
|
||||
/* Buttons */
|
||||
--btn-bg: var(--fuz-accent);
|
||||
--btn-text: var(--fuz-accent-text);
|
||||
|
||||
--btn-outline-border: var(--fuz-accent);
|
||||
--btn-outline-text: var(--fuz-accent);
|
||||
--btn-outline-bg-hover: rgba(0, 148, 255, 0.07);
|
||||
|
||||
--btn-ghost-text: var(--fuz-text);
|
||||
--btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--fuz-bg: #0d1117;
|
||||
--fuz-text: #e6edf3;
|
||||
--fuz-bg: #0d1117;
|
||||
--fuz-accent: #58a6ff;
|
||||
--fuz-accent-text: #0d1117;
|
||||
|
||||
/* Buttons */
|
||||
--btn-bg: var(--fuz-accent);
|
||||
--btn-text: var(--fuz-accent-text);
|
||||
|
||||
--btn-outline-border: var(--fuz-accent);
|
||||
--btn-outline-text: var(--fuz-accent);
|
||||
--btn-outline-bg-hover: rgba(88, 166, 255, 0.15);
|
||||
|
||||
--btn-ghost-text: var(--fuz-text);
|
||||
--btn-ghost-hover-bg: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
/* Ustawienia bazowe motywu */
|
||||
|
||||
Reference in New Issue
Block a user