Full-width hero implemented

Adjusted HeroSection to enforce full viewport width with centered background:
- Replaced inline background on section with layered full-width background div
- Added edge-to-edge container via left-1/2 w-screen -translate-x-1/2
- Introduced semi-transparent overlay and preserved content layering
- Background uses baker image with 40% opacity and covers center area

X-Lovable-Edit-ID: edt-cf6915f1-050c-4c66-ad63-7eabf98be22e

src/components/HeroSection.tsx

@@ -3,18 +3,13 @@ import heroBakeryImage from "@/assets/hero-bakery.jpg";
 
 const HeroSection = () => {
   return (
-    <section 
+    <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]">
-      className="relative flex flex-col justify-center items-center text-center min-h-[70vh] w-screen"
+      {/* Background image with opacity (doesn't affect content) */}
-      style={{
+      <div
-        backgroundImage: `url(${heroBakeryImage})`,
+        className="pointer-events-none absolute inset-0 bg-cover bg-center opacity-40"
-        backgroundSize: 'cover',
+        style={{ backgroundImage: `url(${heroBakeryImage})` }}
-        backgroundPosition: 'center',
+      />
-        backgroundRepeat: 'no-repeat',
+      <div className="pointer-events-none absolute inset-0 bg-background/60" />
-        backgroundColor: '#8b5a2b'
-      }}
-    >
-      {/* Overlay for opacity effect */}
-      <div className="absolute inset-0 bg-background/60" />
       
       <div className="animate-fade-up max-w-4xl relative z-10 px-6 py-16">
         <img