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

Compare commits

base: sashaastiadi:23c1beaecb8aa40bee3318fcbc4897e49fac2a7f
Branches Tags
sashaastiadi:main veda:development_fix veda:main veda:development
...
compare: sashaastiadi:0b914b916c8a4518dec56980f2aab7b9c5ca0669
Branches Tags
sashaastiadi:main veda:development_fix veda:main veda:development

3 Commits
23c1beaecb ... 0b914b916c

Author SHA1 Message Date
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
10 changed files with 92 additions and 6 deletions
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 />
</> </>
) )

35
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,36 @@ 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>
<div className="relative">
<div
className="bg-cover bg-center"
style={{ backgroundImage: 'url(/images/paper.jpg)' }}
>
<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;

4
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,9 +51,10 @@ module.exports = {
900: '#1F2937', 900: '#1F2937',
200: '#E4E7EB', 200: '#E4E7EB',
}, },
'love-red': '#bc0a0f',
creme: { creme: {
900: '#e3dfda', 900: '#e3dfda',
600: '#FEFAF5', 600: '#f6f1eb',
200: '#fffdfb', 200: '#fffdfb',
}, },
}, },