diff --git a/app/landing/layout.tsx b/app/landing/layout.tsx new file mode 100644 index 0000000..5faf4a9 --- /dev/null +++ b/app/landing/layout.tsx @@ -0,0 +1,4 @@ +// DashboardShell을 우회하는 독립 레이아웃 +export default function LandingLayout({ children }: { children: React.ReactNode }) { + return <>{children}; +} diff --git a/app/landing/page.tsx b/app/landing/page.tsx new file mode 100644 index 0000000..e205bbc --- /dev/null +++ b/app/landing/page.tsx @@ -0,0 +1,703 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import Link from 'next/link'; + +/* ─────────────────────────── DATA ─────────────────────────── */ +const services = [ + { + id: 'lotto', + icon: 'lotto', + title: '로또 번호 추천', + tag: '구독형', + tagColor: '#7c3aed', + price: '월 9,900원~', + desc: '빅데이터·통계 기반 번호 분석. 실제 운영 중인 서버에서 매주 데이터를 갱신합니다.', + url: 'lotto.jaengseung-made.com', + href: '/services/lotto', + color: '#7c3aed', + }, + { + id: 'stock', + icon: 'stock', + title: '주식 자동매매', + tag: '설치형', + tagColor: '#0ea5e9', + price: '설치비 49,000원~', + desc: '텔레그램 연동 자동 매매 프로그램. 조건 설정 후 24시간 무인 운영 가능.', + url: 'stock.jaengseung-made.com', + href: '/services/stock', + color: '#0ea5e9', + }, + { + id: 'automation', + icon: 'automation', + title: '업무 자동화', + tag: '외주', + tagColor: '#10b981', + price: '5만원~', + desc: 'RPA·엑셀·이메일 자동화. 반복 업무를 코드로 대체해 드립니다.', + url: null, + href: '/services/automation', + color: '#10b981', + }, + { + id: 'prompt', + icon: 'prompt', + title: '프롬프트 엔지니어링', + tag: '컨설팅', + tagColor: '#f59e0b', + price: '5만원~', + desc: '업무 특화 AI 프롬프트 설계. ChatGPT·Claude를 실무에 맞게 최적화.', + url: null, + href: '/services/prompt', + color: '#f59e0b', + }, + { + id: 'freelance', + icon: 'freelance', + title: '외주 개발', + tag: '맞춤형', + tagColor: '#2563eb', + price: '견적 무료', + desc: '요구사항 분석부터 납품까지. 계약서 작성 + 소스코드 전체 인도.', + url: null, + href: '/freelance', + color: '#2563eb', + }, +]; + +const guarantees = [ + { + icon: 'contract', + title: '계약서 필수', + desc: '구두 약속 없이 모든 작업은 서면 계약서로 시작합니다. 범위·가격·납기 모두 명시.', + }, + { + icon: 'refund', + title: '전액 환불 보장', + desc: '납품 후 7일 내 심각한 하자 발생 시 전액 환불. 조건 계약서에 명기합니다.', + }, + { + icon: 'source', + title: '소스코드 전체 인도', + desc: '완성된 코드 전체를 GitHub에 이관. 이후 직접 수정·확장 가능합니다.', + }, + { + icon: 'penalty', + title: '납기 지연 패널티', + desc: '납기 초과 1일당 대금의 1% 자동 차감. 계약서에 명시된 조건입니다.', + }, +]; + +const faqs = [ + { q: '개발 경험이 없어도 의뢰할 수 있나요?', a: '네. 요구사항을 말씀해 주시면 제가 기술 스펙으로 번역하고, 검토 후 계약서를 작성합니다. 기술 용어를 몰라도 됩니다.' }, + { q: '중간에 요구사항이 바뀌면 어떻게 되나요?', a: '계약서 범위 내 소폭 변경은 무상으로 반영합니다. 범위 초과 시 추가 견적서를 별도 작성합니다.' }, + { q: '납품 후 유지보수는 어떻게 되나요?', a: '1개월 무상 A/S가 기본 포함됩니다. 이후 월 유지보수 계약도 가능합니다.' }, + { q: '구독형 서비스는 언제든 해지 가능한가요?', a: '네. 다음 결제일 전 언제든 해지 가능하며 잔여 기간 환불은 이용약관을 따릅니다.' }, +]; + +/* ─────────────────────────── ICONS ─────────────────────────── */ +function ServiceIcon({ type, color }: { type: string; color: string }) { + const c = color; + if (type === 'lotto') return ( + + + {[7, 14, 21].map((x, i) => )} + + + + ); + if (type === 'stock') return ( + + + + + + ); + if (type === 'automation') return ( + + + + + + + ); + if (type === 'prompt') return ( + + + + + + + ); + return ( + + + + + + ); +} + +function GuaranteeIcon({ type }: { type: string }) { + if (type === 'contract') return ( + + + + + + ); + if (type === 'refund') return ( + + + + + + ); + if (type === 'source') return ( + + + + ); + return ( + + + + + + ); +} + +/* ─────────────────────────── COUNTER ─────────────────────────── */ +function useCountUp(target: number, duration = 2000) { + const [count, setCount] = useState(0); + const ref = useRef(null); + const started = useRef(false); + + useEffect(() => { + const observer = new IntersectionObserver(([entry]) => { + if (entry.isIntersecting && !started.current) { + started.current = true; + const start = performance.now(); + const step = (now: number) => { + const pct = Math.min((now - start) / duration, 1); + const ease = 1 - Math.pow(1 - pct, 3); + setCount(Math.floor(ease * target)); + if (pct < 1) requestAnimationFrame(step); + }; + requestAnimationFrame(step); + } + }, { threshold: 0.5 }); + if (ref.current) observer.observe(ref.current); + return () => observer.disconnect(); + }, [target, duration]); + + return { count, ref }; +} + +function CountUp({ target, suffix = '', prefix = '' }: { target: number; suffix?: string; prefix?: string }) { + const { count, ref } = useCountUp(target); + return
{prefix}{count}{suffix}
; +} + +/* ─────────────────────────── PAGE ─────────────────────────── */ +export default function LandingPage() { + const [openFaq, setOpenFaq] = useState(null); + const [hovered, setHovered] = useState(null); + + return ( +
+ + + {/* ── NAV ── */} + + + {/* ── HERO ── */} +
+ {/* Grid pattern */} +
+ {/* Glow orbs */} +
+
+ {/* Scan line */} +
+ +
+ {/* Left */} +
+ {/* Status badge */} +
+
+ 지금 이 순간도 서비스가 돌아가고 있습니다 +
+ +

+ URL을 드립니다.
+ 직접 확인하고
결정하세요. +

+ +

+ 개발자에게 맡겼다가 연락 두절된 경험 있으신가요?
+ 7년차 대기업 백엔드 개발자가 계약서부터 소스코드 인도까지
직접 책임집니다. +

+ +
+ + 무료 견적 · 24시간 내 회신 → + + + 운영 중인 서비스 보기 + +
+
+ + {/* Right — URL Proof Card */} +
+
+ {/* Browser chrome */} +
+ {['#ef4444', '#f59e0b', '#10b981'].map((c, i) => ( +
+ ))} +
+ + https://lotto.jaengseung-made.com + | + +
+
+ {/* Content */} +
+
+
+ +
+
+
로또 번호 추천
+
● 운영 중
+
+
+ {/* Mock chart lines */} + {[['최신 분석', '2024.08.14 완료'], ['이번 주 추천', '3, 7, 14, 28, 35, 42'], ['정확도', '통계 기반 분석']].map(([k, v]) => ( +
+ {k} + {v} +
+ ))} +
+ + ✓ 이 서비스는 지금 실제로 운영되고 있습니다 + +
+
+
+ + {/* Small badges below card */} +
+ {['NAS 자체 서버', 'Vercel 배포', 'Supabase DB'].map(b => ( +
+ {b} +
+ ))} +
+
+
+
+ + {/* ── TRUST BAR ── */} +
+
+ {[ + { label: '실제 운영 서비스', value: 3, suffix: '개', color: '#60a5fa' }, + { label: '평균 견적 발송', value: 24, suffix: 'h 내', color: '#34d399' }, + { label: '소스코드 인도', value: 100, suffix: '%', color: '#a78bfa' }, + { label: '무상 A/S 기간', value: 1, suffix: '개월', color: '#fbbf24' }, + ].map((s, i) => ( +
+
+ +
+
{s.label}
+
+ ))} +
+
+ + {/* ── SERVICES ── */} +
+
+
+
Services
+

+ 제공 서비스 5가지 +

+

+ 구독형 솔루션부터 맞춤 외주까지 — 모두 계약서와 함께 시작합니다 +

+
+ +
+ {services.map((svc) => ( + setHovered(svc.id)} + onMouseLeave={() => setHovered(null)} + style={{ + background: 'white', borderRadius: 16, padding: '28px 24px', + border: `1px solid ${hovered === svc.id ? svc.color + '50' : '#e2e8f0'}`, + boxShadow: '0 2px 12px rgba(0,0,0,0.04)', + textDecoration: 'none', display: 'block', position: 'relative', overflow: 'hidden', + }} + > + {/* Color top border */} +
+ +
+
+ +
+
+ + {svc.tag} + +
+
+ +

{svc.title}

+

{svc.desc}

+ + {/* URL 증거 */} + {svc.url && ( +
+
+ {svc.url} +
+ )} + +
+ {svc.price} + 자세히 보기 → +
+ + ))} +
+
+
+ + {/* ── PROOF ── */} +
+
+
+
Proof of Work
+

+ 말 대신 URL로 증명합니다 +

+

+ 실제로 운영 중인 서비스를 직접 확인해 보세요 +

+
+ +
+ {[ + { title: '로또 번호 추천', url: 'lotto.jaengseung-made.com', stack: ['Next.js', 'Supabase', 'NAS'], status: 'LIVE', desc: '매주 업데이트되는 빅데이터 기반 번호 분석', color: '#7c3aed' }, + { title: '주식 자동매매', url: 'stock.jaengseung-made.com', stack: ['Python', 'Telegram API', 'NAS'], status: 'LIVE', desc: '24시간 무인 운영 중인 텔레그램 봇 시스템', color: '#0ea5e9' }, + { title: 'AI 사주 분석', url: 'saju.jaengseung-made.com', stack: ['Gemini API', 'Next.js', 'DB'], status: 'LIVE', desc: 'Gemini 2.5 Pro 기반 사주 해석 서비스', color: '#f59e0b' }, + ].map((p) => ( +
+ {/* Browser bar */} +
+ {['#ef4444', '#f59e0b', '#10b981'].map((c, i) =>
)} +
+ https://{p.url} +
+
+
+
+ {p.title} +
+
+ {p.status} +
+
+

{p.desc}

+
+ {p.stack.map(s => ( + {s} + ))} +
+
+
+ ))} +
+ + {/* Career Timeline */} +
+

개발자 이력

+
+ {[ + { year: '2018', title: '대기업 입사', desc: '백엔드 개발 시작', color: '#3b82f6' }, + { year: '2021', title: '시니어 개발자', desc: 'MSA 아키텍처 설계', color: '#7c3aed' }, + { year: '2023', title: '부업 서비스 시작', desc: '첫 SaaS 론칭', color: '#0ea5e9' }, + { year: '2024', title: '3개 서비스 운영', desc: '쟁승메이드 풀가동', color: '#10b981' }, + ].map((t) => ( +
+
+
{t.year}
+
{t.title}
+
{t.desc}
+
+ ))} +
+
+
+
+ + {/* ── GUARANTEES ── */} +
+
+
+
Guarantees
+

+ 4가지 보장 +

+

+ 모두 계약서에 명기됩니다 — 구두 약속이 아닙니다 +

+
+ +
+ {guarantees.map((g) => ( +
+
+ +
+
+

{g.title}

+

{g.desc}

+
+
+ ))} +
+
+
+ + {/* ── PRICING ── */} +
+
+
+
Pricing
+

+ 투명한 가격표 +

+

숨겨진 요금 없이 처음부터 명확하게

+
+ +
+ {/* Header */} +
+ {['서비스', '플랜', '가격', ''].map((h, i) => ( +
{h}
+ ))} +
+ {[ + { svc: '홈페이지 제작', plan: '스타터', price: '20만원~', cta: '상담 신청' }, + { svc: '', plan: '비즈니스', price: '100만원~', cta: '상담 신청' }, + { svc: '업무 자동화', plan: '단순 자동화', price: '5만원~', cta: '견적 받기' }, + { svc: '', plan: '자동화 심화', price: '15만원~', cta: '견적 받기' }, + { svc: '주식 자동매매', plan: '스타터', price: '설치 49,000 + 월 9,900원', cta: '신청하기' }, + { svc: '', plan: '프로', price: '설치 99,000 + 월 29,000원', cta: '신청하기' }, + { svc: '로또 추천', plan: '기본', price: '월 9,900원', cta: '구독하기' }, + { svc: '프롬프트', plan: '단건 설계', price: '5만원~', cta: '문의하기' }, + ].map((row, i) => ( +
+
+ {row.svc || '-'} +
+
{row.plan}
+
{row.price}
+ + {row.cta} + +
+ ))} +
+ +

+ * 모든 가격은 VAT 별도 · 복잡한 요구사항은 무료 상담 후 정확한 견적 제공 +

+
+
+ + {/* ── FAQ ── */} +
+
+
+
FAQ
+

+ 자주 묻는 질문 +

+
+ +
+ {faqs.map((faq, i) => ( +
+ + {openFaq === i && ( +
+
+

{faq.a}

+
+ )} +
+ ))} +
+
+
+ + {/* ── FINAL CTA ── */} +
+ {/* Background dots */} + + + + + + + +
+
+
+ 지금 문의하면 24시간 내 견적 발송 +
+ +

+ 개발사 연락 두절로
+ 손해 본 경험 있으신가요? +

+

+ 여기선 계약서부터 시작합니다.
무료 상담으로 지금 바로 확인해 보세요. +

+ +
+ + 무료 견적 신청하기 → + + + 이메일로 문의 + +
+ +

+ bgg8988@gmail.com · 010-3907-1392 +

+
+
+ + {/* ── FOOTER ── */} + +
+ ); +}