forked from veda/www_veda_2025
sasha-astiadi
1030e0150a
- 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
58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
import Image from 'next/image'
|
||
import { Button } from '@/components/Button'
|
||
import { Container } from '@/components/Container'
|
||
import BgNoise from '@/components/BgNoise'
|
||
|
||
export function Hero() {
|
||
return (
|
||
<>
|
||
<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' }}
|
||
/>
|
||
<BgNoise />
|
||
<Container className="flex min-h-screen items-center justify-center text-center">
|
||
<div className="relative z-10 mx-auto flex justify-center">
|
||
<Image
|
||
src="/images/noire_logo.png"
|
||
alt="Maison Noire"
|
||
width={500}
|
||
height={500}
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
</Container>
|
||
</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, 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>
|
||
</>
|
||
)
|
||
}
|