dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero stylizacja

Browse Source
This commit is contained in:
dm
2025-11-25 12:34:57 +01:00
parent 6b1dad3bb1
commit d3040f4917
2 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/hero/Hero.astro
View File

@@ -47,19 +47,19 @@ const isLCP = true;
{Array.isArray(title) {Array.isArray(title)
? title.map(line => ( ? title.map(line => (
<h1 class="f-hero-header">{line}</h1> <h1>{line}</h1>
)) ))
: <h1 class="f-hero-header">{title}</h1> : <h1>{title}</h1>
} }
{subtitle && Array.isArray(subtitle) && ( {subtitle && Array.isArray(subtitle) && (
<div class="f-hero-subtitles"> <div class="f-hero-subtitles">
<h2 class="f-hero-header-2" style={`--delay:0`}> <h2 style={`--delay:0`}>
{subtitle[0]} {subtitle[0]}
</h2> </h2>
{subtitle.slice(1).map((line, i) => ( {subtitle.slice(1).map((line, i) => (
<p class="f-hero-header-items" style={`--delay:${i + 1}`}> <p style={`--delay:${i + 1}`}>
{line} {line}
</p> </p>
))} ))}
@@ -67,7 +67,7 @@ const isLCP = true;
)} )}
<!-- TODO: Przerobić ewentualnie na pojedyncze linie --> <!-- TODO: Przerobić ewentualnie na pojedyncze linie -->
{description && ( {description && (
<p class="f-hero-description">{description}</p> <p class="description">{description}</p>
)} )}
{ctas.length > 0 && ( {ctas.length > 0 && (

33
src/styles/hero.css
View File

@@ -1,11 +1,9 @@
.f-hero { .f-hero {
@apply relative overflow-hidden text-center py-32 px-6; @apply relative overflow-hidden text-center py-32 px-6;
background: linear-gradient( background: linear-gradient(to right,
to right,
var(--fuz-hero-from), var(--fuz-hero-from),
var(--fuz-hero-to) var(--fuz-hero-to));
);
color: var(--f-text); color: var(--f-text);
} }
@@ -15,28 +13,28 @@
.f-hero-inner { .f-hero-inner {
@apply relative max-w-7xl mx-auto text-[var(--f-text)]; @apply relative max-w-7xl mx-auto text-[var(--f-text)];
}
.f-hero-header { h1 {
@apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)]; @apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
} }
.f-hero-header-2 { h2 {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)]; @apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
animation-name: fade-in; animation-name: fade-in;
animation-duration: 0.8s; animation-duration: 0.8s;
animation-timing-function: ease-out; animation-timing-function: ease-out;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
.f-hero-header-items { p {
@apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)]; @apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
animation: fade-in 0.3s ease-out forwards; animation: fade-in 0.3s ease-out forwards;
animation-delay: calc(var(--delay) * 0.4s); animation-delay: calc(var(--delay) * 0.4s);
} }
.f-hero-description { p.description {
@apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)]; @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
}
} }
.f-hero-cta { .f-hero-cta {
@@ -44,6 +42,13 @@
} }
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translateY(10px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }