gahusb
7cd63a3868
app/music/page.tsx·app/music/samples/page.tsx 순수 시각 변경(className/style만). 다크 히어로(bg-black/gradient)와 샘플 카드의 violet 그라데이션·블러 글래스 CTA 밴드를 --jsm-navy/accent/accent-soft/surface-alt/line/ink 토큰으로 치환해 사주·showcase 재스킨과 동일한 navy 밴드 무테두리 flat + 흰 CTA 관용구로 정렬. 영상 이모지는 인라인 SVG 아이콘으로 교체. 데이터·구조는 변경 없음. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import Link from 'next/link';
|
|
import type { Metadata } from 'next';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Music — AI 음악 제품',
|
|
};
|
|
|
|
const CARDS = [
|
|
{
|
|
href: '/music/packs',
|
|
label: '팩 상세',
|
|
desc: '입문 ₩39,000부터 — Suno 프롬프트북 + 뮤비 워크플로우 + SEO 템플릿',
|
|
key: 'packs',
|
|
},
|
|
{
|
|
href: '/music/samples',
|
|
label: '샘플 갤러리',
|
|
desc: '실제 결과물 — 장르별 데모 + 가사 + 영상 미리보기',
|
|
key: 'samples',
|
|
},
|
|
{
|
|
href: '/music/studio',
|
|
label: 'AI 스튜디오',
|
|
desc: 'Suno API 연동 — 직접 트랙 생성 (베타)',
|
|
key: 'studio',
|
|
},
|
|
];
|
|
|
|
export default function MusicHub() {
|
|
return (
|
|
<div className="min-h-screen bg-[var(--jsm-bg)]">
|
|
<section className="relative w-full min-h-[60vh] flex items-center justify-center px-6 bg-[var(--jsm-navy)]">
|
|
<div className="relative z-10 max-w-3xl mx-auto text-center">
|
|
<p className="font-mono text-[11px] tracking-widest uppercase text-[var(--jsm-accent-soft)] mb-4">
|
|
Music
|
|
</p>
|
|
<h1
|
|
className="kx-display text-4xl md:text-6xl font-bold mb-5 text-white"
|
|
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
|
>
|
|
AI 음악 제품
|
|
</h1>
|
|
<p className="text-base md:text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
|
|
Suno 프롬프트 + 뮤직비디오 워크플로우 + 유튜브 SEO 템플릿. 한 팩에 담긴 4단계 워크플로우로 1시간 안에 결과물 완성.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 px-6">
|
|
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
{CARDS.map((c) => (
|
|
<Link
|
|
key={c.key}
|
|
href={c.href}
|
|
className="rounded-2xl border border-[var(--jsm-line)] bg-[var(--jsm-surface)] p-7 transition-colors hover:border-[var(--jsm-accent)] hover:bg-[var(--jsm-surface-alt)] flex flex-col"
|
|
style={{ textDecoration: 'none' }}
|
|
>
|
|
<h2 className="kx-display text-xl md:text-2xl font-bold text-[var(--jsm-ink)] mb-3">
|
|
{c.label}
|
|
</h2>
|
|
<p className="text-sm md:text-base text-[var(--jsm-ink-soft)] leading-relaxed flex-1">
|
|
{c.desc}
|
|
</p>
|
|
<span aria-hidden="true" className="mt-4 text-[var(--jsm-ink-faint)] text-xs">→</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|