sashaastiadi/www_maison_noire
1
0
Fork 0
forked from veda/www_veda_2025
Code Pull Requests Activity

feat: add typewriter-style love letter section with torn paper effect

Browse Source 
- 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:
sasha-astiadi
2025-10-24 04:47:57 +02:00
parent 0d5d8f9d8a
commit 1030e0150a
10 changed files with 90 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/layout.jsx
View File

@@ -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,9 +35,10 @@ 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">

5
src/app/page.jsx
View File

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

34
src/components/Hero.jsx
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, 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>
</>
)
}

27
src/components/Home/Loveletter.jsx.bak Normal file
View File

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

18
src/components/ui/Booktear.jsx Normal file
View File

@@ -0,0 +1,18 @@
import Image from 'next/image';
const Booktear = ({ className }) => {
return (
<div className={`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;