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

style(hero): reduce gradient overlay intensity to make background image more visible

Browse Source
This commit is contained in:
MichalC
2026-09-17 23:41:11 +02:00
parent 0b35e76cf2
commit 573580d01f
7 changed files with 273 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Hero/Component.tsx
+3 -8
View File
@@ -74,14 +74,9 @@ export const HeroBlock: React.FC<Props> = ({
imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`}
/>
{/* Gradient Overlay for Text Readability - Mocniejszy na dole/lewo */}
{/* Z uwagi na "od ciemnego do przezroczystego" stosujemy from-background (zależne od motywu),
ale upewniamy się, że w jasnym motywie ciemny tekst nadal ma sens - gradient na jasnym tle to od białego,
a na ciemnym od czarnego. Jeśli chcesz wymusić zawsze ciemny overlay to musielibyśmy
nadpisać text-foreground na stałe na biało. Zakładamy, że bg-background daje optymalny kontrast
(jasny gradient z ciemnym tekstem / ciemny gradient z jasnym tekstem). */}
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/70 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/50 lg:to-transparent" />
<div className="absolute inset-0 bg-background/20" /> {/* bazowe lekkie przyciemnienie reszty zdjęcia */}
{/* 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" />
</>
) : (
<div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" />
src/blocks/PageHeader/Component.tsx
+3 -3
View File
@@ -32,9 +32,9 @@ export const PageHeaderBlock: React.FC<PageHeaderProps> = ({ title, subtitle, im
imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
}`}
/>
{/* Gradient Overlay for Text Readability - Mocniejszy na dole/lewo */}
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/70 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/50 lg:to-transparent" />
<div className="absolute inset-0 bg-background/20" /> {/* bazowe lekkie przyciemnienie reszty zdjęcia */}
{/* 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" />
</>
) : (
<div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" />