feat: PublicShell + TopNav + 홈 v6 (ai_music_creator 참조)

- 사이드바 대시보드는 /admin, /mypage 에서만 사용
- 공개 페이지는 상단 TopNav + 다크 footer(PublicShell)
- 홈 v6: Hero + Evidence + Before/After + Toolkit + 3-Step + Other Products

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/DashboardShell.tsx

@@ -3,19 +3,26 @@
 import { useState } from 'react';
 import { usePathname } from 'next/navigation';
 import Sidebar from './Sidebar';
+import PublicShell from './PublicShell';
 
 const STANDALONE_PATHS = ['/login', '/signup', '/admin'];
+const SIDEBAR_PATHS = ['/mypage'];
 
 export default function DashboardShell({ children }: { children: React.ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const pathname = usePathname();
 
   const isStandalone = STANDALONE_PATHS.some((p) => pathname.startsWith(p));
+  const useSidebar = SIDEBAR_PATHS.some((p) => pathname.startsWith(p));
 
   if (isStandalone) {
     return <>{children}</>;
   }
 
+  if (!useSidebar) {
+    return <PublicShell>{children}</PublicShell>;
+  }
+
   return (
     <div className="dashboard-layout">
       <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

app/components/PublicShell.tsx

@@ -0,0 +1,51 @@
+import TopNav from './TopNav';
+import Link from 'next/link';
+
+export default function PublicShell({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <TopNav />
+      <main
+        className="min-h-screen pt-20"
+        style={{
+          background: 'var(--kx-surface)',
+          color: 'var(--kx-on-surface)',
+        }}
+      >
+        {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)',
+          }}
+        >
+          <div className="max-w-7xl mx-auto">
+            <div className="flex flex-col md:flex-row justify-between gap-6 mb-5">
+              <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>
+              </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>
+            </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)' }}>
+              <span>대표자: 박재오</span>
+              <span>사업자등록번호: 267-53-00822</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>
+          </div>
+        </footer>
+      </main>
+    </>
+  );
+}

