From 1bdc4ddc7217a8def0d4c63accd07c5b9a593b2a Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 24 Oct 2025 05:19:09 +0200
Subject: [PATCH] feat: improve responsive design for hero section

- Added responsive visibility classes to hide book tear image on mobile screens (md:block)
- Adjusted vertical spacing (-mt-14) to only apply on large screens, with mt-0 on mobile
- Increased horizontal padding in content section from px-6 to px-8 for better mobile spacing
- Updated Booktear component to be hidden on mobile and visible on md/lg breakpoints
---
 src/components/Hero.jsx        | 6 +++---
 src/components/ui/Booktear.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index e438ddd..8ec4575 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -34,7 +34,7 @@ export function Hero() {
         </div>
       </Container>
       </div>
-      <div className="relative">
+      <div className="relative hidden md:block">
         <Image
           unoptimized
           src="/images/booktear1.png"
@@ -46,10 +46,10 @@ export function Hero() {
       </div>
       <div className="relative">
         <div
-          className="bg-cover bg-center -mt-14"
+          className="bg-cover bg-center lg:-mt-14 mt-0"
           style={{ backgroundImage: 'url(/images/paper.jpg)', opacity: '0.9' }}
         >
-          <div className="px-6 py-24 lg:px-8">
+          <div className="px-8 py-24 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 relative">
                 <span className="invisible">Mon cher,</span>
diff --git a/src/components/ui/Booktear.jsx b/src/components/ui/Booktear.jsx
index e99bdef..be1e760 100644
--- a/src/components/ui/Booktear.jsx
+++ b/src/components/ui/Booktear.jsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 const Booktear = ({ className }) => {
   return (
-    <div className={`w-full bg-transparent ${className || ''}`}>
+    <div className={`hidden md:block lg:block w-full bg-transparent ${className || ''}`}>
       <Image
         unoptimized
         src="/images/booktear.png"