From 1ddb4d4e1aa7903cc875f2ee150430246220ab34 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 27 Jan 2026 21:49:00 +0000
Subject: [PATCH] Changes

---
 src/components/HeroSection.tsx | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index efac10d..b2e5f86 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -6,25 +6,11 @@ const HeroSection = () => {
     <section className="relative flex flex-col justify-center items-center text-center py-16 pt-20 pb-12 overflow-visible">
       {/* Background image with opacity - full viewport width */}
       <div 
-        className="absolute top-0 bottom-0 opacity-40 bg-cover bg-center"
-        style={{ 
-          backgroundImage: `url(${heroBakeryImage})`,
-          left: '50%',
-          right: '50%',
-          marginLeft: '-50vw',
-          marginRight: '-50vw',
-          width: '100vw'
-        }}
+        className="pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 bg-cover bg-center opacity-40"
+        style={{ backgroundImage: `url(${heroBakeryImage})` }}
       />
       <div 
-        className="absolute top-0 bottom-0 bg-background/60"
-        style={{ 
-          left: '50%',
-          right: '50%',
-          marginLeft: '-50vw',
-          marginRight: '-50vw',
-          width: '100vw'
-        }}
+        className="pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 bg-background/60"
       />
       
       <div className="animate-fade-up max-w-4xl relative z-10 px-6">