diff --git a/app/page.tsx b/app/page.tsx index f316159..a64a492 100644 --- a/app/page.tsx +++ b/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 = [ - '단 1시간 만에 프로급 음원 & 영상 완성', - '드래그 앤 드롭 수준의 직관적인 워크플로우', - '가이드대로 따라하면 완벽한 저작권 해결', - '커피 한 잔 가격으로 무한대 콘텐츠 생산', +const CB_CARDS = [ + { 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 (
- {/* 1. Hero */} -
+ {/* 1. Brand Hero — kx-surface 검정, 60vh, 텍스트 중심 */} +
- {/* 2. Features */} + {/* 2. Two-up Cards */} +
+
+ {/* Music 카드 */} + 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' }} + > +
+ + {/* 3. Music 섹션 — 기존 Features + Before/After + Tweet 마퀴 보존 */} + + {/* 3-1. Features */}
@@ -185,7 +256,7 @@ export default function Home() {
- {/* 3. Before / After */} + {/* 3-2. Before / After */}
@@ -232,7 +303,7 @@ export default function Home() {
- {/* 4. Use Cases — Tweet Marquee */} + {/* 3-3. Use Cases — Tweet Marquee */}
@@ -281,7 +352,7 @@ export default function Home() {
- {/* 4.5. Custom Build — 외주 사업부 미니 섹션 (P0) */} + {/* 4. Custom Build 섹션 — 4 카드 + 5건 사례 + 견적 CTA */}
@@ -295,22 +366,16 @@ export default function Home() { 맞춤 개발이 필요하신가요?

- 7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, 자동화부터 사주·블로그 솔루션까지. + 7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, AI 사주, 블로그 자동화까지.

-
- {[ - { 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) => ( +
+ {CB_CARDS.map((card) => ( 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" >

{card.label}

@@ -320,12 +385,27 @@ export default function Home() { ))}
+ {/* 납품 5건 사례 미리보기 */} +
+ {PORTFOLIO.map((p) => ( +
+

+ {p.category} +

+

{p.title}

+

{p.result}

+
+ ))} +
+
- {/* 5. Final CTA — Full-width video */} -
+ {/* 5. Final CTA — 어느 쪽이든 시작하세요 */} +