From 0b914b916c8a4518dec56980f2aab7b9c5ca0669 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 24 Oct 2025 04:54:08 +0200
Subject: [PATCH] feat: improve hero section layout and styling

- Restructured hero component HTML to separate image and content sections for better organization
- Adjusted background image container positioning from absolute to relative for proper content flow
- Modified paper background opacity handling by removing opacity-50 class and simplifying structure
- Updated text container layout to improve visual hierarchy with the background image
---
 src/components/Hero.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 78b90c6..10f1b07 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -33,11 +33,12 @@ export function Hero() {
           height={200}
           className="relative z-10 -mt-14 w-full h-auto"
         />
+      </div>
+      <div className="relative">
         <div
-          className="absolute inset-0 bg-cover bg-center opacity-50"
+          className="bg-cover bg-center"
           style={{ backgroundImage: 'url(/images/paper.jpg)' }}
-        />
-        <div className="relative bg-transparent">
+        >
           <div className="px-6 py-24 sm:py-32 lg:px-8">
             <div className="mx-auto max-w-2xl text-left">
               <p className="font-script text-2xl text-love-red mb-2 font-typewriter">Mon cher,</p>