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' imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`} }`}
/> />
{/* Zmniejszony gradient dla lepszej widoczności zdjęcia */} {/* 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-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-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-background/10" /> <div className="absolute inset-0 bg-black/20" />
</> </>
) : ( ) : (
<div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" /> <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 <motion.h1
variants={itemVariants} 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> <span className="block">{title}</span>
{titleAccent && ( {titleAccent && (
@@ -108,7 +108,7 @@ export const HeroBlock: React.FC<Props> = ({
<motion.p <motion.p
variants={itemVariants} 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} {subtitle}
</motion.p> </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' imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`} }`}
/> />
{/* Zmniejszony gradient dla lepszej widoczności zdjęcia */} {/* 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-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-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-background/10" /> <div className="absolute inset-0 bg-black/20" />
</> </>
) : ( ) : (
<div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" /> <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] }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
className="max-w-4xl" 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} {title}
</h1> </h1>
{subtitle && ( {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} {subtitle}
</p> </p>
)} )}