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

Make hero cover full width

Browse Source 
Adjusted HeroSection to stretch background to full viewport width by making section full-bleed and simplifying background divs to ensure edge-to-edge coverage.

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