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

Expand hero background width

Browse Source 
Made hero section background extend full width by adjusting container and positioning:
- Removed fixed w-screen negative margins
- Made background div stretch with left/right calc offsets
- Applied full-width overlay to ensure edge-to-edge image on desktop

X-Lovable-Edit-ID: edt-8352e60b-97f1-4e4a-a212-14bd912a3b24
This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 21:40:08 +00:00
parent e8af465323 3dce252d5b
commit 9f16e1e68b
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeroSection.tsx
+4 -4
View File
@@ -3,13 +3,13 @@ import heroBakeryImage from "@/assets/hero-bakery.jpg";
const HeroSection = () => {
return (
<section className="relative flex flex-col justify-center items-center text-center px-6 py-16 pt-20 pb-12 overflow-hidden w-screen -ml-[calc((100vw-100%)/2)]">
{/* Background image with opacity */}
<section className="relative flex flex-col justify-center items-center text-center py-16 pt-20 pb-12">
{/* Background image with opacity - full width */}
<div
className="absolute inset-0 bg-cover bg-center opacity-40"
className="absolute inset-0 left-[calc(-50vw+50%)] right-[calc(-50vw+50%)] bg-cover bg-center opacity-40"
style={{ backgroundImage: `url(${heroBakeryImage})` }}
/>
<div className="absolute inset-0 bg-background/60" />
<div className="absolute inset-0 left-[calc(-50vw+50%)] right-[calc(-50vw+50%)] bg-background/60" />
<div className="animate-fade-up max-w-4xl relative z-10">
<img