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

BIN
public/images/booktear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
public/images/booktear2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 KiB

BIN
public/images/booktear3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/images/paper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

9
src/app/layout.jsx
View File

@@ -1,4 +1,5 @@
import { Inter, Lexend } from 'next/font/google' import { Inter, Lexend } from 'next/font/google'
import localFont from 'next/font/local'
import clsx from 'clsx' import clsx from 'clsx'
import '@/styles/tailwind.css' import '@/styles/tailwind.css'
@@ -18,6 +19,11 @@ const inter = Inter({
variable: '--font-inter', variable: '--font-inter',
}) })
const jmhTypewriter = localFont({
src: '../fonts/jmh_typewriter/JMH Typewriter.otf',
variable: '--font-jmh-typewriter',
})
const lexend = Lexend({ const lexend = Lexend({
subsets: ['latin'], subsets: ['latin'],
display: 'swap', display: 'swap',
@@ -29,9 +35,10 @@ export default function RootLayout({ children }) {
<html <html
lang="en" lang="en"
className={clsx( className={clsx(
'h-full scroll-smooth bg-creme-600 antialiased', 'h-full scroll-smooth antialiased',
inter.variable, inter.variable,
lexend.variable, lexend.variable,
jmhTypewriter.variable,
)} )}
> >
<body className="flex h-full flex-col pt-20"> <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 { Header } from '@/components/Header'
import { Hero } from '@/components/Hero'; import { Hero } from '@/components/Hero';
import AudioPlayer from '@/components/ui/AudioPlayer'; import AudioPlayer from '@/components/ui/AudioPlayer';
import Booktear from '@/components/ui/Booktear';
@@ -11,10 +12,10 @@ export default function Home() {
return ( return (
<> <>
<Header /> <Header />
<main> <main className="bg-transparent">
<AudioPlayer /> <AudioPlayer />
<Hero /> <Hero />
</main> </main>
<Footer /> <Footer />
</> </>
) )

34
src/components/Hero.jsx
View File

@@ -5,7 +5,8 @@ import BgNoise from '@/components/BgNoise'
export function Hero() { export function Hero() {
return ( return (
<div className="relative -mt-20 min-h-screen"> <>
<div className="relative -mt-20 min-h-screen">
<div <div
className="absolute inset-0 -z-20 h-full w-full object-cover" className="absolute inset-0 -z-20 h-full w-full object-cover"
style={{ backgroundImage: 'url(/images/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} style={{ backgroundImage: 'url(/images/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}
@@ -22,6 +23,35 @@ export function Hero() {
/> />
</div> </div>
</Container> </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;

2
tailwind.config.js
View File

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