michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(hero): switch to white text and dark overlay for premium image contrast

Browse Source
This commit is contained in:
MichalC
2026-09-17 23:42:49 +02:00
parent 573580d01f
commit b3b96f1d69
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Hero/Component.tsx
+5 -5
View File
@@ -74,9 +74,9 @@ export const HeroBlock: React.FC<Props> = ({
imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`}
/>
{/* Zmniejszony gradient dla lepszej widoczności zdjęcia */}
<div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/40 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/20 lg:to-transparent" />
<div className="absolute inset-0 bg-background/10" />
{/* Ciemny gradient pod spodem, by biały tekst był świetnie czytelny, a zdjęcie pozostało nasycone */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent lg:bg-gradient-to-r lg:from-black/90 lg:via-black/40 lg:to-transparent" />
<div className="absolute inset-0 bg-black/20" />
</>
) : (
<div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" />
@@ -94,7 +94,7 @@ export const HeroBlock: React.FC<Props> = ({
>
<motion.h1
variants={itemVariants}
className={`font-heading text-4xl sm:text-5xl md:text-6xl lg:text-[4.5rem] font-bold leading-[1.05] mb-6 text-balance text-foreground break-words hyphens-auto ${imageUrl ? 'drop-shadow-sm' : ''}`}
className={`font-heading text-4xl sm:text-5xl md:text-6xl lg:text-[4.5rem] font-bold leading-[1.05] mb-6 text-balance break-words hyphens-auto ${imageUrl ? 'text-white drop-shadow-md' : 'text-foreground'}`}
>
<span className="block">{title}</span>
{titleAccent && (
@@ -108,7 +108,7 @@ export const HeroBlock: React.FC<Props> = ({
<motion.p
variants={itemVariants}
className={`text-lg sm:text-xl md:text-2xl text-foreground/90 mb-10 leading-relaxed font-medium max-w-[55ch] ${imageUrl ? 'drop-shadow-sm' : ''}`}
className={`text-lg sm:text-xl md:text-2xl mb-10 leading-relaxed font-medium max-w-[55ch] ${imageUrl ? 'text-white/90 drop-shadow-md' : 'text-foreground/90'}`}
>
{subtitle}
</motion.p>
src/blocks/PageHeader/Component.tsx
+5 -5
View File
@@ -32,9 +32,9 @@ export const PageHeaderBlock: React.FC<PageHeaderProps> = ({ title, subtitle, im
imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`}
/>
{/* Zmniejszony gradient dla lepszej widoczności zdjęcia */}
<div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/40 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/20 lg:to-transparent" />
<div className="absolute inset-0 bg-background/10" />
{/* Ciemny gradient pod spodem, by biały tekst był świetnie czytelny, a zdjęcie pozostało nasycone */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent lg:bg-gradient-to-r lg:from-black/90 lg:via-black/40 lg:to-transparent" />
<div className="absolute inset-0 bg-black/20" />
</>
) : (
<div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" />
@@ -49,11 +49,11 @@ export const PageHeaderBlock: React.FC<PageHeaderProps> = ({ title, subtitle, im
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
className="max-w-4xl"
>
<h1 className={`font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold text-foreground tracking-tight leading-[1.1] text-balance max-w-4xl ${imageUrl ? 'drop-shadow-sm' : ''}`}>
<h1 className={`font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.1] text-balance max-w-4xl ${imageUrl ? 'text-white drop-shadow-md' : 'text-foreground'}`}>
{title}
</h1>
{subtitle && (
<p className={`mt-6 text-lg md:text-xl text-foreground/90 leading-relaxed max-w-[65ch] font-medium ${imageUrl ? 'drop-shadow-sm' : ''}`}>
<p className={`mt-6 text-lg md:text-xl leading-relaxed max-w-[65ch] font-medium ${imageUrl ? 'text-white/90 drop-shadow-md' : 'text-foreground/90'}`}>
{subtitle}
</p>
)}