'use client'; import { useState } from 'react'; import Link from 'next/link'; import ContactModal from './components/ContactModal'; /* ────────────────────────────────────────────── Spring easing: cubic-bezier(0.16, 1, 0.3, 1) 모든 인터랙티브 요소에 일관 적용 ─────────────────────────────────────────────── */ const TRUST_POINTS = [ { id: 'contract', size: 'lg', // 2-col span icon: ( ), label: '계약서 먼저, 개발 나중', desc: '구두 약속 없습니다. 계약금 30%, 중도금, 잔금으로 단계별 진행. 납기 지연 시 하루 10만 원 자동 감면.', accent: 'blue', highlight: '납기 지연 → 하루 10만원 패널티', }, { id: 'source', size: 'sm', icon: ( ), label: '소스코드 100% 인도', desc: '납품 후 모든 소스코드를 전달합니다. 락인 없음.', accent: 'violet', highlight: null, }, { id: 'as', size: 'sm', icon: ( ), label: '1개월 무상 AS', desc: '납품 후 1개월간 버그 수정 무료. 평생 유지보수 계약도 가능.', accent: 'emerald', highlight: null, }, { id: 'reply', size: 'sm', icon: ( ), label: '24시간 이내 견적', desc: '문의 후 평균 3.8시간 이내 답변. 주말·공휴일 포함.', accent: 'amber', highlight: null, }, { id: 'report', size: 'sm', icon: ( ), label: '주 1회 진행 보고', desc: '매주 개발 현황을 공유합니다. 중간에 사라지는 일 없음.', accent: 'cyan', highlight: null, }, ]; const PROOF_SERVICES = [ { name: '쟁승메이드 (이 사이트)', badge: '지금 보시는 중', desc: '로그인·결제·AI 사주·관리자까지 1인 풀스택 개발. 이 사이트 자체가 포트폴리오입니다.', href: '/freelance', color: 'from-blue-500/20 to-blue-600/5', dot: 'bg-blue-400', tag: '풀스택 · Next.js · Supabase', accentColor: 'text-blue-400', }, { name: 'AI 사주 분석 서비스', badge: '운영 중', desc: '생년월일 입력 → AI가 사주팔자 12가지 항목을 즉시 분석. 4,900원 단건 결제.', href: '/saju', color: 'from-violet-500/20 to-violet-600/5', dot: 'bg-violet-400', tag: 'AI · Gemini · 토스페이먼츠', accentColor: 'text-violet-400', }, { name: 'AI 자동화 월 구독 키트', badge: 'NEW', desc: '업무 일지·이메일·SNS 등 6가지 자동화 도구 월 구독. 매달 새 도구 추가.', href: '/services/ai-kit', color: 'from-indigo-500/20 to-cyan-600/5', dot: 'bg-indigo-400', tag: '월 구독 · AI 자동화 · 19,900원', accentColor: 'text-indigo-400', }, ]; const SUBSCRIPTION_SERVICES = [ { id: 'ai-kit', href: '/services/ai-kit', color: '#4f46e5', bg: '#eef2ff', border: '#c7d2fe', label: 'AI AUTOMATION KIT', title: 'AI 자동화 키트', desc: '업무 일지·이메일·SNS 등 6종 도구로 월 27시간 되찾기', price: '19,900원/월', type: '월 구독', badge: 'NEW', badgeColor: 'bg-indigo-600', icon: ( ), }, { id: 'automation', href: '/services/automation', color: '#0891b2', bg: '#cffafe', border: '#a5f3fc', label: 'AI · RPA AUTOMATION', title: '업무 자동화', desc: '엑셀·보고서·이메일 반복 업무를 코드로 없애드립니다', price: '5만원~', type: '프로젝트', badge: 'HOT', badgeColor: 'bg-cyan-600', icon: ( ), }, { id: 'prompt', href: '/services/prompt', color: '#7c3aed', bg: '#ede9fe', border: '#ddd6fe', label: 'PROMPT ENGINEERING', title: '프롬프트 엔지니어링', desc: 'ChatGPT·Claude 전용 업무 최적화 프롬프트 패키지', price: '9,900원~', type: '패키지', badge: 'SALE', badgeColor: 'bg-red-500', icon: ( ), }, { id: 'saju', href: '/saju', color: '#db2777', bg: '#fdf2f8', border: '#fbcfe8', label: 'AI SAJU ANALYSIS', title: 'AI 사주 분석', desc: '생년월일 입력 → AI가 사주팔자 12항목 즉시 분석', price: '4,900원/건', type: '단건 구매', badge: null, badgeColor: '', icon: ( ), }, ]; const TECH_STACK = [ 'Python', 'Java', 'Spring Boot', 'Next.js', 'React', 'TypeScript', 'PostgreSQL', 'Redis', 'Docker', 'AWS', 'Telegram API', 'FastAPI', 'Node.js', 'Supabase', 'Vercel', 'Git', ]; const STATS = [ { value: '47+', label: '납품 완료' }, { value: '7년', label: '개발 경력' }, { value: '24h', label: '평균 견적 응답' }, { value: '1개월', label: '무상 AS' }, ]; export default function Home() { const [modalOpen, setModalOpen] = useState(false); return (
setModalOpen(false)} service="외주 개발 문의" checklist={[ '개발하고 싶은 서비스를 간략히 설명해주세요', '희망 납품 일정과 예산 범위', '참고할 만한 사이트나 레퍼런스', '현재 운영 중인 시스템이 있다면 함께 알려주세요', ]} accentColor="text-[#5ba4ff]" headerFrom="#04102b" headerTo="#0a2060" /> {/* ════════════════════════════════ SECTION 1 — HERO (Split layout) ════════════════════════════════ */}
{/* 배경 그리드 */}
{/* 배경 글로우 */}
{/* ── 좌측: 메인 카피 ── */}
{/* 뱃지 라인 */}
현재 프로젝트 접수 가능
AI 자동화 전문

연락 두절 없는
현직 대기업 개발자
직접 만들어 드립니다

계약서, 중간 보고, 소스코드 인도, 1개월 무상 AS까지 — 단계마다 증거를 남기는 개발 방식으로 진행합니다.

AI 자동화 전문 — 반복 업무, 엑셀 처리, 이메일·보고서 자동화를 AI로 없애드립니다. 이 사이트 자체가 제 포트폴리오입니다.

{/* CTA */}
포트폴리오 보기 →
{/* Stats */}
{STATS.map((s) => (
{s.value}
{s.label}
))}
{/* ── 우측: 신뢰 카드 ── */}
현재 운영 서비스 LIVE
{PROOF_SERVICES.map((s) => (
{s.name}
{s.tag}
{s.badge} ))}

직접 방문해서 확인하세요

jaengseung-made.com →
{/* 연락처 */}
{/* ════════════════════════════════ SECTION 2 — 신뢰 증거 Bento Grid ════════════════════════════════ */}

WHY US

계약서 쓰고, 납기 지키고,
끝까지 책임집니다

개발자에게 맡겼다가 연락 두절된 경험이 있으신가요?
쟁승메이드는 단계마다 증거를 남깁니다.

{/* Bento Grid */}
{/* 계약서 — 가장 큰 카드 (lg에서 2열 차지) */}

계약서 먼저, 개발 나중

계약금 30%, 중도금, 잔금으로 단계별 진행합니다. 구두 약속은 없습니다. 모든 합의는 서면으로 남깁니다.

납기 지연 시 하루 10만 원 자동 감면
{/* 소스코드 */}

소스코드 100% 인도

납품 후 모든 소스코드를 전달합니다. 특정 플랫폼에 종속되지 않습니다.

락인 없음
{/* 1개월 AS */}

1개월 무상 AS

납품 후 1개월 동안 버그 수정 무료. 이후 평생 유지보수 계약 가능.

부담 없는 사후 지원
{/* 주 1회 보고 */}

주 1회 진행 보고

매주 개발 현황을 공유합니다. 진행 중에 사라지는 일 없음을 보장합니다.

투명한 진행
{/* 외주 CTA */}
외주 개발 포트폴리오 · 프로세스 전체 보기
납품 사례 47건 · 진행 프로세스 6단계 상세 안내
{/* ════════════════════════════════ SECTION 3 — "직접 만든 서비스가 증거" ════════════════════════════════ */}

PROOF OF WORK

URL로 직접 확인하세요

말로만 잘 한다는 게 아닙니다. 지금 이 사이트가 제 실력입니다.

{PROOF_SERVICES.map((s) => ( {/* 배경 글로우 */}
{s.badge}

{s.name}

{s.desc}

{s.tag} 보러가기 →
))}
{/* ════════════════════════════════ SECTION 4 — 구독/설치형 서비스 (보조) ════════════════════════════════ */}
{/* 레이블 분리 */}

직접 만들어 운영 중인 구독 · 설치형 서비스

외주 개발 의뢰가 아닌, 제가 직접 만들고 운영 중인 서비스들입니다.
"이런 걸 만들어드릴 수 있습니다"의 증거로 공유합니다.

{SUBSCRIPTION_SERVICES.map((svc) => ( {svc.badge && ( {svc.badge} )} {/* 아이콘 */}
{svc.icon}
{/* 라벨 */}
{svc.label}
{/* 제목 */}
{svc.title}
{/* 설명 */}

{svc.desc}

{/* 가격 + 유형 */}
{svc.price} {svc.type}
자세히 보기
))}
{/* ════════════════════════════════ SECTION 4.5 — 무료 체험 후기 수집 배너 ════════════════════════════════ */}
한정 3팀 무료 체험 · 후기 수집 중

AI 자동화 세팅을 무료로 받고 솔직한 후기를 남겨주세요

ChatGPT 프롬프트 세팅 또는 반복 업무 1건 자동화 — 후기 작성이 조건입니다. 현재 2팀 남음

카카오로 신청 →
{/* ════════════════════════════════ SECTION 5 — 기술 스택 마퀴 ════════════════════════════════ */}
{[...TECH_STACK, ...TECH_STACK].map((tech, i) => ( {tech} ))}
{/* ════════════════════════════════ SECTION 5.5 — 콘텐츠 / 인사이트 ════════════════════════════════ */}

INSIGHTS

AI 자동화 실전 팁

블로그 전체 보기 →
{[ { tag: '업무 자동화', title: '업무 자동화 외주 맡기기 전에 반드시 확인할 5가지', desc: '계약서, 소스코드 인도, 납기 명시. 피해의 90%는 이 세 가지 없어서 생깁니다.', color: 'bg-cyan-50 border-cyan-100', tagColor: 'text-cyan-600 bg-cyan-100' }, { tag: 'ChatGPT 활용', title: 'ChatGPT 프롬프트 잘 쓰는 법 — RCTF 공식', desc: 'Role·Context·Task·Format 네 가지를 넣으면 답변 퀄리티가 3배 올라갑니다.', color: 'bg-violet-50 border-violet-100', tagColor: 'text-violet-600 bg-violet-100' }, { tag: '개발자 부업', title: '대기업 현직 개발자가 부업 6개월 해본 솔직한 후기', desc: '잘 된 점, 힘든 점, 현실적인 수익까지. 포장 없이 공유합니다.', color: 'bg-blue-50 border-blue-100', tagColor: 'text-blue-600 bg-blue-100' }, ].map((post) => (
{post.tag}

{post.title}

{post.desc}

네이버 블로그에서 읽기 →
))}

블로그 준비 중 — 곧 업로드됩니다

{/* ════════════════════════════════ SECTION 6 — 최종 CTA ════════════════════════════════ */}
현재 접수 가능

어떤 업무든 먼저 상담해 보세요

자동화할 업무, 만들고 싶은 서비스, 고민 중인 아이디어 — 뭐든 괜찮습니다.
구체적인 견적은 무료 상담 후 24시간 이내에 드립니다.

bgg8988@gmail.com · 010-3907-1392
); }