diff --git a/app/page.tsx b/app/page.tsx
index ca2cb4e..dbd322b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,401 +4,610 @@ import { useState } from 'react';
import Link from 'next/link';
import ContactModal from './components/ContactModal';
-const stats = [
- { value: '3개', label: '지금 운영 중인 서비스' },
- { value: '24h', label: '이내 견적 발송 보장' },
- { value: '100%', label: '소스코드 전달' },
- { value: '1개월', label: '무상 AS 보장' },
+/* ──────────────────────────────────────────────
+ 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 techStack = [
- 'Python', 'Java', 'Spring Boot', 'Next.js', 'React',
- 'PostgreSQL', 'Redis', 'Docker', 'AWS', 'Telegram API',
+const PROOF_SERVICES = [
+ {
+ name: '로또 번호 추천',
+ badge: '실운영 중',
+ desc: 'NAS 서버에서 24/7 운영. 1,100+회차 데이터 분석 엔진.',
+ href: '/services/lotto',
+ color: 'from-amber-500/20 to-amber-600/5',
+ dot: 'bg-amber-400',
+ tag: '구독형 · 월 900원~',
+ },
+ {
+ name: '주식 자동 매매',
+ badge: '실운영 중',
+ desc: 'RSI·MACD 기반 알고리즘 + 텔레그램 알림 연동.',
+ href: '/services/stock',
+ color: 'from-emerald-500/20 to-emerald-600/5',
+ dot: 'bg-emerald-400',
+ tag: '설치형 · 49,000원~',
+ },
+ {
+ name: '쟁승메이드 (이 사이트)',
+ badge: '지금 보시는 중',
+ desc: '로그인·결제·AI 사주·관리자까지 1인 풀스택 개발.',
+ href: '/freelance',
+ color: 'from-blue-500/20 to-blue-600/5',
+ dot: 'bg-blue-400',
+ tag: '직접 제작 · 포트폴리오',
+ },
];
-const CHECKLIST_MAP: Record
= {
- '로또 번호 추천': [
- '구독 플랜 선택 (골드 900원 / 플래티넘 2,900원 / 다이아 9,900원)',
- '번호 수신 방법 (이메일 / 텔레그램)',
- '당첨 보장 없음 — 통계 기반 확률 최적화',
- '구독 취소는 이메일로 언제든 가능',
- ],
- '주식 자동 매매': [
- '사용 중인 증권사 확인 (키움/한국투자 권장)',
- 'Windows PC 또는 서버 환경 필요',
- '원금 손실 위험 인지 — 여유 자금 운용 권장',
- '전략 커스터마이징은 프로 플랜 이상 가능',
- ],
- '프롬프트 엔지니어링': [
- '사용 중인 AI 도구 (ChatGPT / Claude / Gemini)',
- '자동화할 업무 유형 구체적으로 설명',
- '필요한 프롬프트 수량 (단건 / 패키지)',
- '납품 후 사용 가이드 및 1:1 교육 포함',
- ],
- '업무 자동화': [
- '자동화하고 싶은 업무를 구체적으로 설명',
- '현재 사용 중인 시스템 (엑셀, ERP 등)',
- '희망 납품 일정과 예산 범위',
- '데이터 민감도 여부 확인',
- ],
-};
+const SUBSCRIPTION_SERVICES = [
+ {
+ id: 'lotto',
+ href: '/services/lotto',
+ color: '#d97706',
+ bg: '#fef3c7',
+ border: '#fde68a',
+ label: 'LOTTO ANALYTICS',
+ title: '로또 번호 추천',
+ price: '월 900원~',
+ type: '구독형',
+ badge: 'HOT',
+ badgeColor: 'bg-red-500',
+ },
+ {
+ id: 'stock',
+ href: '/services/stock',
+ color: '#059669',
+ bg: '#d1fae5',
+ border: '#a7f3d0',
+ label: 'ALGO TRADING',
+ title: '주식 자동 매매',
+ price: '설치 49,000원~',
+ type: '설치형',
+ badge: 'NEW',
+ badgeColor: 'bg-emerald-500',
+ },
+ {
+ id: 'prompt',
+ href: '/services/prompt',
+ color: '#7c3aed',
+ bg: '#ede9fe',
+ border: '#ddd6fe',
+ label: 'PROMPT ENGINEERING',
+ title: '프롬프트 엔지니어링',
+ price: '건당 30,000원~',
+ type: '건별',
+ badge: null,
+ badgeColor: '',
+ },
+ {
+ id: 'automation',
+ href: '/services/automation',
+ color: '#0891b2',
+ bg: '#cffafe',
+ border: '#a5f3fc',
+ label: 'RPA AUTOMATION',
+ title: '업무 자동화',
+ price: '5만원~',
+ type: '프로젝트',
+ badge: null,
+ badgeColor: '',
+ },
+];
+
+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);
- const [modalService, setModalService] = useState('외주 개발 문의');
- const [modalChecklist, setModalChecklist] = useState([]);
- const [modalHeaderFrom, setModalHeaderFrom] = useState('#04102b');
- const [modalHeaderTo, setModalHeaderTo] = useState('#0a2060');
- const [modalAccent, setModalAccent] = useState('text-[#5ba4ff]');
-
- const openModal = (service: string, headerFrom = '#04102b', headerTo = '#0a2060', accent = 'text-[#5ba4ff]') => {
- const key = Object.keys(CHECKLIST_MAP).find(k => service.includes(k)) || '';
- setModalService(service);
- setModalChecklist(CHECKLIST_MAP[key] || ['문의 내용을 자유롭게 작성해주세요.', '예산 및 일정도 알려주시면 도움이 됩니다.']);
- setModalHeaderFrom(headerFrom);
- setModalHeaderTo(headerTo);
- setModalAccent(accent);
- setModalOpen(true);
- };
return (
-
+
setModalOpen(false)}
- service={modalService}
- checklist={modalChecklist}
- accentColor={modalAccent}
- headerFrom={modalHeaderFrom}
- headerTo={modalHeaderTo}
+ service="외주 개발 문의"
+ checklist={[
+ '개발하고 싶은 서비스를 간략히 설명해주세요',
+ '희망 납품 일정과 예산 범위',
+ '참고할 만한 사이트나 레퍼런스',
+ '현재 운영 중인 시스템이 있다면 함께 알려주세요',
+ ]}
+ accentColor="text-[#5ba4ff]"
+ headerFrom="#04102b"
+ headerTo="#0a2060"
/>
- {/* ─── Hero ─── */}
-
-
-
-
+ {/* ════════════════════════════════
+ SECTION 1 — HERO (Split layout)
+ ════════════════════════════════ */}
+
+ {/* 배경 그리드 */}
+
+ {/* 배경 글로우 */}
+
+
+
+
+
+
+ {/* ── 좌측: 메인 카피 ── */}
+
+ {/* 뱃지 */}
+
+
+
+
+ 연락 두절 없는
+ 7년차 개발자
+
+ 가
+
+
+ 계약서, 중간 보고, 소스코드 인도, 1개월 무상 AS까지 — 단계마다 증거를 남기는 개발 방식으로 진행합니다.
+ 이 사이트 자체가 제 포트폴리오입니다.
+
+
+ {/* CTA */}
+
+
setModalOpen(true)}
+ className="inline-flex items-center gap-2.5 bg-[#1a56db] hover:bg-[#1e4fc2] active:scale-[0.98] text-white px-7 py-3.5 rounded-xl font-bold text-sm shadow-lg shadow-blue-900/40"
+ style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
+ >
+
+
+ 무료 상담 신청 (24h 이내 답변)
+
+
+ 포트폴리오 보기 →
+
+
+
+ {/* Stats */}
+
+ {STATS.map((s) => (
+
+
{s.value}
+
{s.label}
+
+ ))}
+
+
+
+ {/* ── 우측: 신뢰 카드 ── */}
+
+
+
+ 현재 운영 서비스
+
+
+
+
+ {PROOF_SERVICES.map((s) => (
+
+
+
+
{s.badge}
+
+ ))}
+
+
+
+
+ {/* 연락처 */}
+
+
-
-
-
-
- URL을 드립니다.
- 직접 확인하고
- {' '}
- 결정하세요
-
-
- jaengseung-made.com — 로또 분석, 주식 자동매매, 구독 결제까지
- 직접 만들고 지금도 운영 중입니다. 당신 것도 이렇게 만들어드립니다.
-
-
-
openModal('외주 개발 문의')}
- className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-7 py-3 rounded-xl font-semibold text-sm transition-all shadow-lg shadow-blue-900/50"
- >
-
-
- URL 확인 후 상담 신청
-
-
- bgg8988@gmail.com
-
+
- {/* Stats */}
-
- {stats.map((s) => (
-
-
{s.value}
-
{s.label}
+ {/* ════════════════════════════════
+ 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.name}
+
{s.desc}
+
+ {s.tag}
+ 보러가기 →
+
+
+ ))}
+
+
+
+ {/* ════════════════════════════════
+ SECTION 4 — 구독/설치형 서비스 (보조)
+ ════════════════════════════════ */}
+
+
+ {/* 레이블 분리 */}
+
+
+
+
+
직접 만들어 운영 중인 구독 · 설치형 서비스
+
+
+
+
+
+
+ 외주 개발 의뢰가 아닌, 제가 직접 만들고 운영 중인 서비스들입니다.
+
+
+ {SUBSCRIPTION_SERVICES.map((svc) => (
+
+ {svc.badge && (
+
{svc.badge}
+ )}
+
{svc.label}
+
{svc.title}
+
+ {svc.price}
+ {svc.type}
+
+
+ 자세히 보기 →
+
+
+ ))}
+
+
+
+ {/* ════════════════════════════════
+ SECTION 5 — 기술 스택 마퀴
+ ════════════════════════════════ */}
+
+
+ {[...TECH_STACK, ...TECH_STACK].map((tech, i) => (
+
+
))}
-
+
+
- {/* ─── Services Grid ─── */}
-
-
-
-
SERVICES
-
제공 서비스
-
카드를 클릭하면 상세 정보와 요금을 확인할 수 있습니다
-
+ {/* ════════════════════════════════
+ SECTION 6 — 최종 CTA
+ ════════════════════════════════ */}
+
+
+
+
+
-
-
- {/* ─ 로또 ─ */}
-
-
-
- {[1,2,3,4,5,6].map(n => (
-
{String(n*7%45+1).padStart(2,'0')}
- ))}
-
-
-
HOT
-
-
-
LOTTO ANALYTICS
-
로또 번호 추천
+
+
+
+
+ 어떤 업무든 먼저 상담해 보세요
+
+
+ 자동화할 업무, 만들고 싶은 서비스, 고민 중인 아이디어 — 뭐든 괜찮습니다.
+
+
setModalOpen(true)}
+ className="inline-flex items-center gap-2.5 bg-[#1a56db] hover:bg-[#1e4fc2] active:scale-[0.98] text-white px-8 py-4 rounded-xl font-bold text-base shadow-xl shadow-blue-900/40"
+ style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
+ >
+ 무료 상담 신청 (계약서 포함) →
+
+
+ bgg8988@gmail.com
+ ·
+ 010-3907-1392
-
-
출현 빈도, 패턴 분석, 핫/콜드 번호 알고리즘으로 매주 최적의 번호 조합을 제공합니다.
-
- {['몬테카를로 시뮬레이션 분석', '핫넘버 / 콜드넘버 통계', '골드/플래티넘/다이아 플랜'].map(f => (
-
- ))}
-
-
-
- 월 900원~
- 구독형
-
-
자세히 보기 →
-
-
-
-
- {/* ─ 주식 ─ */}
-
-
-
-
-
-
NEW
-
-
-
ALGO TRADING
-
주식 자동 매매
-
-
-
-
기술적 분석 기반 매매 신호를 텔레그램으로 실시간 수신하고, 자동으로 매수·매도합니다.
-
- {['실시간 텔레그램 알림', '자동 매수/매도 실행', '포트폴리오 손익 관리'].map(f => (
-
- ))}
-
-
-
- 설치 49,000원~
- 설치형
-
-
자세히 보기 →
-
-
-
-
- {/* ─ 프롬프트 ─ */}
-
-
-
- $ optimize prompt → efficiency: 94%
-
-
-
-
-
PROMPT ENGINEERING
-
프롬프트 엔지니어링
-
-
-
-
ChatGPT·Claude에 최적화된 업무별 프롬프트를 설계하여 AI 활용 효율을 극대화합니다.
-
- {['업무별 맞춤 프롬프트', 'ChatGPT / Claude 최적화', '프롬프트 라이브러리 제공'].map(f => (
-
- ))}
-
-
-
- 건당 30,000원~
- 건별
-
-
자세히 보기 →
-
-
-
-
- {/* ─ 업무자동화 ─ */}
-
-
-
-
-
-
-
-
RPA AUTOMATION
-
업무 자동화
-
-
-
-
매일 반복되는 엑셀 작업, 이메일 발송, 데이터 수집을 자동화하여 생산성을 높입니다.
-
- {['엑셀 / 구글 시트 자동화', '이메일 자동 발송', '웹 스크래핑 · 데이터 수집'].map(f => (
-
- ))}
-
-
-
- 5만원~
- 프로젝트
-
-
자세히 보기 →
-
-
-
-
-
- {/* ─ AI 사주 분석 ─ */}
-
-
-
-
-
NEW
-
-
-
-
AI SAJU ANALYTICS
-
AI 사주 분석
-
전통 명리학과 GPT-4o의 만남 — 12가지 항목 상세 해석
-
-
-
-
-
사주팔자 원국 계산부터 신강/신약 분석, 용신·희신, 대운까지 — AI가 따뜻하고 정확하게 해석해드립니다.
-
- {['전통 사주팔자 계산', 'AI 12가지 항목 해석', '무료 기본 · 유료 상세'].map(f => (
-
- ))}
-
-
-
- 무료 체험 / 상세 ₩4,900
- 1회
-
-
자세히 보기 →
-
-
-
-
-
- {/* ─ Freelance CTA ─ */}
-
openModal('외주 개발 문의')}
- className="service-card mt-6 w-full flex items-center gap-6 bg-gradient-to-r from-[#04102b] via-[#0a1f5c] to-[#0d2d8a] rounded-2xl border border-[#1a3a7a] p-6 hover:border-[#1a56db]/60 group text-left"
- >
-
-
-
맞춤형 프로젝트
-
외주 개발 문의
-
원하시는 서비스가 없으신가요? 요구사항에 맞게 처음부터 개발해드립니다.
-
- 문의하기 →
-
-
-
- {/* ─ Bottom: Tech + Trust ─ */}
-
-
-
-
- {techStack.map((tech) => (
- {tech}
- ))}
-
-
-
-
-
- {[
- { icon: '🌐', text: 'jaengseung-made.com — 지금 바로 확인 가능한 실제 운영 서비스' },
- { icon: '🔒', text: '납품 전 마음에 안 드시면 이유 불문 전액 환불' },
- { icon: '📋', text: '계약서 + 소스코드 전체 제공 — 잠수 없음, 연락 두절 없음' },
- { icon: '⚡', text: '24시간 이내 답변 · 납기 지연 시 패널티 적용' },
- ].map((item) => (
-
- {item.icon}
- {item.text}
-
- ))}
-
-
+
+
);
}