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

@@ -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"