feat(home): Liquid Glass + Jua 폰트로 헤더·푸터·홈·뮤직 페이지 전환
- layout.tsx: Bagel/Inter/Manrope/SpaceGrotesk → Jua 단일화 + GlassFilter 마운트 - globals.css: 글래스 효과·Jua 폰트 변수 - TopNav: 알약형 글래스 헤더 (스크롤 시 max-w-3xl 축소) - PublicShell: 푸터 정돈 - 홈 page.tsx: hero 영상 배경 + GlassButton CTA + 트윗 마퀴 - 뮤직 page.tsx: SparklesOverlay + 3D card effect Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -13,36 +13,103 @@ export default function PublicShell({ children }: { children: React.ReactNode })
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<footer
|
||||
className="mt-20 px-6 lg:px-12 py-10 text-xs"
|
||||
style={{
|
||||
background: 'var(--kx-surface-low)',
|
||||
color: 'var(--kx-on-variant)',
|
||||
borderTop: '1px solid rgba(255,255,255,0.05)',
|
||||
}}
|
||||
>
|
||||
<footer className="bg-black text-white/70 px-6 lg:px-12 py-14 text-sm border-t border-white/10">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row justify-between gap-6 mb-5">
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-12 md:gap-8">
|
||||
{/* 좌 — JSM + social */}
|
||||
<div>
|
||||
<p className="kx-display font-extrabold text-lg mb-2" style={{ color: 'var(--kx-on-surface)' }}>쟁승메이드</p>
|
||||
<p className="leading-relaxed max-w-md">
|
||||
AI 음악·블로그 자동화·사주 분석까지. 현직 엔지니어가 직접 설계·운영하는 AI 크리에이티브 스토어.
|
||||
<p
|
||||
className="kx-display font-bold text-2xl mb-5 text-white tracking-tight"
|
||||
style={{ letterSpacing: '0.02em' }}
|
||||
>
|
||||
JSM
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-2">
|
||||
<Link href="/legal/terms" className="hover:text-white transition">이용약관</Link>
|
||||
<Link href="/legal/privacy" className="hover:text-white transition">개인정보처리방침</Link>
|
||||
<Link href="/legal/refund" className="hover:text-white transition">환불 정책</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href="https://www.youtube.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="YouTube"
|
||||
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://x.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="X (Twitter)"
|
||||
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.instagram.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
|
||||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:bgg8988@gmail.com"
|
||||
aria-label="Email"
|
||||
className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||
<path d="m3 7 9 6 9-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-5 border-t flex flex-wrap gap-x-4 gap-y-1 leading-relaxed" style={{ borderColor: 'rgba(255,255,255,0.05)' }}>
|
||||
|
||||
{/* 우 — Link groups */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-10">
|
||||
<div>
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">Product</p>
|
||||
<ul className="space-y-2.5">
|
||||
<li><Link href="/services/music" className="hover:text-white transition">AI 음악 팩</Link></li>
|
||||
<li><Link href="/services/music/samples" className="hover:text-white transition">샘플 갤러리</Link></li>
|
||||
<li><Link href="/services/music#pricing" className="hover:text-white transition">가격</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">Company</p>
|
||||
<ul className="space-y-2.5">
|
||||
<li><Link href="/saju" className="hover:text-white transition">AI 사주</Link></li>
|
||||
<li><Link href="/services/blog" className="hover:text-white transition">블로그 자동화</Link></li>
|
||||
<li><a href="mailto:bgg8988@gmail.com" className="hover:text-white transition">문의하기</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">Legal</p>
|
||||
<ul className="space-y-2.5">
|
||||
<li><Link href="/legal/terms" className="hover:text-white transition">이용약관</Link></li>
|
||||
<li><Link href="/legal/privacy" className="hover:text-white transition">개인정보처리방침</Link></li>
|
||||
<li><Link href="/legal/refund" className="hover:text-white transition">환불 정책</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 pt-6 border-t border-white/10 flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/40 leading-relaxed">
|
||||
<span>대표자: 박재오</span>
|
||||
<span>사업자등록번호: 267-53-00822</span>
|
||||
<span>주소: 서울시 동작구 여의대방로22아길 22, 1동 109호</span>
|
||||
<span>전화: 010-3907-1392</span>
|
||||
<span>이메일: bgg8988@gmail.com</span>
|
||||
<span>서울시 동작구 여의대방로22아길 22, 1동 109호</span>
|
||||
<span>010-3907-1392</span>
|
||||
<span>bgg8988@gmail.com</span>
|
||||
</div>
|
||||
<p className="mt-3">© 2026 쟁승메이드. All rights reserved.</p>
|
||||
<p className="mt-3 text-xs text-white/40">© 2026 쟁승메이드. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@@ -41,15 +41,25 @@ export default function TopNav() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={`fixed top-0 inset-x-0 z-50 h-20 px-6 lg:px-12 flex items-center justify-between transition-all ${
|
||||
scrolled ? 'backdrop-blur-md' : ''
|
||||
}`}
|
||||
<header
|
||||
className={[
|
||||
'fixed left-1/2 -translate-x-1/2 z-50 w-full border-b border-transparent',
|
||||
'md:rounded-full md:border transition-all duration-300 ease-out',
|
||||
scrolled
|
||||
? 'top-4 max-w-3xl md:shadow-[0_10px_40px_rgba(0,0,0,0.35)] md:border-white/10'
|
||||
: 'top-0 max-w-none',
|
||||
].join(' ')}
|
||||
style={{
|
||||
background: scrolled ? 'rgba(6,14,32,0.7)' : 'transparent',
|
||||
borderBottom: 'none',
|
||||
boxShadow: scrolled ? '0 8px 32px 0 rgba(6,14,32,0.35)' : 'none',
|
||||
background: scrolled ? 'rgba(10,10,12,0.6)' : 'transparent',
|
||||
backdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
|
||||
WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
|
||||
}}
|
||||
>
|
||||
<nav
|
||||
className={[
|
||||
'flex w-full items-center justify-between transition-all duration-300 ease-out',
|
||||
scrolled ? 'h-14 px-4 md:px-3' : 'h-20 px-6 lg:px-12',
|
||||
].join(' ')}
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
@@ -104,6 +114,7 @@ export default function TopNav() {
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* 모바일 오버레이 */}
|
||||
{open && (
|
||||
|
||||
@@ -56,8 +56,8 @@
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-secondary: var(--secondary);
|
||||
--font-sans: 'CookieRun', -apple-system, system-ui, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, monospace;
|
||||
--font-sans: var(--font-jua), 'Jua', -apple-system, system-ui, sans-serif;
|
||||
--font-mono: var(--font-jua), 'Jua', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -71,11 +71,16 @@ html {
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: 'CookieRun', -apple-system, system-ui, sans-serif;
|
||||
font-family: var(--font-jua), 'Jua', -apple-system, system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* font-mono utility → Jua 통일 */
|
||||
.font-mono, code, pre, kbd, samp {
|
||||
font-family: var(--font-jua), 'Jua', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
/* Dashboard layout */
|
||||
.dashboard-layout {
|
||||
display: flex;
|
||||
@@ -102,18 +107,18 @@ body {
|
||||
.kx-section {
|
||||
background: var(--kx-surface);
|
||||
color: var(--kx-on-surface);
|
||||
font-family: 'Space Grotesk', 'Inter', 'CookieRun', system-ui, sans-serif;
|
||||
font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
|
||||
}
|
||||
.kx-section p, .kx-section li, .kx-section span:not(.kx-label) {
|
||||
color: var(--kx-on-variant);
|
||||
}
|
||||
.kx-display {
|
||||
font-family: var(--font-kx-hero), 'Bagel Fat One', 'Space Grotesk', 'CookieRun', system-ui, sans-serif;
|
||||
font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--kx-on-surface);
|
||||
color: inherit;
|
||||
}
|
||||
.kx-label {
|
||||
font-family: 'Manrope', 'Inter', system-ui, sans-serif;
|
||||
font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -201,6 +206,34 @@ body {
|
||||
.reveal-d4 { transition-delay: 320ms; }
|
||||
.reveal-d5 { transition-delay: 400ms; }
|
||||
|
||||
/* Marquee */
|
||||
@keyframes marquee-left {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
@keyframes marquee-right {
|
||||
0% { transform: translateX(-50%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
gap: 1.25rem;
|
||||
animation: marquee-left 60s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
.marquee-track-reverse {
|
||||
animation-name: marquee-right;
|
||||
animation-duration: 75s;
|
||||
}
|
||||
.marquee-viewport:hover .marquee-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.marquee-mask {
|
||||
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||||
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import type { Metadata } from "next";
|
||||
import Script from "next/script";
|
||||
import { Space_Grotesk, Inter, Manrope, Bagel_Fat_One } from "next/font/google";
|
||||
import { Jua } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import DashboardShell from "./components/DashboardShell";
|
||||
import { GlassFilter } from "./components/LiquidGlass";
|
||||
|
||||
const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-kx-display", display: "swap" });
|
||||
const inter = Inter({ subsets: ["latin"], variable: "--font-kx-body", display: "swap" });
|
||||
const manrope = Manrope({ subsets: ["latin"], variable: "--font-kx-label", display: "swap" });
|
||||
const bagel = Bagel_Fat_One({ weight: "400", subsets: ["latin"], variable: "--font-kx-hero", display: "swap" });
|
||||
const jua = Jua({
|
||||
weight: "400",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-jua",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
@@ -104,7 +107,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="ko" data-scroll-behavior="smooth" className={`${spaceGrotesk.variable} ${inter.variable} ${manrope.variable} ${bagel.variable}`}>
|
||||
<html lang="ko" data-scroll-behavior="smooth" className={jua.variable}>
|
||||
<head>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
@@ -127,6 +130,7 @@ export default function RootLayout({
|
||||
</Script>
|
||||
</head>
|
||||
<body className="antialiased">
|
||||
<GlassFilter />
|
||||
<DashboardShell>{children}</DashboardShell>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
440
app/page.tsx
440
app/page.tsx
@@ -2,15 +2,10 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import ContactModal from './components/ContactModal';
|
||||
import { GlassButton } from './components/LiquidGlass';
|
||||
import { trackCTAClick } from '../lib/gtag';
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
쟁승메이드 홈 v6 — AI Music Creator Landing
|
||||
참조: Downloads/stitch_ai_mv/ai_music_creator_landing_page
|
||||
═══════════════════════════════════════════════════ */
|
||||
|
||||
const BEFORE = [
|
||||
'작곡 공부에만 최소 6개월 소요',
|
||||
'영상 편집 프로그램 학습의 높은 장벽',
|
||||
@@ -18,6 +13,28 @@ const BEFORE = [
|
||||
'곡 하나 완성에 드는 수백만 원의 외주비',
|
||||
];
|
||||
|
||||
const TWEETS_ROW_A = [
|
||||
{ name: '김민재', handle: 'minjae_shorts', time: '2h', body: '작곡 하나 못 하던 내가 3일 만에 쇼츠 채널 열었다. 프롬프트북 반칙 수준 ㄹㅇ' },
|
||||
{ name: '이소영', handle: 'cafe_sohyang', time: '5h', body: '매장 BGM 직접 만들어요. 저작권 고민 없이 매달 플레이리스트 갈아끼우는 게 신기함.' },
|
||||
{ name: '박도현', handle: 'dohyun_side', time: '1d', body: '퇴근 후 1시간 = 쇼츠 한 편. 애드센스 첫 수익이 3주 만에 꽂혔습니다. 팩값 회수 완료.' },
|
||||
{ name: '정유진', handle: 'yujin_indie', time: '2d', body: '데모 작업 시간이 1/5로. 레퍼런스 탐색 → MV까지 한 번에. 인디 뮤지션들 다 써야 함.' },
|
||||
{ name: '최현우', handle: 'hyunwoo_tube', time: '3d', body: '구독자 정체기였는데 AI 뮤비 시리즈로 알고리즘 탑승. 조회수 월 +320%.' },
|
||||
{ name: '한지원', handle: 'jiwon_studio', time: '4d', body: '팩 안에 든 저작권 체크리스트가 실질적. Suno 약관 읽는 시간 아꼈다.' },
|
||||
{ name: '오세린', handle: 'serin_mv', time: '5d', body: 'Runway 프리셋 그대로 써도 퀄 나옴. 프롬프트 설계가 반이네요.' },
|
||||
{ name: '강태윤', handle: 'taeyun_ads', time: '6d', body: '광고 BGM 10개 찍어서 외주 드렸더니 클라이언트 반응이 달라졌습니다.' },
|
||||
];
|
||||
|
||||
const TWEETS_ROW_B = [
|
||||
{ name: '문가은', handle: 'gaeun_beats', time: '3h', body: '가사 생성 템플릿이 진짜 핵심. 한글 랩 가사 붙일 때 막히던 거 뚫렸어요.' },
|
||||
{ name: '류현석', handle: 'hyun_creator', time: '7h', body: '쇼츠 업로드 루틴이 1시간 안에 끝남. 주말마다 10편씩 쌓고 있습니다.' },
|
||||
{ name: '배수진', handle: 'sujin_pop', time: '1d', body: 'K-POP 스타일 프롬프트 조합 충격. 레퍼런스 없이도 그 느낌이 나옴.' },
|
||||
{ name: '송재훈', handle: 'jaehun_lab', time: '2d', body: '1:1 Q&A 답변 속도 미쳤어요. 당일 회신 + 실무 디테일까지.' },
|
||||
{ name: '조은비', handle: 'eunbi_vlog', time: '3d', body: '브이로그 BGM 자작하니까 조회수 + 체류시간 둘 다 올라감. 데이터가 말함.' },
|
||||
{ name: '신도윤', handle: 'doyoon_snd', time: '4d', body: '스템 분리본이 포함된 게 진짜 크다. 믹싱 작업 훨씬 편해짐.' },
|
||||
{ name: '윤채원', handle: 'chaewon_art', time: '5d', body: 'Midjourney 프롬프트 풀 가치가 팩값 넘음. 그냥 사세요.' },
|
||||
{ name: '임준혁', handle: 'junhyuk_tune', time: '6d', body: '업데이트 진짜로 오네요. 2주 만에 V4.5 프롬프트 가이드 추가됨.' },
|
||||
];
|
||||
|
||||
const AFTER = [
|
||||
'단 1시간 만에 프로급 음원 & 영상 완성',
|
||||
'드래그 앤 드롭 수준의 직관적인 워크플로우',
|
||||
@@ -29,7 +46,7 @@ export default function Home() {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-x-hidden">
|
||||
<div className="relative overflow-x-hidden bg-black text-white">
|
||||
<ContactModal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
@@ -38,184 +55,170 @@ export default function Home() {
|
||||
/>
|
||||
|
||||
{/* 1. Hero */}
|
||||
<section className="relative px-6 py-24 lg:py-32 overflow-hidden">
|
||||
<Image
|
||||
src="/hero_back.webp"
|
||||
alt=""
|
||||
fill
|
||||
priority
|
||||
sizes="100vw"
|
||||
className="object-cover object-center pointer-events-none select-none"
|
||||
style={{ opacity: 0.35 }}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(circle at 50% 30%, rgba(156,72,234,0.28) 0%, transparent 60%), linear-gradient(180deg, rgba(6,14,32,0.35) 0%, rgba(6,14,32,0.85) 75%, var(--kx-surface) 100%)',
|
||||
}}
|
||||
<section className="relative w-full h-screen min-h-[640px] flex items-center justify-center px-6 bg-black border-b border-white/10 overflow-hidden">
|
||||
<video
|
||||
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
|
||||
src="/hero-bg.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="auto"
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/55 pointer-events-none" aria-hidden />
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<span className="kx-label inline-block mb-6">AI Music Pack · 2026</span>
|
||||
<h1 className="kx-display text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-[1.05]" style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}>
|
||||
한 줄이면,
|
||||
<h1
|
||||
className="kx-display text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-[1.05]"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
나의 이야기가
|
||||
<br />
|
||||
<span className="kx-gradient-text">노래가 됩니다.</span>
|
||||
노래가 됩니다.
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
<p className="text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed text-white/70">
|
||||
프롬프트부터 뮤직비디오까지.
|
||||
<br className="sm:hidden" />
|
||||
{' '}AI 음악 제작의 모든 순서를 한 팩에 담았습니다.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4 mb-16">
|
||||
<Link
|
||||
<GlassButton
|
||||
href="/services/music#pricing"
|
||||
onClick={() => trackCTAClick('home_v6_hero_primary')}
|
||||
className="kx-btn-primary px-8 py-4 rounded-full text-base inline-flex items-center justify-center gap-2"
|
||||
tint="rgba(255,255,255,0.18)"
|
||||
className="text-base"
|
||||
>
|
||||
₩39,000 팩 자세히 보기
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/music/samples"
|
||||
className="px-8 py-4 rounded-full text-base font-bold inline-flex items-center justify-center"
|
||||
style={{
|
||||
background: 'rgba(25,37,64,0.4)',
|
||||
border: '1px solid rgba(64,72,93,0.3)',
|
||||
color: 'var(--kx-secondary)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
샘플 결과 보기
|
||||
</Link>
|
||||
<span className="text-white">Try now</span>
|
||||
</GlassButton>
|
||||
<GlassButton href="/services/music/samples" tint="rgba(255,255,255,0.08)" className="text-base">
|
||||
<span className="text-white">샘플 결과 보기</span>
|
||||
</GlassButton>
|
||||
</div>
|
||||
|
||||
{/* Price tier mini summary */}
|
||||
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-center items-stretch sm:items-center gap-2 sm:gap-3 mb-16 text-sm max-w-md mx-auto sm:max-w-none">
|
||||
<span
|
||||
className="px-4 py-2 rounded-full"
|
||||
style={{ background: 'rgba(25,37,64,0.5)', border: '1px solid rgba(255,255,255,0.06)', color: 'var(--kx-on-variant)' }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Features */}
|
||||
<section className="py-24 px-6 bg-white text-black border-b border-black/10">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-20">
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-black/50 mb-4">
|
||||
Features
|
||||
</p>
|
||||
<h2
|
||||
className="kx-display text-3xl md:text-5xl font-bold text-black"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
입문 <strong style={{ color: 'var(--kx-on-surface)' }}>₩39,000</strong>
|
||||
</span>
|
||||
<span
|
||||
className="px-4 py-2 rounded-full"
|
||||
style={{
|
||||
background: 'rgba(156,72,234,0.15)',
|
||||
border: '1px solid rgba(204,151,255,0.4)',
|
||||
color: 'var(--kx-on-surface)',
|
||||
boxShadow: '0 0 20px rgba(156,72,234,0.25)',
|
||||
}}
|
||||
>
|
||||
🔥 프로 <strong>₩99,000</strong> <span style={{ color: 'var(--kx-primary)' }}>가장 많이 팔림</span>
|
||||
</span>
|
||||
<span
|
||||
className="px-4 py-2 rounded-full"
|
||||
style={{ background: 'rgba(25,37,64,0.5)', border: '1px solid rgba(255,255,255,0.06)', color: 'var(--kx-on-variant)' }}
|
||||
>
|
||||
마스터 <strong style={{ color: 'var(--kx-on-surface)' }}>₩149,000</strong>
|
||||
</span>
|
||||
한 팩에 담긴 3가지 무기.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Demo Showcase Card */}
|
||||
<div className="space-y-20 lg:space-y-28">
|
||||
{[
|
||||
{
|
||||
label: '01 · Prompt',
|
||||
title: '프롬프트 한 줄이 곡이 됩니다.',
|
||||
desc: '장르·무드·보컬 톤을 조합한 20+종 프롬프트 북. 복붙 한 번으로 Suno가 이해하는 구조로 변환됩니다.',
|
||||
video: '/feature-prompt.mp4',
|
||||
},
|
||||
{
|
||||
label: '02 · Visual',
|
||||
title: '비트에 맞춰 영상이 붙습니다.',
|
||||
desc: 'Midjourney·Runway·Luma 워크플로우. 가사와 비트를 싱크하는 9:16 쇼츠·16:9 풀버전을 바로 뽑아낼 수 있습니다.',
|
||||
video: '/feature-visual.mp4',
|
||||
},
|
||||
{
|
||||
label: '03 · Publish',
|
||||
title: '업로드 직전까지 마무리됩니다.',
|
||||
desc: '유튜브 제목·해시태그·설명란 SEO 템플릿. 복사-붙여넣기만으로 첫 쇼츠가 당일 채널에 올라갑니다.',
|
||||
video: null,
|
||||
},
|
||||
].map((f, i) => {
|
||||
const reverse = i % 2 === 1;
|
||||
return (
|
||||
<div
|
||||
className="relative max-w-5xl mx-auto overflow-hidden"
|
||||
style={{
|
||||
borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem',
|
||||
border: '1px solid rgba(64,72,93,0.15)',
|
||||
background: 'var(--kx-surface-low)',
|
||||
boxShadow: '0 20px 80px 0 rgba(156,72,234,0.15)',
|
||||
}}
|
||||
key={f.label}
|
||||
className={`grid lg:grid-cols-2 gap-10 lg:gap-16 items-center ${reverse ? 'lg:[&>*:first-child]:order-2' : ''}`}
|
||||
>
|
||||
<div className="aspect-video relative flex items-center justify-center group cursor-pointer">
|
||||
{/* 배경 그라디언트 + 그리드 */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(135deg, #0b0b2b 0%, #1a0840 50%, #061228 100%)',
|
||||
opacity: 0.9,
|
||||
}}
|
||||
/>
|
||||
<svg className="absolute inset-0 w-full h-full opacity-30" preserveAspectRatio="none" viewBox="0 0 1200 500">
|
||||
<defs>
|
||||
<linearGradient id="wg" x1="0%" x2="100%">
|
||||
<stop offset="0%" stopColor="#cc97ff" />
|
||||
<stop offset="100%" stopColor="#53ddfc" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{[...Array(40)].map((_, i) => (
|
||||
<rect
|
||||
key={i}
|
||||
x={i * 30 + 10}
|
||||
y={Number((250 - Math.abs(Math.sin(i * 0.6) * 120)).toFixed(3))}
|
||||
width="10"
|
||||
height={Number((Math.abs(Math.sin(i * 0.6) * 240) + 20).toFixed(3))}
|
||||
fill="url(#wg)"
|
||||
opacity={Number((0.4 + Math.sin(i * 0.3) * 0.3).toFixed(3))}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
|
||||
<div
|
||||
className="relative z-10 p-8 rounded-full border group-hover:scale-110 transition-transform"
|
||||
style={{
|
||||
background: 'rgba(204,151,255,0.15)',
|
||||
borderColor: 'rgba(204,151,255,0.5)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
}}
|
||||
<div>
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-black/50 mb-4">
|
||||
{f.label}
|
||||
</p>
|
||||
<h3
|
||||
className="kx-display text-2xl md:text-4xl font-bold mb-5 text-black"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--kx-primary)' }}>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 p-6 text-left"
|
||||
style={{
|
||||
background: 'linear-gradient(to top, var(--kx-surface), transparent)',
|
||||
}}
|
||||
>
|
||||
<span className="kx-label block mb-2">DEMO SHOWCASE</span>
|
||||
<h3 className="kx-display text-xl md:text-2xl font-bold" style={{ color: 'var(--kx-on-surface)' }}>
|
||||
쟁승메이드로 제작된 K-POP 스타일 MV 샘플
|
||||
{f.title}
|
||||
</h3>
|
||||
<p className="text-base md:text-lg text-black/70 leading-relaxed max-w-lg">
|
||||
{f.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative aspect-video rounded-2xl border border-black/15 bg-black/5 overflow-hidden">
|
||||
{f.video ? (
|
||||
<video
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
src={f.video}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="auto"
|
||||
aria-hidden
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="font-mono text-[11px] tracking-widest uppercase text-black/40">
|
||||
Video Placeholder
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Before / After */}
|
||||
<section className="py-24 px-6" style={{ background: 'var(--kx-surface)' }}>
|
||||
{/* 3. Before / After */}
|
||||
<section className="py-24 px-6 bg-black text-white border-b border-white/10">
|
||||
<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)' }}>
|
||||
압도적인 제작 효율의 차이
|
||||
<div className="text-center mb-14">
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-4">
|
||||
Efficiency
|
||||
</p>
|
||||
<h2
|
||||
className="kx-display text-3xl md:text-5xl font-bold"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
압도적인 제작 효율의 차이.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="kx-glass kx-folder relative" style={{ borderTop: '2px solid rgba(255,110,132,0.4)' }}>
|
||||
<span className="kx-label absolute top-4 right-4" style={{ color: '#d73357' }}>MANUAL PROCESS</span>
|
||||
<h3 className="kx-display text-2xl font-bold mb-6 flex items-center gap-2" style={{ color: '#ff6e84' }}>
|
||||
⚠ Before
|
||||
</h3>
|
||||
<div className="p-8 rounded-2xl border border-white/15 bg-white/[0.02]">
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-3">
|
||||
Manual Process
|
||||
</p>
|
||||
<h3 className="text-2xl font-bold mb-6 text-white/60">Before</h3>
|
||||
<ul className="space-y-3">
|
||||
{BEFORE.map((t) => (
|
||||
<li key={t} className="flex items-start gap-3 text-sm" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
<span style={{ color: '#d73357' }}>✗</span>
|
||||
<li key={t} className="flex items-start gap-3 text-sm text-white/60">
|
||||
<span className="text-white/40">·</span>
|
||||
<span>{t}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="kx-glass kx-folder kx-glow relative" style={{ borderTop: '2px solid rgba(83,221,252,0.4)' }}>
|
||||
<span className="kx-label absolute top-4 right-4">AI POWERED</span>
|
||||
<h3 className="kx-display text-2xl font-bold mb-6 flex items-center gap-2" style={{ color: 'var(--kx-secondary)' }}>
|
||||
⚡ After
|
||||
</h3>
|
||||
<div className="p-8 rounded-2xl border border-white bg-white text-black">
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-black/60 mb-3">
|
||||
AI Powered
|
||||
</p>
|
||||
<h3 className="text-2xl font-bold mb-6">After</h3>
|
||||
<ul className="space-y-3">
|
||||
{AFTER.map((t) => (
|
||||
<li key={t} className="flex items-start gap-3 text-sm" style={{ color: 'var(--kx-on-surface)' }}>
|
||||
<span style={{ color: 'var(--kx-secondary)' }}>✓</span>
|
||||
<li key={t} className="flex items-start gap-3 text-sm text-black/80">
|
||||
<span className="text-black/50">·</span>
|
||||
<span>{t}</span>
|
||||
</li>
|
||||
))}
|
||||
@@ -225,83 +228,94 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<span className="kx-label">OTHER PRODUCTS</span>
|
||||
<h2 className="kx-display text-3xl md:text-4xl font-bold mt-2" style={{ color: 'var(--kx-on-surface)' }}>
|
||||
박재오가 만든 다른 도구
|
||||
{/* 4. Use Cases — Tweet Marquee */}
|
||||
<section className="py-24 bg-white text-black border-b border-black/10 overflow-hidden">
|
||||
<div className="px-6 max-w-6xl mx-auto">
|
||||
<div className="text-center mb-14">
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-black/50 mb-4">
|
||||
Use Cases
|
||||
</p>
|
||||
<h2
|
||||
className="kx-display text-3xl md:text-5xl font-bold"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
실제로 쓰고 있는 사람들.
|
||||
</h2>
|
||||
<p className="mt-3 text-sm max-w-xl mx-auto" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
현직 엔지니어가 본인 워크플로우에 쓰는 도구를 직접 패키징합니다. 운영·CS도 혼자 책임집니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-5 mb-16">
|
||||
<Link
|
||||
href="/services/blog"
|
||||
className="p-8 transition-all hover:-translate-y-1"
|
||||
style={{
|
||||
background: 'var(--kx-surface-high)',
|
||||
borderTop: '2px solid var(--kx-secondary)',
|
||||
borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<span className="kx-label" style={{ color: 'var(--kx-secondary)' }}>DIGITAL PACK · ₩29,000</span>
|
||||
<h3 className="kx-display text-2xl font-bold mt-3 mb-2" style={{ color: 'var(--kx-on-surface)' }}>블로그 자동화 팩</h3>
|
||||
<p className="text-sm" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
프롬프트 조합법 + 템플릿 PDF + 샘플. 쿠팡파트너스·애드포스트 수익화 루틴 구축.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/saju"
|
||||
className="p-8 transition-all hover:-translate-y-1"
|
||||
style={{
|
||||
background: 'var(--kx-surface-high)',
|
||||
borderTop: '2px solid #40ceed',
|
||||
borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<span className="kx-label" style={{ color: '#40ceed' }}>FREE TOOL</span>
|
||||
<h3 className="kx-display text-2xl font-bold mt-3 mb-2" style={{ color: 'var(--kx-on-surface)' }}>AI 사주 분석</h3>
|
||||
<p className="text-sm" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
사주팔자 자동 산출 + Gemini 기반 해석. 검증된 계산 엔진 기반 무료 서비스.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Final CTA — 음악 팩 단일 전환 */}
|
||||
<div
|
||||
className="text-center p-10 kx-glass"
|
||||
style={{ border: '1px solid rgba(204,151,255,0.12)' }}
|
||||
<div className="space-y-5 marquee-mask">
|
||||
{[TWEETS_ROW_A, TWEETS_ROW_B].map((row, rowIdx) => (
|
||||
<div key={rowIdx} className="marquee-viewport overflow-hidden">
|
||||
<div className={`marquee-track ${rowIdx === 1 ? 'marquee-track-reverse' : ''}`}>
|
||||
{[...row, ...row].map((t, i) => (
|
||||
<article
|
||||
key={`${rowIdx}-${i}`}
|
||||
className="shrink-0 w-[320px] sm:w-[360px] p-5 rounded-2xl border border-black/15 bg-black/[0.02]"
|
||||
>
|
||||
<span className="kx-label">START TODAY</span>
|
||||
<h3 className="kx-display text-2xl md:text-3xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
|
||||
오늘 밤, 당신 채널에 첫 AI 뮤비가 올라갈 수 있습니다
|
||||
</h3>
|
||||
<p className="text-sm mb-6 max-w-xl mx-auto" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
<header className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-full bg-black/5 border border-black/15 flex items-center justify-center font-bold text-black">
|
||||
{t.name.charAt(0)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-bold text-black text-sm truncate">{t.name}</p>
|
||||
<p className="font-mono text-[11px] text-black/50 truncate">@{t.handle}</p>
|
||||
</div>
|
||||
<span className="font-mono text-[10px] text-black/40 shrink-0">{t.time}</span>
|
||||
</header>
|
||||
<p
|
||||
className="text-sm leading-relaxed text-black/80"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
{t.body}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. Final CTA — Full-width video */}
|
||||
<section className="relative w-full min-h-[560px] flex items-center justify-center px-6 py-32 bg-black overflow-hidden">
|
||||
<video
|
||||
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
|
||||
src="/hero-bg.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
preload="auto"
|
||||
aria-hidden
|
||||
style={{ filter: 'blur(6px)', transform: 'scale(1.06)' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/55 pointer-events-none" aria-hidden />
|
||||
|
||||
<div className="relative z-10 max-w-2xl mx-auto text-center text-white">
|
||||
<p className="font-mono text-[11px] tracking-widest uppercase text-white/60 mb-5">
|
||||
Start Today
|
||||
</p>
|
||||
<h2
|
||||
className="kx-display text-3xl md:text-5xl font-bold mb-5 leading-[1.1]"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
오늘 밤, 당신 채널에
|
||||
<br />
|
||||
첫 AI 뮤비가 올라갑니다.
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-white/75 mb-10 max-w-lg mx-auto">
|
||||
입문 팩 ₩39,000으로 시작. 1시간 워크플로우 + 템플릿 + 저작권 가이드 포함.
|
||||
</p>
|
||||
<Link
|
||||
<div className="flex justify-center">
|
||||
<GlassButton
|
||||
href="/services/music#pricing"
|
||||
onClick={() => trackCTAClick('home_v6_final_music')}
|
||||
className="kx-btn-primary px-8 py-3.5 rounded-full text-sm inline-flex"
|
||||
tint="rgba(255,255,255,0.18)"
|
||||
className="text-base"
|
||||
>
|
||||
₩39,000으로 시작하기
|
||||
</Link>
|
||||
<div className="mt-5 text-xs" style={{ color: 'var(--kx-on-variant)' }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
trackCTAClick('home_v6_final_contact');
|
||||
setModalOpen(true);
|
||||
}}
|
||||
className="underline underline-offset-4 hover:text-white transition"
|
||||
>
|
||||
맞춤 협업·외주 문의는 여기
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-white">Try now</span>
|
||||
</GlassButton>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import PurchaseAgreementModal from '../../components/PurchaseAgreementModal';
|
||||
import { SparklesOverlay } from '@/components/ui/sparkles-text';
|
||||
import { CardBody, CardContainer, CardItem } from '@/components/ui/3d-card-effect';
|
||||
|
||||
type Tier = 'starter' | 'pro' | 'master';
|
||||
|
||||
@@ -47,42 +49,10 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
|
||||
};
|
||||
|
||||
const PROCESS = [
|
||||
{
|
||||
num: '01',
|
||||
title: '크리에이티브 디렉팅',
|
||||
subtitle: 'Concept & Lyrics',
|
||||
customer: '원하는 키워드 3개 또는 사연 제공',
|
||||
value: 'ChatGPT·Claude로 Suno가 이해하는 가사·스타일 태그로 변환',
|
||||
result: 'AI 최적화 가사 · 메타데이터 시트',
|
||||
color: 'from-violet-500 to-fuchsia-500',
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: '오디오 엔지니어링',
|
||||
subtitle: 'Music Generation',
|
||||
customer: '결과물 확인 · 방향 피드백',
|
||||
value: 'Suno Custom Mode로 가사 배치·파트·보컬·악기 세밀 조정. 가장 높은 퀄리티가 나올 때까지 프롬프트 깎기',
|
||||
result: '고품질 완곡 (Full Track, 스템 분리본)',
|
||||
color: 'from-fuchsia-500 to-pink-500',
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: '비주얼 마스터링',
|
||||
subtitle: 'AI MV Generation',
|
||||
customer: '-',
|
||||
value: 'Midjourney · Runway · Luma로 음악 분위기에 맞는 이미지·영상 생성. 비트와 가사에 맞춘 싱크 설계',
|
||||
result: '쇼츠(9:16) 또는 유튜브(16:9) 고화질 영상',
|
||||
color: 'from-sky-500 to-cyan-500',
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
title: '퍼블리싱 가이드',
|
||||
subtitle: 'Viral Optimization',
|
||||
customer: '유튜브 업로드',
|
||||
value: '제목·해시태그·설명란(SEO) AI 최적화 템플릿 제공',
|
||||
result: '즉시 업로드 가능한 유튜브 배포 패키지',
|
||||
color: 'from-cyan-500 to-emerald-500',
|
||||
},
|
||||
{ num: '01', subtitle: 'Concept & Lyrics', title: '크리에이티브 디렉팅', result: 'AI 최적화 가사 · 메타데이터 시트' },
|
||||
{ num: '02', subtitle: 'Music Generation', title: '오디오 엔지니어링', result: '고품질 완곡 (Full Track, 스템 분리본)' },
|
||||
{ num: '03', subtitle: 'AI MV Generation', title: '비주얼 마스터링', result: '쇼츠(9:16) 또는 유튜브(16:9) 고화질 영상' },
|
||||
{ num: '04', subtitle: 'Viral Optimization', title: '퍼블리싱 가이드', result: '즉시 업로드 가능한 유튜브 배포 패키지' },
|
||||
];
|
||||
|
||||
const FAQS = [
|
||||
@@ -113,87 +83,17 @@ export default function MusicServicePage() {
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(0);
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-slate-950 text-white">
|
||||
{/* HERO — 결과 중심 2-column */}
|
||||
<section className="px-6 pt-16 pb-14 lg:px-14 bg-slate-950 border-b border-white/5">
|
||||
<div className="max-w-6xl mx-auto grid lg:grid-cols-2 gap-10 lg:gap-14 items-center">
|
||||
{/* 좌: 카피 + CTA */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-5">
|
||||
<span className="inline-flex h-2 w-2 rounded-full bg-violet-400 animate-pulse" />
|
||||
<span className="font-mono text-[11px] tracking-widest uppercase text-violet-300/80">
|
||||
AI MUSIC PACK · v1
|
||||
</span>
|
||||
</div>
|
||||
<h1
|
||||
className="kx-display text-[2.25rem] md:text-[3.25rem] font-extrabold leading-[1.1] mb-5"
|
||||
style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
|
||||
>
|
||||
한 줄이면,
|
||||
<br />
|
||||
<span className="bg-gradient-to-r from-violet-300 to-cyan-300 bg-clip-text text-transparent">
|
||||
노래가 됩니다.
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-slate-300 text-base md:text-lg leading-relaxed mb-8 max-w-lg">
|
||||
Suno 프롬프트, 뮤직비디오 워크플로우, 저작권 가이드.
|
||||
<br className="hidden sm:block" />
|
||||
쇼츠 한 편을 완성하는 모든 것을 한 팩에.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<a
|
||||
href="#pricing"
|
||||
className="inline-flex items-center justify-center gap-2 bg-violet-500 hover:bg-violet-400 text-white px-7 py-4 rounded-xl font-extrabold text-sm transition-colors shadow-[0_12px_40px_-12px_rgba(139,92,246,0.6)]"
|
||||
>
|
||||
₩39,000부터 시작 →
|
||||
</a>
|
||||
<Link
|
||||
href="/services/music/samples"
|
||||
className="inline-flex items-center justify-center gap-2 border border-white/15 hover:border-white/30 hover:bg-white/5 text-white px-7 py-4 rounded-xl font-semibold text-sm transition-colors"
|
||||
>
|
||||
실제 샘플 보기
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 우: 결과 프리뷰 */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-6 bg-gradient-to-br from-violet-500/20 to-cyan-500/10 blur-3xl rounded-full pointer-events-none" />
|
||||
<div
|
||||
className="relative aspect-[9/16] max-w-[320px] mx-auto rounded-2xl overflow-hidden border border-white/10 shadow-2xl shadow-violet-900/40"
|
||||
style={{ background: 'linear-gradient(135deg,#1e1b4b 0%,#0f172a 60%,#0b0530 100%)' }}
|
||||
>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
|
||||
<div className="text-5xl mb-3">🎬</div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-violet-300/80 uppercase mb-1">
|
||||
FEATURED SHORT
|
||||
</p>
|
||||
<p className="text-sm text-white font-semibold">TOP 샘플 미리보기</p>
|
||||
<p className="text-[11px] text-slate-400 mt-1">9:16 · 58초</p>
|
||||
</div>
|
||||
<div className="absolute bottom-3 left-3 right-3 flex gap-1.5">
|
||||
<span className="text-[10px] px-2 py-0.5 rounded-full bg-black/60 text-white border border-white/10">
|
||||
Suno V4
|
||||
</span>
|
||||
<span className="text-[10px] px-2 py-0.5 rounded-full bg-black/60 text-white border border-white/10">
|
||||
제작 1시간
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PRICING — 상세 최상단 */}
|
||||
<section id="pricing" className="px-6 py-14 lg:px-14 bg-slate-950">
|
||||
<div className="min-h-full bg-black text-white">
|
||||
{/* PRICING */}
|
||||
<section id="pricing" className="px-6 py-14 lg:px-14 bg-black">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-end justify-between flex-wrap gap-3 mb-8">
|
||||
<div>
|
||||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-1">Pricing · 1회 결제</p>
|
||||
<p className="font-mono text-xs text-white/50 tracking-widest uppercase mb-1">Pricing · 1회 결제</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold">3개 티어, 목표에 맞게 선택</h2>
|
||||
</div>
|
||||
<Link href="/services/music/samples" className="text-sm text-violet-300 hover:text-violet-200 underline underline-offset-4">
|
||||
샘플 먼저 보기 →
|
||||
<Link href="/services/music/samples" className="text-sm text-white/80 hover:text-white underline underline-offset-4">
|
||||
샘플 먼저 보기
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -201,52 +101,68 @@ export default function MusicServicePage() {
|
||||
{(Object.keys(TIERS) as Tier[]).map((key) => {
|
||||
const t = TIERS[key];
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`relative rounded-2xl p-8 flex flex-col border transition-all ${
|
||||
<CardContainer key={key} containerClassName="w-full py-0" className="w-full h-full">
|
||||
<CardBody
|
||||
className={`relative w-full h-full rounded-2xl p-8 flex flex-col border transition-all ${
|
||||
t.highlight
|
||||
? 'border-violet-400 bg-gradient-to-br from-violet-900/40 to-slate-900 shadow-[0_0_60px_rgba(139,92,246,0.35)] md:scale-[1.03] md:-translate-y-2'
|
||||
: 'border-white/10 bg-white/[0.02] hover:border-white/30'
|
||||
? 'border-white bg-white text-black md:scale-[1.03] md:-translate-y-2'
|
||||
: 'border-white/15 bg-white/[0.02] hover:border-white/40 text-white'
|
||||
}`}
|
||||
>
|
||||
{t.highlight && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||||
<span className="inline-flex items-center gap-1 bg-gradient-to-r from-violet-500 to-pink-500 text-white text-[10px] font-extrabold px-3 py-1.5 rounded-full uppercase tracking-wider">
|
||||
🔥 가장 많이 팔림
|
||||
</span>
|
||||
</div>
|
||||
<SparklesOverlay
|
||||
sparklesCount={20}
|
||||
colors={{ first: '#9E7AFF', second: '#FE8BBB' }}
|
||||
className="rounded-2xl"
|
||||
/>
|
||||
)}
|
||||
<h3 className="font-extrabold text-2xl mb-1">{t.name}</h3>
|
||||
<p className="text-sm text-slate-400 mb-6">{t.desc}</p>
|
||||
<div className="mb-6">
|
||||
{t.highlight && (
|
||||
<CardItem translateZ={60} className="absolute -top-3 left-1/2 -translate-x-1/2 z-20">
|
||||
<span className="inline-flex items-center bg-black text-white text-[10px] font-extrabold px-3 py-1.5 rounded-full uppercase tracking-wider border border-white">
|
||||
가장 많이 팔림
|
||||
</span>
|
||||
</CardItem>
|
||||
)}
|
||||
<CardItem translateZ={40} as="h3" className="font-extrabold text-2xl mb-1 relative z-10">
|
||||
{t.name}
|
||||
</CardItem>
|
||||
<CardItem translateZ={20} as="p" className={`text-sm mb-6 ${t.highlight ? 'text-black/60' : 'text-white/60'}`}>
|
||||
{t.desc}
|
||||
</CardItem>
|
||||
<CardItem translateZ={50} className="mb-6">
|
||||
<span className="text-4xl font-extrabold font-mono">{t.price}</span>
|
||||
<span className="text-xs text-slate-500 ml-2">1회 결제</span>
|
||||
</div>
|
||||
<ul className="space-y-3 text-sm text-slate-200 mb-8 flex-1">
|
||||
<span className={`text-xs ml-2 ${t.highlight ? 'text-black/50' : 'text-white/50'}`}>1회 결제</span>
|
||||
</CardItem>
|
||||
<CardItem
|
||||
translateZ={20}
|
||||
as="ul"
|
||||
className={`space-y-3 text-sm mb-8 flex-1 ${t.highlight ? 'text-black/80' : 'text-white/80'}`}
|
||||
>
|
||||
{t.features.map((f) => (
|
||||
<li key={f} className="flex gap-2.5">
|
||||
<svg className="w-4 h-4 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span className="flex-shrink-0 mt-0.5">·</span>
|
||||
<span className="leading-relaxed">{f}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
</CardItem>
|
||||
<CardItem
|
||||
translateZ={40}
|
||||
as="button"
|
||||
onClick={() => setSelectedTier(key)}
|
||||
className={`w-full py-4 rounded-xl font-extrabold text-sm transition-colors ${
|
||||
t.highlight
|
||||
? 'bg-violet-500 hover:bg-violet-400 text-white'
|
||||
: 'bg-white/10 hover:bg-white/20 text-white'
|
||||
? 'bg-black hover:bg-black/85 text-white'
|
||||
: 'bg-white/10 hover:bg-white/20 text-white border border-white/20'
|
||||
}`}
|
||||
>
|
||||
{t.name} 구매하기 →
|
||||
</button>
|
||||
</div>
|
||||
{t.name} 구매하기
|
||||
</CardItem>
|
||||
</CardBody>
|
||||
</CardContainer>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 text-center mt-8">
|
||||
<p className="text-xs text-white/50 text-center mt-8">
|
||||
구매 전 <Link href="/legal/refund" className="underline hover:text-white">환불 정책</Link>을 반드시 확인해주세요.
|
||||
디지털 콘텐츠 특성상 제공 시작 후 청약철회가 제한됩니다.
|
||||
</p>
|
||||
@@ -254,38 +170,33 @@ export default function MusicServicePage() {
|
||||
</section>
|
||||
|
||||
{/* 팩 구성품 */}
|
||||
<section className="px-6 py-16 lg:px-14 bg-slate-950 border-t border-white/5">
|
||||
<section className="px-6 py-16 lg:px-14 bg-black border-t border-white/10">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">What's Included</p>
|
||||
<p className="font-mono text-xs text-white/50 tracking-widest uppercase mb-2">What's Included</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold mb-8">팩 구성품</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{[
|
||||
{ icon: '📄', title: 'Suno 프롬프트 북', desc: '장르·무드·보컬 톤 조합법 20+종. 복붙해서 바로 사용하는 PDF.' },
|
||||
{ icon: '🎬', title: 'MV 워크플로우', desc: 'Midjourney·Runway·Luma로 비트 싱크 영상 만드는 단계별 가이드.' },
|
||||
{ icon: '⚖️', title: '저작권 & 상업 이용', desc: 'Suno·Runway 약관 요약 + 수익화 전 안전 체크리스트.' },
|
||||
{ icon: '📦', title: '샘플 프로젝트 파일', desc: '완성된 가사·프롬프트·영상 세트. 그대로 수정해 재사용 가능.' },
|
||||
{ title: 'Suno 프롬프트 북', desc: '장르·무드·보컬 톤 조합법 20+종. 복붙해서 바로 사용하는 PDF.' },
|
||||
{ title: 'MV 워크플로우', desc: 'Midjourney·Runway·Luma로 비트 싱크 영상 만드는 단계별 가이드.' },
|
||||
{ title: '저작권 & 상업 이용', desc: 'Suno·Runway 약관 요약 + 수익화 전 안전 체크리스트.' },
|
||||
{ title: '샘플 프로젝트 파일', desc: '완성된 가사·프롬프트·영상 세트. 그대로 수정해 재사용 가능.' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="flex gap-4 p-6 rounded-2xl border border-white/10 bg-white/[0.02]"
|
||||
className="p-6 rounded-2xl border border-white/15 bg-white/[0.02]"
|
||||
>
|
||||
<div className="text-2xl flex-shrink-0">{item.icon}</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-white mb-1">{item.title}</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
<p className="text-sm text-white/60 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PROCESS — 4 STEPS (컴팩트) */}
|
||||
<section className="px-6 py-16 lg:px-14 bg-gradient-to-b from-slate-950 to-[#0b0530]">
|
||||
{/* PROCESS */}
|
||||
<section className="px-6 py-16 lg:px-14 bg-black border-t border-white/10">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">
|
||||
Process
|
||||
</p>
|
||||
<p className="font-mono text-xs text-white/50 tracking-widest uppercase mb-2">Process</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold mb-10" style={{ wordBreak: 'keep-all' }}>
|
||||
컨셉 → 음악 → 비주얼 → 퍼블리싱
|
||||
</h2>
|
||||
@@ -294,18 +205,14 @@ export default function MusicServicePage() {
|
||||
{PROCESS.map((step) => (
|
||||
<div
|
||||
key={step.num}
|
||||
className="rounded-2xl p-6 border border-white/10 bg-white/[0.02] hover:border-violet-400/40 transition-colors"
|
||||
className="rounded-2xl p-6 border border-white/15 bg-white/[0.02] hover:border-white/40 transition-colors"
|
||||
>
|
||||
<div
|
||||
className={`inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br ${step.color} font-extrabold text-sm text-white mb-4`}
|
||||
>
|
||||
{step.num}
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-violet-300/60 uppercase tracking-widest mb-1">
|
||||
<p className="font-mono text-xs text-white/50 mb-3">{step.num}</p>
|
||||
<p className="font-mono text-[10px] text-white/50 uppercase tracking-widest mb-1">
|
||||
{step.subtitle}
|
||||
</p>
|
||||
<h3 className="text-lg font-extrabold text-white mb-2">{step.title}</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
<p className="text-sm text-white/60 leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
{step.result}
|
||||
</p>
|
||||
</div>
|
||||
@@ -314,42 +221,42 @@ export default function MusicServicePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SAMPLES — 컴팩트 링크 */}
|
||||
<section id="samples" className="px-6 py-12 lg:px-14 bg-[#0b0530] border-t border-white/5">
|
||||
{/* SAMPLES */}
|
||||
<section id="samples" className="px-6 py-12 lg:px-14 bg-black border-t border-white/10">
|
||||
<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>
|
||||
<p className="font-mono text-xs text-white/50 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"
|
||||
className="inline-flex items-center px-6 py-3 rounded-xl border border-white/30 hover:bg-white hover:text-black text-sm font-semibold text-white transition whitespace-nowrap"
|
||||
>
|
||||
전체 샘플 갤러리 →
|
||||
전체 샘플 갤러리
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section className="px-6 py-20 lg:px-14 bg-slate-950">
|
||||
<section className="px-6 py-20 lg:px-14 bg-black border-t border-white/10">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-center mb-10">
|
||||
자주 묻는 질문
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{FAQS.map((f, i) => (
|
||||
<div key={i} className="border border-white/10 rounded-2xl overflow-hidden bg-white/[0.02]">
|
||||
<div key={i} className="border border-white/15 rounded-2xl overflow-hidden bg-white/[0.02]">
|
||||
<button
|
||||
onClick={() => setOpenFaq(openFaq === i ? null : i)}
|
||||
className="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<span className="font-bold text-white text-sm">{f.q}</span>
|
||||
<span className={`text-violet-400 text-xl transition-transform ${openFaq === i ? 'rotate-45' : ''}`}>
|
||||
<span className={`text-white text-xl transition-transform ${openFaq === i ? 'rotate-45' : ''}`}>
|
||||
+
|
||||
</span>
|
||||
</button>
|
||||
{openFaq === i && (
|
||||
<div className="px-5 pb-5 text-sm text-slate-300 leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
<div className="px-5 pb-5 text-sm text-white/70 leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
{f.a}
|
||||
</div>
|
||||
)}
|
||||
@@ -359,23 +266,23 @@ export default function MusicServicePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sticky 바텀 CTA */}
|
||||
{/* Sticky CTA */}
|
||||
<div
|
||||
className="fixed bottom-0 inset-x-0 z-40 border-t border-white/10 backdrop-blur-md"
|
||||
style={{ background: 'rgba(6,14,32,0.85)' }}
|
||||
className="fixed bottom-0 inset-x-0 z-40 border-t border-white/15 backdrop-blur-md"
|
||||
style={{ background: 'rgba(0,0,0,0.85)' }}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto px-5 py-3 flex items-center justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<p className="text-[11px] font-mono text-violet-300/70 tracking-widest uppercase">From</p>
|
||||
<p className="text-[11px] font-mono text-white/50 tracking-widest uppercase">From</p>
|
||||
<p className="text-white font-extrabold text-lg leading-tight">
|
||||
₩39,000 <span className="text-xs text-slate-400 font-medium">· 1회 결제</span>
|
||||
₩39,000 <span className="text-xs text-white/50 font-medium">· 1회 결제</span>
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="inline-flex items-center gap-2 bg-violet-500 hover:bg-violet-400 text-white px-6 py-3 rounded-xl font-extrabold text-sm transition-colors shadow-[0_8px_30px_-8px_rgba(139,92,246,0.6)] whitespace-nowrap"
|
||||
className="inline-flex items-center bg-white hover:bg-white/90 text-black px-6 py-3 rounded-xl font-extrabold text-sm transition-colors whitespace-nowrap"
|
||||
>
|
||||
팩 선택하기 →
|
||||
팩 선택하기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user