refactor: 홈·팩 상세 섹션 덜어내기 (목적별 재편)

홈 (448→307줄):
- Evidence(DEMO 가짜 수치), Toolkit(상세와 중복), Process 3단계(상세와 중복) 삭제
- 남은 섹션: Hero → Before/After → Other Products + Final CTA

팩 상세 (438→393줄):
- Final CTA 섹션 삭제 (Sticky CTA와 역할 중복)
- Samples 섹션 컴팩트 링크 바로 축약 (Hero 프리뷰와 역할 중복)
- Pricing features 각 티어 4개로 축소 (시선 분산 감소)
This commit is contained in:
2026-04-16 03:57:28 +09:00
parent 21aad98bcc
commit 2535ec0dc9
2 changed files with 20 additions and 206 deletions

View File

@@ -11,15 +11,6 @@ import { trackCTAClick } from '../lib/gtag';
참조: Downloads/stitch_ai_mv/ai_music_creator_landing_page
═══════════════════════════════════════════════════ */
const TOOLKIT = [
{ accent: 'var(--kx-primary)', icon: '🎛', title: 'Suno 프롬프트 레시피', desc: '원하는 장르와 감성을 완벽하게 구현하는 검증된 프롬프트 조합 모음.' },
{ accent: 'var(--kx-secondary)', icon: '✍', title: '작사 치트키 템플릿', desc: '주제만 넣으면 감성적인 가사를 뽑아내는 AI 라이팅 가이드.' },
{ accent: '#ff86c3', icon: '🎬', title: '뮤직비디오 워크플로우', desc: '음악 비트에 맞춰 자동으로 영상을 생성·편집하는 원스톱 프로세스.' },
{ accent: '#c284ff', icon: '⚖', title: '저작권 세이프 가이드', desc: 'AI 생성물의 상업적 이용과 저작권 등록을 위한 체크리스트.' },
{ accent: 'var(--kx-secondary-dim)', icon: '📄', title: 'PDF 기획 템플릿', desc: '채널 브랜딩부터 콘텐츠 기획까지 한번에 끝내는 실행 가이드북.' },
{ accent: '#ffffff', icon: '📦', title: '성공 사례 샘플 프로젝트', desc: '조회수 100만 이상을 기록한 프로젝트의 실제 파일 구조 분석.' },
];
const BEFORE = [
'작곡 공부에만 최소 6개월 소요',
'영상 편집 프로그램 학습의 높은 장벽',
@@ -192,65 +183,7 @@ export default function Home() {
</div>
</section>
{/* 2. Evidence */}
<section id="evidence" className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<span
className="kx-label inline-block px-3 py-1 mb-3 rounded-full"
style={{
background: 'rgba(255,200,80,0.12)',
border: '1px solid rgba(255,200,80,0.35)',
color: '#ffcd5c',
}}
>
DEMO ·
</span>
<h2 className="kx-display text-3xl md:text-4xl font-bold" style={{ color: 'var(--kx-on-surface)' }}>
</h2>
<p className="mt-3 text-sm" style={{ color: 'var(--kx-on-variant)' }}>
. .
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{ hue: 'from-violet-600 to-fuchsia-500', views: '조회수 1.2M', comments: '댓글 4.5K' },
{ hue: 'from-sky-600 to-cyan-500', views: '조회수 850K', comments: '댓글 2.1K' },
{ hue: 'from-pink-600 to-rose-500', views: '조회수 2.4M', comments: '댓글 12K' },
].map((c, i) => (
<div
key={i}
className="overflow-hidden rounded-xl hover:-translate-y-2 transition-transform"
style={{ background: 'var(--kx-surface-mid)' }}
>
<div className={`h-48 bg-gradient-to-br ${c.hue} relative`}>
<div className="absolute inset-0 bg-black/30" />
<svg className="absolute inset-0 w-full h-full opacity-50" preserveAspectRatio="none" viewBox="0 0 400 200">
{[...Array(30)].map((_, j) => (
<rect
key={j}
x={j * 14 + 8}
y={Number((100 - Math.abs(Math.sin((j + i * 5) * 0.5) * 60)).toFixed(3))}
width="6"
height={Number((Math.abs(Math.sin((j + i * 5) * 0.5) * 120) + 10).toFixed(3))}
fill="white"
opacity={0.4}
/>
))}
</svg>
</div>
<div className="p-4 flex items-center gap-4 text-sm" style={{ color: 'var(--kx-on-variant)' }}>
<span>👁 {c.views}</span>
<span>💬 {c.comments}</span>
</div>
</div>
))}
</div>
</div>
</section>
{/* 3. Before / After */}
{/* 2. Before / After */}
<section className="py-24 px-6" style={{ background: 'var(--kx-surface)' }}>
<div className="max-w-7xl mx-auto">
<h2 className="kx-display text-3xl md:text-4xl font-bold text-center mb-16" style={{ color: 'var(--kx-on-surface)' }}>
@@ -289,81 +222,7 @@ export default function Home() {
</div>
</section>
{/* 4. Toolkit */}
<section className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
<div className="max-w-7xl mx-auto">
<div className="mb-16">
<span className="kx-label">TOOLKIT</span>
<h2 className="kx-display text-3xl md:text-4xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
The Toolkit Assets
</h2>
<p className="text-base" style={{ color: 'var(--kx-on-variant)' }}>
AI .
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
{TOOLKIT.map((t) => (
<div
key={t.title}
className="p-6 transition-all hover:-translate-y-1"
style={{
background: 'var(--kx-surface-high)',
borderTop: `2px solid ${t.accent}`,
borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem',
}}
>
<div
className="w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-2xl"
style={{ background: `${t.accent}1a` }}
>
{t.icon}
</div>
<h4 className="kx-display text-lg font-bold mb-2" style={{ color: 'var(--kx-on-surface)' }}>{t.title}</h4>
<p className="text-sm leading-relaxed" style={{ color: 'var(--kx-on-variant)' }}>{t.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* 5. Process 3-step */}
<section className="py-24 px-6" style={{ background: 'var(--kx-surface)' }}>
<div className="max-w-7xl mx-auto">
<h2 className="kx-display text-3xl md:text-4xl font-bold text-center mb-16" style={{ color: 'var(--kx-on-surface)' }}>
3
</h2>
<div className="flex flex-col md:flex-row items-center justify-between gap-10 relative">
<div className="hidden md:block absolute top-10 left-[10%] right-[10%] h-0.5 -z-0"
style={{ background: 'linear-gradient(90deg, rgba(204,151,255,0.3), rgba(83,221,252,0.3), rgba(255,134,195,0.3))' }}
/>
{[
{ step: '01', title: '프롬프트 입력', desc: '아이디어를 한 줄로 설명하세요', icon: '⌨', color: 'var(--kx-primary)' },
{ step: '02', title: 'AI 음악 생성', desc: '30초 만에 완성되는 고퀄리티 음원', icon: '🎵', color: 'var(--kx-secondary)' },
{ step: '03', title: '뮤직비디오 렌더링', desc: '유튜브 쇼츠, 릴스 즉시 업로드', icon: '🎥', color: '#ff86c3' },
].map((s) => (
<div key={s.step} className="flex flex-col items-center gap-4 text-center relative z-10">
<div
className="w-20 h-20 rounded-full flex items-center justify-center text-3xl"
style={{
background: 'var(--kx-surface-mid)',
border: `3px solid ${s.color}`,
boxShadow: `0 0 24px 0 ${s.color}55`,
}}
>
{s.icon}
</div>
<div>
<span className="kx-label" style={{ color: s.color }}>Step {s.step}</span>
<h4 className="kx-display text-xl font-bold mt-2" style={{ color: 'var(--kx-on-surface)' }}>{s.title}</h4>
<p className="text-sm mt-2" style={{ color: 'var(--kx-on-variant)' }}>{s.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* 6. Other Products + CTA */}
{/* 3. Other Products + CTA */}
<section className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">

View File

@@ -14,7 +14,6 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
desc: '첫 AI 음악을 위한 필수 구성',
features: [
'Suno 프롬프트 조합법 20종',
'기본 가사 최적화 템플릿',
'구조 템플릿 PDF 40p',
'저작권 가이드 기본판',
'12개월 무료 업데이트',
@@ -28,11 +27,9 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
highlight: true,
features: [
'입문 전체 포함',
'고급 편집법 (Stems 분리 · 마스터링 프롬프트)',
'MV 비디오 생성 워크플로우 (Runway/Luma/Pika)',
'샘플 프로젝트 1개 (.prj · 영상 포함)',
'이메일/페이지 1:1 Q&A 1회 (30일 이내)',
'유튜브 SEO 템플릿',
'MV 워크플로우 (Runway · Luma · Pika)',
'샘플 프로젝트 1개 (.prj · 영상)',
'1:1 Q&A 1회 + 유튜브 SEO 템플릿',
],
},
master: {
@@ -42,10 +39,9 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
desc: '여러 장르·포맷을 커버하는 마스터피스',
features: [
'프로 전체 포함',
'샘플 프로젝트 다수 (장르별 3종)',
'우선 업데이트 · 베타 기능 선공개',
'저작권 가이드 심화판 + 상업 이용 체크리스트',
'제작 레시피 영상 가이드',
'샘플 프로젝트 장르별 3종',
'저작권 심화판 + 상업 이용 체크리스트',
'우선 업데이트 · 제작 레시피 영상',
],
},
};
@@ -317,38 +313,19 @@ export default function MusicServicePage() {
</div>
</section>
{/* SAMPLES */}
<section id="samples" className="px-6 py-20 lg:px-14 bg-[#0b0530]">
<div className="max-w-5xl mx-auto">
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">
Most Popular Sample
</p>
<h2 className="text-2xl md:text-3xl font-extrabold mb-3">
이 쇼츠, 이 팩으로 만들었어요.
</h2>
<p className="text-slate-400 mb-10">가장 인기 있는 결과물 1개. 전체 샘플은 별도 페이지에서.</p>
<div className="max-w-sm mx-auto mb-8">
<div className="aspect-[9/16] rounded-2xl border border-violet-400/30 bg-gradient-to-br from-violet-900/50 to-slate-900 flex items-center justify-center relative overflow-hidden group cursor-pointer shadow-2xl shadow-violet-900/40">
<div className="absolute inset-0 bg-gradient-to-br from-violet-500/15 to-cyan-500/15 group-hover:from-violet-500/30 group-hover:to-cyan-500/30 transition-all" />
<div className="relative text-center p-6">
<div className="text-6xl mb-4">🎬</div>
<p className="text-xs text-violet-300/80 font-mono tracking-widest">FEATURED</p>
<p className="text-base text-slate-100 mt-2 font-semibold">TOP 샘플 (준비 중)</p>
<p className="text-xs text-slate-400 mt-1">유튜브 쇼츠 임베드 예정</p>
</div>
</div>
</div>
<div className="text-center">
<a
href="/services/music/samples"
className="inline-flex items-center gap-2 px-6 py-3 rounded-full border border-violet-400/40 bg-violet-500/10 hover:bg-violet-500/20 text-sm font-semibold text-violet-200 transition"
>
전체 샘플 갤러리 보기
<span aria-hidden>→</span>
</a>
{/* SAMPLES — 컴팩트 링크 */}
<section id="samples" className="px-6 py-12 lg:px-14 bg-[#0b0530] border-t border-white/5">
<div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-1">Samples</p>
<h2 className="text-xl md:text-2xl font-extrabold">이 팩으로 만든 실제 쇼츠들</h2>
</div>
<Link
href="/services/music/samples"
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-violet-400/40 bg-violet-500/10 hover:bg-violet-500/20 text-sm font-semibold text-violet-200 transition whitespace-nowrap"
>
전체 샘플 갤러리 →
</Link>
</div>
</section>
@@ -381,28 +358,6 @@ export default function MusicServicePage() {
</div>
</section>
{/* FINAL CTA */}
<section className="px-6 py-20 lg:px-14 bg-gradient-to-br from-violet-900 via-slate-950 to-[#0b0530]">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-tight" style={{ wordBreak: 'keep-all' }}>
오늘 밤,
<br />
<span className="bg-gradient-to-r from-violet-300 via-pink-200 to-cyan-300 bg-clip-text text-transparent">
첫 쇼츠를 업로드하세요.
</span>
</h2>
<p className="text-slate-400 text-lg mb-10">
₩39,000부터 · 12개월 무료 업데이트 · 즉시 다운로드
</p>
<a
href="#pricing"
className="inline-flex items-center gap-2 bg-violet-600 hover:bg-violet-500 text-white px-12 py-5 rounded-xl font-extrabold text-base transition-colors shadow-[0_0_60px_rgba(139,92,246,0.5)]"
>
팩 선택하기 →
</a>
</div>
</section>
{/* Sticky 바텀 CTA */}
<div
className="fixed bottom-0 inset-x-0 z-40 border-t border-white/10 backdrop-blur-md"