326 lines
17 KiB
TypeScript
326 lines
17 KiB
TypeScript
import Link from 'next/link';
|
||
|
||
export default function BakerySample() {
|
||
const menuItems = [
|
||
{ name: '버터 크루아상', price: '3,200', emoji: '🥐', tag: '인기', desc: '프랑스산 에슈레 버터만 사용한 겹겹이 살아있는 크루아상' },
|
||
{ name: '소금빵', price: '2,800', emoji: '🍞', tag: '베스트', desc: '오키나와 천연 소금과 발효 버터가 만나는 완벽한 짭조름함' },
|
||
{ name: '딸기 쇼트케이크', price: '7,500', emoji: '🍰', tag: '신메뉴', desc: '국내산 딸기와 생크림이 만나는 클래식 케이크' },
|
||
{ name: '캄파뉴', price: '8,900', emoji: '🫓', tag: '장인', desc: '72시간 저온 발효로 만든 시큼하고 깊은 맛의 통밀빵' },
|
||
];
|
||
|
||
const hours = [
|
||
{ day: '월~금', time: '07:00 – 20:00' },
|
||
{ day: '토요일', time: '07:00 – 21:00' },
|
||
{ day: '일요일', time: '09:00 – 18:00' },
|
||
{ day: '공휴일', time: '09:00 – 18:00' },
|
||
];
|
||
|
||
return (
|
||
<div style={{ background: '#fffbf5', minHeight: '100vh', color: '#1c1008' }}>
|
||
<style>{`
|
||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
||
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
|
||
.menu-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(120,53,15,0.12); }
|
||
.menu-card { transition: transform 0.35s, box-shadow 0.35s; }
|
||
.bk-btn:hover { background: #92400e !important; }
|
||
.bk-btn { transition: background 0.2s; }
|
||
`}</style>
|
||
|
||
{/* Back Banner */}
|
||
<div style={{
|
||
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
||
padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12,
|
||
}}>
|
||
<Link href="/services/website" style={{
|
||
color: '#a5b4fc', fontSize: 13, textDecoration: 'none',
|
||
fontFamily: "'Noto Sans KR', sans-serif",
|
||
}}>
|
||
← 홈페이지 제작 서비스로 돌아가기
|
||
</Link>
|
||
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
||
<span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Playfair Display, serif', fontWeight: 700 }}>
|
||
SAMPLE · 베이커리 홈페이지
|
||
</span>
|
||
</div>
|
||
|
||
{/* Navbar */}
|
||
<nav style={{
|
||
background: 'rgba(255,251,245,0.95)', backdropFilter: 'blur(12px)',
|
||
borderBottom: '1px solid #fde8c8',
|
||
padding: '0 48px', height: 68,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
position: 'sticky', top: 0, zIndex: 100,
|
||
}}>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<div style={{ fontSize: 20, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', color: '#78350f', fontWeight: 700 }}>
|
||
Le Petit Fort
|
||
</div>
|
||
<div style={{ fontSize: 10, color: '#a78060', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Artisan Boulangerie</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 28 }}>
|
||
{['메뉴', '스토리', '매장안내', '예약'].map((item) => (
|
||
<span key={item} style={{
|
||
fontSize: 14, color: '#78350f', cursor: 'pointer',
|
||
fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500,
|
||
}}>{item}</span>
|
||
))}
|
||
</div>
|
||
<button className="bk-btn" style={{
|
||
background: '#b45309', color: 'white', border: 'none',
|
||
padding: '9px 22px', borderRadius: 24, fontSize: 13,
|
||
fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||
}}>
|
||
예약하기
|
||
</button>
|
||
</nav>
|
||
|
||
{/* Hero */}
|
||
<section style={{
|
||
background: 'linear-gradient(160deg, #fef3c7 0%, #fde68a 35%, #fbbf24 70%, #d97706 100%)',
|
||
padding: '80px 48px', position: 'relative', overflow: 'hidden', minHeight: 480,
|
||
display: 'flex', alignItems: 'center',
|
||
}}>
|
||
{/* Decorative circles */}
|
||
<div style={{
|
||
position: 'absolute', right: -60, top: -60,
|
||
width: 400, height: 400, borderRadius: '50%',
|
||
background: 'rgba(180,83,9,0.08)',
|
||
}} />
|
||
<div style={{
|
||
position: 'absolute', right: 80, bottom: -40,
|
||
width: 240, height: 240, borderRadius: '50%',
|
||
background: 'rgba(180,83,9,0.12)',
|
||
}} />
|
||
<div style={{
|
||
position: 'absolute', right: '10%', top: '50%', transform: 'translateY(-50%)',
|
||
fontSize: 120,
|
||
animation: 'float 4s ease-in-out infinite',
|
||
filter: 'drop-shadow(0 12px 24px rgba(120,53,15,0.25))',
|
||
}}>🥐</div>
|
||
|
||
<div style={{ maxWidth: 560, animation: 'fadeUp 0.8s ease forwards' }}>
|
||
<div style={{
|
||
fontSize: 13, color: '#78350f', fontFamily: 'Playfair Display, serif',
|
||
fontStyle: 'italic', marginBottom: 16, letterSpacing: '0.05em',
|
||
}}>
|
||
"매일 아침, 정성을 굽습니다"
|
||
</div>
|
||
<h1 style={{
|
||
fontFamily: 'Playfair Display, serif', fontSize: 'clamp(40px, 5vw, 64px)',
|
||
fontWeight: 700, color: '#451a03', lineHeight: 1.15, marginBottom: 18,
|
||
}}>
|
||
갓 구운 빵의<br />
|
||
<span style={{ color: '#b45309' }}>따뜻한 향기</span>가<br />
|
||
기다립니다
|
||
</h1>
|
||
<p style={{
|
||
color: '#78350f', fontSize: 16, lineHeight: 1.8, marginBottom: 32,
|
||
fontFamily: "'Noto Sans KR', sans-serif",
|
||
}}>
|
||
프랑스 전통 방식으로 매일 새벽 4시부터<br />
|
||
정성껏 굽는 르 쁘띠 포르의 빵을 만나보세요.
|
||
</p>
|
||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||
<button className="bk-btn" style={{
|
||
background: '#b45309', color: 'white', border: 'none',
|
||
padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 700,
|
||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||
boxShadow: '0 8px 24px rgba(180,83,9,0.35)',
|
||
}}>
|
||
오늘의 메뉴 보기
|
||
</button>
|
||
<button style={{
|
||
background: 'rgba(255,255,255,0.6)', color: '#78350f',
|
||
border: '1px solid rgba(180,83,9,0.3)',
|
||
padding: '14px 32px', borderRadius: 28, fontSize: 15, fontWeight: 600,
|
||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||
backdropFilter: 'blur(8px)',
|
||
}}>
|
||
매장 찾아오기
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Menu */}
|
||
<section style={{ padding: '80px 48px', background: '#fffbf5' }}>
|
||
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||
<div style={{ textAlign: 'center', marginBottom: 52 }}>
|
||
<div style={{
|
||
fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em',
|
||
textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12,
|
||
}}>Today's Menu</div>
|
||
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 40, color: '#451a03', marginBottom: 12 }}>
|
||
오늘의 추천 메뉴
|
||
</h2>
|
||
<p style={{ color: '#a78060', fontSize: 15, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||
매일 새벽 구운 신선한 빵을 만나보세요
|
||
</p>
|
||
</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 24 }}>
|
||
{menuItems.map((item) => (
|
||
<div key={item.name} className="menu-card" style={{
|
||
background: 'white', borderRadius: 20,
|
||
border: '1px solid #fde8c8', overflow: 'hidden',
|
||
boxShadow: '0 4px 20px rgba(120,53,15,0.05)',
|
||
}}>
|
||
<div style={{
|
||
height: 140, background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 60, position: 'relative',
|
||
}}>
|
||
{item.emoji}
|
||
<span style={{
|
||
position: 'absolute', top: 12, right: 12,
|
||
background: '#b45309', color: 'white',
|
||
fontSize: 10, fontWeight: 700, padding: '3px 9px', borderRadius: 100,
|
||
fontFamily: "'Noto Sans KR', sans-serif",
|
||
}}>{item.tag}</span>
|
||
</div>
|
||
<div style={{ padding: '18px 20px' }}>
|
||
<div style={{ fontSize: 17, fontWeight: 700, color: '#451a03', fontFamily: 'Playfair Display, serif', marginBottom: 8 }}>
|
||
{item.name}
|
||
</div>
|
||
<div style={{ fontSize: 13, color: '#a78060', lineHeight: 1.65, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 14 }}>
|
||
{item.desc}
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<span style={{ fontSize: 18, fontWeight: 700, color: '#b45309', fontFamily: 'Playfair Display, serif' }}>
|
||
₩{item.price}
|
||
</span>
|
||
<button style={{
|
||
background: '#fef3c7', color: '#b45309', border: 'none',
|
||
padding: '6px 14px', borderRadius: 12, fontSize: 12,
|
||
fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||
}}>담기</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Story */}
|
||
<section style={{ padding: '80px 48px', background: '#fef9f0', borderTop: '1px solid #fde8c8' }}>
|
||
<div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
|
||
<div>
|
||
<div style={{ fontSize: 12, color: '#b45309', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 12 }}>
|
||
Our Story
|
||
</div>
|
||
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', lineHeight: 1.3, marginBottom: 20 }}>
|
||
2009년부터<br />한 자리를 지켜온<br />
|
||
<em>우리 동네 빵집</em>
|
||
</h2>
|
||
<p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
|
||
파리에서 5년간 수업한 오너 셰프가 고향 서울로 돌아와 차린 작은 베이커리. 대기업 프랜차이즈가 넘쳐나는 세상에서도 손으로 빚고, 눈으로 확인하는 전통 방식을 고집합니다.
|
||
</p>
|
||
<p style={{ color: '#78350f', fontSize: 15, lineHeight: 1.9, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||
밀가루, 버터, 소금, 물. 단 네 가지 재료로 만드는 우리의 빵에는 흉내낼 수 없는 진심이 담겨있습니다.
|
||
</p>
|
||
</div>
|
||
<div style={{
|
||
background: 'linear-gradient(135deg, #fde68a, #fbbf24)',
|
||
borderRadius: 24, padding: '48px 36px', textAlign: 'center',
|
||
border: '2px solid #fcd34d',
|
||
}}>
|
||
<div style={{ fontSize: 72, marginBottom: 16 }}>👨🍳</div>
|
||
<div style={{ fontSize: 22, fontFamily: 'Playfair Display, serif', color: '#451a03', fontWeight: 700 }}>
|
||
Chef Kim Dongwoo
|
||
</div>
|
||
<div style={{ fontSize: 13, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 8, lineHeight: 1.6 }}>
|
||
Le Cordon Bleu Paris 졸업<br />
|
||
2009년 르 쁘띠 포르 창업
|
||
</div>
|
||
<div style={{
|
||
marginTop: 20, display: 'flex', justifyContent: 'center', gap: 20,
|
||
}}>
|
||
{[{ n: '15+', l: '년 경력' }, { n: '200+', l: '종류의 빵' }, { n: '4시', l: '매일 기상' }].map((s) => (
|
||
<div key={s.l} style={{ textAlign: 'center' }}>
|
||
<div style={{ fontSize: 20, fontWeight: 800, color: '#451a03', fontFamily: 'Playfair Display, serif' }}>{s.n}</div>
|
||
<div style={{ fontSize: 11, color: '#78350f', fontFamily: "'Noto Sans KR', sans-serif" }}>{s.l}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Hours & Location */}
|
||
<section style={{ padding: '72px 48px', background: '#451a03' }}>
|
||
<div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
|
||
<div>
|
||
<div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
|
||
Hours
|
||
</div>
|
||
<h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 28 }}>
|
||
운영 시간
|
||
</h3>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
{hours.map((h) => (
|
||
<div key={h.day} style={{
|
||
display: 'flex', justifyContent: 'space-between',
|
||
borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: 12,
|
||
}}>
|
||
<span style={{ fontSize: 14, color: '#fde68a', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 600 }}>{h.day}</span>
|
||
<span style={{ fontSize: 14, color: '#fcd34d', fontFamily: 'Playfair Display, serif' }}>{h.time}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 12, color: '#fbbf24', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Playfair Display, serif', marginBottom: 16 }}>
|
||
Location
|
||
</div>
|
||
<h3 style={{ fontFamily: 'Playfair Display, serif', fontSize: 28, color: 'white', marginBottom: 20 }}>
|
||
매장 위치
|
||
</h3>
|
||
<p style={{ color: '#fde68a', fontSize: 15, lineHeight: 1.7, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>
|
||
서울특별시 마포구 연남동 224-14<br />
|
||
연남로 68 르 쁘띠 포르
|
||
</p>
|
||
<div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
|
||
<div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📍 지하철 2호선 홍대입구역 3번 출구 도보 5분</div>
|
||
<div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📞 02-334-5678</div>
|
||
<div style={{ color: '#fcd34d', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>📱 @lepetitfort_seoul</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section style={{
|
||
background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
|
||
padding: '64px 48px', textAlign: 'center',
|
||
}}>
|
||
<h2 style={{ fontFamily: 'Playfair Display, serif', fontSize: 36, color: '#451a03', marginBottom: 14 }}>
|
||
특별한 날을 위한 케이크
|
||
</h2>
|
||
<p style={{ color: '#78350f', fontSize: 16, lineHeight: 1.7, marginBottom: 28, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||
생일, 기념일, 웨딩 케이크까지.<br />
|
||
최소 3일 전 예약 시 원하시는 케이크를 제작해드립니다.
|
||
</p>
|
||
<button style={{
|
||
background: '#b45309', color: 'white', border: 'none',
|
||
padding: '15px 40px', borderRadius: 28, fontSize: 16, fontWeight: 700,
|
||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||
boxShadow: '0 8px 24px rgba(180,83,9,0.4)',
|
||
}}>
|
||
케이크 주문 예약하기 →
|
||
</button>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer style={{ background: '#1c1008', padding: '28px 48px', textAlign: 'center' }}>
|
||
<div style={{ color: '#78350f', fontSize: 13, fontFamily: 'Playfair Display, serif', fontStyle: 'italic', marginBottom: 6 }}>
|
||
Le Petit Fort — Artisan Boulangerie
|
||
</div>
|
||
<div style={{ color: '#3c1a08', fontSize: 12, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||
© 2024 르 쁘띠 포르. All rights reserved.
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|