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

package-lock.json

@@ -31,7 +31,8 @@
         "react-use-measure": "^2.1.7",
         "slick-carousel": "^1.8.1",
         "swiper": "^11.1.7",
-        "tailwindcss": "^3.4.6"
+        "tailwindcss": "^3.4.6",
+        "typewriter-effect": "^2.22.0"
       },
       "devDependencies": {
         "eslint": "^8.56.0",
@@ -27468,6 +27469,20 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.22.0.tgz",
+      "integrity": "sha512-01HCRYY462wT8Fxps/epwGCioZd/GMXY0aLKhFKrfJ5Xhgf54/SiDx7Oq7PoES5kGqOEAdW8FS8HYVM2WSvfhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

package.json

@@ -33,7 +33,8 @@
     "react-use-measure": "^2.1.7",
     "slick-carousel": "^1.8.1",
     "swiper": "^11.1.7",
-    "tailwindcss": "^3.4.6"
+    "tailwindcss": "^3.4.6",
+    "typewriter-effect": "^2.22.0"
   },
   "devDependencies": {
     "eslint": "^8.56.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.1.5
         version: 2.2.0(react@18.3.1)
+      '@kevtucker/react-audio-player-bar':
+        specifier: ^0.0.2
+        version: 0.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material':
         specifier: ^7.3.1
         version: 7.3.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -53,6 +56,9 @@ importers:
       react:
         specifier: ^18.2.0
         version: 18.3.1
+      react-audio-player:
+        specifier: ^0.17.0
+        version: 0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-card-slider-component:
         specifier: ^1.0.9
         version: 1.0.9(@testing-library/dom@7.31.2)(@types/webpack@4.41.40)(eslint@8.57.1)(sockjs-client@1.6.1)(typescript@4.9.5)
@@ -1213,6 +1219,12 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
+  '@kevtucker/react-audio-player-bar@0.0.2':
+    resolution: {integrity: sha512-OdyXLPTqutRIXgmiWYrpgOvD1QI7u7ohLGu0cHG8nEGcwbHBmrToQercW7h3Rz+Kt7hGcbtpUxshtcwptEmhiQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@mui/core-downloads-tracker@7.3.1':
     resolution: {integrity: sha512-+mIK1Z0BhOaQ0vCgOkT1mSrIpEHLo338h4/duuL4TBLXPvUMit732mnwJY3W40Avy30HdeSfwUAAGRkKmwRaEQ==}
 
@@ -6077,6 +6089,12 @@ packages:
     resolution: {integrity: sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==}
     engines: {node: '>=10'}
 
+  react-audio-player@0.17.0:
+    resolution: {integrity: sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   react-card-slider-component@1.0.9:
     resolution: {integrity: sha512-xdQYRv5Jpb+8/Qmt1aUaFEbZKPF5ciVXETReMLV9C9d24/ODCl1XdUQaRQzzNev75EWjaCk4caofCvXbqI1nUA==}
 
@@ -9623,6 +9641,12 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kevtucker/react-audio-player-bar@0.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      postcss: 8.5.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@mui/core-downloads-tracker@7.3.1': {}
 
   '@mui/material@7.3.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -15568,6 +15592,12 @@ snapshots:
       regenerator-runtime: 0.13.11
       whatwg-fetch: 3.6.20
 
+  react-audio-player@0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-card-slider-component@1.0.9(@testing-library/dom@7.31.2)(@types/webpack@4.41.40)(eslint@8.57.1)(sockjs-client@1.6.1)(typescript@4.9.5):
     dependencies:
       '@testing-library/jest-dom': 5.17.0

src/app/layout.jsx

@@ -1,4 +1,5 @@
 import { Inter, Lexend } from 'next/font/google'
+import localFont from 'next/font/local'
 import clsx from 'clsx'
 
 import '@/styles/tailwind.css'
@@ -18,6 +19,11 @@ const inter = Inter({
   variable: '--font-inter',
 })
 
+const jmhTypewriter = localFont({
+  src: '../fonts/jmh_typewriter/JMH Typewriter.otf',
+  variable: '--font-jmh-typewriter',
+})
+
 const lexend = Lexend({
   subsets: ['latin'],
   display: 'swap',
@@ -29,12 +35,13 @@ export default function RootLayout({ children }) {
     <html
       lang="en"
       className={clsx(
-        'h-full scroll-smooth bg-creme-600 antialiased',
+        'h-full scroll-smooth antialiased',
         inter.variable,
         lexend.variable,
+        jmhTypewriter.variable,
       )}
     >
-            <body className="flex h-full flex-col pt-20">
+                  <body className="flex h-full flex-col bg-base pt-20 text-slate-900">
         {children}
       </body>
     </html>

src/app/page.jsx

@@ -3,6 +3,7 @@ import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
 import { Hero } from '@/components/Hero';
 import AudioPlayer from '@/components/ui/AudioPlayer';
+import Booktear from '@/components/ui/Booktear';
 
 
 
@@ -11,10 +12,10 @@ export default function Home() {
   return (
     <>
       <Header />
-      <main>
+      <main className="bg-transparent">
         <AudioPlayer />
         <Hero />
-      </main>
+              </main>
       <Footer />
     </>
   )

src/components/Header.jsx

@@ -26,7 +26,7 @@ function MobileNavIcon({ open }) {
   return (
     <svg
       aria-hidden="true"
-      className="h-3.5 w-3.5 overflow-visible stroke-slate-700"
+      className="h-3.5 w-3.5 overflow-visible stroke-white"
       fill="none"
       strokeWidth={2}
       strokeLinecap="round"
@@ -64,13 +64,12 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full flex origin-top flex-col bg-black/10 p-4 text-lg tracking-tight text-white backdrop-blur-sm data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
       >
-        <MobileNavLink href="/">HOME</MobileNavLink>
+        <MobileNavLink href="/">MENUS</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>
-        <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
-        <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
-        <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
+        <MobileNavLink href="/experiences">EVENTS</MobileNavLink>
+        <MobileNavLink href="/dahabiyas">CONTACT</MobileNavLink>
       </PopoverPanel>
     </Popover>
   )
@@ -78,10 +77,11 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-sm py-4">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-sm py-3">
       <Container>
-        <nav className="relative z-50 flex justify-center">
-          <div className="flex items-center md:gap-x-12">
+        <nav className="relative z-50 flex items-center justify-between md:justify-center">
+          <div className="md:hidden" /> {/* Spacer for mobile */} 
+          <div className="flex items-center gap-x-5 md:gap-x-8">
             <div className="hidden md:flex md:gap-x-6">
               <NavLink href="/">MENUS</NavLink>
               <NavLink href="/story">STORY</NavLink>
@@ -89,10 +89,8 @@ export function Header() {
               <NavLink href="/dahabiyas">CONTACT</NavLink>
             </div>
           </div>
-          <div className="flex items-center gap-x-5 md:gap-x-8">
-            <div className="-mr-1 md:hidden">
-              <MobileNavigation />
-            </div>
+          <div className="md:hidden">
+            <MobileNavigation />
           </div>
         </nav>
       </Container>

src/components/Hero.jsx

@@ -1,11 +1,22 @@
+'use client'
+
 import Image from 'next/image'
+import { useState, useEffect } from 'react'
+import Typewriter from 'typewriter-effect'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import BgNoise from '@/components/BgNoise'
 
 export function Hero() {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   return (
-        <div className="relative -mt-20 min-h-screen">
+    <>
+      <div className="relative -mt-20 min-h-screen">
       <div
         className="absolute inset-0 -z-20 h-full w-full object-cover"
         style={{ backgroundImage: 'url(/images/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}
@@ -22,6 +33,86 @@ export function Hero() {
           />
         </div>
       </Container>
-    </div>
+      </div>
+      <div className="relative hidden md:block">
+        <Image
+          unoptimized
+          src="/images/booktear1.png"
+          alt="Page divider"
+          width={1080}
+          height={200}
+          className="relative z-10 -mt-14 w-full h-auto"
+        />
+      </div>
+      <div className="relative">
+        <div
+          className="bg-cover bg-center lg:-mt-14 mt-0"
+          style={{ backgroundImage: 'url(/images/paper.jpg)', opacity: '0.9' }}
+        >
+          <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>
+                {isClient && (
+                  <span className="absolute top-0 left-0">
+                    <Typewriter
+                      options={{
+                        delay: 75,
+                      }}
+                      onInit={(typewriter) => {
+                        typewriter.typeString('Mon cher,').start()
+                      }}
+                    />
+                  </span>
+                )}
+              </p>
+              <p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed relative">
+                <span className="invisible" dangerouslySetInnerHTML={{ __html: 'If you find yourself here, you’ve survived the noise.<br />Sit, let the glass sweat a little.<br />The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />If not, the night still owes you a dance.' }} />
+                {isClient && (
+                  <span className="absolute top-0 left-0">
+                    <Typewriter
+                      options={{
+                        delay: 50,
+                      }}
+                      onInit={(typewriter) => {
+                        typewriter
+                          .pauseFor(2000)
+                          .typeString(
+                            'If you find yourself here, you’ve survived the noise.<br />',
+                          )
+                          .pauseFor(500)
+                          .typeString('Sit, let the glass sweat a little.<br />')
+                          .pauseFor(500)
+                          .typeString(
+                            'The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />',
+                          )
+                          .pauseFor(500)
+                          .typeString('If not, the night still owes you a dance.')
+                          .start()
+                      }}
+                    />
+                  </span>
+                )}
+              </p>
+              <p className="font-script text-xl text-love-red mt-6 font-typewriter relative">
+                <span className="invisible">— M.N.</span>
+                {isClient && (
+                  <span className="absolute top-0 left-0">
+                    <Typewriter
+                      onInit={(typewriter) => {
+                        typewriter
+                          .pauseFor(17000)
+                          .typeString('— M.N.')
+                          .start()
+                      }}
+                    />
+                  </span>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   )
 }

src/components/Home/Loveletter.jsx.bak

@@ -0,0 +1,27 @@
+import Booktear from '@/components/ui/Booktear';
+
+export function Loveletter({ className }) {
+  return (
+    <div className={`relative ${className || ''}`}>
+      <Booktear className="relative z-10" /> 
+      <div
+        className="absolute inset-0 bg-cover bg-center opacity-50"
+        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>
+                           <p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed">
+           If you find yourself here, you’ve survived the noise.<br />
+           Sit, let the glass sweat a little.<br />
+           The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />
+           If not, the night still owes you a dance.
+         </p>
+                  <p className="font-script text-xl text-love-red mt-6 font-typewriter">— M.N.</p>
+        </div>
+      </div>
+    </div>
+    </div>
+  )
+}

src/components/ui/AudioPlayer.jsx

@@ -4,11 +4,12 @@ import ReactAudioPlayer from 'react-audio-player';
 
 const AudioPlayer = () => {
   return (
-    <div className="fixed bottom-0 left-0 w-full z-50">
+    <div className="fixed bottom-0 left-0 w-full z-50 opacity-40 blur-xs">
       <ReactAudioPlayer
         src="/audios/illbe.mp3"
         autoPlay
         controls
+        volume={0.1}
         className="w-full"
       />
     </div>

src/components/ui/Booktear.jsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+
+const Booktear = ({ className }) => {
+  return (
+    <div className={`hidden md:block lg:block w-full bg-transparent ${className || ''}`}>
+      <Image
+        unoptimized
+        src="/images/booktear.png"
+        alt="Page divider" 
+        width={1080} 
+        height={180}
+        className="w-full h-auto"
+      />
+    </div>
+  );
+};
+
+export default Booktear;

tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
       fontFamily: {
         sans: ['Montserrat', 'sans-serif'],
         display: ['Montserrat', 'sans-serif'],
+        typewriter: 'var(--font-jmh-typewriter)',
       },
       maxWidth: {
         '2xl': '40rem',
@@ -50,9 +51,11 @@ module.exports = {
           900: '#1F2937',
           200: '#E4E7EB',
         },
+        'love-red': '#bc0a0f',
+        base: '#faeee0',
         creme: {
           900: '#e3dfda',
-          600: '#FEFAF5',
+          600: '#f6f1eb',
           200: '#fffdfb',
         },
       },

yarn.lock

@@ -11064,7 +11064,7 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0:
+react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0, react-dom@>=17.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -11208,7 +11208,7 @@ react-use-measure@^2.1.7:
   resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz"
   integrity sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==
 
-react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0:
+react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0, react@>=17.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -13182,6 +13182,14 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typewriter-effect@^2.22.0:
+  version "2.22.0"
+  resolved "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.22.0.tgz"
+  integrity sha512-01HCRYY462wT8Fxps/epwGCioZd/GMXY0aLKhFKrfJ5Xhgf54/SiDx7Oq7PoES5kGqOEAdW8FS8HYVM2WSvfhQ==
+  dependencies:
+    prop-types "^15.8.1"
+    raf "^3.4.1"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"