feat(home): 외주+소프트웨어 2축 메인 페이지 풀 리디자인 + 메타데이터 교체

app/layout.tsx

@@ -7,20 +7,18 @@ import { GlassFilter } from "./components/LiquidGlass";
 
 export const metadata: Metadata = {
   title: {
-    default: "AI 음악·뮤비 팩 ₩39,000~ | 쟁승메이드",
+    default: "외주 개발 · 완성 소프트웨어 | 쟁승메이드",
     template: "%s | 쟁승메이드",
   },
   description:
-    "Suno 프롬프트 + 뮤직비디오 워크플로우 + 유튜브 SEO 템플릿 팩. AI로 음악과 뮤비를 1시간 만에 완성하는 4단계 크리에이터 툴킷. ₩39,000부터.",
+    "7년차 대기업 백엔드 개발자가 직접 설계하고 만듭니다. 맞춤 소프트웨어 외주 개발과 검증된 완성 소프트웨어를 제공하는 쟁승메이드.",
   keywords: [
-    "AI 음악",
+    "외주 개발",
-    "AI 작곡",
+    "소프트웨어 개발",
-    "Suno 프롬프트",
+    "웹사이트 제작",
-    "AI 뮤직비디오",
+    "업무 자동화",
-    "유튜브 쇼츠 음악",
+    "백엔드 개발자",
-    "AI 뮤비",
+    "프리랜서 개발자",
-    "음악 프롬프트",
-    "AI 사주",
   ],
   authors: [{ name: "박재오", url: "https://jaengseung-made.com" }],
   creator: "박재오",
@@ -29,22 +27,23 @@ export const metadata: Metadata = {
     locale: "ko_KR",
     url: "https://jaengseung-made.com",
     siteName: "쟁승메이드",
-    title: "AI 음악·뮤비 팩 ₩39,000~ | 쟁승메이드",
+    title: "외주 개발 · 완성 소프트웨어 | 쟁승메이드",
     description:
-      "Suno 프롬프트 + 뮤비 워크플로우 + 유튜브 SEO 템플릿 팩. AI로 음악·뮤비를 1시간에 완성하는 4단계 크리에이터 툴킷.",
+      "7년차 대기업 백엔드 개발자가 직접 설계·개발·운영합니다. 맞춤 외주 개발과 검증된 완성 소프트웨어를 제공하는 쟁승메이드.",
     images: [
       {
         url: "https://jaengseung-made.com/og-image.png",
         width: 1200,
         height: 630,
-        alt: "쟁승메이드 — AI 프롬프트 · 자동화 스토어",
+        alt: "쟁승메이드 — 외주 개발 · 완성 소프트웨어",
       },
     ],
   },
   twitter: {
     card: "summary_large_image",
-    title: "AI 음악·뮤비 팩 ₩39,000~ | 쟁승메이드",
+    title: "외주 개발 · 완성 소프트웨어 | 쟁승메이드",
-    description: "AI로 음악과 뮤비를 1시간 만에. Suno 프롬프트 + 뮤비 워크플로우 + 유튜브 SEO 템플릿.",
+    description:
+      "7년차 대기업 백엔드 개발자가 직접 만듭니다. 맞춤 외주 개발과 검증된 완성 소프트웨어를 제공합니다.",
   },
   robots: {
     index: true,
@@ -61,31 +60,27 @@ const jsonLd = {
       '@id': 'https://jaengseung-made.com/#person',
       name: '박재오',
       url: 'https://jaengseung-made.com',
-      jobTitle: '백엔드 개발자 · AI 자동화 전문가',
+      jobTitle: '백엔드 개발자 · 외주 개발 전문가',
       worksFor: { '@type': 'Organization', name: '대기업 재직 중' },
       email: 'bgg8988@gmail.com',
       telephone: '010-3907-1392',
-      knowsAbout: ['Python', 'Java', 'Spring Boot', 'Next.js', 'AI 프롬프트', 'AI 자동화', '업무 자동화', 'ChatGPT', 'Claude'],
+      knowsAbout: ['Python', 'Java', 'Spring Boot', 'Next.js', '외주 개발', '웹사이트 제작', '업무 자동화', 'API 설계'],
-      description: '현직 엔지니어. AI 음악 생성 개발 가이드 패키지, AI 사주 분석 등 AI 크리에이티브 도구를 직접 개발·운영합니다.',
+      description: '7년차 대기업 백엔드 개발자. 맞춤 소프트웨어 외주 개발과 검증된 완성 소프트웨어를 직접 설계·개발·운영합니다.',
     },
     {
       '@type': 'LocalBusiness',
       '@id': 'https://jaengseung-made.com/#business',
       name: '쟁승메이드',
       url: 'https://jaengseung-made.com',
-      description: 'AI 음악 생성 개발 가이드 패키지, AI 사주 분석. 현직 엔지니어가 직접 설계·운영하는 AI 크리에이티브 스토어.',
+      description: '7년차 대기업 백엔드 개발자가 직접 설계·개발·운영하는 외주 개발 · 완성 소프트웨어 스토어.',
       email: 'bgg8988@gmail.com',
       telephone: '010-3907-1392',
       priceRange: '₩',
       areaServed: '대한민국',
       hasOfferCatalog: {
         '@type': 'OfferCatalog',
-        name: '쟁승메이드 AI 도구 · 서비스',
+        name: '쟁승메이드 개발 서비스',
         itemListElement: [
-          { '@type': 'Offer', price: '39000', priceCurrency: 'KRW', availability: 'https://schema.org/InStock', url: 'https://jaengseung-made.com/music/packs', itemOffered: { '@type': 'Product', name: 'AI 음악 생성 개발 가이드 패키지 (입문)', url: 'https://jaengseung-made.com/music/packs', description: 'Suno 프롬프트 조합법 + MV 워크플로우 + 저작권 가이드 + 템플릿 PDF + 샘플 프로젝트. AI 음악 생성 개발 가이드 (1회 결제).' } },
-          { '@type': 'Offer', price: '99000', priceCurrency: 'KRW', availability: 'https://schema.org/InStock', url: 'https://jaengseung-made.com/music/packs', itemOffered: { '@type': 'Product', name: 'AI 음악 생성 개발 가이드 패키지 (프로)', url: 'https://jaengseung-made.com/music/packs', description: '입문 전체 + 샘플 프로젝트 1개(.prj · 영상 포함). 1회 결제.' } },
-          { '@type': 'Offer', price: '149000', priceCurrency: 'KRW', availability: 'https://schema.org/InStock', url: 'https://jaengseung-made.com/music/packs', itemOffered: { '@type': 'Product', name: 'AI 음악 생성 개발 가이드 패키지 (마스터)', url: 'https://jaengseung-made.com/music/packs', description: '프로 전체 + 샘플 다수 + 우선 업데이트·베타 선공개. 1회 결제.' } },
-          { '@type': 'Offer', price: '0', priceCurrency: 'KRW', url: 'https://jaengseung-made.com/work/saju', itemOffered: { '@type': 'Service', name: 'AI 사주 분석', url: 'https://jaengseung-made.com/work/saju', description: '생년월일 기반 AI 사주팔자 분석. 무료 체험 가능.' } },
           {
             '@type': 'Offer',
             url: 'https://jaengseung-made.com/work/freelance',

app/page.tsx

@@ -1,461 +1,433 @@
-'use client';
-
-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 { PORTFOLIO } from '@/lib/freelance-portfolio';
 
-const BEFORE = [
+// 쟁승메이드 메인 — 외주 개발 + 완성 소프트웨어 2축 랜딩 (서버 컴포넌트)
-  '작곡 공부에만 최소 6개월 소요',
+// PublicShell이 TopNav(h-16)·푸터·main 배경을 제공하므로 여기서는 콘텐츠 섹션만 렌더한다.
-  '영상 편집 프로그램 학습의 높은 장벽',
+
-  '항상 불안한 저작권 위반 위험',
+const KOR_TIGHT = { letterSpacing: '-0.02em' } as const;
-  '곡 하나 완성에 드는 수백만 원의 외주비',
+const KOR_BODY = { letterSpacing: '-0.01em' } as const;
+
+const PROCESS = [
+  { n: '01', t: '무료 상담', d: '요구사항을 함께 정리하고 실현 가능성을 점검합니다.' },
+  { n: '02', t: '견적·범위 확정', d: '영업일 2일 내 범위와 견적을 정리해 회신드립니다.' },
+  { n: '03', t: '개발·중간 공유', d: '주 1회 이상 진행 상황을 공유하며 방향을 맞춥니다.' },
+  { n: '04', t: '납품·배포 지원', d: '검수 후 30일 무상 하자보수로 안정화까지 책임집니다.' },
 ];
 
-const AFTER = [
+const STATS = [
-  '단 1시간 만에 프로급 음원 & 영상 완성',
+  { v: '7년차', l: '대기업 백엔드 개발 경력' },
-  '드래그 앤 드롭 수준의 직관적인 워크플로우',
+  { v: '15+', l: '직접 운영 중인 서비스' },
-  '가이드대로 따라하면 완벽한 저작권 해결',
+  { v: '기획→배포', l: '원스톱 단독 진행' },
-  '커피 한 잔 가격으로 무한대 콘텐츠 생산',
 ];
 
-const TWEETS_ROW_A = [
+const STACK = ['Python', 'Java', 'Spring', 'Next.js', 'AI 연동'];
-  { name: '김민재', handle: 'minjae_shorts', time: '2h', body: '작곡 하나 못 하던 내가 3일 만에 쇼츠 채널 열었다. 프롬프트북 반칙 수준 ㄹㅇ' },
+
-  { name: '이소영', handle: 'cafe_sohyang', time: '5h', body: '매장 BGM 직접 만들어요. 저작권 고민 없이 매달 플레이리스트 갈아끼우는 게 신기함.' },
+const PORTFOLIO = [
-  { name: '박도현', handle: 'dohyun_side', time: '1d', body: '퇴근 후 1시간 = 쇼츠 한 편. 애드센스 첫 수익이 3주 만에 꽂혔습니다. 팩값 회수 완료.' },
+  {
-  { name: '정유진', handle: 'yujin_indie', time: '2d', body: '데모 작업 시간이 1/5로. 레퍼런스 탐색 → MV까지 한 번에. 인디 뮤지션들 다 써야 함.' },
+    t: '주식 자동매매 시스템',
-  { name: '최현우', handle: 'hyunwoo_tube', time: '3d', body: '구독자 정체기였는데 AI 뮤비 시리즈로 알고리즘 탑승. 조회수 월 +320%.' },
+    d: '텔레그램과 연동해 실시간으로 주문을 집행하고 체결·손익 리포트를 자동 전송합니다.',
-  { name: '한지원', handle: 'jiwon_studio', time: '4d', body: '팩 안에 든 저작권 체크리스트가 실질적. Suno 약관 읽는 시간 아꼈다.' },
+    tags: ['실시간 주문', '텔레그램 연동', '리포트 자동화'],
-  { name: '오세린', handle: 'serin_mv', time: '5d', body: 'Runway 프리셋 그대로 써도 퀄 나옴. 프롬프트 설계가 반이네요.' },
+  },
-  { name: '강태윤', handle: 'taeyun_ads', time: '6d', body: '광고 BGM 10개 찍어서 외주 드렸더니 클라이언트 반응이 달라졌습니다.' },
+  {
+    t: '부동산 청약 자동 수집·매칭',
+    d: '공고를 주기적으로 크롤링해 조건에 맞는 매물만 골라내고, 신규 매칭을 즉시 알립니다.',
+    tags: ['크롤링', '조건 매칭', '푸시 알림'],
+  },
+  {
+    t: 'AI 콘텐츠 자동화 파이프라인',
+    d: '생성부터 검수, 발행까지 사람이 개입할 지점만 남기고 전 과정을 자동으로 연결합니다.',
+    tags: ['AI 연동', '검수 워크플로우', '자동 발행'],
+  },
 ];
 
-const TWEETS_ROW_B = [
+function ArrowRight() {
-  { 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 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' },
-];
-
-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">
+    <svg
-      <ContactModal
+      width="16"
-        isOpen={modalOpen}
+      height="16"
-        onClose={() => {
+      viewBox="0 0 24 24"
-          setModalOpen(false);
+      fill="none"
-          setModalService('일반 문의');
+      stroke="currentColor"
-        }}
+      strokeWidth="2"
-        service={modalService}
+      strokeLinecap="round"
-        checklist={['연락처/이메일', '원하는 작업 범위', '희망 일정']}
+      strokeLinejoin="round"
-      />
+      aria-hidden
-
+    >
-      {/* 1. Brand Hero — kx-surface 검정, 60vh, 텍스트 중심 */}
+      <path d="M5 12h14" />
-      <section
+      <path d="m13 5 7 7-7 7" />
-        className="relative w-full min-h-[60vh] flex items-center justify-center px-6 border-b border-white/10 overflow-hidden"
+    </svg>
-        style={{ background: 'var(--kx-surface)' }}
+  );
-      >
+}
-        <video
+
-          className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+export default function Home() {
-          src="/hero-bg.mp4"
+  return (
-          autoPlay
+    <>
-          loop
+      {/* ─── 1. Hero ─── */}
-          muted
+      <section className="border-b" style={{ borderColor: 'var(--jsm-line)' }}>
-          playsInline
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-24 lg:py-32">
-          preload="auto"
+          <div className="max-w-3xl">
-          aria-hidden
+            <span
-          style={{ filter: 'blur(8px)', opacity: 0.35 }}
+              className="inline-block text-xs font-semibold mb-6 px-2.5 py-1 rounded"
-        />
+              style={{
-        <div className="absolute inset-0 bg-black/40 pointer-events-none" aria-hidden />
+                color: 'var(--jsm-accent)',
-        <div className="relative z-10 max-w-3xl mx-auto text-center">
+                background: 'var(--jsm-accent-soft)',
-          <h1
+                ...KOR_BODY,
-            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' }}
+            >
-          >
+              외주 개발 · 완성 소프트웨어
-            현직 엔지니어가
+            </span>
-            <br />직접 만듭니다.
+            <h1
-          </h1>
+              className="text-4xl sm:text-5xl lg:text-[3.5rem] font-bold leading-[1.2] break-keep"
-          <p className="text-base md:text-xl text-white/70 leading-relaxed">
+              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-            검증된 자동화는 SaaS로. AI 음악 가이드와 커스텀 외주까지.
+            >
-          </p>
+              필요한 소프트웨어,
-        </div>
+              <br className="hidden sm:block" /> 만들어 드리거나{' '}
-      </section>
+              <span style={{ color: 'var(--jsm-accent)' }}>이미 만들어 두었습니다.</span>
-
+            </h1>
-      {/* 2. Two-up Cards */}
+            <p
-      <section className="py-20 px-6 bg-black border-b border-white/10">
+              className="mt-7 text-lg lg:text-xl leading-relaxed break-keep max-w-2xl"
-        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
+              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-          {/* Music 카드 */}
+            >
-          <Link
+              7년차 대기업 백엔드 개발자가 직접 설계·개발·운영합니다. 맞춤 외주 개발과
-            href="/music"
+              검증된 완성 소프트웨어 중 필요한 쪽을 선택하세요.
-            onClick={() => trackCTAClick('home_v7_card_music')}
+            </p>
-            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"
+            <div className="mt-10 flex flex-col sm:flex-row gap-3">
-            style={{ textDecoration: 'none' }}
+              <Link
-          >
+                href="/outsourcing#contact"
-            <video
+                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-lg font-semibold text-white transition-colors duration-150"
-              className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+                style={{ background: 'var(--jsm-accent)', ...KOR_BODY }}
-              src="/hero-bg.mp4"
+              >
-              autoPlay
+                프로젝트 문의하기
-              loop
+                <ArrowRight />
-              muted
+              </Link>
-              playsInline
+              <Link
-              preload="auto"
+                href="/products"
-              aria-hidden
+                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-lg font-semibold border transition-colors duration-150 hover:bg-[var(--jsm-surface-alt)]"
-              style={{ opacity: 0.5 }}
+                style={{
-            />
+                  color: 'var(--jsm-ink)',
-            <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent pointer-events-none" />
+                  borderColor: 'var(--jsm-line)',
-            <div className="relative z-10">
+                  background: 'var(--jsm-surface)',
-              <p className="font-mono text-[11px] tracking-widest uppercase text-white/60 mb-3">
+                  ...KOR_BODY,
-                Music
+                }}
-              </p>
+              >
-              <h2 className="kx-display text-2xl md:text-3xl font-bold text-white mb-2">
+                소프트웨어 보기
-                AI 음악 제품
+              </Link>
-              </h2>
+            </div>
-              <p className="text-sm md:text-base text-white/70 mb-4">
+          </div>
-                Suno 프롬프트 + 뮤비 워크플로우 + 유튜브 SEO 한 팩에.
+        </div>
-              </p>
+      </section>
-              <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">
+      {/* ─── 2. 2축 서비스 ─── */}
-                Try now <span aria-hidden>→</span>
+      <section style={{ background: 'var(--jsm-surface-alt)' }}>
-              </span>
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
-            </div>
+          <div className="grid md:grid-cols-2 gap-6">
-          </Link>
+            {/* 외주 개발 */}
-
+            <Link
-          {/* 커스텀 외주 카드 */}
+              href="/outsourcing"
-          <Link
+              className="group block rounded-2xl p-9 lg:p-11 border transition-colors duration-200 hover:border-[var(--jsm-accent)]"
-            href="/work"
+              style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
-            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"
+              <span
-            style={{
+                className="text-xs font-semibold uppercase tracking-wider"
-              textDecoration: 'none',
+                style={{ color: 'var(--jsm-accent)' }}
-              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)',
+                Custom
-            }}
+              </span>
-          >
+              <h2
-            <div className="relative z-10">
+                className="mt-3 text-2xl font-bold break-keep"
-              <p className="font-mono text-[11px] tracking-widest uppercase text-white/60 mb-3">
+                style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-                Custom Work
+              >
-              </p>
+                외주 개발
-              <h2 className="kx-display text-2xl md:text-3xl font-bold text-white mb-2">
+              </h2>
-                커스텀 외주
+              <p
-              </h2>
+                className="mt-3 leading-relaxed break-keep"
-              <p className="text-sm md:text-base text-white/70 mb-4">
+                style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-                외주 · 웹사이트 · AI 사주
+              >
-              </p>
+                기획부터 배포·운영까지 한 사람이 책임집니다. 웹 서비스, API, 업무 자동화,
-              <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">
+              </p>
-                견적 문의 <span aria-hidden>→</span>
+              <span
-              </span>
+                className="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold transition-colors duration-150 group-hover:text-[var(--jsm-accent-hover)]"
-            </div>
+                style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
-          </Link>
+              >
-        </div>
+                외주 개발 알아보기
-      </section>
+                <ArrowRight />
-
+              </span>
-      {/* 3. Music 섹션 — 기존 Features + Before/After + Tweet 마퀴 보존 */}
+            </Link>
-
+
-      {/* 3-1. Features */}
+            {/* 완성 소프트웨어 */}
-      <section className="py-24 px-6 bg-white text-black border-b border-black/10">
+            <Link
-        <div className="max-w-7xl mx-auto">
+              href="/products"
-          <div className="text-center mb-20">
+              className="group block rounded-2xl p-9 lg:p-11 border transition-colors duration-200 hover:border-[var(--jsm-accent)]"
-            <p className="font-mono text-[11px] tracking-widest uppercase text-black/50 mb-4">
+              style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
-              Features
+            >
-            </p>
+              <span
-            <h2
+                className="text-xs font-semibold uppercase tracking-wider"
-              className="kx-display text-3xl md:text-5xl font-bold text-black"
+                style={{ color: 'var(--jsm-accent)' }}
-              style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+              >
-            >
+                Ready-made
-              한 팩에 담긴 3가지 무기.
+              </span>
-            </h2>
+              <h2
-          </div>
+                className="mt-3 text-2xl font-bold break-keep"
-
+                style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-          <div className="space-y-20 lg:space-y-28">
+              >
-            {[
+                완성 소프트웨어
-              {
+              </h2>
-                label: '01 · Prompt',
+              <p
-                title: '프롬프트 한 줄이 곡이 됩니다.',
+                className="mt-3 leading-relaxed break-keep"
-                desc: '장르·무드·보컬 톤을 조합한 20+종 프롬프트 북. 복붙 한 번으로 Suno가 이해하는 구조로 변환됩니다.',
+                style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-                video: '/feature-prompt.mp4',
+              >
-              },
+                입금 확인 후 바로 다운로드해 사용합니다. 제가 직접 운영하며 검증한 도구만
-              {
+                정리해 제공합니다.
-                label: '02 · Visual',
+              </p>
-                title: '비트에 맞춰 영상이 붙습니다.',
+              <span
-                desc: 'Midjourney·Runway·Luma 워크플로우. 가사와 비트를 싱크하는 9:16 쇼츠·16:9 풀버전을 바로 뽑아낼 수 있습니다.',
+                className="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold transition-colors duration-150 group-hover:text-[var(--jsm-accent-hover)]"
-                video: '/feature-visual.mp4',
+                style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
-              },
+              >
-              {
+                소프트웨어 둘러보기
-                label: '03 · Publish',
+                <ArrowRight />
-                title: '업로드 직전까지 마무리됩니다.',
+              </span>
-                desc: '유튜브 제목·해시태그·설명란 SEO 템플릿. 복사-붙여넣기만으로 첫 쇼츠가 당일 채널에 올라갑니다.',
+            </Link>
-                video: null,
+          </div>
-              },
+        </div>
-            ].map((f, i) => {
+      </section>
-              const reverse = i % 2 === 1;
+
-              return (
+      {/* ─── 3. 개발 프로세스 ─── */}
-                <div
+      <section id="process" style={{ background: 'var(--jsm-bg)' }}>
-                  key={f.label}
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
-                  className={`grid lg:grid-cols-2 gap-10 lg:gap-16 items-center ${reverse ? 'lg:[&>*:first-child]:order-2' : ''}`}
+          <div className="max-w-2xl">
-                >
+            <p
-                  <div>
+              className="text-xs font-semibold uppercase tracking-wider mb-3"
-                    <p className="font-mono text-[11px] tracking-widest uppercase text-black/50 mb-4">
+              style={{ color: 'var(--jsm-accent)' }}
-                      {f.label}
+            >
-                    </p>
+              Process
-                    <h3
+            </p>
-                      className="kx-display text-2xl md:text-4xl font-bold mb-5 text-black"
+            <h2
-                      style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+              className="text-3xl lg:text-4xl font-bold break-keep"
-                    >
+              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-                      {f.title}
+            >
-                    </h3>
+              상담부터 납품까지, 흐름이 분명합니다
-                    <p className="text-base md:text-lg text-black/70 leading-relaxed max-w-lg">
+            </h2>
-                      {f.desc}
+          </div>
-                    </p>
+          <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-px rounded-2xl overflow-hidden border" style={{ borderColor: 'var(--jsm-line)', background: 'var(--jsm-line)' }}>
-                  </div>
+            {PROCESS.map((s) => (
-                  <div className="relative aspect-video rounded-2xl border border-black/15 bg-black/5 overflow-hidden">
+              <div key={s.n} className="p-7 lg:p-8" style={{ background: 'var(--jsm-surface)' }}>
-                    {f.video ? (
+                <span
-                      <video
+                  className="text-sm font-bold"
-                        className="absolute inset-0 w-full h-full object-cover"
+                  style={{ color: 'var(--jsm-accent)', fontFamily: 'monospace' }}
-                        src={f.video}
+                >
-                        autoPlay
+                  {s.n}
-                        loop
+                </span>
-                        muted
+                <h3
-                        playsInline
+                  className="mt-4 text-lg font-bold break-keep"
-                        preload="auto"
+                  style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-                        aria-hidden
+                >
-                      />
+                  {s.t}
-                    ) : (
+                </h3>
-                      <div className="absolute inset-0 flex items-center justify-center">
+                <p
-                        <span className="font-mono text-[11px] tracking-widest uppercase text-black/40">
+                  className="mt-2 text-sm leading-relaxed break-keep"
-                          Video Placeholder
+                  style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-                        </span>
+                >
-                      </div>
+                  {s.d}
-                    )}
+                </p>
-                  </div>
+              </div>
-                </div>
+            ))}
-              );
+          </div>
-            })}
+        </div>
-          </div>
+      </section>
-        </div>
+
-      </section>
+      {/* ─── 4. 신뢰 요소 ─── */}
-
+      <section style={{ background: 'var(--jsm-navy)' }}>
-      {/* 3-2. Before / After */}
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-24">
-      <section className="py-24 px-6 bg-black text-white border-b border-white/10">
+          <div className="grid sm:grid-cols-3 gap-10 sm:gap-8">
-        <div className="max-w-7xl mx-auto">
+            {STATS.map((s) => (
-          <div className="text-center mb-14">
+              <div key={s.l}>
-            <p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-4">
+                <p
-              Efficiency
+                  className="text-3xl lg:text-4xl font-bold text-white"
-            </p>
+                  style={KOR_TIGHT}
-            <h2
+                >
-              className="kx-display text-3xl md:text-5xl font-bold"
+                  {s.v}
-              style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+                </p>
-            >
+                <p
-              압도적인 제작 효율의 차이.
+                  className="mt-2 text-sm leading-relaxed break-keep text-white/60"
-            </h2>
+                  style={KOR_BODY}
-          </div>
+                >
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                  {s.l}
-            <div className="p-8 rounded-2xl border border-white/15 bg-white/[0.02]">
+                </p>
-              <p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-3">
+              </div>
-                Manual Process
+            ))}
-              </p>
+          </div>
-              <h3 className="text-2xl font-bold mb-6 text-white/60">Before</h3>
+          <div
-              <ul className="space-y-3">
+            className="mt-12 pt-8 border-t flex flex-wrap items-center gap-x-3 gap-y-2"
-                {BEFORE.map((t) => (
+            style={{ borderColor: 'rgba(255,255,255,0.1)' }}
-                  <li key={t} className="flex items-start gap-3 text-sm text-white/60">
+          >
-                    <span className="text-white/40">·</span>
+            <span className="text-xs uppercase tracking-wider text-white/40 mr-1">Stack</span>
-                    <span>{t}</span>
+            {STACK.map((s) => (
-                  </li>
+              <span
-                ))}
+                key={s}
-              </ul>
+                className="text-sm text-white/80 px-3 py-1 rounded-full"
-            </div>
+                style={{ background: 'rgba(255,255,255,0.06)', ...KOR_BODY }}
-            <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">
+                {s}
-                AI Powered
+              </span>
-              </p>
+            ))}
-              <h3 className="text-2xl font-bold mb-6">After</h3>
+          </div>
-              <ul className="space-y-3">
+        </div>
-                {AFTER.map((t) => (
+      </section>
-                  <li key={t} className="flex items-start gap-3 text-sm text-black/80">
+
-                    <span className="text-black/50">·</span>
+      {/* ─── 5. 포트폴리오 하이라이트 ─── */}
-                    <span>{t}</span>
+      <section id="portfolio" style={{ background: 'var(--jsm-surface-alt)' }}>
-                  </li>
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
-                ))}
+          <div className="max-w-2xl">
-              </ul>
+            <p
-            </div>
+              className="text-xs font-semibold uppercase tracking-wider mb-3"
-          </div>
+              style={{ color: 'var(--jsm-accent)' }}
-        </div>
+            >
-      </section>
+              Portfolio
-
+            </p>
-      {/* 3-3. Use Cases — Tweet Marquee */}
+            <h2
-      <section className="py-24 bg-white text-black border-b border-black/10 overflow-hidden">
+              className="text-3xl lg:text-4xl font-bold break-keep"
-        <div className="px-6 max-w-6xl mx-auto">
+              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-          <div className="text-center mb-14">
+            >
-            <p className="font-mono text-[11px] tracking-widest uppercase text-black/50 mb-4">
+              실제로 운영 중인 시스템들
-              Use Cases
+            </h2>
-            </p>
+            <p
-            <h2
+              className="mt-4 leading-relaxed break-keep"
-              className="kx-display text-3xl md:text-5xl font-bold"
+              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-              style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+            >
-            >
+              데모가 아니라 매일 돌아가는 서비스입니다. 같은 깊이로 의뢰하신 프로젝트를 만듭니다.
-              실제로 쓰고 있는 사람들.
+            </p>
-            </h2>
+          </div>
-          </div>
+          <div className="mt-12 grid md:grid-cols-3 gap-6">
-        </div>
+            {PORTFOLIO.map((p) => (
-
+              <div
-        <div className="space-y-5 marquee-mask">
+                key={p.t}
-          {[TWEETS_ROW_A, TWEETS_ROW_B].map((row, rowIdx) => (
+                className="flex flex-col rounded-2xl p-7 border"
-            <div key={rowIdx} className="marquee-viewport overflow-hidden">
+                style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
-              <div className={`marquee-track ${rowIdx === 1 ? 'marquee-track-reverse' : ''}`}>
+              >
-                {[...row, ...row].map((t, i) => (
+                <span
-                  <article
+                  className="self-start inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-full mb-5"
-                    key={`${rowIdx}-${i}`}
+                  style={{ color: 'var(--jsm-accent)', background: 'var(--jsm-accent-soft)' }}
-                    className="shrink-0 w-[320px] sm:w-[360px] p-5 rounded-2xl border border-black/15 bg-black/[0.02]"
+                >
-                  >
+                  <span
-                    <header className="flex items-center gap-3 mb-3">
+                    className="w-1.5 h-1.5 rounded-full"
-                      <div className="w-10 h-10 rounded-full bg-black/5 border border-black/15 flex items-center justify-center font-bold text-black">
+                    style={{ background: 'var(--jsm-accent)' }}
-                        {t.name.charAt(0)}
+                  />
-                      </div>
+                  직접 개발·운영 중
-                      <div className="min-w-0 flex-1">
+                </span>
-                        <p className="font-bold text-black text-sm truncate">{t.name}</p>
+                <h3
-                        <p className="font-mono text-[11px] text-black/50 truncate">@{t.handle}</p>
+                  className="text-lg font-bold break-keep"
-                      </div>
+                  style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-                      <span className="font-mono text-[10px] text-black/40 shrink-0">{t.time}</span>
+                >
-                    </header>
+                  {p.t}
-                    <p
+                </h3>
-                      className="text-sm leading-relaxed text-black/80"
+                <p
-                      style={{ wordBreak: 'keep-all' }}
+                  className="mt-2.5 text-sm leading-relaxed break-keep flex-1"
-                    >
+                  style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-                      {t.body}
+                >
-                    </p>
+                  {p.d}
-                  </article>
+                </p>
-                ))}
+                <div className="mt-5 flex flex-wrap gap-1.5">
-              </div>
+                  {p.tags.map((tag) => (
-            </div>
+                    <span
-          ))}
+                      key={tag}
-        </div>
+                      className="text-xs px-2.5 py-1 rounded"
-      </section>
+                      style={{
-
+                        color: 'var(--jsm-ink-soft)',
-      {/* 4. 커스텀 외주 섹션 — 카드 + 5건 사례 + 견적 CTA */}
+                        background: 'var(--jsm-surface-alt)',
-      <section className="py-24 px-6 bg-black text-white border-b border-white/10">
+                        ...KOR_BODY,
-        <div className="max-w-7xl mx-auto">
+                      }}
-          <div className="text-center mb-14">
+                    >
-            <p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-4">
+                      {tag}
-              Custom Work
+                    </span>
-            </p>
+                  ))}
-            <h2
+                </div>
-              className="kx-display text-3xl md:text-5xl font-bold mb-5"
+              </div>
-              style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+            ))}
-            >
+          </div>
-              맞춤 개발이 필요하신가요?
+          <div className="mt-10">
-            </h2>
+            <Link
-            <p className="text-base md:text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
+              href="/outsourcing#portfolio"
-              7년차 백엔드 개발자가 직접 설계·개발·납품. 외주, 웹사이트, AI 사주까지.
+              className="inline-flex items-center gap-1.5 text-sm font-semibold transition-colors duration-150 hover:text-[var(--jsm-accent-hover)]"
-            </p>
+              style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
-          </div>
+            >
-
+              포트폴리오 자세히 보기
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">
+              <ArrowRight />
-            {CB_CARDS.map((card) => (
+            </Link>
-              <Link
+          </div>
-                key={card.key}
+        </div>
-                href={card.href}
+      </section>
-                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"
+      {/* ─── 6. 소프트웨어 진열(예고) ─── */}
-              >
+      {/* Phase 2: 이 섹션은 products 테이블 기반 동적 진열로 교체 예정.
-                <p className="font-bold text-white text-sm mb-1.5">{card.label}</p>
+          현재는 출시 전 정적 안내만 노출한다. */}
-                <p className="text-xs text-white/60 leading-relaxed flex-1">{card.desc}</p>
+      <section style={{ background: 'var(--jsm-bg)' }}>
-                <span aria-hidden="true" className="mt-3 text-white/40 text-xs">→</span>
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
-              </Link>
+          <div
-            ))}
+            className="rounded-2xl border px-8 py-14 lg:px-14 lg:py-16 text-center"
-          </div>
+            style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
-
+          >
-          {/* 납품 5건 사례 미리보기 */}
+            <p
-          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-12">
+              className="text-xs font-semibold uppercase tracking-wider mb-3"
-            {PORTFOLIO.map((p) => (
+              style={{ color: 'var(--jsm-accent)' }}
-              <div
+            >
-                key={p.title}
+              Coming soon
-                className={`p-4 rounded-2xl border ${p.borderAccent} ${p.accentBg} flex flex-col`}
+            </p>
-              >
+            <h2
-                <p className={`font-mono text-[9px] uppercase tracking-widest ${p.accentColor} mb-2`}>
+              className="text-2xl lg:text-3xl font-bold break-keep"
-                  {p.category}
+              style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
-                </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>
+            </h2>
-              </div>
+            <p
-            ))}
+              className="mt-4 max-w-xl mx-auto leading-relaxed break-keep"
-          </div>
+              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
-
+            >
-          <div className="text-center">
+              직접 운영하며 다듬은 도구를 하나씩 다운로드 상품으로 공개할 예정입니다.
-            <button
+              출시 소식을 가장 먼저 받아보세요.
-              onClick={() => {
+            </p>
-                trackCTAClick('home_v7_cb_cta');
+            <Link
-                openContact('외주 개발 문의');
+              href="/outsourcing#contact"
-              }}
+              className="mt-8 inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-lg font-semibold border transition-colors duration-150 hover:bg-[var(--jsm-surface-alt)]"
-              className="kx-btn-primary inline-flex items-center px-7 py-3 rounded-full text-sm"
+              style={{
-            >
+                color: 'var(--jsm-ink)',
-              견적 문의하기
+                borderColor: 'var(--jsm-line)',
-            </button>
+                ...KOR_BODY,
-          </div>
+              }}
-        </div>
+            >
-      </section>
+              출시 소식 받기
-
+              <ArrowRight />
-      {/* 5. Final CTA — 어느 쪽이든 시작하세요 */}
+            </Link>
-      <section className="relative w-full min-h-[400px] flex items-center justify-center px-6 py-24 bg-black overflow-hidden">
+          </div>
-        <video
+        </div>
-          className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+      </section>
-          src="/hero-bg.mp4"
+
-          autoPlay
+      {/* ─── 7. 최종 CTA ─── */}
-          loop
+      <section style={{ background: 'var(--jsm-navy)' }}>
-          muted
+        <div className="max-w-6xl mx-auto px-6 lg:px-8 py-24 lg:py-28">
-          playsInline
+          <div className="max-w-3xl">
-          preload="auto"
+            <h2
-          aria-hidden
+              className="text-3xl lg:text-[2.5rem] font-bold leading-tight text-white break-keep"
-          style={{ filter: 'blur(8px)', opacity: 0.35 }}
+              style={KOR_TIGHT}
-        />
+            >
-        <div className="absolute inset-0 bg-black/50 pointer-events-none" />
+              프로젝트, 이야기부터 시작하세요
-        <div className="relative z-10 max-w-2xl mx-auto text-center">
+            </h2>
-          <h2
+            <p
-            className="kx-display text-3xl md:text-5xl font-bold mb-8"
+              className="mt-5 text-lg leading-relaxed text-white/70 break-keep max-w-2xl"
-            style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+              style={KOR_BODY}
-          >
+            >
-            어느 쪽이든 시작하세요.
+              아이디어 단계여도 괜찮습니다. 무료 상담에서 방향을 함께 잡아드립니다.
-          </h2>
+            </p>
-          <div className="flex flex-col sm:flex-row justify-center gap-4">
+            <Link
-            <GlassButton
+              href="/outsourcing#contact"
-              href="/music"
+              className="mt-9 inline-flex items-center justify-center gap-2 px-7 py-4 rounded-lg font-semibold text-white transition-colors duration-150"
-              onClick={() => trackCTAClick('home_v7_final_music')}
+              style={{ background: 'var(--jsm-accent)', ...KOR_BODY }}
-              tint="rgba(255,255,255,0.18)"
+            >
-              className="text-base"
+              무료 상담 신청
-            >
+              <ArrowRight />
-              <span className="text-white">Music 팩 보기</span>
+            </Link>
-            </GlassButton>
+          </div>
-            <button
+        </div>
-              onClick={() => {
+      </section>
-                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>
-    </div>
   );
 }