platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fade hero gradient bottom

Browse Source 
Adds fade-out gradient under hero image in HeroSection and replaces hardcoded opacity with bottom gradient for nicer transition.

X-Lovable-Edit-ID: edt-0004586e-5bd0-4420-b6de-b0c812b29845
This commit is contained in:
gpt-engineer-app[bot]
2026-01-28 00:30:22 +00:00
parent 8d0a8bfb50 e9e9dd097e
commit 53b29863fb
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeroSection.tsx
+4 -2
View File
@@ -2,11 +2,13 @@ import logoImage from "@/assets/logo.png";
import heroBakeryImage from "@/assets/hero-bakery-wide.jpg";
const HeroSection = () => {
return <section className="relative left-1/2 w-screen -translate-x-1/2 overflow-x-clip flex flex-col justify-center items-center text-center min-h-[70vh]">
{/* Background image with opacity (doesn't affect content) */}
{/* Background image with fade-out gradient at bottom */}
<div className="pointer-events-none absolute inset-0 bg-cover bg-center opacity-40" style={{
backgroundImage: `url(${heroBakeryImage})`
}} />
{/* Keep contrast for text without washing out the image (can look like "empty" beige sides) */}
{/* Fade-out gradient at bottom */}
<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background" />
{/* Keep contrast for text without washing out the image */}
<div className="pointer-events-none absolute inset-0 bg-background/25" />
<div className="animate-fade-up max-w-4xl relative z-10 px-6 py-16">