feat(home): 메인 안 2 적용 — Brand Hero + 2-up + Music 섹션 + Custom Build + Final CTA

- Brand Hero: 60vh, "현직 엔지니어가 만드는 두 가지" + 영상 blur 35%
- Two-up: Music 카드(영상+₩39,000~) / Custom Build 카드(정적 그라데이션+견적)
- Music 섹션: 기존 Features+Before/After+마퀴 그대로 보존
- Custom Build 섹션: 4 카드 (자동화는 외주 흡수) + 납품 5건 사례 + 견적 CTA
- Final CTA: "어느 쪽이든 시작하세요" + 두 분기 CTA
- 메인 진입점: Music → /music, Custom Build → /work

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/page.tsx

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import Link from 'next/link';
 import ContactModal from './components/ContactModal';
 import { GlassButton } from './components/LiquidGlass';
-import { trackCTAClick } from '../lib/gtag';
+import { trackCTAClick } from '@/lib/gtag';
+import { PORTFOLIO } from '@/lib/freelance-portfolio';
 
 const BEFORE = [
   '작곡 공부에만 최소 6개월 소요',
@@ -13,6 +14,13 @@ const BEFORE = [
   '곡 하나 완성에 드는 수백만 원의 외주비',
 ];
 
+const AFTER = [
+  '단 1시간 만에 프로급 음원 & 영상 완성',
+  '드래그 앤 드롭 수준의 직관적인 워크플로우',
+  '가이드대로 따라하면 완벽한 저작권 해결',
+  '커피 한 잔 가격으로 무한대 콘텐츠 생산',
+];
+
 const TWEETS_ROW_A = [
   { name: '김민재', handle: 'minjae_shorts', time: '2h', body: '작곡 하나 못 하던 내가 3일 만에 쇼츠 채널 열었다. 프롬프트북 반칙 수준 ㄹㅇ' },
   { name: '이소영', handle: 'cafe_sohyang', time: '5h', body: '매장 BGM 직접 만들어요. 저작권 고민 없이 매달 플레이리스트 갈아끼우는 게 신기함.' },
@@ -35,17 +43,22 @@ const TWEETS_ROW_B = [
   { name: '임준혁', handle: 'junhyuk_tune', time: '6d', body: '업데이트 진짜로 오네요. 2주 만에 V4.5 프롬프트 가이드 추가됨.' },
 ];
 
-const AFTER = [
+const CB_CARDS = [
-  '단 1시간 만에 프로급 음원 & 영상 완성',
+  { href: '/work/freelance', label: '외주 개발', desc: '맞춤 솔루션 · RPA·API 자동화 포함', key: 'freelance' },
-  '드래그 앤 드롭 수준의 직관적인 워크플로우',
+  { href: '/work/website', label: '웹사이트', desc: '기업·브랜드 사이트', key: 'website' },
-  '가이드대로 따라하면 완벽한 저작권 해결',
+  { href: '/work/saju', label: 'AI 사주', desc: '12개 항목 무료 해석', key: 'saju' },
-  '커피 한 잔 가격으로 무한대 콘텐츠 생산',
+  { href: '/work/blog', label: '블로그 자동화', desc: '수익 엔진 팩', key: 'blog' },
 ];
 
 export default function Home() {
   const [modalOpen, setModalOpen] = useState(false);
   const [modalService, setModalService] = useState('일반 문의');
 
+  const openContact = (service: string) => {
+    setModalService(service);
+    setModalOpen(true);
+  };
+
   return (
     <div className="relative overflow-x-hidden bg-black text-white">
       <ContactModal
@@ -58,8 +71,11 @@ export default function Home() {
         checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']}
       />
 
-      {/* 1. Hero */}
+      {/* 1. Brand Hero — kx-surface 검정, 60vh, 텍스트 중심 */}
-      <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">
+      <section
+        className="relative w-full min-h-[60vh] flex items-center justify-center px-6 border-b border-white/10 overflow-hidden"
+        style={{ background: 'var(--kx-surface)' }}
+      >
         <video
           className="absolute inset-0 w-full h-full object-cover pointer-events-none"
           src="/hero-bg.mp4"
@@ -69,40 +85,95 @@ export default function Home() {
           playsInline
           preload="auto"
           aria-hidden
+          style={{ filter: 'blur(8px)', opacity: 0.35 }}
         />
-        <div className="absolute inset-0 bg-black/55 pointer-events-none" aria-hidden />
+        <div className="absolute inset-0 bg-black/40 pointer-events-none" aria-hidden />
-        <div className="max-w-7xl mx-auto text-center relative z-10">
+        <div className="relative z-10 max-w-3xl mx-auto text-center">
           <h1
-            className="kx-display text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-[1.05]"
+            className="kx-display text-4xl md:text-6xl lg:text-7xl font-bold mb-5 leading-[1.1]"
             style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
           >
-            나의 이야기가
+            현직 엔지니어가 만드는
-            <br />
+            <br />두 가지.
-            노래가 됩니다.
           </h1>
-          <p className="text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed text-white/70">
+          <p className="text-base md:text-xl text-white/70 leading-relaxed">
-            프롬프트부터 뮤직비디오까지.
+            AI 제품, 그리고 맞춤 개발.
-            <br className="sm:hidden" />
-            {' '}AI 음악 제작의 모든 순서를 한 팩에 담았습니다.
           </p>
-          <div className="flex flex-col sm:flex-row justify-center gap-4 mb-16">
-            <GlassButton
-              href="/services/music#pricing"
-              onClick={() => trackCTAClick('home_v6_hero_primary')}
-              tint="rgba(255,255,255,0.18)"
-              className="text-base"
-            >
-              <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>
-
         </div>
       </section>
 
-      {/* 2. Features */}
+      {/* 2. Two-up Cards */}
+      <section className="py-20 px-6 bg-black border-b border-white/10">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Music 카드 */}
+          <Link
+            href="/music"
+            onClick={() => trackCTAClick('home_v7_card_music')}
+            className="group relative rounded-2xl border border-white/15 overflow-hidden min-h-[280px] flex flex-col justify-end p-8 hover:border-white/40 transition"
+            style={{ textDecoration: 'none' }}
+          >
+            <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={{ opacity: 0.5 }}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent pointer-events-none" />
+            <div className="relative z-10">
+              <p className="font-mono text-[11px] tracking-widest uppercase text-white/60 mb-3">
+                Music
+              </p>
+              <h2 className="kx-display text-2xl md:text-3xl font-bold text-white mb-2">
+                AI 음악 제품
+              </h2>
+              <p className="text-sm md:text-base text-white/70 mb-4">
+                Suno 프롬프트 + 뮤비 워크플로우 + 유튜브 SEO 한 팩에.
+              </p>
+              <p className="font-mono text-xs text-white mb-5">₩39,000~</p>
+              <span className="inline-flex items-center gap-2 text-sm font-bold text-white">
+                Try now <span aria-hidden>→</span>
+              </span>
+            </div>
+          </Link>
+
+          {/* Custom Build 카드 */}
+          <Link
+            href="/work"
+            onClick={() => trackCTAClick('home_v7_card_work')}
+            className="group relative rounded-2xl border border-white/15 overflow-hidden min-h-[280px] flex flex-col justify-end p-8 hover:border-white/40 transition"
+            style={{
+              textDecoration: 'none',
+              background: 'linear-gradient(135deg, var(--kx-surface) 0%, rgba(204,151,255,0.15) 100%)',
+              backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 40px)',
+            }}
+          >
+            <div className="relative z-10">
+              <p className="font-mono text-[11px] tracking-widest uppercase text-white/60 mb-3">
+                Custom Build
+              </p>
+              <h2 className="kx-display text-2xl md:text-3xl font-bold text-white mb-2">
+                맞춤 개발 사업부
+              </h2>
+              <p className="text-sm md:text-base text-white/70 mb-4">
+                외주 · 웹사이트 · AI 사주 · 블로그 자동화
+              </p>
+              <p className="text-xs text-white/50 mb-5">납품 5건 · 견적 24h 내 답변</p>
+              <span className="inline-flex items-center gap-2 text-sm font-bold text-white">
+                견적 문의 <span aria-hidden>→</span>
+              </span>
+            </div>
+          </Link>
+        </div>
+      </section>
+
+      {/* 3. Music 섹션 — 기존 Features + Before/After + Tweet 마퀴 보존 */}
+
+      {/* 3-1. 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">
@@ -185,7 +256,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* 3. Before / After */}
+      {/* 3-2. Before / After */}
       <section className="py-24 px-6 bg-black text-white border-b border-white/10">
         <div className="max-w-7xl mx-auto">
           <div className="text-center mb-14">
@@ -232,7 +303,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* 4. Use Cases — Tweet Marquee */}
+      {/* 3-3. 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">
@@ -281,7 +352,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* 4.5. Custom Build — 외주 사업부 미니 섹션 (P0) */}
+      {/* 4. Custom Build 섹션 — 4 카드 + 5건 사례 + 견적 CTA */}
       <section className="py-24 px-6 bg-black text-white border-b border-white/10">
         <div className="max-w-7xl mx-auto">
           <div className="text-center mb-14">
@@ -295,22 +366,16 @@ export default function Home() {
               맞춤 개발이 필요하신가요?
             </h2>
             <p className="text-base md:text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
-              7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, 자동화부터 사주·블로그 솔루션까지.
+              7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, AI 사주, 블로그 자동화까지.
             </p>
           </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-12">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
-            {[
+            {CB_CARDS.map((card) => (
-              { href: '/freelance', label: '외주 개발', desc: '맞춤 솔루션 외주', key: 'freelance' },
-              { href: '/services/website', label: '웹사이트 제작', desc: '기업·브랜드 사이트', key: 'website' },
-              { href: '/freelance', label: '자동화', desc: 'RPA · API 연동', key: 'automation' },
-              { href: '/saju', label: 'AI 사주', desc: 'AI 사주 솔루션', key: 'saju' },
-              { href: '/services/blog', label: '블로그 자동화', desc: '수익 엔진 팩', key: 'blog' },
-            ].map((card) => (
               <Link
                 key={card.key}
                 href={card.href}
-                onClick={() => trackCTAClick(`home_v6_custom_build_card_${card.key}`)}
+                onClick={() => trackCTAClick(`home_v7_cb_card_${card.key}`)}
                 className="group rounded-2xl border border-white/15 bg-white/[0.02] p-5 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col"
               >
                 <p className="font-bold text-white text-sm mb-1.5">{card.label}</p>
@@ -320,12 +385,27 @@ export default function Home() {
             ))}
           </div>
 
+          {/* 납품 5건 사례 미리보기 */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-12">
+            {PORTFOLIO.map((p) => (
+              <div
+                key={p.title}
+                className={`p-4 rounded-2xl border ${p.borderAccent} ${p.accentBg} flex flex-col`}
+              >
+                <p className={`font-mono text-[9px] uppercase tracking-widest ${p.accentColor} mb-2`}>
+                  {p.category}
+                </p>
+                <h3 className="font-bold text-white text-xs leading-tight mb-1.5">{p.title}</h3>
+                <p className="text-[10px] text-white/50 line-clamp-2 flex-1">{p.result}</p>
+              </div>
+            ))}
+          </div>
+
           <div className="text-center">
             <button
               onClick={() => {
-                trackCTAClick('home_v6_custom_build_cta');
+                trackCTAClick('home_v7_cb_cta');
-                setModalService('외주 개발 문의');
+                openContact('외주 개발 문의');
-                setModalOpen(true);
               }}
               className="kx-btn-primary inline-flex items-center px-7 py-3 rounded-full text-sm"
             >
@@ -335,8 +415,8 @@ export default function Home() {
         </div>
       </section>
 
-      {/* 5. Final CTA — Full-width video */}
+      {/* 5. Final CTA — 어느 쪽이든 시작하세요 */}
-      <section className="relative w-full min-h-[560px] flex items-center justify-center px-6 py-32 bg-black overflow-hidden">
+      <section className="relative w-full min-h-[400px] flex items-center justify-center px-6 py-24 bg-black overflow-hidden">
         <video
           className="absolute inset-0 w-full h-full object-cover pointer-events-none"
           src="/hero-bg.mp4"
@@ -346,34 +426,34 @@ export default function Home() {
           playsInline
           preload="auto"
           aria-hidden
-          style={{ filter: 'blur(6px)', transform: 'scale(1.06)' }}
+          style={{ filter: 'blur(8px)', opacity: 0.35 }}
         />
-        <div className="absolute inset-0 bg-black/55 pointer-events-none" aria-hidden />
+        <div className="absolute inset-0 bg-black/50 pointer-events-none" />
-
+        <div className="relative z-10 max-w-2xl mx-auto text-center">
-        <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]"
+            className="kx-display text-3xl md:text-5xl font-bold mb-8"
             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">
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
-            입문 팩 ₩39,000으로 시작. 1시간 워크플로우 + 템플릿 + 저작권 가이드 포함.
-          </p>
-          <div className="flex justify-center">
             <GlassButton
-              href="/services/music#pricing"
+              href="/music"
-              onClick={() => trackCTAClick('home_v6_final_music')}
+              onClick={() => trackCTAClick('home_v7_final_music')}
               tint="rgba(255,255,255,0.18)"
               className="text-base"
             >
-              <span className="text-white">Try now</span>
+              <span className="text-white">Music 팩 보기</span>
             </GlassButton>
+            <button
+              onClick={() => {
+                trackCTAClick('home_v7_final_work');
+                openContact('외주 개발 문의');
+              }}
+              className="kx-btn-primary inline-flex items-center justify-center px-7 py-3 rounded-full text-base"
+            >
+              견적 문의
+            </button>
           </div>
         </div>
       </section>