gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(phase3a): 음악 랜딩·샘플 라이트 재스킨

Browse Source 
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>
This commit is contained in:
gahusb
2026-07-03 13:09:27 +09:00
parent 895b33d83d
commit 7cd63a3868
2 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/music/samples/page.tsx
View File

@@ -27,17 +27,17 @@ const SAMPLES: Sample[] = [
export default function MusicSamplesPage() {
return (
<div className="px-6 py-20 lg:px-14" style={{ background: 'var(--kx-surface)' }}>
<div className="px-6 py-20 lg:px-14" style={{ background: 'var(--jsm-bg)' }}>
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<span className="kx-label">SAMPLE GALLERY</span>
<h1 className="kx-display text-3xl md:text-5xl font-bold mt-3 mb-4" style={{ color: 'var(--kx-on-surface)' }}>
<h1 className="kx-display text-3xl md:text-5xl font-bold mt-3 mb-4" style={{ color: 'var(--jsm-ink)' }}>
AI 음악·뮤비 샘플 모음
</h1>
<p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--kx-on-variant)' }}>
<p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--jsm-ink-soft)' }}>
팩 워크플로우로 제작된 결과물입니다. 장르별로 다양한 톤을 확인해보세요.
<br className="hidden md:block" />
<span className="text-xs" style={{ color: 'var(--kx-on-variant)' }}>
<span className="text-xs" style={{ color: 'var(--jsm-ink-soft)' }}>
일부 샘플은 런칭 직후 순차 공개됩니다.
</span>
</p>
@@ -47,30 +47,36 @@ export default function MusicSamplesPage() {
{SAMPLES.map((s) => (
<div
key={s.id}
className={`group relative aspect-[9/16] rounded-2xl overflow-hidden border ${
s.featured ? 'border-violet-400/50 shadow-2xl shadow-violet-900/40' : 'border-white/10'
className={`relative aspect-[9/16] rounded-2xl overflow-hidden border ${
s.featured ? 'border-[var(--jsm-accent)] shadow-lg' : 'border-[var(--jsm-line)]'
}`}
style={{ background: 'linear-gradient(135deg, #1a0840 0%, #061228 100%)' }}
style={{ background: 'var(--jsm-surface-alt)' }}
>
<div className="absolute inset-0 bg-gradient-to-br from-violet-500/15 to-cyan-500/10 group-hover:from-violet-500/25 group-hover:to-cyan-500/20 transition-all" />
{s.featured && (
<span
className="absolute top-3 left-3 z-10 text-[10px] px-2 py-1 rounded-full font-semibold tracking-widest"
style={{ background: 'rgba(204,151,255,0.2)', color: 'var(--kx-primary)', border: '1px solid rgba(204,151,255,0.5)' }}
style={{ background: 'var(--jsm-accent-soft)', color: 'var(--jsm-accent)', border: '1px solid var(--jsm-accent)' }}
>
TOP
</span>
)}
<div className="absolute inset-0 flex flex-col items-center justify-center text-center p-5">
<div className="text-5xl mb-3 opacity-80 group-hover:scale-110 transition-transform">🎬</div>
<p className="text-[10px] md:text-xs font-mono tracking-widest text-violet-300/80 mb-1">{s.genre.toUpperCase()}</p>
<p className="text-sm md:text-base font-semibold" style={{ color: 'var(--kx-on-surface)' }}>
<svg
className="w-10 h-10 mb-3 opacity-80"
fill="none"
stroke="var(--jsm-accent)"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.75 10.5l4.72-2.72a.75.75 0 011.28.53v9.38a.75.75 0 01-1.28.53l-4.72-2.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
</svg>
<p className="text-[10px] md:text-xs font-mono tracking-widest mb-1" style={{ color: 'var(--jsm-accent)' }}>{s.genre.toUpperCase()}</p>
<p className="text-sm md:text-base font-semibold" style={{ color: 'var(--jsm-ink)' }}>
{s.title}
</p>
<p className="text-xs mt-1" style={{ color: 'var(--kx-on-variant)' }}>{s.duration}</p>
<p className="text-[10px] mt-3 opacity-60" style={{ color: 'var(--kx-on-variant)' }}>
<p className="text-xs mt-1" style={{ color: 'var(--jsm-ink-soft)' }}>{s.duration}</p>
<p className="text-[10px] mt-3 opacity-60" style={{ color: 'var(--jsm-ink-soft)' }}>
{s.embedId ? '영상 재생' : '영상 준비 중'}
</p>
</div>
@@ -79,19 +85,20 @@ export default function MusicSamplesPage() {
</div>
<div
className="mt-16 text-center p-10 kx-glass"
style={{ border: '1px solid rgba(204,151,255,0.12)', borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem' }}
className="mt-16 text-center px-8 py-16 rounded-3xl"
style={{ background: 'var(--jsm-navy)' }}
>
<span className="kx-label">NEXT</span>
<h2 className="kx-display text-2xl md:text-3xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
<span className="text-[var(--jsm-accent-soft)] text-xs font-bold uppercase tracking-widest">NEXT</span>
<h2 className="text-2xl md:text-3xl font-bold mt-3 mb-3 text-white">
내 채널에도 이런 쇼츠 올리고 싶다면
</h2>
<p className="text-sm mb-6" style={{ color: 'var(--kx-on-variant)' }}>
<p className="text-sm mb-6 text-white/70">
동일 워크플로우 팩 ₩39,000부터.
</p>
<Link
href="/music/packs#pricing"
className="kx-btn-primary px-8 py-3.5 rounded-full text-sm inline-flex"
className="inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-semibold transition-transform duration-200 hover:translate-y-[-1px]"
style={{ color: 'var(--jsm-navy)' }}
>
팩 가격 보기
</Link>