app/components/TopNav.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useEffect } from 'react';
+
+const LINKS = [
+  { href: '/', label: 'Home' },
+  { href: '/services/music', label: 'AI 음악' },
+  { href: '/services/blog', label: '블로그 팩' },
+  { href: '/saju', label: 'AI 사주' },
+  { href: '/legal/refund', label: '환불정책' },
+];
+
+export default function TopNav() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  useEffect(() => { setOpen(false); }, [pathname]);
+
+  const isActive = (href: string) =>
+    href === '/' ? pathname === '/' : pathname.startsWith(href);
+
+  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' : ''
+        }`}
+        style={{
+          background: scrolled ? 'rgba(6,14,32,0.85)' : 'rgba(6,14,32,0.55)',
+          borderBottom: '1px solid rgba(204,151,255,0.08)',
+          boxShadow: scrolled ? '0 8px 40px 0 rgba(156,72,234,0.12)' : 'none',
+        }}
+      >
+        <Link
+          href="/"
+          className="kx-display text-2xl font-black tracking-tight kx-gradient-text"
+          style={{ textDecoration: 'none' }}
+        >
+          쟁승메이드
+        </Link>
+
+        <div className="hidden md:flex items-center gap-8">
+          {LINKS.map((l) => (
+            <Link
+              key={l.href}
+              href={l.href}
+              className="text-sm font-medium transition-colors"
+              style={{
+                color: isActive(l.href) ? '#fff' : 'var(--kx-on-variant)',
+                borderBottom: isActive(l.href) ? '2px solid var(--kx-primary)' : '2px solid transparent',
+                paddingBottom: 4,
+                textDecoration: 'none',
+              }}
+            >
+              {l.label}
+            </Link>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-3">
+          <Link
+            href="/login"
+            className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
+            style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
+          >
+            로그인
+          </Link>
+          <Link
+            href="/services/music"
+            className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
+            style={{ textDecoration: 'none' }}
+          >
+            시작하기
+          </Link>
+          <button
+            onClick={() => setOpen(true)}
+            aria-label="메뉴 열기"
+            className="md:hidden p-2 rounded-lg"
+            style={{ color: 'var(--kx-on-surface)' }}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </nav>
+
+      {/* 모바일 오버레이 */}
+      {open && (
+        <div
+          className="fixed inset-0 z-[60] md:hidden flex flex-col"
+          style={{ background: 'rgba(6,14,32,0.98)', backdropFilter: 'blur(16px)' }}
+        >
+          <div className="flex items-center justify-between px-6 h-20">
+            <span className="kx-display text-2xl font-black kx-gradient-text">쟁승메이드</span>
+            <button
+              onClick={() => setOpen(false)}
+              aria-label="메뉴 닫기"
+              className="p-2"
+              style={{ color: 'var(--kx-on-surface)' }}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="flex-1 flex flex-col gap-2 px-6 pt-6">
+            {LINKS.map((l) => (
+              <Link
+                key={l.href}
+                href={l.href}
+                className="kx-display text-2xl font-bold py-3"
+                style={{
+                  color: isActive(l.href) ? 'var(--kx-primary)' : 'var(--kx-on-surface)',
+                  textDecoration: 'none',
+                }}
+              >
+                {l.label}
+              </Link>
+            ))}
+            <div className="mt-6 flex gap-3">
+              <Link
+                href="/login"
+                className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
+              >
+                로그인
+              </Link>
+              <Link
+                href="/services/music"
+                className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+                style={{ textDecoration: 'none' }}
+              >
+                시작하기
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/page.tsx

@@ -6,52 +6,38 @@ import ContactModal from './components/ContactModal';
 import { trackCTAClick } from '../lib/gtag';
 
 /* ═══════════════════════════════════════════════════
-   쟁승메이드 홈 — v5 (Kinetic Ether Dashboard)
+   쟁승메이드 홈 v6 — AI Music Creator Landing
-   상단 라우터 페이지를 워크스페이스형 대시보드로 재구성.
+   참조: Downloads/stitch_ai_mv/ai_music_creator_landing_page
 ═══════════════════════════════════════════════════ */
 
-interface Tile {
+const TOOLKIT = [
-  href: string;
+  { accent: 'var(--kx-primary)', icon: '🎛', title: 'Suno 프롬프트 레시피', desc: '원하는 장르와 감성을 완벽하게 구현하는 검증된 프롬프트 조합 모음.' },
-  label: string;
+  { accent: 'var(--kx-secondary)', icon: '✍', title: '작사 치트키 템플릿', desc: '주제만 넣으면 감성적인 가사를 뽑아내는 AI 라이팅 가이드.' },
-  title: string;
+  { accent: '#ff86c3', icon: '🎬', title: '뮤직비디오 워크플로우', desc: '음악 비트에 맞춰 자동으로 영상을 생성·편집하는 원스톱 프로세스.' },
-  desc: string;
+  { accent: '#c284ff', icon: '⚖', title: '저작권 세이프 가이드', desc: 'AI 생성물의 상업적 이용과 저작권 등록을 위한 체크리스트.' },
-  tag: string;
+  { accent: 'var(--kx-secondary-dim)', icon: '📄', title: 'PDF 기획 템플릿', desc: '채널 브랜딩부터 콘텐츠 기획까지 한번에 끝내는 실행 가이드북.' },
-  tagColor: string;
+  { accent: '#ffffff', icon: '📦', title: '성공 사례 샘플 프로젝트', desc: '조회수 100만 이상을 기록한 프로젝트의 실제 파일 구조 분석.' },
-  onClick?: () => void;
+];
-}
+
+const BEFORE = [
+  '작곡 공부에만 최소 6개월 소요',
+  '영상 편집 프로그램 학습의 높은 장벽',
+  '항상 불안한 저작권 위반 위험',
+  '곡 하나 완성에 드는 수백만 원의 외주비',
+];
+
+const AFTER = [
+  '단 1시간 만에 프로급 음원 & 영상 완성',
+  '드래그 앤 드롭 수준의 직관적인 워크플로우',
+  '가이드대로 따라하면 완벽한 저작권 해결',
+  '커피 한 잔 가격으로 무한대 콘텐츠 생산',
+];
 
 export default function Home() {
   const [modalOpen, setModalOpen] = useState(false);
 
-  const tiles: Tile[] = [
-    {
-      href: '/services/music',
-      label: 'FLAGSHIP',
-      title: 'AI 음악 마스터',
-      desc: '네 사연을 노래로. 쇼츠까지 한 번에. Suno·Runway·유튜브 SEO를 묶은 4단계 공정 팩.',
-      tag: '₩39k~149k',
-      tagColor: 'var(--kx-primary)',
-    },
-    {
-      href: '/services/blog',
-      label: 'DIGITAL PACK',
-      title: '블로그 자동화 팩',
-      desc: '프롬프트 조합법 + 템플릿 PDF + 샘플. 쿠팡파트너스·애드포스트 수익화 루틴.',
-      tag: '₩29,000',
-      tagColor: 'var(--kx-secondary)',
-    },
-    {
-      href: '/saju',
-      label: 'FREE TOOL',
-      title: 'AI 사주 분석',
-      desc: '사주팔자 자동 산출 + Gemini 기반 해석. 검증된 계산 엔진.',
-      tag: 'FREE',
-      tagColor: '#40ceed',
-    },
-  ];
-
   return (
-    <div className="kx-section min-h-full relative overflow-hidden">
+    <div className="relative overflow-x-hidden">
       <ContactModal
         isOpen={modalOpen}
         onClose={() => setModalOpen(false)}
@@ -59,194 +45,338 @@ export default function Home() {
         checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']}
       />
 
-      {/* 배경 오브 */}
+      {/* 1. Hero */}
-      <div className="kx-orb" style={{ width: 520, height: 520, background: '#9c48ea', top: -180, left: -120 }} />
+      <section
-      <div className="kx-orb" style={{ width: 420, height: 420, background: '#53ddfc', bottom: -150, right: -100, opacity: 0.25 }} />
+        className="relative px-6 py-24 lg:py-32"
-      <div className="kx-orb" style={{ width: 300, height: 300, background: '#cc97ff', top: '40%', right: '10%', opacity: 0.18 }} />
+        style={{
-
+          background: 'radial-gradient(circle at 50% 30%, rgba(156,72,234,0.18) 0%, transparent 70%)',
-      {/* 워크스페이스 헤더 */}
+        }}
-      <header className="relative z-10 px-6 lg:px-12 pt-10 pb-6 border-b border-white/5">
+      >
-        <div className="flex items-center justify-between gap-4 flex-wrap">
+        <div className="max-w-7xl mx-auto text-center relative">
-          <div>
+          <span className="kx-label inline-block mb-6">AI MUSIC CREATOR TOOLKIT · 2026</span>
-            <span className="kx-label">WORKSPACE / JAENGSEUNG.MAKE</span>
+          <h1 className="kx-display text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-[1.05]" style={{ wordBreak: 'keep-all' }}>
-            <h1 className="kx-display text-2xl md:text-3xl font-extrabold mt-1.5">
+            AI로 음악 + <span className="kx-gradient-text">뮤직비디오까지</span>
-              Creative Studio <span className="kx-gradient-text">Overview</span>
+            <br />1시간 만에 완성
           </h1>
-          </div>
+          <p className="text-lg md:text-xl mb-10 max-w-3xl mx-auto leading-relaxed" style={{ color: 'var(--kx-on-variant)' }}>
-          <div className="flex items-center gap-3 text-xs" style={{ color: 'var(--kx-on-variant)' }}>
+            조회수 터지는 콘텐츠 제작 시스템. 음악 이론을 몰라도 누구나 프로 수준의 결과물을 만듭니다.
-            <span className="flex items-center gap-2">
-              <span className="inline-block w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-              <span className="font-mono tracking-wider">SYSTEM ONLINE</span>
-            </span>
-            <span className="hidden md:inline font-mono">v2026.04</span>
-          </div>
-        </div>
-      </header>
-
-      <div className="relative z-10 px-6 lg:px-12 py-10 space-y-10">
-        {/* Hero: Launch Panel */}
-        <section className="kx-folder kx-glow" style={{ padding: 0, overflow: 'hidden' }}>
-          <div className="grid lg:grid-cols-[1.4fr_1fr] gap-0">
-            {/* 좌측: 카피 */}
-            <div className="p-8 lg:p-12">
-              <span className="kx-label">FLAGSHIP RELEASE · 2026</span>
-              <h2 className="kx-display text-4xl md:text-5xl lg:text-6xl font-extrabold mt-4 leading-[1.05]">
-                네 사연을 노래로.
-                <br />
-                <span className="kx-gradient-text">쇼츠까지 한 번에.</span>
-              </h2>
-              <p className="mt-6 text-base md:text-lg max-w-xl leading-relaxed">
-                AI로 음악을 뽑는 게 아니라,{' '}
-                <span style={{ color: 'var(--kx-on-surface)' }}>고품질 결과물을 빠르게</span> 뽑는 법을 팝니다.
-                컨셉 → 음악 → 비주얼 → 퍼블리싱, 4단계 공정을 구조화한 마스터 팩.
           </p>
-              <div className="flex flex-wrap gap-3 mt-8">
+          <div className="flex flex-col sm:flex-row justify-center gap-4 mb-16">
             <Link
               href="/services/music"
-                  onClick={() => trackCTAClick('home_hero_music')}
+              onClick={() => trackCTAClick('home_v6_hero_primary')}
-                  className="kx-btn-primary inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm"
+              className="kx-btn-primary px-8 py-4 rounded-full text-base inline-flex items-center justify-center gap-2"
             >
-                  AI 음악 팩 보기 <span>→</span>
+              지금 바로 제작 시작하기
             </Link>
             <a
-                  href="#tiles"
+              href="#evidence"
-                  className="kx-btn-ghost inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-bold"
+              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',
+              }}
             >
-                  전체 상품 보기
+              샘플 결과 보기
             </a>
           </div>
-            </div>
+
-            {/* 우측: 엔진 상태 모니터 */}
+          {/* Demo Showcase Card */}
           <div
-              className="hidden lg:block relative"
+            className="relative max-w-5xl mx-auto overflow-hidden"
-              style={{ background: 'var(--kx-surface-low)', borderLeft: '1px solid rgba(204,151,255,0.08)' }}
+            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)',
+            }}
           >
-              <div className="p-8 h-full flex flex-col">
+            <div className="aspect-video relative flex items-center justify-center group cursor-pointer">
-                <div className="flex items-center justify-between mb-6">
+              {/* 배경 그라디언트 + 그리드 */}
-                  <span className="kx-label">ENGINE STATUS</span>
+              <div
-                  <span className="text-xs font-mono" style={{ color: 'var(--kx-secondary-dim)' }}>REAL-TIME</span>
+                className="absolute inset-0"
-                </div>
+                style={{
-                <div className="space-y-5 flex-1">
+                  background:
-                  <EngineRow label="SUNO PRO" value="2,490 credits" pct={83} />
+                    'linear-gradient(135deg, #0b0b2b 0%, #1a0840 50%, #061228 100%)',
-                  <EngineRow label="GEMINI 2.5" value="Online" pct={100} />
+                  opacity: 0.9,
-                  <EngineRow label="RUNWAY" value="Standby" pct={62} />
+                }}
-                  <EngineRow label="PUBLISHING" value="Ready" pct={94} />
+              />
-                </div>
+              <svg className="absolute inset-0 w-full h-full opacity-30" preserveAspectRatio="none" viewBox="0 0 1200 500">
-                <div className="mt-8 pt-6 border-t" style={{ borderColor: 'rgba(255,255,255,0.05)' }}>
+                <defs>
-                  <div className="flex items-baseline justify-between">
+                  <linearGradient id="wg" x1="0%" x2="100%">
-                    <span className="kx-label">DELIVERED</span>
+                    <stop offset="0%" stopColor="#cc97ff" />
-                    <span className="kx-display text-3xl font-extrabold">47<span style={{ color: 'var(--kx-on-variant)', fontSize: '1rem', fontWeight: 400 }}> projects</span></span>
+                    <stop offset="100%" stopColor="#53ddfc" />
+                  </linearGradient>
+                </defs>
+                {[...Array(40)].map((_, i) => (
+                  <rect
+                    key={i}
+                    x={i * 30 + 10}
+                    y={250 - Math.abs(Math.sin(i * 0.6) * 120)}
+                    width="10"
+                    height={Math.abs(Math.sin(i * 0.6) * 240) + 20}
+                    fill="url(#wg)"
+                    opacity={0.4 + Math.sin(i * 0.3) * 0.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)',
+                }}
+              >
+                <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 샘플
+                </h3>
               </div>
             </div>
           </div>
         </div>
       </section>
 
-        {/* 서비스 타일 */}
+      {/* 2. Evidence */}
-        <section id="tiles">
+      <section id="evidence" className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
-          <div className="flex items-end justify-between mb-5">
+        <div className="max-w-7xl mx-auto">
-            <div>
+          <h2 className="kx-display text-3xl md:text-4xl font-bold text-center mb-12" style={{ color: 'var(--kx-on-surface)' }}>
-              <span className="kx-label">PRODUCTS</span>
+            결과 먼저 보여주기
-              <h3 className="kx-display text-2xl md:text-3xl font-extrabold mt-1">Launch Pads</h3>
+          </h2>
-            </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <span className="text-xs font-mono hidden md:inline" style={{ color: 'var(--kx-on-variant)' }}>
+            {[
-              {tiles.length} modules active
+              { hue: 'from-violet-600 to-fuchsia-500', views: '조회수 1.2M', comments: '댓글 4.5K' },
-            </span>
+              { hue: 'from-sky-600 to-cyan-500', views: '조회수 850K', comments: '댓글 2.1K' },
-          </div>
+              { hue: 'from-pink-600 to-rose-500', views: '조회수 2.4M', comments: '댓글 12K' },
-          <div className="grid md:grid-cols-3 gap-4">
+            ].map((c, i) => (
-            {tiles.map((t) => (
+              <div
-              <Link
+                key={i}
-                key={t.href}
+                className="overflow-hidden rounded-xl hover:-translate-y-2 transition-transform"
-                href={t.href}
+                style={{ background: 'var(--kx-surface-mid)' }}
-                onClick={() => trackCTAClick(`home_tile_${t.href}`)}
-                className="kx-folder group relative transition-all hover:-translate-y-1"
-                style={{ textDecoration: 'none' }}
               >
-                <div className="flex items-center justify-between mb-5">
+                <div className={`h-48 bg-gradient-to-br ${c.hue} relative`}>
-                  <span className="kx-label" style={{ color: t.tagColor }}>{t.label}</span>
+                  <div className="absolute inset-0 bg-black/30" />
-                  <span
+                  <svg className="absolute inset-0 w-full h-full opacity-50" preserveAspectRatio="none" viewBox="0 0 400 200">
-                    className="text-[10px] font-mono font-bold px-2 py-0.5 rounded"
+                    {[...Array(30)].map((_, j) => (
-                    style={{ background: 'rgba(255,255,255,0.05)', color: t.tagColor }}
+                      <rect
-                  >
+                        key={j}
-                    {t.tag}
+                        x={j * 14 + 8}
-                  </span>
+                        y={100 - Math.abs(Math.sin((j + i * 5) * 0.5) * 60)}
+                        width="6"
+                        height={Math.abs(Math.sin((j + i * 5) * 0.5) * 120) + 10}
+                        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>
-                <h4 className="kx-display text-xl font-extrabold mb-2">{t.title}</h4>
-                <p className="text-sm leading-relaxed">{t.desc}</p>
-                <div className="mt-6 flex items-center gap-2 text-sm font-bold" style={{ color: t.tagColor }}>
-                  열기
-                  <span className="transition-transform group-hover:translate-x-1">→</span>
               </div>
-              </Link>
             ))}
           </div>
+        </div>
       </section>
 
-        {/* Stats Monitor */}
+      {/* 3. Before / After */}
-        <section className="kx-folder">
+      <section className="py-24 px-6" style={{ background: 'var(--kx-surface)' }}>
-          <div className="flex items-center justify-between mb-6">
+        <div className="max-w-7xl mx-auto">
-            <div>
+          <h2 className="kx-display text-3xl md:text-4xl font-bold text-center mb-16" style={{ color: 'var(--kx-on-surface)' }}>
-              <span className="kx-label">CREDIBILITY MONITOR</span>
+            압도적인 제작 효율의 차이
-              <h3 className="kx-display text-xl font-extrabold mt-1">왜 쟁승메이드인가</h3>
+          </h2>
+          <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>
+              <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>
+                    <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>
+              <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>
+                    <span>{t}</span>
+                  </li>
+                ))}
+              </ul>
             </div>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-            <Stat num="47" label="프로젝트 납품" sub="계약 기반" />
-            <Stat num="100%" label="소스코드 인도" sub="저작권 100% 이양" />
-            <Stat num="24h" label="평균 응답" sub="이메일/카톡 기준" />
-            <Stat num="0" label="분쟁 이력" sub="계약서 우선 원칙" />
         </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 */}
+      <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)' }}>
+              쟁승메이드의 다른 도구들
+            </h2>
+          </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 */}
-        <section className="kx-glass px-8 py-10 text-center" style={{ border: '1px solid rgba(204,151,255,0.12)' }}>
+          <div
+            className="text-center p-10 kx-glass"
+            style={{ border: '1px solid rgba(204,151,255,0.12)' }}
+          >
             <span className="kx-label">NEXT STEP</span>
-          <h3 className="kx-display text-2xl md:text-3xl font-extrabold mt-2">프로젝트 문의가 있으신가요?</h3>
+            <h3 className="kx-display text-2xl md:text-3xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
-          <p className="mt-3 text-sm md:text-base max-w-xl mx-auto">
+              프로젝트 문의가 있으신가요?
-            맞춤 개발·컨설팅·협업 제안 모두 환영합니다. 24시간 이내 회신 드립니다.
+            </h3>
+            <p className="text-sm mb-6 max-w-xl mx-auto" style={{ color: 'var(--kx-on-variant)' }}>
+              맞춤 개발·컨설팅·협업 제안 모두 환영합니다. 24시간 이내 회신.
             </p>
             <button
               onClick={() => {
-              trackCTAClick('home_final_contact');
+                trackCTAClick('home_v6_final_contact');
                 setModalOpen(true);
               }}
-            className="kx-btn-primary mt-6 px-7 py-3.5 rounded-xl text-sm"
+              className="kx-btn-primary px-7 py-3.5 rounded-full text-sm"
             >
               일반 문의 보내기
             </button>
+          </div>
+        </div>
       </section>
     </div>
-    </div>
-  );
-}
-
-function EngineRow({ label, value, pct }: { label: string; value: string; pct: number }) {
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-1.5">
-        <span className="kx-label" style={{ fontSize: '0.625rem' }}>{label}</span>
-        <span className="text-xs font-mono" style={{ color: 'var(--kx-on-surface)' }}>{value}</span>
-      </div>
-      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)' }}>
-        <div
-          className="h-full rounded-full"
-          style={{
-            width: `${pct}%`,
-            background: 'linear-gradient(90deg, #cc97ff, #53ddfc)',
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-function Stat({ num, label, sub }: { num: string; label: string; sub: string }) {
-  return (
-    <div>
-      <div className="kx-display text-3xl md:text-4xl font-extrabold kx-gradient-text">{num}</div>
-      <div className="mt-2 text-sm font-bold" style={{ color: 'var(--kx-on-surface)' }}>{label}</div>
-      <div className="text-xs mt-0.5">{sub}</div>
-    </div>
   );
 }