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

@@ -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>

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"