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
This commit is contained in:
2025-10-24 04:47:57 +02:00
parent 0d5d8f9d8a
commit 1030e0150a
10 changed files with 90 additions and 5 deletions

View File

@@ -5,7 +5,8 @@ import BgNoise from '@/components/BgNoise'
export function Hero() {
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 +23,35 @@ export function Hero() {
/>
</div>
</Container>
</div>
</div>
<div className="relative">
<Image
unoptimized
src="/images/booktear.png"
alt="Page divider"
width={1080}
height={200}
className="relative z-10 -mt-14 w-full h-auto"
/>
<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, youve 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>
</>
)
}