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
feat: update mobile navigation styling for dark theme
2025-10-24 05:19:09 +02:00 · 2025-10-24 05:14:01 +02:00 · 2025-10-24 05:12:46 +02:00 · 2025-10-24 05:06:16 +02:00 · 2025-10-24 04:59:18 +02:00 · 2025-10-24 04:54:08 +02:00
15 changed files with 192 additions and 23 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/images/booktear.png
+++ b/public/images/booktear.png
--- a/public/images/booktear1.png
+++ b/public/images/booktear1.png
--- a/public/images/booktear2.png
+++ b/public/images/booktear2.png
--- a/public/images/booktear3.png
+++ b/public/images/booktear3.png
--- a/public/images/paper.jpg
+++ b/public/images/paper.jpg
--- a/src/app/layout.jsx
+++ b/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>
--- a/src/app/page.jsx
+++ b/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 />
    </>
  )
--- a/src/components/Header.jsx
+++ b/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>
  )
@@ -80,8 +79,9 @@ export function Header() {
  return (
    <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>
--- a/src/components/Hero.jsx
+++ b/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>
+    </>
  )
 }
--- a/src/components/Home/Loveletter.jsx.bak
+++ b/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>
+  )
+}
--- a/src/components/ui/Booktear.jsx
+++ b/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;
--- a/tailwind.config.js
+++ b/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',
        },
      },
--- a/yarn.lock
+++ b/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"
Author	SHA1	Message	Date
sasha-astiadi	1bdc4ddc72	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	2025-10-24 05:19:09 +02:00
sasha-astiadi	a663cc038b	feat: update mobile navigation styling for dark theme - Changed mobile menu icon color from slate-700 to white for better contrast - Updated mobile navigation panel background to use dark translucent style with backdrop blur - Removed rounded corners and shadow effects from mobile menu panel - Modified text color in mobile navigation to white to match dark theme	2025-10-24 05:14:01 +02:00
sasha-astiadi	4a63edc0b0	feat: update navigation menu structure and layout - Renamed navigation links to match new site structure (HOME → MENUS, EXPERIENCES → EVENTS, DAHABIYAS → CONTACT) - Removed ITINERARY link from mobile navigation menu - Improved mobile header layout with better spacing and alignment using justify-between - Added spacer div in mobile view for balanced layout - Simplified navigation container structure by removing nested flex containers	2025-10-24 05:12:46 +02:00
sasha-astiadi	a6a0bbef0b	feat: add typewriter animation effect to hero text - Added typewriter-effect package for animated text rendering - Implemented sequential typing animation for welcome message and signature - Added client-side rendering check to prevent hydration issues - Adjusted text opacity and timing delays for better readability - Created invisible placeholder text to maintain layout during animation loading	2025-10-24 05:06:16 +02:00
sasha-astiadi	c3bb18d495	feat: enhance visual styling with updated colors and layout - Added base background color (#faeee0) to body element for consistent theme - Added text color (slate-900) to body for improved readability - Updated hero section spacing with -mt-14 margin and adjusted padding - Changed tear image from booktear.png to booktear1.png for improved design - Added new 'base' color variable to Tailwind config for theme consistency	2025-10-24 04:59:18 +02:00
sasha-astiadi	0b914b916c	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	2025-10-24 04:54:08 +02:00
sasha-astiadi	1030e0150a	feat: add typewriter-style love letter section with torn paper effect - Added new love letter section below hero with custom typewriter font styling - Integrated torn paper visual effect using new booktear.png images - Added JMH Typewriter font and configured it in layout and Tailwind - Created new UI component Booktear.jsx for reusable torn paper effect - Added paper texture background and love-red color theme - Included stylized message with custom typography and spacing - Removed background color	2025-10-24 04:47:57 +02:00
sasha-astiadi	0d5d8f9d8a	style: adjust creme color shade in Tailwind config - Updated creme-600 color from #FEFAF5 to #f6f1eb for better visual contrast - Maintained existing color palette structure for creme-900 and creme-200 shades	2025-10-24 04:47:43 +02:00