feat: 인테리어·독서기록 샘플 페이지 추가
supanova taste-skill + soft-skill 적용: - interior: Warm Editorial 감성, Playfair Display + Pretendard, 황금/크림 팔레트, 비대칭 벤토 포트폴리오 그리드, 지그재그 서비스 섹션, Double-Bezel 후기 카드 - reading: Vantablack Luxe 감성, Cormorant Garamond + Pretendard, 앰버/다크 팔레트, 독서 컬렉션 벤토 그리드, 명언 마소너리, 현재 독서 진도 표시 - /services/website 샘플 목록에 두 항목 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -54,6 +54,26 @@ const samples = [
|
|||||||
tags: ['게임', '멀티플레이', '랭킹'],
|
tags: ['게임', '멀티플레이', '랭킹'],
|
||||||
icon: '⚡',
|
icon: '⚡',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'interior',
|
||||||
|
title: '인테리어 업체 소개',
|
||||||
|
subtitle: 'AURUM Interior',
|
||||||
|
desc: '따뜻한 감성과 고급스러운 감각을 담은 인테리어 포트폴리오 사이트',
|
||||||
|
gradient: 'linear-gradient(135deg, #2C1810 0%, #4A3728 50%, #6B4E37 100%)',
|
||||||
|
accent: '#D4A853',
|
||||||
|
tags: ['인테리어', '포트폴리오', '럭셔리'],
|
||||||
|
icon: '◈',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'reading',
|
||||||
|
title: '독서 기록 노트',
|
||||||
|
subtitle: '나의 독서 기록',
|
||||||
|
desc: '읽은 책과 감상을 아름답게 기록하는 나만의 독서 저널 페이지',
|
||||||
|
gradient: 'linear-gradient(135deg, #0C0B09 0%, #1A1710 50%, #2A2218 100%)',
|
||||||
|
accent: '#D4A853',
|
||||||
|
tags: ['라이프', '독서', '기록'],
|
||||||
|
icon: '◻',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const processSteps = [
|
const processSteps = [
|
||||||
|
|||||||
552
app/services/website/samples/interior/page.tsx
Normal file
552
app/services/website/samples/interior/page.tsx
Normal file
@@ -0,0 +1,552 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
/* ── DATA ── */
|
||||||
|
const portfolio = [
|
||||||
|
{ title: '한남동 단독주택', cat: '주거 인테리어', area: '245㎡', seed: 'architecture-house', w: 820, h: 1060 },
|
||||||
|
{ title: '청담 파인다이닝', cat: '상업 공간', area: '190㎡', seed: 'restaurant-interior', w: 820, h: 540 },
|
||||||
|
{ title: '성수 브랜드 오피스', cat: '업무 공간', area: '380㎡', seed: 'office-design', w: 400, h: 540 },
|
||||||
|
{ title: '용산 아파트 리모델링', cat: '리모델링', area: '95㎡', seed: 'apartment-modern', w: 400, h: 400 },
|
||||||
|
{ title: '강남 카페 에스프레소랩', cat: '상업 공간', area: '120㎡', seed: 'cafe-minimal', w: 820, h: 480 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
title: '주거 인테리어',
|
||||||
|
sub: 'Residential',
|
||||||
|
desc: '생활의 리듬에 맞춘 공간을 설계합니다. 단독주택부터 아파트까지, 당신의 일상이 더 아름다워지도록 모든 디테일을 손수 고릅니다.',
|
||||||
|
details: ['공간 기획 및 3D 시뮬레이션', '자재 선정 동행 서비스', '시공 전 과정 PM', '준공 후 AS 1년'],
|
||||||
|
seed: 'living-room-bright', w: 680, h: 520,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '상업 공간 디자인',
|
||||||
|
sub: 'Commercial',
|
||||||
|
desc: '브랜드의 철학이 공간 언어로 번역됩니다. 첫 방문객이 문을 열었을 때 느끼는 그 감정까지 설계의 범위입니다.',
|
||||||
|
details: ['브랜드 아이덴티티 반영', '동선 및 고객 UX 설계', '조명·음향 플래닝', '설비 협력사 연계'],
|
||||||
|
seed: 'commercial-modern', w: 680, h: 520,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '리모델링 & 재생',
|
||||||
|
sub: 'Remodeling',
|
||||||
|
desc: '기존 공간의 가능성을 새로운 시선으로 바라봅니다. 구조적 변경부터 마감재 교체까지, 완전한 변신을 지원합니다.',
|
||||||
|
details: ['현장 실측 및 구조 분석', '철거~완공 원스톱', '예산 내 최적 시공', '친환경 자재 우선 적용'],
|
||||||
|
seed: 'renovation-before-after', w: 680, h: 520,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
name: '하윤서', role: '한남동 단독주택 의뢰인', u: 'hayunseo',
|
||||||
|
rating: 5,
|
||||||
|
text: '처음엔 예산이 걱정됐는데, 아우라 팀이 범위를 명확히 정해줘서 오히려 계획보다 적게 들었습니다. 무엇보다 완공된 공간에서 매일 아침 커피 한 잔 하는 지금이 너무 행복해요.',
|
||||||
|
highlight: '계획보다 적은 예산',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '박도현', role: '카페 에스프레소랩 대표', u: 'parkdohyun',
|
||||||
|
rating: 5,
|
||||||
|
text: '우리 브랜드 철학을 완벽하게 공간으로 옮겨줬습니다. 오픈 첫날부터 SNS 바이럴이 터졌고, 오픈 3개월 만에 매출이 전년 대비 340% 올랐어요.',
|
||||||
|
highlight: '매출 340% 상승',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '이서진', role: '루미너스 COO', u: 'leeseojin',
|
||||||
|
rating: 5,
|
||||||
|
text: '직원들이 출근하고 싶은 공간을 만드는 게 목표였습니다. 리모델링 후 직원 만족도 설문에서 93점, 퇴직률이 절반으로 줄었습니다.',
|
||||||
|
highlight: '직원 만족도 93점',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ num: '01', title: '무료 상담', desc: '공간 사진, 예산, 취향을 공유해 주세요. 72시간 내 맞춤 제안서를 드립니다.' },
|
||||||
|
{ num: '02', title: '콘셉트 기획', desc: '무드보드와 3D 시뮬레이션으로 완공 이후를 미리 경험합니다.' },
|
||||||
|
{ num: '03', title: '시공', desc: '전담 PM이 공정마다 현장을 점검하고 일일 리포트를 공유합니다.' },
|
||||||
|
{ num: '04', title: '준공 & AS', desc: '완공 후 1년간 무상 AS. 공간이 오래 아름답도록 함께합니다.' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ── SVG ICONS ── */
|
||||||
|
const StarIcon = ({ filled }: { filled: boolean }) => (
|
||||||
|
<svg width="13" height="13" viewBox="0 0 13 13" fill={filled ? '#8B6914' : 'none'} stroke="#8B6914" strokeWidth="1">
|
||||||
|
<path d="M6.5 1l1.5 3 3.5.5-2.5 2.4.6 3.4L6.5 9 3 10.3l.6-3.4L1 4.9 4.5 4.4z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CheckIcon = () => (
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||||
|
<circle cx="7" cy="7" r="6.5" stroke="#4E5C3E" strokeWidth="1" />
|
||||||
|
<path d="M4.5 7l2 2 3-3" stroke="#4E5C3E" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ArrowRight = ({ color = '#8B6914' }: { color?: string }) => (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M3 8h10M9 4l4 4-4 4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
/* ── COMPONENT ── */
|
||||||
|
export default function InteriorSample() {
|
||||||
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onScroll = () => setScrolled(window.scrollY > 80);
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('au-visible'); }),
|
||||||
|
{ threshold: 0.08 }
|
||||||
|
);
|
||||||
|
document.querySelectorAll('.au-reveal').forEach((el) => observer.observe(el));
|
||||||
|
|
||||||
|
return () => { window.removeEventListener('scroll', onScroll); observer.disconnect(); };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const NAV_H = 72;
|
||||||
|
const GOLD = '#8B6914';
|
||||||
|
const DARK = '#1C1A17';
|
||||||
|
const SAGE = '#4E5C3E';
|
||||||
|
const CREAM = '#FAF8F5';
|
||||||
|
const SURFACE = '#F0ECE4';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ background: CREAM, color: DARK, fontFamily: "'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif", overflowX: 'hidden' }}>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: `
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css');
|
||||||
|
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
@keyframes au-fadeUp {
|
||||||
|
from { opacity: 0; transform: translateY(2.5rem); filter: blur(3px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); filter: blur(0); }
|
||||||
|
}
|
||||||
|
@keyframes au-float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-12px); }
|
||||||
|
}
|
||||||
|
@keyframes au-marquee {
|
||||||
|
from { transform: translateX(0); }
|
||||||
|
to { transform: translateX(-50%); }
|
||||||
|
}
|
||||||
|
@keyframes au-pulse-gold {
|
||||||
|
0%, 100% { box-shadow: 0 0 0 0 rgba(139,105,20,0.3); }
|
||||||
|
50% { box-shadow: 0 0 0 10px rgba(139,105,20,0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.au-reveal { opacity: 0; transform: translateY(2rem); filter: blur(2px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s cubic-bezier(0.16,1,0.3,1); }
|
||||||
|
.au-reveal.au-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
|
||||||
|
.au-reveal:nth-child(2) { transition-delay: 80ms; }
|
||||||
|
.au-reveal:nth-child(3) { transition-delay: 160ms; }
|
||||||
|
.au-reveal:nth-child(4) { transition-delay: 240ms; }
|
||||||
|
|
||||||
|
.au-nav-link { color: #6B6456; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.3s cubic-bezier(0.16,1,0.3,1); }
|
||||||
|
.au-nav-link:hover { color: #1C1A17; }
|
||||||
|
|
||||||
|
.au-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: #1C1A17; color: #FAF8F5; border: none; border-radius: 100px; padding: 14px 28px 14px 20px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1); }
|
||||||
|
.au-btn-primary:hover { transform: scale(1.02); box-shadow: 0 12px 36px rgba(28,26,23,0.25); }
|
||||||
|
.au-btn-primary:active { transform: scale(0.98); }
|
||||||
|
|
||||||
|
.au-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #1C1A17; border: 1px solid rgba(28,26,23,0.2); border-radius: 100px; padding: 13px 24px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; transition: border-color 0.3s, background 0.3s; }
|
||||||
|
.au-btn-ghost:hover { border-color: rgba(28,26,23,0.5); background: rgba(28,26,23,0.04); }
|
||||||
|
|
||||||
|
.au-portfolio-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
|
||||||
|
.au-portfolio-cell:hover .au-portfolio-img { transform: scale(1.04); }
|
||||||
|
.au-portfolio-cell { overflow: hidden; border-radius: 16px; position: relative; cursor: pointer; }
|
||||||
|
.au-portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,26,23,0.7) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
|
||||||
|
.au-portfolio-cell:hover .au-portfolio-overlay { opacity: 1; }
|
||||||
|
|
||||||
|
.au-service-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 32px rgba(28,26,23,0.06); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1); }
|
||||||
|
.au-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(28,26,23,0.12); }
|
||||||
|
|
||||||
|
/* Double-Bezel testimonial card */
|
||||||
|
.au-testimony { background: rgba(240,236,228,0.5); border-radius: 24px; padding: 6px; border: 1px solid rgba(139,105,20,0.12); transition: border-color 0.3s; }
|
||||||
|
.au-testimony:hover { border-color: rgba(139,105,20,0.3); }
|
||||||
|
.au-testimony-inner { background: white; border-radius: 18px; padding: 28px 26px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.8); height: 100%; }
|
||||||
|
|
||||||
|
.au-step-num { font-family: 'Playfair Display', Georgia, serif; font-size: 48px; font-weight: 700; color: rgba(139,105,20,0.15); line-height: 1; margin-bottom: 12px; }
|
||||||
|
|
||||||
|
[style*='word-break'] { word-break: keep-all; }
|
||||||
|
`}} />
|
||||||
|
|
||||||
|
{/* ── 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: 'inherit' }}>
|
||||||
|
← 홈페이지 제작 서비스로 돌아가기
|
||||||
|
</Link>
|
||||||
|
<span style={{ color: '#4c1d95' }}>|</span>
|
||||||
|
<span style={{ color: '#fcd34d', fontSize: 12, fontFamily: "'Playfair Display', serif", fontStyle: 'italic', fontWeight: 700 }}>
|
||||||
|
SAMPLE · 인테리어 업체 홈페이지
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── NAV ── */}
|
||||||
|
<nav style={{
|
||||||
|
position: 'sticky', top: 0, zIndex: 50,
|
||||||
|
background: scrolled ? 'rgba(250,248,245,0.88)' : 'rgba(250,248,245,0.6)',
|
||||||
|
backdropFilter: scrolled ? 'blur(20px)' : 'blur(8px)',
|
||||||
|
borderBottom: scrolled ? '1px solid rgba(139,105,20,0.12)' : '1px solid transparent',
|
||||||
|
transition: 'all 0.5s cubic-bezier(0.16,1,0.3,1)',
|
||||||
|
height: NAV_H,
|
||||||
|
display: 'flex', alignItems: 'center',
|
||||||
|
padding: '0 48px',
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: 1200, margin: '0 auto', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||||
|
{/* Logo */}
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: "'Playfair Display', Georgia, serif", fontSize: 20, fontWeight: 700, color: DARK, letterSpacing: '-0.01em' }}>
|
||||||
|
Aura Interior
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 10, color: '#A0917C', letterSpacing: '0.2em', textTransform: 'uppercase', marginTop: -2 }}>아우라 인테리어</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 32 }}>
|
||||||
|
{['포트폴리오', '서비스', '프로세스', '고객 후기', '상담 신청'].map((l) => (
|
||||||
|
<a key={l} href={`#${l}`} className="au-nav-link">{l}</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link href="#contact" className="au-btn-primary" style={{ fontSize: 13, padding: '10px 20px 10px 16px' }}>
|
||||||
|
<span style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(250,248,245,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<ArrowRight color="#FAF8F5" />
|
||||||
|
</span>
|
||||||
|
무료 상담 신청
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* ── HERO ── Split 60/40 */}
|
||||||
|
<section style={{ minHeight: 'calc(100dvh - 112px)', display: 'grid', gridTemplateColumns: '1fr 1fr', overflow: 'hidden' }}>
|
||||||
|
{/* Left — Text */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '80px 64px 80px 80px', position: 'relative' }}>
|
||||||
|
{/* Grain texture */}
|
||||||
|
<div style={{ position: 'absolute', inset: 0, backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.75\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E")', opacity: 0.025, pointerEvents: 'none' }} />
|
||||||
|
|
||||||
|
<div style={{ animation: 'au-fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both' }}>
|
||||||
|
{/* Eyebrow */}
|
||||||
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: `rgba(139,105,20,0.08)`, border: `1px solid rgba(139,105,20,0.2)`, borderRadius: 100, padding: '5px 14px', marginBottom: 28 }}>
|
||||||
|
<div style={{ width: 6, height: 6, borderRadius: '50%', background: GOLD }} />
|
||||||
|
<span style={{ fontSize: 11, color: GOLD, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase' }}>
|
||||||
|
서울 기반 인테리어 디자인
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 style={{
|
||||||
|
fontFamily: "'Playfair Display', Georgia, serif",
|
||||||
|
fontSize: 'clamp(40px, 4.5vw, 64px)',
|
||||||
|
fontWeight: 700, lineHeight: 1.18, color: DARK,
|
||||||
|
letterSpacing: '-0.02em', marginBottom: 24,
|
||||||
|
wordBreak: 'keep-all',
|
||||||
|
}}>
|
||||||
|
공간이 당신의<br />
|
||||||
|
이야기를<br />
|
||||||
|
<em style={{ color: GOLD, fontStyle: 'italic' }}>담습니다.</em>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p style={{ fontSize: 16, color: '#6B6456', lineHeight: 1.85, maxWidth: 460, marginBottom: 40, wordBreak: 'keep-all' }}>
|
||||||
|
아우라 인테리어는 12년간 247개의 공간을 완성했습니다.<br />
|
||||||
|
주거부터 상업 공간까지, 당신의 이야기가 머무는 곳을 만듭니다.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 48 }}>
|
||||||
|
<Link href="#contact" className="au-btn-primary">
|
||||||
|
<span style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(250,248,245,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||||
|
<ArrowRight color="#FAF8F5" />
|
||||||
|
</span>
|
||||||
|
무료 공간 상담 시작
|
||||||
|
</Link>
|
||||||
|
<a href="#portfolio" className="au-btn-ghost">
|
||||||
|
포트폴리오 보기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mini stats */}
|
||||||
|
<div style={{ display: 'flex', gap: 32, paddingTop: 32, borderTop: `1px solid rgba(139,105,20,0.12)` }}>
|
||||||
|
{[['247+', '완공 프로젝트'], ['4.96', '고객 만족도'], ['12년', '디자인 경력']].map(([n, l]) => (
|
||||||
|
<div key={l}>
|
||||||
|
<div style={{ fontFamily: "'Playfair Display', serif", fontSize: 26, fontWeight: 700, color: DARK }}>{n}</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#A0917C', marginTop: 2 }}>{l}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right — Image */}
|
||||||
|
<div style={{ position: 'relative', background: SURFACE, overflow: 'hidden' }}>
|
||||||
|
<img
|
||||||
|
src="https://picsum.photos/seed/interior-design-hero/900/1100"
|
||||||
|
alt="아우라 인테리어 대표 작업"
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||||
|
loading="eager"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
{/* Floating badge */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', bottom: 40, left: -24,
|
||||||
|
background: 'white', borderRadius: 16, padding: '16px 20px',
|
||||||
|
boxShadow: '0 20px 60px rgba(28,26,23,0.18)',
|
||||||
|
animation: 'au-float 5s ease-in-out infinite',
|
||||||
|
border: '1px solid rgba(139,105,20,0.1)',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
|
||||||
|
{[1,2,3,4,5].map(i => <StarIcon key={i} filled />)}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 700, color: DARK }}>최근 완공 · 한남동 단독주택</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#A0917C', marginTop: 2 }}>고객 만족도 5.0 / 5.0</div>
|
||||||
|
</div>
|
||||||
|
{/* Category tag */}
|
||||||
|
<div style={{ position: 'absolute', top: 32, right: 32, background: 'rgba(28,26,23,0.7)', backdropFilter: 'blur(12px)', borderRadius: 100, padding: '6px 14px', border: '1px solid rgba(250,248,245,0.1)' }}>
|
||||||
|
<span style={{ fontSize: 12, color: '#F5EDDF', fontWeight: 600, letterSpacing: '0.05em' }}>Award Winner 2024</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── PORTFOLIO BENTO ── */}
|
||||||
|
<section id="포트폴리오" style={{ padding: '100px 80px', background: SURFACE }}>
|
||||||
|
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||||
|
<div className="au-reveal" style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>Portfolio</div>
|
||||||
|
<h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(32px, 3.5vw, 48px)', fontWeight: 700, color: DARK, letterSpacing: '-0.02em', lineHeight: 1.2, wordBreak: 'keep-all' }}>
|
||||||
|
공간이 말하는<br />우리의 언어
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<a href="#" className="au-btn-ghost" style={{ flexShrink: 0 }}>
|
||||||
|
전체 보기 <ArrowRight />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Asymmetric bento grid — NOT 3-column equal */}
|
||||||
|
<div className="au-reveal" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gridTemplateRows: 'auto auto', gap: 14 }}>
|
||||||
|
{/* Large — spans 1 col, 2 rows */}
|
||||||
|
<div className="au-portfolio-cell" style={{ gridRow: 'span 2', minHeight: 580 }}>
|
||||||
|
<img src={`https://picsum.photos/seed/${portfolio[0].seed}/820/1060`} alt={portfolio[0].title} className="au-portfolio-img" />
|
||||||
|
<div className="au-portfolio-overlay">
|
||||||
|
<div style={{ fontSize: 11, color: 'rgba(250,248,245,0.6)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 4 }}>{portfolio[0].cat}</div>
|
||||||
|
<div style={{ fontSize: 18, fontWeight: 700, color: 'white', fontFamily: "'Playfair Display', serif" }}>{portfolio[0].title}</div>
|
||||||
|
<div style={{ fontSize: 12, color: 'rgba(250,248,245,0.7)', marginTop: 4 }}>{portfolio[0].area}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Top right 1 */}
|
||||||
|
<div className="au-portfolio-cell" style={{ minHeight: 280 }}>
|
||||||
|
<img src={`https://picsum.photos/seed/${portfolio[1].seed}/600/400`} alt={portfolio[1].title} className="au-portfolio-img" />
|
||||||
|
<div className="au-portfolio-overlay">
|
||||||
|
<div style={{ fontSize: 11, color: 'rgba(250,248,245,0.6)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 4 }}>{portfolio[1].cat}</div>
|
||||||
|
<div style={{ fontSize: 16, fontWeight: 700, color: 'white', fontFamily: "'Playfair Display', serif" }}>{portfolio[1].title}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Top right 2 */}
|
||||||
|
<div className="au-portfolio-cell" style={{ minHeight: 280 }}>
|
||||||
|
<img src={`https://picsum.photos/seed/${portfolio[2].seed}/600/400`} alt={portfolio[2].title} className="au-portfolio-img" />
|
||||||
|
<div className="au-portfolio-overlay">
|
||||||
|
<div style={{ fontSize: 11, color: 'rgba(250,248,245,0.6)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 4 }}>{portfolio[2].cat}</div>
|
||||||
|
<div style={{ fontSize: 16, fontWeight: 700, color: 'white', fontFamily: "'Playfair Display', serif" }}>{portfolio[2].title}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Bottom right — spans 2 cols */}
|
||||||
|
<div className="au-portfolio-cell" style={{ gridColumn: 'span 2', minHeight: 280 }}>
|
||||||
|
<img src={`https://picsum.photos/seed/${portfolio[4].seed}/1200/480`} alt={portfolio[4].title} className="au-portfolio-img" />
|
||||||
|
<div className="au-portfolio-overlay">
|
||||||
|
<div style={{ fontSize: 11, color: 'rgba(250,248,245,0.6)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 4 }}>{portfolio[4].cat}</div>
|
||||||
|
<div style={{ fontSize: 18, fontWeight: 700, color: 'white', fontFamily: "'Playfair Display', serif" }}>{portfolio[4].title}</div>
|
||||||
|
<div style={{ fontSize: 12, color: 'rgba(250,248,245,0.7)', marginTop: 4 }}>{portfolio[4].area}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── SERVICES ZIG-ZAG ── */}
|
||||||
|
<section id="서비스" style={{ padding: '100px 80px', background: CREAM }}>
|
||||||
|
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||||
|
<div className="au-reveal" style={{ textAlign: 'center', marginBottom: 72 }}>
|
||||||
|
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>Services</div>
|
||||||
|
<h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(32px, 3.5vw, 48px)', fontWeight: 700, color: DARK, letterSpacing: '-0.02em', wordBreak: 'keep-all' }}>
|
||||||
|
우리가 잘하는 세 가지
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
|
||||||
|
{services.map((svc, i) => (
|
||||||
|
<div key={svc.title} className="au-reveal au-service-card" style={{ display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.2fr' : '1.2fr 1fr', gap: 0 }}>
|
||||||
|
{/* Image side */}
|
||||||
|
<div style={{ order: i % 2 === 0 ? 2 : 1, position: 'relative', minHeight: 400, overflow: 'hidden', borderRadius: i % 2 === 0 ? '0 20px 20px 0' : '20px 0 0 20px' }}>
|
||||||
|
<img
|
||||||
|
src={`https://picsum.photos/seed/${svc.seed}/680/520`}
|
||||||
|
alt={svc.title}
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.7s cubic-bezier(0.16,1,0.3,1)' }}
|
||||||
|
loading="lazy" decoding="async"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Text side */}
|
||||||
|
<div style={{ order: i % 2 === 0 ? 1 : 2, padding: '52px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||||
|
<div style={{ fontSize: 11, color: SAGE, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 14 }}>{svc.sub}</div>
|
||||||
|
<h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 32, fontWeight: 700, color: DARK, letterSpacing: '-0.02em', marginBottom: 18, lineHeight: 1.2, wordBreak: 'keep-all' }}>
|
||||||
|
{svc.title}
|
||||||
|
</h3>
|
||||||
|
<p style={{ fontSize: 15, color: '#6B6456', lineHeight: 1.85, marginBottom: 28, wordBreak: 'keep-all' }}>{svc.desc}</p>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 36 }}>
|
||||||
|
{svc.details.map((d) => (
|
||||||
|
<div key={d} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
|
<CheckIcon />
|
||||||
|
<span style={{ fontSize: 14, color: '#5A5148' }}>{d}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a href="#contact" className="au-btn-ghost" style={{ alignSelf: 'flex-start' }}>
|
||||||
|
상담 신청하기 <ArrowRight />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── PROCESS ── */}
|
||||||
|
<section id="프로세스" style={{ padding: '100px 80px', background: DARK }}>
|
||||||
|
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||||
|
<div className="au-reveal" style={{ textAlign: 'center', marginBottom: 72 }}>
|
||||||
|
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>Process</div>
|
||||||
|
<h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(32px, 3.5vw, 48px)', fontWeight: 700, color: '#F5EDDF', letterSpacing: '-0.02em', wordBreak: 'keep-all' }}>
|
||||||
|
상담부터 준공까지
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
|
||||||
|
{steps.map((s, i) => (
|
||||||
|
<div key={s.num} className="au-reveal" style={{ padding: '40px 32px', borderLeft: i > 0 ? '1px solid rgba(250,248,245,0.06)' : 'none', position: 'relative' }}>
|
||||||
|
{/* Connector line */}
|
||||||
|
{i < steps.length - 1 && (
|
||||||
|
<div style={{ position: 'absolute', top: 56, right: -1, width: 1, height: '60%', background: 'transparent' }} />
|
||||||
|
)}
|
||||||
|
<div className="au-step-num">{s.num}</div>
|
||||||
|
<div style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, fontWeight: 600, color: '#F5EDDF', marginBottom: 12, lineHeight: 1.3 }}>{s.title}</div>
|
||||||
|
<p style={{ fontSize: 14, color: '#8A7E70', lineHeight: 1.8, wordBreak: 'keep-all' }}>{s.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TESTIMONIALS MASONRY ── */}
|
||||||
|
<section id="고객 후기" style={{ padding: '100px 80px', background: SURFACE }}>
|
||||||
|
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||||
|
<div className="au-reveal" style={{ textAlign: 'center', marginBottom: 64 }}>
|
||||||
|
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12 }}>Reviews</div>
|
||||||
|
<h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(32px, 3.5vw, 48px)', fontWeight: 700, color: DARK, letterSpacing: '-0.02em', wordBreak: 'keep-all' }}>
|
||||||
|
공간이 바꾼 이야기들
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Masonry — 2 cols with staggered heights */}
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, alignItems: 'start' }}>
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<div key={t.name} className={`au-reveal au-testimony`} style={{ marginTop: i === 1 ? 40 : 0 }}>
|
||||||
|
<div className="au-testimony-inner">
|
||||||
|
{/* Highlight badge */}
|
||||||
|
<div style={{ display: 'inline-block', background: `rgba(139,105,20,0.08)`, borderRadius: 100, padding: '4px 12px', marginBottom: 18, border: `1px solid rgba(139,105,20,0.15)` }}>
|
||||||
|
<span style={{ fontSize: 11, color: GOLD, fontWeight: 700 }}>{t.highlight}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quote mark */}
|
||||||
|
<div style={{ fontFamily: "'Playfair Display', serif", fontSize: 48, color: `rgba(139,105,20,0.15)`, lineHeight: 0.8, marginBottom: 14 }}>"</div>
|
||||||
|
|
||||||
|
<p style={{ fontSize: 15, color: '#4A4440', lineHeight: 1.85, marginBottom: 24, wordBreak: 'keep-all' }}>{t.text}</p>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: 3, marginBottom: 16 }}>
|
||||||
|
{[1,2,3,4,5].map(j => <StarIcon key={j} filled={j <= t.rating} />)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '1px solid rgba(139,105,20,0.08)' }}>
|
||||||
|
<img
|
||||||
|
src={`https://i.pravatar.cc/80?u=${t.u}`}
|
||||||
|
alt={t.name}
|
||||||
|
style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover' }}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 14, fontWeight: 700, color: DARK }}>{t.name}</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#A0917C' }}>{t.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Marquee trust strip */}
|
||||||
|
<div className="au-reveal" style={{ marginTop: 72, overflow: 'hidden', borderTop: '1px solid rgba(139,105,20,0.1)', paddingTop: 40 }}>
|
||||||
|
<div style={{ fontSize: 11, color: '#A0917C', textAlign: 'center', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 24 }}>
|
||||||
|
함께한 브랜드들
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', animation: 'au-marquee 20s linear infinite', width: 'fit-content', gap: 64 }}>
|
||||||
|
{['에스프레소랩', '루미너스', '플로우캔버스', '스텔라랩스', '넥스트비전', '브릿지웍스', '에스프레소랩', '루미너스', '플로우캔버스', '스텔라랩스', '넥스트비전', '브릿지웍스'].map((b, i) => (
|
||||||
|
<span key={i} style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, fontWeight: 600, color: 'rgba(28,26,23,0.2)', whiteSpace: 'nowrap', fontStyle: 'italic' }}>{b}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CTA FULL-BLEED ── */}
|
||||||
|
<section id="contact" style={{ padding: '120px 80px', background: DARK, position: 'relative', overflow: 'hidden' }}>
|
||||||
|
{/* Decorative gold circle */}
|
||||||
|
<div style={{ position: 'absolute', right: -100, top: '50%', transform: 'translateY(-50%)', width: 600, height: 600, borderRadius: '50%', background: `radial-gradient(circle, rgba(139,105,20,0.12), transparent 70%)`, pointerEvents: 'none' }} />
|
||||||
|
{/* Grain */}
|
||||||
|
<div style={{ position: 'fixed', inset: 0, backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.75\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E")', opacity: 0.02, pointerEvents: 'none', zIndex: 60 }} />
|
||||||
|
|
||||||
|
<div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
||||||
|
<div className="au-reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(139,105,20,0.12)', border: '1px solid rgba(139,105,20,0.25)', borderRadius: 100, padding: '5px 14px', marginBottom: 32 }}>
|
||||||
|
<div style={{ width: 6, height: 6, borderRadius: '50%', background: GOLD }} />
|
||||||
|
<span style={{ fontSize: 11, color: GOLD, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase' }}>72시간 내 제안서 발송</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="au-reveal" style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(36px, 5vw, 58px)', fontWeight: 700, color: '#F5EDDF', letterSpacing: '-0.02em', lineHeight: 1.2, marginBottom: 20, wordBreak: 'keep-all' }}>
|
||||||
|
당신의 공간 이야기를<br />
|
||||||
|
<em style={{ color: GOLD }}>지금 시작하세요.</em>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="au-reveal" style={{ fontSize: 16, color: '#8A7E70', lineHeight: 1.85, marginBottom: 44, wordBreak: 'keep-all' }}>
|
||||||
|
사진 한 장과 예산만 알려주세요.<br />
|
||||||
|
72시간 내에 맞춤 제안서와 무드보드를 드립니다. 무료입니다.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="au-reveal" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||||
|
<Link href="/freelance?service=website" className="au-btn-primary" style={{ background: GOLD, fontSize: 16, padding: '16px 36px 16px 28px', animation: 'au-pulse-gold 3s infinite' }}>
|
||||||
|
<span style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(28,26,23,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||||
|
<ArrowRight color="#FAF8F5" />
|
||||||
|
</span>
|
||||||
|
무료 상담 신청하기
|
||||||
|
</Link>
|
||||||
|
<a href="tel:02-1234-5678" className="au-btn-ghost" style={{ color: '#F5EDDF', borderColor: 'rgba(245,237,223,0.15)' }}>
|
||||||
|
02-1234-5678
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="au-reveal" style={{ display: 'flex', gap: 24, justifyContent: 'center', marginTop: 40 }}>
|
||||||
|
{['완공 보장', '계약서 필수', 'AS 1년'].map((b) => (
|
||||||
|
<div key={b} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||||
|
<CheckIcon />
|
||||||
|
<span style={{ fontSize: 13, color: '#8A7E70' }}>{b}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FOOTER ── */}
|
||||||
|
<footer style={{ background: '#111009', padding: '40px 80px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontFamily: "'Playfair Display', serif", fontSize: 16, fontWeight: 700, color: '#F5EDDF', fontStyle: 'italic' }}>Aura Interior</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#5A5148', marginTop: 4 }}>© 2024 아우라 인테리어. All rights reserved.</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 24 }}>
|
||||||
|
{['포트폴리오', '서비스 안내', '상담 신청', 'Instagram'].map((l) => (
|
||||||
|
<a key={l} href="#" style={{ fontSize: 13, color: '#5A5148', textDecoration: 'none', transition: 'color 0.3s' }}>{l}</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
609
app/services/website/samples/reading/page.tsx
Normal file
609
app/services/website/samples/reading/page.tsx
Normal file
@@ -0,0 +1,609 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
SVG ICONS
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
const BookOpenIcon = () => (
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const StarIcon = ({ filled = true }: { filled?: boolean }) => (
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill={filled ? '#D4A853' : 'none'} stroke="#D4A853" strokeWidth="1.5">
|
||||||
|
<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const QuoteIcon = () => (
|
||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||||
|
<path d="M8 8C4 10.5 2 14 2 18c0 3.3 2 5 4 5s3.5-1.5 3.5-4c0-2.3-1.2-3.5-2.5-3.5C5.5 15.5 5 15 6 13c.8-1.5 2.5-3 4-3.5L8 8zm16 0c-4 2.5-6 6-6 10 0 3.3 2 5 4 5s3.5-1.5 3.5-4c0-2.3-1.2-3.5-2.5-3.5C21.5 15.5 21 15 22 13c.8-1.5 2.5-3 4-3.5L24 8z" fill="#D4A853" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const CheckIcon = () => (
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#D4A853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<polyline points="20 6 9 17 4 12"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const ArrowUpRight = () => (
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const ChevronDown = () => (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
COUNTUP HOOK
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
function useCountUp(target: number, duration = 1600) {
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
const ref = useRef<HTMLSpanElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = ref.current;
|
||||||
|
if (!el) return;
|
||||||
|
const obs = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
if (!entry.isIntersecting) return;
|
||||||
|
obs.disconnect();
|
||||||
|
const start = performance.now();
|
||||||
|
const tick = (now: number) => {
|
||||||
|
const elapsed = now - start;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
const ease = 1 - Math.pow(1 - progress, 3);
|
||||||
|
setCount(Math.round(target * ease));
|
||||||
|
if (progress < 1) requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
},
|
||||||
|
{ threshold: 0.4 }
|
||||||
|
);
|
||||||
|
obs.observe(el);
|
||||||
|
return () => obs.disconnect();
|
||||||
|
}, [target, duration]);
|
||||||
|
|
||||||
|
return { count, ref };
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
STAT ITEM
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
function StatItem({ value, suffix, label }: { value: number; suffix?: string; label: string }) {
|
||||||
|
const { count, ref } = useCountUp(value);
|
||||||
|
return (
|
||||||
|
<div style={{ textAlign: 'center', padding: '0 2rem' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: '2px' }}>
|
||||||
|
<span ref={ref} style={{ fontSize: '3rem', fontFamily: "'Cormorant Garamond', serif", fontWeight: 700, color: '#D4A853', lineHeight: 1 }}>{count}</span>
|
||||||
|
{suffix && <span style={{ fontSize: '1.5rem', fontFamily: "'Cormorant Garamond', serif", color: '#D4A853' }}>{suffix}</span>}
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: '0.78rem', color: '#8A8070', marginTop: '0.5rem', letterSpacing: '0.1em', textTransform: 'uppercase', fontFamily: "'Pretendard', sans-serif" }}>{label}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
BOOK CARD
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
interface Book {
|
||||||
|
seed: string; title: string; author: string; rating: number; genre: string; year: number; note?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const books: Book[] = [
|
||||||
|
{ seed: 'book1', title: '파친코', author: '이민진', rating: 5, genre: '소설', year: 2024, note: '역사 속에 묻힌 삶의 무게를 느꼈다' },
|
||||||
|
{ seed: 'book2', title: '어린 왕자', author: '생텍쥐페리', rating: 5, genre: '고전', year: 2023 },
|
||||||
|
{ seed: 'book3', title: '원씽', author: '게리 켈러', rating: 4, genre: '자기계발', year: 2024 },
|
||||||
|
{ seed: 'book4', title: '채식주의자', author: '한강', rating: 5, genre: '소설', year: 2023, note: '불편함 속의 아름다움' },
|
||||||
|
{ seed: 'book5', title: '지능의 본질', author: '제프 호킨스', rating: 4, genre: '과학', year: 2024 },
|
||||||
|
{ seed: 'book6', title: '82년생 김지영', author: '조남주', rating: 4, genre: '소설', year: 2022 },
|
||||||
|
{ seed: 'book7', title: '노인과 바다', author: '헤밍웨이', rating: 5, genre: '고전', year: 2022 },
|
||||||
|
{ seed: 'book8', title: '생각에 관한 생각', author: '다니엘 카너먼', rating: 4, genre: '심리학', year: 2023 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const genreColors: Record<string, string> = {
|
||||||
|
'소설': '#6B5B95', '고전': '#D4A853', '자기계발': '#4A7C59', '과학': '#2E6EA6', '심리학': '#8B4E62'
|
||||||
|
};
|
||||||
|
|
||||||
|
function BookCard({ book, large = false }: { book: Book; large?: boolean }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="rd-reveal"
|
||||||
|
style={{
|
||||||
|
background: 'rgba(255,255,255,0.03)',
|
||||||
|
border: '1px solid rgba(212,168,83,0.15)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
position: 'relative',
|
||||||
|
height: large ? '420px' : '340px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
transition: 'transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s cubic-bezier(0.16,1,0.3,1)',
|
||||||
|
cursor: 'default',
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => {
|
||||||
|
(e.currentTarget as HTMLElement).style.transform = 'translateY(-6px)';
|
||||||
|
(e.currentTarget as HTMLElement).style.boxShadow = '0 20px 60px rgba(212,168,83,0.12)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={e => {
|
||||||
|
(e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
|
||||||
|
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* cover */}
|
||||||
|
<div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
|
||||||
|
<img
|
||||||
|
src={`https://picsum.photos/seed/${book.seed}/300/450`}
|
||||||
|
alt={book.title}
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.75) saturate(0.7)' }}
|
||||||
|
/>
|
||||||
|
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 40%, rgba(12,11,9,0.95))' }}/>
|
||||||
|
{/* genre badge */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: '0.75rem', left: '0.75rem',
|
||||||
|
background: genreColors[book.genre] || '#6B5B95',
|
||||||
|
color: 'white', fontSize: '0.65rem', fontFamily: "'Pretendard', sans-serif",
|
||||||
|
padding: '3px 8px', borderRadius: '4px', fontWeight: 600, letterSpacing: '0.05em'
|
||||||
|
}}>{book.genre}</div>
|
||||||
|
{/* rating */}
|
||||||
|
<div style={{ position: 'absolute', top: '0.75rem', right: '0.75rem', display: 'flex', gap: '2px' }}>
|
||||||
|
{[1,2,3,4,5].map(i => <StarIcon key={i} filled={i <= book.rating}/>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* info */}
|
||||||
|
<div style={{ padding: '0.875rem', background: 'rgba(12,11,9,0.95)' }}>
|
||||||
|
<p style={{ fontSize: '0.65rem', color: '#8A8070', fontFamily: "'Pretendard', sans-serif", marginBottom: '0.25rem' }}>{book.author} · {book.year}</p>
|
||||||
|
<h3 style={{ fontSize: large ? '1.1rem' : '0.95rem', fontFamily: "'Cormorant Garamond', serif", fontWeight: 700, color: '#F0EAD8', margin: 0, wordBreak: 'keep-all', lineHeight: 1.3 }}>{book.title}</h3>
|
||||||
|
{book.note && <p style={{ fontSize: '0.72rem', color: '#6A6050', fontFamily: "'Pretendard', sans-serif", marginTop: '0.4rem', wordBreak: 'keep-all', fontStyle: 'italic' }}>"{book.note}"</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
MAIN PAGE
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
export default function ReadingPage() {
|
||||||
|
const [activeGenre, setActiveGenre] = useState('전체');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const obs = new IntersectionObserver(
|
||||||
|
entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('rd-visible'); }),
|
||||||
|
{ threshold: 0.1 }
|
||||||
|
);
|
||||||
|
document.querySelectorAll('.rd-reveal').forEach(el => obs.observe(el));
|
||||||
|
return () => obs.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const genres = ['전체', '소설', '고전', '자기계발', '과학', '심리학'];
|
||||||
|
const filteredBooks = activeGenre === '전체' ? books : books.filter(b => b.genre === activeGenre);
|
||||||
|
|
||||||
|
const quotes = [
|
||||||
|
{ text: '당신이 무엇을 읽느냐가 당신이 누구인지를 말해준다. 책은 당신이 선택한 삶의 궤적이다.', author: '파친코 — 이민진', genre: '소설' },
|
||||||
|
{ text: '어른들은 숫자를 좋아한다. 새 친구 이야기를 해줄 때, 중요한 것을 절대 묻지 않는다. 그의 목소리가 어떤지, 어떤 놀이를 좋아하는지.', author: '어린 왕자 — 생텍쥐페리', genre: '고전' },
|
||||||
|
{ text: '성공한 사람들은 하나에 집중하고 나머지를 내려놓는 법을 배웠다. 한 가지를 잘하면 나머지가 따라온다.', author: '원씽 — 게리 켈러', genre: '자기계발' },
|
||||||
|
{ text: '빠른 생각은 직관이고 느린 생각은 이성이다. 우리는 대부분 빠른 생각이 옳다고 착각하며 살아간다.', author: '생각에 관한 생각 — 다니엘 카너먼', genre: '심리학' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const currentlyReading = {
|
||||||
|
seed: 'current1', title: '도둑맞은 집중력', author: '요한 하리', genre: '자기계발',
|
||||||
|
progress: 67, totalPages: 380, currentPage: 255,
|
||||||
|
startDate: '2024.03.10', note: '현대 사회가 어떻게 우리의 집중력을 앗아가는지 설득력 있게 풀어냄'
|
||||||
|
};
|
||||||
|
|
||||||
|
const tbr = [
|
||||||
|
{ seed: 'tbr1', title: '총, 균, 쇠', author: '재레드 다이아몬드', genre: '역사', priority: '높음' },
|
||||||
|
{ seed: 'tbr2', title: '코스모스', author: '칼 세이건', genre: '과학', priority: '높음' },
|
||||||
|
{ seed: 'tbr3', title: '사피엔스', author: '유발 하라리', genre: '역사', priority: '중간' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const monthlyData = [
|
||||||
|
{ month: '10월', books: 2 }, { month: '11월', books: 3 }, { month: '12월', books: 1 },
|
||||||
|
{ month: '1월', books: 4 }, { month: '2월', books: 3 }, { month: '3월', books: 2 },
|
||||||
|
];
|
||||||
|
const maxBooks = Math.max(...monthlyData.map(d => d.books));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: `
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css');
|
||||||
|
|
||||||
|
.rd-root { font-family: 'Pretendard', sans-serif; background: #0C0B09; color: #F0EAD8; min-height: 100dvh; }
|
||||||
|
.rd-serif { font-family: 'Cormorant Garamond', serif; }
|
||||||
|
|
||||||
|
/* grain overlay */
|
||||||
|
.rd-grain::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.07'/%3E%3C/svg%3E");
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* scroll reveal */
|
||||||
|
.rd-reveal {
|
||||||
|
opacity: 0; transform: translateY(2rem); filter: blur(2px);
|
||||||
|
transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.7s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
}
|
||||||
|
.rd-reveal.rd-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
|
||||||
|
.rd-reveal:nth-child(2) { transition-delay: 0.08s; }
|
||||||
|
.rd-reveal:nth-child(3) { transition-delay: 0.16s; }
|
||||||
|
.rd-reveal:nth-child(4) { transition-delay: 0.24s; }
|
||||||
|
.rd-reveal:nth-child(5) { transition-delay: 0.32s; }
|
||||||
|
|
||||||
|
/* nav */
|
||||||
|
.rd-nav {
|
||||||
|
position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;
|
||||||
|
background: rgba(12,11,9,0.7); backdrop-filter: blur(20px) saturate(180%);
|
||||||
|
border: 1px solid rgba(212,168,83,0.2); border-radius: 100px;
|
||||||
|
padding: 0.75rem 2rem; display: flex; align-items: center; gap: 2.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* double-bezel cards */
|
||||||
|
.rd-bezel {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
border: 1px solid rgba(212,168,83,0.2);
|
||||||
|
border-radius: 16px; padding: 1px;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(212,168,83,0.1), 0 0 0 1px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
.rd-bezel-inner {
|
||||||
|
background: rgba(20,18,14,0.9);
|
||||||
|
border: 1px solid rgba(255,255,255,0.04);
|
||||||
|
border-radius: 15px; padding: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* genre filter */
|
||||||
|
.rd-genre-btn {
|
||||||
|
background: transparent; border: 1px solid rgba(212,168,83,0.2);
|
||||||
|
color: #8A8070; font-family: 'Pretendard', sans-serif; font-size: 0.8rem;
|
||||||
|
padding: 0.4rem 1rem; border-radius: 100px; cursor: pointer;
|
||||||
|
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
}
|
||||||
|
.rd-genre-btn:hover { border-color: rgba(212,168,83,0.5); color: #D4A853; }
|
||||||
|
.rd-genre-btn.active { background: rgba(212,168,83,0.15); border-color: #D4A853; color: #D4A853; }
|
||||||
|
|
||||||
|
/* progress bar */
|
||||||
|
.rd-progress-track { background: rgba(255,255,255,0.06); border-radius: 100px; height: 4px; overflow: hidden; }
|
||||||
|
.rd-progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #D4A853, #F5C842); transition: width 1s cubic-bezier(0.16,1,0.3,1); }
|
||||||
|
|
||||||
|
/* marquee */
|
||||||
|
@keyframes rd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||||||
|
.rd-marquee-track { animation: rd-marquee 25s linear infinite; display: flex; gap: 0; }
|
||||||
|
|
||||||
|
/* hero pulse */
|
||||||
|
@keyframes rd-pulse { 0%,100% { opacity:0.3; transform: scale(1); } 50% { opacity:0.6; transform: scale(1.05); } }
|
||||||
|
.rd-orb { animation: rd-pulse 4s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* CTA glow */
|
||||||
|
.rd-cta-btn {
|
||||||
|
background: #D4A853; color: #0C0B09; border: none;
|
||||||
|
font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 0.9rem;
|
||||||
|
padding: 0.875rem 2.5rem; border-radius: 100px; cursor: pointer;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
|
||||||
|
box-shadow: 0 0 40px rgba(212,168,83,0.3);
|
||||||
|
}
|
||||||
|
.rd-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(212,168,83,0.5); background: #E8BC60; }
|
||||||
|
|
||||||
|
/* scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 4px; }
|
||||||
|
::-webkit-scrollbar-track { background: #0C0B09; }
|
||||||
|
::-webkit-scrollbar-thumb { background: rgba(212,168,83,0.3); border-radius: 2px; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.rd-nav { padding: 0.6rem 1.25rem; gap: 1.5rem; }
|
||||||
|
.rd-bento { grid-template-columns: 1fr !important; }
|
||||||
|
.rd-hero-title { font-size: clamp(3.5rem, 12vw, 8rem) !important; }
|
||||||
|
.rd-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
|
||||||
|
.rd-quote-grid { grid-template-columns: 1fr !important; }
|
||||||
|
.rd-currently { grid-template-columns: 1fr !important; }
|
||||||
|
.rd-monthly-bar { height: 80px !important; }
|
||||||
|
}
|
||||||
|
`}} />
|
||||||
|
|
||||||
|
<div className="rd-root rd-grain" style={{ position: 'relative' }}>
|
||||||
|
|
||||||
|
{/* ── NAV ── */}
|
||||||
|
<nav className="rd-nav">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||||
|
<BookOpenIcon/>
|
||||||
|
<span className="rd-serif" style={{ fontSize: '1rem', fontWeight: 600, color: '#D4A853' }}>나의 독서 기록</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: '1.5rem', fontSize: '0.8rem', color: '#8A8070' }}>
|
||||||
|
{['컬렉션', '독서록', '통계'].map(item => (
|
||||||
|
<a key={item} href={`#${item}`} style={{ color: 'inherit', textDecoration: 'none', transition: 'color 0.2s' }}
|
||||||
|
onMouseEnter={e => (e.currentTarget.style.color = '#D4A853')}
|
||||||
|
onMouseLeave={e => (e.currentTarget.style.color = '#8A8070')}>
|
||||||
|
{item}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section style={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 clamp(1.5rem, 6vw, 6rem)', position: 'relative', overflow: 'hidden' }}>
|
||||||
|
{/* ambient orbs */}
|
||||||
|
<div className="rd-orb" style={{ position: 'absolute', top: '20%', right: '10%', width: '500px', height: '500px', background: 'radial-gradient(circle, rgba(212,168,83,0.06) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }}/>
|
||||||
|
<div style={{ position: 'absolute', bottom: '15%', left: '5%', width: '300px', height: '300px', background: 'radial-gradient(circle, rgba(107,91,149,0.06) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }}/>
|
||||||
|
|
||||||
|
<div style={{ maxWidth: '1200px', margin: '0 auto', width: '100%', position: 'relative', zIndex: 1 }}>
|
||||||
|
{/* eyebrow */}
|
||||||
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', border: '1px solid rgba(212,168,83,0.3)', borderRadius: '100px', padding: '0.35rem 0.875rem', marginBottom: '2.5rem' }}>
|
||||||
|
<div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#D4A853' }}/>
|
||||||
|
<span style={{ fontSize: '0.72rem', color: '#D4A853', letterSpacing: '0.15em', textTransform: 'uppercase', fontFamily: "'Pretendard', sans-serif" }}>Personal Reading Journal</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* hero title */}
|
||||||
|
<h1 className="rd-hero-title" style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(4.5rem, 13vw, 10rem)', fontWeight: 700, lineHeight: 0.9, letterSpacing: '-0.02em', color: '#F0EAD8', margin: '0 0 2rem', wordBreak: 'keep-all' }}>
|
||||||
|
책이 쌓이면<br/>
|
||||||
|
<span style={{ color: '#D4A853', fontStyle: 'italic' }}>삶이 된다.</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', alignItems: 'flex-end', gap: '3rem', flexWrap: 'wrap' }}>
|
||||||
|
<p style={{ fontSize: '1.1rem', color: '#8A8070', maxWidth: '360px', lineHeight: 1.8, wordBreak: 'keep-all', margin: 0 }}>
|
||||||
|
읽은 책마다 남긴 생각들, 좋아하는 문장들, 그리고 아직 읽지 못한 설렘들을 기록하는 공간.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||||
|
<button className="rd-cta-btn">기록 시작하기</button>
|
||||||
|
<button style={{ background: 'transparent', border: '1px solid rgba(212,168,83,0.3)', color: '#D4A853', fontFamily: "'Pretendard', sans-serif", fontSize: '0.9rem', padding: '0.875rem 2rem', borderRadius: '100px', cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)' }}
|
||||||
|
onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'rgba(212,168,83,0.08)'; }}
|
||||||
|
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}>
|
||||||
|
둘러보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* scroll indicator */}
|
||||||
|
<div style={{ marginTop: '5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', color: '#4A4035' }}>
|
||||||
|
<div style={{ width: '40px', height: '1px', background: 'rgba(212,168,83,0.3)' }}/>
|
||||||
|
<span style={{ fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>Scroll to explore</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── STATS BAR ── */}
|
||||||
|
<section style={{ padding: '3rem clamp(1.5rem, 6vw, 6rem)', borderTop: '1px solid rgba(212,168,83,0.1)', borderBottom: '1px solid rgba(212,168,83,0.1)' }}>
|
||||||
|
<div className="rd-stats-grid rd-reveal" style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '2rem', position: 'relative', zIndex: 1 }}>
|
||||||
|
<StatItem value={47} label="완독한 책" />
|
||||||
|
<div style={{ width: '1px', background: 'rgba(212,168,83,0.1)', margin: '-0.5rem 0' }}/>
|
||||||
|
<StatItem value={2340} suffix="p" label="올해 읽은 페이지" />
|
||||||
|
<div style={{ width: '1px', background: 'rgba(212,168,83,0.1)', margin: '-0.5rem 0' }}/>
|
||||||
|
<StatItem value={128} label="저장한 문장" />
|
||||||
|
<div style={{ width: '1px', background: 'rgba(212,168,83,0.1)', margin: '-0.5rem 0' }}/>
|
||||||
|
<StatItem value={12} label="독서 중인 달" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CURRENTLY READING ── */}
|
||||||
|
<section style={{ padding: '5rem clamp(1.5rem, 6vw, 6rem)' }} id="독서록">
|
||||||
|
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<div className="rd-reveal" style={{ display: 'flex', alignItems: 'baseline', gap: '1rem', marginBottom: '3rem' }}>
|
||||||
|
<h2 className="rd-serif" style={{ fontSize: '2.5rem', fontWeight: 700, color: '#F0EAD8', margin: 0 }}>지금 읽는 중</h2>
|
||||||
|
<span style={{ fontSize: '0.75rem', color: '#8A8070', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Currently reading</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rd-currently rd-reveal" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: '2.5rem', alignItems: 'stretch' }}>
|
||||||
|
{/* book cover */}
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<img src={`https://picsum.photos/seed/${currentlyReading.seed}/280/420`} alt={currentlyReading.title}
|
||||||
|
style={{ width: '100%', aspectRatio: '2/3', objectFit: 'cover', borderRadius: '12px', filter: 'brightness(0.85) saturate(0.8)', display: 'block' }}/>
|
||||||
|
<div style={{ position: 'absolute', inset: 0, borderRadius: '12px', boxShadow: 'inset 0 0 0 1px rgba(212,168,83,0.2), -12px 20px 60px rgba(0,0,0,0.6)' }}/>
|
||||||
|
{/* reading badge */}
|
||||||
|
<div style={{ position: 'absolute', top: '1rem', left: '-0.5rem', background: '#D4A853', color: '#0C0B09', fontSize: '0.65rem', fontWeight: 700, padding: '4px 10px', borderRadius: '4px', letterSpacing: '0.05em' }}>READING</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* info */}
|
||||||
|
<div className="rd-bezel" style={{ flex: 1 }}>
|
||||||
|
<div className="rd-bezel-inner" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<div style={{ marginBottom: 'auto' }}>
|
||||||
|
<div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
|
||||||
|
<span style={{ fontSize: '0.7rem', color: '#D4A853', border: '1px solid rgba(212,168,83,0.3)', padding: '2px 8px', borderRadius: '4px' }}>{currentlyReading.genre}</span>
|
||||||
|
<span style={{ fontSize: '0.7rem', color: '#8A8070', border: '1px solid rgba(255,255,255,0.08)', padding: '2px 8px', borderRadius: '4px' }}>시작 {currentlyReading.startDate}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="rd-serif" style={{ fontSize: '2rem', fontWeight: 700, color: '#F0EAD8', margin: '0 0 0.25rem', wordBreak: 'keep-all' }}>{currentlyReading.title}</h3>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#8A8070', margin: '0 0 1.5rem' }}>{currentlyReading.author}</p>
|
||||||
|
|
||||||
|
<div style={{ background: 'rgba(212,168,83,0.06)', border: '1px solid rgba(212,168,83,0.15)', borderRadius: '8px', padding: '1rem', marginBottom: '1.5rem' }}>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#C4A060', fontStyle: 'italic', wordBreak: 'keep-all', margin: 0, lineHeight: 1.7 }}>"{currentlyReading.note}"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* progress */}
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
|
||||||
|
<span style={{ fontSize: '0.75rem', color: '#8A8070' }}>읽은 진도</span>
|
||||||
|
<span style={{ fontSize: '0.75rem', color: '#D4A853', fontFamily: "'Cormorant Garamond', serif", fontWeight: 600 }}>
|
||||||
|
{currentlyReading.currentPage} / {currentlyReading.totalPages} p — {currentlyReading.progress}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="rd-progress-track">
|
||||||
|
<div className="rd-progress-fill" style={{ width: `${currentlyReading.progress}%` }}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* TBR list */}
|
||||||
|
<div style={{ marginTop: '2.5rem' }}>
|
||||||
|
<h3 className="rd-serif rd-reveal" style={{ fontSize: '1.5rem', fontWeight: 600, color: '#6A5840', marginBottom: '1.25rem', margin: '0 0 1.25rem' }}>다음으로 읽을 책 <span style={{ fontSize: '1rem', fontStyle: 'italic' }}>(TBR)</span></h3>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||||
|
{tbr.map((book, i) => (
|
||||||
|
<div key={i} className="rd-reveal" style={{ display: 'flex', alignItems: 'center', gap: '1rem', padding: '1rem 1.25rem', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: '10px', transition: 'background 0.3s cubic-bezier(0.16,1,0.3,1)' }}
|
||||||
|
onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = 'rgba(212,168,83,0.04)'}
|
||||||
|
onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.02)'}>
|
||||||
|
<img src={`https://picsum.photos/seed/${book.seed}/40/60`} alt={book.title} style={{ width: '36px', height: '54px', objectFit: 'cover', borderRadius: '4px', filter: 'brightness(0.8)' }}/>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<p className="rd-serif" style={{ fontSize: '1rem', fontWeight: 600, color: '#F0EAD8', margin: '0 0 0.2rem' }}>{book.title}</p>
|
||||||
|
<p style={{ fontSize: '0.75rem', color: '#6A5840', margin: 0 }}>{book.author}</p>
|
||||||
|
</div>
|
||||||
|
<span style={{ fontSize: '0.65rem', color: book.priority === '높음' ? '#D4A853' : '#8A8070', border: `1px solid ${book.priority === '높음' ? 'rgba(212,168,83,0.4)' : 'rgba(255,255,255,0.1)'}`, padding: '2px 8px', borderRadius: '4px' }}>{book.priority}</span>
|
||||||
|
<ArrowUpRight/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── BOOK COLLECTION ── */}
|
||||||
|
<section style={{ padding: '2rem clamp(1.5rem, 6vw, 6rem) 5rem' }} id="컬렉션">
|
||||||
|
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<div className="rd-reveal" style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: '2.5rem', flexWrap: 'wrap', gap: '1rem' }}>
|
||||||
|
<h2 className="rd-serif" style={{ fontSize: '2.5rem', fontWeight: 700, color: '#F0EAD8', margin: 0 }}>완독 컬렉션</h2>
|
||||||
|
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||||
|
{genres.map(g => (
|
||||||
|
<button key={g} className={`rd-genre-btn ${activeGenre === g ? 'active' : ''}`} onClick={() => setActiveGenre(g)}>{g}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* bento grid */}
|
||||||
|
<div className="rd-bento" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: '1rem' }}>
|
||||||
|
{filteredBooks.slice(0, 1).map((book, i) => (
|
||||||
|
<div key={book.seed} style={{ gridRow: 'span 2' }}>
|
||||||
|
<BookCard book={book} large />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{filteredBooks.slice(1, 3).map(book => (
|
||||||
|
<BookCard key={book.seed} book={book} />
|
||||||
|
))}
|
||||||
|
{filteredBooks.slice(3, 5).map(book => (
|
||||||
|
<BookCard key={book.seed} book={book} />
|
||||||
|
))}
|
||||||
|
{filteredBooks.slice(5, 7).map((book, i) => (
|
||||||
|
<div key={book.seed} style={i === 1 ? { gridColumn: 'span 2' } : {}}>
|
||||||
|
<BookCard book={book} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredBooks.length === 0 && (
|
||||||
|
<div style={{ textAlign: 'center', padding: '4rem', color: '#4A4035' }}>
|
||||||
|
<p className="rd-serif" style={{ fontSize: '1.5rem' }}>이 장르에 읽은 책이 없습니다.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── QUOTES MASONRY ── */}
|
||||||
|
<section style={{ padding: '5rem clamp(1.5rem, 6vw, 6rem)', background: 'rgba(212,168,83,0.03)', borderTop: '1px solid rgba(212,168,83,0.08)', borderBottom: '1px solid rgba(212,168,83,0.08)' }}>
|
||||||
|
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<div className="rd-reveal" style={{ marginBottom: '3rem' }}>
|
||||||
|
<p style={{ fontSize: '0.72rem', color: '#D4A853', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: '0.75rem' }}>Highlighted Quotes</p>
|
||||||
|
<h2 className="rd-serif" style={{ fontSize: '2.5rem', fontWeight: 700, color: '#F0EAD8', margin: 0 }}>마음에 남은 문장들</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rd-quote-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.25rem' }}>
|
||||||
|
{quotes.map((quote, i) => (
|
||||||
|
<div key={i} className={`rd-bezel rd-reveal ${i === 1 ? 'rd-reveal' : ''}`}
|
||||||
|
style={{ marginTop: i % 2 === 1 ? '2rem' : '0' }}>
|
||||||
|
<div className="rd-bezel-inner">
|
||||||
|
<QuoteIcon/>
|
||||||
|
<p className="rd-serif" style={{ fontSize: '1.2rem', color: '#C4B090', lineHeight: 1.8, margin: '1rem 0 1.25rem', fontStyle: 'italic', wordBreak: 'keep-all' }}>
|
||||||
|
{quote.text}
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||||
|
<p style={{ fontSize: '0.75rem', color: '#6A5840', margin: 0 }}>{quote.author}</p>
|
||||||
|
<span style={{ fontSize: '0.65rem', color: '#D4A853', border: '1px solid rgba(212,168,83,0.3)', padding: '2px 8px', borderRadius: '4px' }}>{quote.genre}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── MONTHLY STATS ── */}
|
||||||
|
<section style={{ padding: '5rem clamp(1.5rem, 6vw, 6rem)' }} id="통계">
|
||||||
|
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||||
|
<div className="rd-reveal" style={{ marginBottom: '3rem' }}>
|
||||||
|
<p style={{ fontSize: '0.72rem', color: '#D4A853', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: '0.75rem' }}>Reading Rhythm</p>
|
||||||
|
<h2 className="rd-serif" style={{ fontSize: '2.5rem', fontWeight: 700, color: '#F0EAD8', margin: 0 }}>월별 독서 페이스</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rd-bezel rd-reveal">
|
||||||
|
<div className="rd-bezel-inner">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'flex-end', gap: '1rem', height: '160px' }}>
|
||||||
|
{monthlyData.map((d, i) => (
|
||||||
|
<div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', height: '100%', justifyContent: 'flex-end' }}>
|
||||||
|
<span style={{ fontSize: '0.75rem', color: '#D4A853', fontFamily: "'Cormorant Garamond', serif", fontWeight: 600 }}>{d.books}</span>
|
||||||
|
<div style={{ width: '100%', background: 'rgba(212,168,83,0.12)', borderRadius: '6px 6px 0 0', height: `${(d.books / maxBooks) * 100}%`, position: 'relative', transition: 'height 0.8s cubic-bezier(0.16,1,0.3,1)', minHeight: '8px' }}>
|
||||||
|
<div style={{ position: 'absolute', inset: 0, borderRadius: '6px 6px 0 0', background: `linear-gradient(to top, rgba(212,168,83,0.6), rgba(212,168,83,0.2))` }}/>
|
||||||
|
</div>
|
||||||
|
<span style={{ fontSize: '0.72rem', color: '#6A5840' }}>{d.month}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ marginTop: '2rem', paddingTop: '1.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', display: 'flex', gap: '2.5rem', flexWrap: 'wrap' }}>
|
||||||
|
{[
|
||||||
|
{ label: '총 완독 권수', value: '15권', sub: '최근 6개월' },
|
||||||
|
{ label: '평균', value: '2.5권', sub: '월 평균' },
|
||||||
|
{ label: '최다 독서 달', value: '1월', sub: '4권 완독' },
|
||||||
|
].map((item, i) => (
|
||||||
|
<div key={i}>
|
||||||
|
<p className="rd-serif" style={{ fontSize: '1.75rem', fontWeight: 700, color: '#D4A853', margin: '0 0 0.2rem' }}>{item.value}</p>
|
||||||
|
<p style={{ fontSize: '0.75rem', color: '#8A8070', margin: 0 }}>{item.label} · <span style={{ color: '#6A5840' }}>{item.sub}</span></p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── BRAND MARQUEE ── */}
|
||||||
|
<div style={{ borderTop: '1px solid rgba(212,168,83,0.08)', borderBottom: '1px solid rgba(212,168,83,0.08)', overflow: 'hidden', padding: '1rem 0' }}>
|
||||||
|
<div className="rd-marquee-track">
|
||||||
|
{[...Array(2)].map((_, i) => (
|
||||||
|
<div key={i} style={{ display: 'flex', gap: '0', whiteSpace: 'nowrap' }}>
|
||||||
|
{['파친코', '어린 왕자', '원씽', '채식주의자', '노인과 바다', '사피엔스', '총·균·쇠', '코스모스', '82년생 김지영'].map((title, j) => (
|
||||||
|
<span key={j} style={{ padding: '0 2rem', fontSize: '0.8rem', color: '#4A4035', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
|
||||||
|
{title} <span style={{ color: 'rgba(212,168,83,0.3)', margin: '0 1rem' }}>·</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── CTA ── */}
|
||||||
|
<section style={{ padding: '6rem clamp(1.5rem, 6vw, 6rem)', position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: '600px', height: '600px', background: 'radial-gradient(circle, rgba(212,168,83,0.08) 0%, transparent 70%)', pointerEvents: 'none' }}/>
|
||||||
|
|
||||||
|
<div className="rd-reveal" style={{ maxWidth: '700px', margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
||||||
|
<p style={{ fontSize: '0.72rem', color: '#D4A853', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: '1.5rem' }}>당신의 독서 기록</p>
|
||||||
|
<h2 className="rd-serif" style={{ fontSize: 'clamp(2.5rem, 6vw, 4rem)', fontWeight: 700, color: '#F0EAD8', margin: '0 0 1.5rem', lineHeight: 1.1, wordBreak: 'keep-all' }}>
|
||||||
|
오늘 읽은 한 페이지가<br/>
|
||||||
|
<span style={{ color: '#D4A853', fontStyle: 'italic' }}>내일의 나를 만든다.</span>
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '1rem', color: '#6A5840', maxWidth: '400px', margin: '0 auto 2.5rem', lineHeight: 1.8, wordBreak: 'keep-all' }}>
|
||||||
|
읽은 책을 기록하고, 좋아하는 문장을 저장하고, 나만의 독서 여정을 쌓아가세요.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
|
||||||
|
<button className="rd-cta-btn">무료로 시작하기</button>
|
||||||
|
<button style={{ background: 'transparent', border: '1px solid rgba(212,168,83,0.3)', color: '#D4A853', fontFamily: "'Pretendard', sans-serif", fontSize: '0.9rem', padding: '0.875rem 2rem', borderRadius: '100px', cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)' }}
|
||||||
|
onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'rgba(212,168,83,0.08)'; }}
|
||||||
|
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}>
|
||||||
|
샘플 둘러보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FOOTER ── */}
|
||||||
|
<footer style={{ borderTop: '1px solid rgba(212,168,83,0.08)', padding: '2rem clamp(1.5rem, 6vw, 6rem)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '1rem' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||||
|
<BookOpenIcon/>
|
||||||
|
<span className="rd-serif" style={{ color: '#D4A853', fontWeight: 600 }}>나의 독서 기록</span>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: '0.75rem', color: '#4A4035', margin: 0 }}>책은 시간을 초월한 대화다.</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user