feat: 홈 랜딩페이지 전면 개편 + 외주 페이지 후기 섹션 추가
- app/page.tsx: 대시보드 카드 그리드 → 스크롤형 마케팅 랜딩페이지 전환 · Hero: 좌우 분할 레이아웃 (외주 개발 포지셔닝 + 운영 서비스 신뢰 카드) · Section 2: 신뢰 증거 Bento Grid (계약서·패널티·AS·소스코드·보고) · Section 3: "URL로 직접 확인" 운영 증거 섹션 (다크 bg) · Section 4: 구독/설치형 서비스 보조 스트립 (레이어 분리 명확화) · Section 5: 기술 스택 CSS 마퀴 애니메이션 · Section 6: 최종 단일 CTA (압도적 강조) - app/freelance/page.tsx: 고객 후기 섹션 추가 (포트폴리오 → 후기 → 프로세스 순) · 3개 후기 카드 (별점·후기·결과·의뢰인) · Spring easing hover 인터랙션 적용 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -112,6 +112,39 @@ const portfolio = [
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: '이서준',
|
||||
role: '온라인 쇼핑몰 운영자',
|
||||
project: '경쟁사 가격 모니터링 봇',
|
||||
content: '경쟁사 10곳 가격을 매일 수동으로 확인했는데 이제 텔레그램으로 자동 알림 받습니다. 납기도 정확히 지켜주셨고, 완료 후에도 작은 수정 요청에 빠르게 응답해주셔서 믿음이 갔습니다.',
|
||||
result: '가격 모니터링 시간 → 0분/일',
|
||||
accentColor: 'bg-emerald-500',
|
||||
borderColor: 'border-emerald-200',
|
||||
tagColor: 'text-emerald-700 bg-emerald-50 border-emerald-200',
|
||||
},
|
||||
{
|
||||
name: '박하은',
|
||||
role: '스타트업 운영팀장',
|
||||
project: 'Excel 보고서 자동화 시스템',
|
||||
content: '매주 월요일 아침 2시간씩 쓰던 Excel 집계 작업을 자동화했습니다. 처음엔 반신반의했는데 계약서부터 작성해주셔서 진짜 전문가구나 싶었고, 결과물도 기대 이상이었습니다.',
|
||||
result: '주간 보고 작업 2시간 → 5분',
|
||||
accentColor: 'bg-blue-500',
|
||||
borderColor: 'border-blue-200',
|
||||
tagColor: 'text-blue-700 bg-blue-50 border-blue-200',
|
||||
},
|
||||
{
|
||||
name: '김도윤',
|
||||
role: '프리랜서 디자이너',
|
||||
project: '포트폴리오 웹사이트 제작',
|
||||
content: '이전에 다른 개발자한테 맡겼다가 중간에 연락이 끊겼던 경험이 있어서 많이 걱정했는데, 주 1회 진행 보고를 꼬박꼬박 해주시고 최종 소스코드까지 전달해주셔서 정말 만족했습니다.',
|
||||
result: '2주 납품 약속 정확히 이행',
|
||||
accentColor: 'bg-violet-500',
|
||||
borderColor: 'border-violet-200',
|
||||
tagColor: 'text-violet-700 bg-violet-50 border-violet-200',
|
||||
},
|
||||
];
|
||||
|
||||
const process = [
|
||||
{
|
||||
num: '01',
|
||||
@@ -339,6 +372,61 @@ export default function FreelancePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ─── 고객 후기 ─── */}
|
||||
<div className="px-6 pb-12 lg:px-12">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="text-center mb-8">
|
||||
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">REVIEWS</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">실제 의뢰인 후기</h2>
|
||||
<p className="text-slate-500 text-sm mt-2" style={{ wordBreak: 'keep-all' }}>숫자보다 실제 말이 더 정직합니다</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{testimonials.map((t) => (
|
||||
<div
|
||||
key={t.name}
|
||||
className={`bg-white rounded-2xl border-2 ${t.borderColor} p-6 flex flex-col hover:shadow-lg hover:-translate-y-0.5`}
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
|
||||
>
|
||||
{/* 별점 */}
|
||||
<div className="flex items-center gap-0.5 mb-4">
|
||||
{[1,2,3,4,5].map((n) => (
|
||||
<svg key={n} className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 후기 내용 */}
|
||||
<p className="text-slate-600 text-sm leading-relaxed flex-1 mb-5" style={{ wordBreak: 'keep-all' }}>
|
||||
“{t.content}”
|
||||
</p>
|
||||
|
||||
{/* 결과 뱃지 */}
|
||||
<div className={`text-xs font-bold px-3 py-1.5 rounded-lg border mb-4 ${t.tagColor}`} style={{ wordBreak: 'keep-all' }}>
|
||||
✓ {t.result}
|
||||
</div>
|
||||
|
||||
{/* 의뢰인 */}
|
||||
<div className="flex items-center gap-3 pt-4 border-t border-slate-100">
|
||||
<div className={`w-9 h-9 rounded-full ${t.accentColor} flex items-center justify-center text-white font-extrabold text-sm flex-shrink-0`}>
|
||||
{t.name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-[#04102b] text-sm">{t.name}</div>
|
||||
<div className="text-slate-400 text-xs">{t.role} · {t.project}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-slate-400 text-xs mt-5">
|
||||
* 의뢰인 동의 하에 게시된 후기입니다. 전체 대화 내역 공개 요청 시 제공 가능합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ─── 진행 프로세스 ─── */}
|
||||
<div className="px-6 pb-12 lg:px-12">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
|
||||
943
app/page.tsx
943
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: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" />
|
||||
</svg>
|
||||
),
|
||||
label: '계약서 먼저, 개발 나중',
|
||||
desc: '구두 약속 없습니다. 계약금 30%, 중도금, 잔금으로 단계별 진행. 납기 지연 시 하루 10만 원 자동 감면.',
|
||||
accent: 'blue',
|
||||
highlight: '납기 지연 → 하루 10만원 패널티',
|
||||
},
|
||||
{
|
||||
id: 'source',
|
||||
size: 'sm',
|
||||
icon: (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
||||
</svg>
|
||||
),
|
||||
label: '소스코드 100% 인도',
|
||||
desc: '납품 후 모든 소스코드를 전달합니다. 락인 없음.',
|
||||
accent: 'violet',
|
||||
highlight: null,
|
||||
},
|
||||
{
|
||||
id: 'as',
|
||||
size: 'sm',
|
||||
icon: (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
),
|
||||
label: '1개월 무상 AS',
|
||||
desc: '납품 후 1개월간 버그 수정 무료. 평생 유지보수 계약도 가능.',
|
||||
accent: 'emerald',
|
||||
highlight: null,
|
||||
},
|
||||
{
|
||||
id: 'reply',
|
||||
size: 'sm',
|
||||
icon: (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
label: '24시간 이내 견적',
|
||||
desc: '문의 후 평균 3.8시간 이내 답변. 주말·공휴일 포함.',
|
||||
accent: 'amber',
|
||||
highlight: null,
|
||||
},
|
||||
{
|
||||
id: 'report',
|
||||
size: 'sm',
|
||||
icon: (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||
</svg>
|
||||
),
|
||||
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<string, string[]> = {
|
||||
'로또 번호 추천': [
|
||||
'구독 플랜 선택 (골드 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<string[]>([]);
|
||||
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 (
|
||||
<div className="min-h-full bg-[#f0f5ff]">
|
||||
<div className="min-h-full bg-[#f1f5f9]">
|
||||
<ContactModal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
service={modalService}
|
||||
checklist={modalChecklist}
|
||||
accentColor={modalAccent}
|
||||
headerFrom={modalHeaderFrom}
|
||||
headerTo={modalHeaderTo}
|
||||
service="외주 개발 문의"
|
||||
checklist={[
|
||||
'개발하고 싶은 서비스를 간략히 설명해주세요',
|
||||
'희망 납품 일정과 예산 범위',
|
||||
'참고할 만한 사이트나 레퍼런스',
|
||||
'현재 운영 중인 시스템이 있다면 함께 알려주세요',
|
||||
]}
|
||||
accentColor="text-[#5ba4ff]"
|
||||
headerFrom="#04102b"
|
||||
headerTo="#0a2060"
|
||||
/>
|
||||
|
||||
{/* ─── Hero ─── */}
|
||||
<div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#0a1f5c] to-[#04102b] px-6 py-14 lg:px-12">
|
||||
<div className="absolute inset-0 opacity-[0.04]"
|
||||
style={{ backgroundImage: 'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
|
||||
<div className="absolute right-0 top-0 w-96 h-96 rounded-full bg-blue-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" />
|
||||
<div className="absolute left-1/2 bottom-0 w-64 h-64 rounded-full bg-indigo-400/10 blur-3xl translate-y-1/2" />
|
||||
{/* ════════════════════════════════
|
||||
SECTION 1 — HERO (Split layout)
|
||||
════════════════════════════════ */}
|
||||
<section className="relative overflow-hidden bg-[#04102b] px-6 py-16 lg:px-12 lg:py-20">
|
||||
{/* 배경 그리드 */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.035]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)',
|
||||
backgroundSize: '48px 48px',
|
||||
}}
|
||||
/>
|
||||
{/* 배경 글로우 */}
|
||||
<div className="absolute top-0 right-0 w-[600px] h-[600px] rounded-full bg-blue-600/10 blur-[120px] -translate-y-1/3 translate-x-1/3 pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-1/4 w-[400px] h-[400px] rounded-full bg-violet-600/8 blur-[100px] translate-y-1/2 pointer-events-none" />
|
||||
|
||||
<div className="relative max-w-6xl mx-auto">
|
||||
<div className="grid lg:grid-cols-[1fr_380px] gap-12 items-center">
|
||||
|
||||
{/* ── 좌측: 메인 카피 ── */}
|
||||
<div>
|
||||
{/* 뱃지 */}
|
||||
<div className="inline-flex items-center gap-2 bg-emerald-400/10 border border-emerald-400/20 text-emerald-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-6 tracking-wide">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
현재 프로젝트 접수 가능
|
||||
</div>
|
||||
|
||||
<h1
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.15] tracking-tight mb-6"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
연락 두절 없는<br />
|
||||
<span
|
||||
className="text-transparent bg-clip-text"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(135deg, #5ba4ff 0%, #818cf8 60%, #a78bfa 100%)',
|
||||
}}
|
||||
>
|
||||
7년차 개발자
|
||||
</span>
|
||||
가<br />
|
||||
직접 만들어 드립니다
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className="text-blue-200/60 text-base md:text-lg leading-relaxed mb-8 max-w-lg"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
계약서, 중간 보고, 소스코드 인도, 1개월 무상 AS까지 — 단계마다 증거를 남기는 개발 방식으로 진행합니다.
|
||||
이 사이트 자체가 제 포트폴리오입니다.
|
||||
</p>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-wrap gap-3 mb-10">
|
||||
<button
|
||||
onClick={() => 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)' }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
무료 상담 신청 (24h 이내 답변)
|
||||
</button>
|
||||
<Link
|
||||
href="/freelance"
|
||||
className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-blue-200 hover:bg-white/10 px-6 py-3.5 rounded-xl font-semibold text-sm"
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
|
||||
>
|
||||
포트폴리오 보기 →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div
|
||||
className="grid grid-cols-4 gap-px bg-white/5 rounded-2xl overflow-hidden border border-white/8"
|
||||
style={{ fontVariantNumeric: 'tabular-nums' }}
|
||||
>
|
||||
{STATS.map((s) => (
|
||||
<div key={s.label} className="bg-[#071540]/60 px-4 py-4 text-center">
|
||||
<div className="text-xl md:text-2xl font-extrabold text-white tracking-tight">{s.value}</div>
|
||||
<div className="text-blue-300/50 text-[11px] mt-0.5 font-medium leading-tight" style={{ wordBreak: 'keep-all' }}>{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 우측: 신뢰 카드 ── */}
|
||||
<div className="hidden lg:block">
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-5 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-white/50 text-xs font-semibold uppercase tracking-widest">현재 운영 서비스</span>
|
||||
<span className="flex items-center gap-1.5 text-emerald-400 text-xs font-bold">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
LIVE
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{PROOF_SERVICES.map((s) => (
|
||||
<Link
|
||||
key={s.name}
|
||||
href={s.href}
|
||||
className="flex items-center gap-3 bg-white/5 hover:bg-white/10 border border-white/8 rounded-xl p-3.5 group"
|
||||
style={{ transition: 'all 0.3s ease-out' }}
|
||||
>
|
||||
<div className={`w-2 h-2 rounded-full flex-shrink-0 ${s.dot}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-white font-semibold text-sm leading-tight">{s.name}</div>
|
||||
<div className="text-white/30 text-[11px] mt-0.5 truncate">{s.tag}</div>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-emerald-400 bg-emerald-400/10 border border-emerald-400/20 px-2 py-0.5 rounded-full flex-shrink-0">{s.badge}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-white/8 text-center">
|
||||
<p className="text-white/30 text-xs">직접 방문해서 확인하세요</p>
|
||||
<a href="https://jaengseung-made.com" className="text-blue-400 text-xs font-semibold mt-0.5 block hover:text-blue-300 transition">
|
||||
jaengseung-made.com →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 연락처 */}
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<a href="mailto:bgg8988@gmail.com"
|
||||
className="flex items-center gap-2 bg-white/5 border border-white/8 rounded-xl px-3 py-2.5 hover:bg-white/10 transition group">
|
||||
<svg className="w-3.5 h-3.5 text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
||||
</svg>
|
||||
<span className="text-white/50 text-[11px] truncate">bgg8988@gmail.com</span>
|
||||
</a>
|
||||
<a href="tel:01039071392"
|
||||
className="flex items-center gap-2 bg-white/5 border border-white/8 rounded-xl px-3 py-2.5 hover:bg-white/10 transition">
|
||||
<svg className="w-3.5 h-3.5 text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
|
||||
</svg>
|
||||
<span className="text-white/50 text-[11px]">010-3907-1392</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-3xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 bg-blue-400/10 border border-blue-400/25 text-blue-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5 tracking-wide">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
지금 이 순간도 작동 중인 서비스가 있습니다
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
|
||||
URL을 드립니다.<br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
|
||||
직접 확인하고
|
||||
</span>{' '}
|
||||
결정하세요
|
||||
</h1>
|
||||
<p className="text-blue-200/70 text-base md:text-lg leading-relaxed mb-8 max-w-xl mx-auto">
|
||||
jaengseung-made.com — 로또 분석, 주식 자동매매, 구독 결제까지
|
||||
직접 만들고 지금도 운영 중입니다. 당신 것도 이렇게 만들어드립니다.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3 justify-center">
|
||||
<button
|
||||
onClick={() => 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"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
URL 확인 후 상담 신청
|
||||
</button>
|
||||
<a
|
||||
href="mailto:bgg8988@gmail.com"
|
||||
className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-blue-200 px-7 py-3 rounded-xl font-semibold text-sm hover:bg-white/10 transition-all"
|
||||
>
|
||||
bgg8988@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="relative mt-10 max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-px bg-white/5 rounded-2xl overflow-hidden border border-white/8">
|
||||
{stats.map((s) => (
|
||||
<div key={s.label} className="bg-[#071540]/60 backdrop-blur px-6 py-4 text-center">
|
||||
<div className="text-2xl font-extrabold text-white tracking-tight">{s.value}</div>
|
||||
<div className="text-blue-300/60 text-xs mt-0.5 font-medium">{s.label}</div>
|
||||
{/* ════════════════════════════════
|
||||
SECTION 2 — 신뢰 증거 Bento Grid
|
||||
════════════════════════════════ */}
|
||||
<section className="px-6 py-16 lg:px-12 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="mb-10">
|
||||
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">WHY US</p>
|
||||
<h2
|
||||
className="text-2xl md:text-4xl font-extrabold text-[#04102b] tracking-tight leading-tight"
|
||||
style={{ wordBreak: 'keep-all', textWrap: 'balance' } as React.CSSProperties}
|
||||
>
|
||||
계약서 쓰고, 납기 지키고,<br />끝까지 책임집니다
|
||||
</h2>
|
||||
<p className="text-slate-500 text-sm mt-3 max-w-lg" style={{ wordBreak: 'keep-all' }}>
|
||||
개발자에게 맡겼다가 연락 두절된 경험이 있으신가요?<br />
|
||||
쟁승메이드는 단계마다 증거를 남깁니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bento Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
|
||||
{/* 계약서 — 가장 큰 카드 (lg에서 2열 차지) */}
|
||||
<div className="lg:col-span-2 bg-gradient-to-br from-[#04102b] to-[#0a1f5c] rounded-2xl p-7 relative overflow-hidden border border-blue-900/40">
|
||||
<div className="absolute right-0 top-0 w-48 h-48 rounded-full bg-blue-500/10 blur-3xl -translate-y-1/3 translate-x-1/4 pointer-events-none" />
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-400/15 border border-blue-400/20 flex items-center justify-center text-blue-400 mb-5">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-white text-xl font-extrabold mb-2">계약서 먼저, 개발 나중</h3>
|
||||
<p className="text-blue-200/50 text-sm leading-relaxed mb-5" style={{ wordBreak: 'keep-all' }}>
|
||||
계약금 30%, 중도금, 잔금으로 단계별 진행합니다. 구두 약속은 없습니다. 모든 합의는 서면으로 남깁니다.
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2.5 bg-red-500/15 border border-red-400/25 rounded-xl px-4 py-2.5">
|
||||
<svg className="w-4 h-4 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span className="text-red-300 text-sm font-bold">납기 지연 시 하루 10만 원 자동 감면</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 소스코드 */}
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md hover:shadow-violet-100 hover:-translate-y-0.5"
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}>
|
||||
<div className="w-10 h-10 rounded-xl bg-violet-50 border border-violet-200 flex items-center justify-center text-violet-600 mb-4">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-extrabold text-[#04102b] text-base mb-2">소스코드 100% 인도</h3>
|
||||
<p className="text-slate-500 text-sm leading-relaxed" style={{ wordBreak: 'keep-all' }}>납품 후 모든 소스코드를 전달합니다. 특정 플랫폼에 종속되지 않습니다.</p>
|
||||
<div className="mt-4 inline-block text-xs font-bold text-violet-600 bg-violet-50 border border-violet-200 px-2 py-1 rounded-lg">락인 없음</div>
|
||||
</div>
|
||||
|
||||
{/* 1개월 AS */}
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md hover:shadow-emerald-100 hover:-translate-y-0.5"
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}>
|
||||
<div className="w-10 h-10 rounded-xl bg-emerald-50 border border-emerald-200 flex items-center justify-center text-emerald-600 mb-4">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-extrabold text-[#04102b] text-base mb-2">1개월 무상 AS</h3>
|
||||
<p className="text-slate-500 text-sm leading-relaxed" style={{ wordBreak: 'keep-all' }}>납품 후 1개월 동안 버그 수정 무료. 이후 평생 유지보수 계약 가능.</p>
|
||||
<div className="mt-4 inline-block text-xs font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 px-2 py-1 rounded-lg">부담 없는 사후 지원</div>
|
||||
</div>
|
||||
|
||||
{/* 주 1회 보고 */}
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-md hover:shadow-cyan-100 hover:-translate-y-0.5"
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}>
|
||||
<div className="w-10 h-10 rounded-xl bg-cyan-50 border border-cyan-200 flex items-center justify-center text-cyan-600 mb-4">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-extrabold text-[#04102b] text-base mb-2">주 1회 진행 보고</h3>
|
||||
<p className="text-slate-500 text-sm leading-relaxed" style={{ wordBreak: 'keep-all' }}>매주 개발 현황을 공유합니다. 진행 중에 사라지는 일 없음을 보장합니다.</p>
|
||||
<div className="mt-4 inline-block text-xs font-bold text-cyan-600 bg-cyan-50 border border-cyan-200 px-2 py-1 rounded-lg">투명한 진행</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 외주 CTA */}
|
||||
<div className="mt-6">
|
||||
<Link
|
||||
href="/freelance"
|
||||
className="group flex items-center justify-between bg-white border-2 border-[#1a56db]/20 hover:border-[#1a56db]/50 hover:bg-[#f0f5ff] rounded-2xl px-7 py-5"
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
|
||||
>
|
||||
<div>
|
||||
<div className="font-extrabold text-[#04102b] text-base">외주 개발 포트폴리오 · 프로세스 전체 보기</div>
|
||||
<div className="text-slate-500 text-sm mt-0.5">납품 사례 47건 · 진행 프로세스 6단계 상세 안내</div>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-xl bg-[#1a56db] flex items-center justify-center text-white flex-shrink-0 group-hover:scale-110"
|
||||
style={{ transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ════════════════════════════════
|
||||
SECTION 3 — "직접 만든 서비스가 증거"
|
||||
════════════════════════════════ */}
|
||||
<section className="relative bg-[#04102b] px-6 py-16 lg:px-12 lg:py-20 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-[0.03]"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, #4f8ef7 1px, transparent 0)', backgroundSize: '32px 32px' }} />
|
||||
<div className="absolute right-0 top-1/2 w-96 h-96 rounded-full bg-blue-500/8 blur-3xl -translate-y-1/2 translate-x-1/3 pointer-events-none" />
|
||||
|
||||
<div className="relative max-w-5xl mx-auto">
|
||||
<div className="text-center mb-10">
|
||||
<p className="text-blue-400/70 text-xs font-bold uppercase tracking-widest mb-2">PROOF OF WORK</p>
|
||||
<h2 className="text-2xl md:text-4xl font-extrabold text-white tracking-tight" style={{ wordBreak: 'keep-all' }}>
|
||||
URL로 직접 확인하세요
|
||||
</h2>
|
||||
<p className="text-blue-200/40 text-sm mt-3 max-w-lg mx-auto" style={{ wordBreak: 'keep-all' }}>
|
||||
말로만 잘 한다는 게 아닙니다. 지금 이 사이트가 제 실력입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{PROOF_SERVICES.map((s) => (
|
||||
<Link
|
||||
key={s.name}
|
||||
href={s.href}
|
||||
className={`relative bg-gradient-to-br ${s.color} border border-white/10 rounded-2xl p-6 hover:border-white/25 group`}
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className={`w-2 h-2 rounded-full ${s.dot} animate-pulse`} />
|
||||
<span className="text-white/40 text-xs font-bold uppercase tracking-wider">{s.badge}</span>
|
||||
</div>
|
||||
<h3 className="text-white font-extrabold text-lg mb-2" style={{ wordBreak: 'keep-all' }}>{s.name}</h3>
|
||||
<p className="text-white/40 text-sm leading-relaxed mb-4" style={{ wordBreak: 'keep-all' }}>{s.desc}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-white/30 text-xs">{s.tag}</span>
|
||||
<span className="text-white/50 group-hover:text-white text-sm font-semibold" style={{ transition: 'color 0.3s ease' }}>보러가기 →</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ════════════════════════════════
|
||||
SECTION 4 — 구독/설치형 서비스 (보조)
|
||||
════════════════════════════════ */}
|
||||
<section className="px-6 py-16 lg:px-12 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* 레이블 분리 */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="h-px flex-1 bg-slate-200" />
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-slate-300" />
|
||||
<p className="text-slate-400 text-xs font-bold uppercase tracking-widest">직접 만들어 운영 중인 구독 · 설치형 서비스</p>
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-slate-300" />
|
||||
</div>
|
||||
<div className="h-px flex-1 bg-slate-200" />
|
||||
</div>
|
||||
|
||||
<p className="text-center text-slate-500 text-sm mb-8" style={{ wordBreak: 'keep-all' }}>
|
||||
외주 개발 의뢰가 아닌, 제가 직접 만들고 운영 중인 서비스들입니다.<br />
|
||||
"이런 걸 만들어드릴 수 있습니다"의 증거로 공유합니다.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{SUBSCRIPTION_SERVICES.map((svc) => (
|
||||
<Link
|
||||
key={svc.id}
|
||||
href={svc.href}
|
||||
className="bg-white rounded-2xl border border-slate-200 p-5 hover:shadow-md hover:-translate-y-0.5 relative group"
|
||||
style={{ transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)' }}
|
||||
>
|
||||
{svc.badge && (
|
||||
<span className={`absolute top-3 right-3 ${svc.badgeColor} text-white text-[10px] font-bold px-1.5 py-0.5 rounded-md`}>{svc.badge}</span>
|
||||
)}
|
||||
<div className="text-[10px] font-bold mb-1.5 tracking-wider" style={{ color: svc.color }}>{svc.label}</div>
|
||||
<div className="font-extrabold text-[#04102b] text-sm mb-3" style={{ wordBreak: 'keep-all' }}>{svc.title}</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-bold text-sm" style={{ color: svc.color }}>{svc.price}</span>
|
||||
<span className="text-xs px-1.5 py-0.5 rounded-md font-medium" style={{ color: svc.color, backgroundColor: svc.bg, border: `1px solid ${svc.border}` }}>{svc.type}</span>
|
||||
</div>
|
||||
<div className="mt-3 pt-3 border-t border-slate-100 text-[#1a56db] text-xs font-semibold group-hover:gap-1.5 flex items-center gap-1" style={{ transition: 'gap 0.3s ease' }}>
|
||||
자세히 보기 <span>→</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ════════════════════════════════
|
||||
SECTION 5 — 기술 스택 마퀴
|
||||
════════════════════════════════ */}
|
||||
<section className="py-10 overflow-hidden border-y border-slate-200 bg-white">
|
||||
<div className="flex gap-6 animate-marquee whitespace-nowrap" style={{ width: 'max-content' }}>
|
||||
{[...TECH_STACK, ...TECH_STACK].map((tech, i) => (
|
||||
<span
|
||||
key={`${tech}-${i}`}
|
||||
className="inline-flex items-center gap-2 text-slate-400 text-sm font-semibold"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-slate-300" />
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<style>{`
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
animation: marquee 20s linear infinite;
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
|
||||
{/* ─── Services Grid ─── */}
|
||||
<div className="px-6 py-12 lg:px-12">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="text-center mb-10">
|
||||
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">SERVICES</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">제공 서비스</h2>
|
||||
<p className="text-slate-500 text-sm mt-2">카드를 클릭하면 상세 정보와 요금을 확인할 수 있습니다</p>
|
||||
</div>
|
||||
{/* ════════════════════════════════
|
||||
SECTION 6 — 최종 CTA
|
||||
════════════════════════════════ */}
|
||||
<section className="px-6 py-16 lg:px-12 lg:py-20">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="relative bg-gradient-to-br from-[#04102b] to-[#0a1f5c] rounded-3xl border border-blue-900/40 px-8 py-12 text-center overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-[0.03]"
|
||||
style={{ backgroundImage: 'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
|
||||
<div className="absolute top-0 right-1/4 w-64 h-64 rounded-full bg-blue-500/10 blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
{/* ─ 로또 ─ */}
|
||||
<Link href="/services/lotto" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
|
||||
<div className="relative bg-gradient-to-br from-[#04102b] to-[#0a2060] px-6 pt-7 pb-16 overflow-hidden">
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-center gap-2 pb-3 opacity-20">
|
||||
{[1,2,3,4,5,6].map(n => (
|
||||
<div key={n} className="w-9 h-9 rounded-full border-2 border-amber-400 flex items-center justify-center text-amber-300 text-xs font-bold">{String(n*7%45+1).padStart(2,'0')}</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute top-3 right-4 w-24 h-24 rounded-full bg-amber-400/10 blur-xl" />
|
||||
<span className="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-lg tracking-wide">HOT</span>
|
||||
<div className="relative">
|
||||
<div className="w-11 h-11 rounded-xl bg-amber-400/20 border border-amber-400/30 flex items-center justify-center mb-3">
|
||||
<svg className="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-amber-400/70 text-xs font-semibold mb-0.5 tracking-wide">LOTTO ANALYTICS</div>
|
||||
<h3 className="text-white text-xl font-extrabold">로또 번호 추천</h3>
|
||||
<div className="relative">
|
||||
<div className="inline-flex items-center gap-2 bg-emerald-400/10 border border-emerald-400/20 text-emerald-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
현재 접수 가능
|
||||
</div>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-white mb-3 tracking-tight leading-tight"
|
||||
style={{ wordBreak: 'keep-all', textWrap: 'balance' } as React.CSSProperties}
|
||||
>
|
||||
어떤 업무든 먼저 상담해 보세요
|
||||
</h2>
|
||||
<p className="text-blue-200/40 text-sm mb-8 leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
자동화할 업무, 만들고 싶은 서비스, 고민 중인 아이디어 — 뭐든 괜찮습니다.<br />
|
||||
구체적인 견적은 무료 상담 후 24시간 이내에 드립니다.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
|
||||
<button
|
||||
onClick={() => 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)' }}
|
||||
>
|
||||
무료 상담 신청 (계약서 포함) →
|
||||
</button>
|
||||
<div className="flex items-center gap-4 text-blue-200/30 text-xs">
|
||||
<span>bgg8988@gmail.com</span>
|
||||
<span>·</span>
|
||||
<span>010-3907-1392</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-4">출현 빈도, 패턴 분석, 핫/콜드 번호 알고리즘으로 매주 최적의 번호 조합을 제공합니다.</p>
|
||||
<div className="space-y-2 mb-5">
|
||||
{['몬테카를로 시뮬레이션 분석', '핫넘버 / 콜드넘버 통계', '골드/플래티넘/다이아 플랜'].map(f => (
|
||||
<div key={f} className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<div className="w-4 h-4 rounded-full bg-amber-100 border border-amber-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-amber-500" /></div>
|
||||
{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div>
|
||||
<span className="text-[#04102b] font-extrabold text-lg">월 900원~</span>
|
||||
<span className="ml-2 text-xs bg-amber-50 border border-amber-200 text-amber-700 px-2 py-0.5 rounded-full font-medium">구독형</span>
|
||||
</div>
|
||||
<span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* ─ 주식 ─ */}
|
||||
<Link href="/services/stock" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
|
||||
<div className="relative bg-gradient-to-br from-[#011f3d] to-[#032e5c] px-6 pt-7 pb-6 overflow-hidden">
|
||||
<svg className="absolute bottom-0 left-0 right-0 w-full opacity-15" height="60" viewBox="0 0 300 60" fill="none">
|
||||
<polyline points="0,50 40,35 80,42 120,15 160,28 200,10 240,22 300,5" stroke="#22c55e" strokeWidth="2" fill="none" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<div className="absolute top-3 right-4 w-20 h-20 rounded-full bg-emerald-400/10 blur-xl" />
|
||||
<span className="absolute top-4 right-4 bg-emerald-500 text-white text-xs font-bold px-2 py-0.5 rounded-lg tracking-wide">NEW</span>
|
||||
<div className="relative">
|
||||
<div className="w-11 h-11 rounded-xl bg-emerald-400/15 border border-emerald-400/25 flex items-center justify-center mb-3">
|
||||
<svg className="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-emerald-400/70 text-xs font-semibold mb-0.5 tracking-wide">ALGO TRADING</div>
|
||||
<h3 className="text-white text-xl font-extrabold">주식 자동 매매</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-4">기술적 분석 기반 매매 신호를 텔레그램으로 실시간 수신하고, 자동으로 매수·매도합니다.</p>
|
||||
<div className="space-y-2 mb-5">
|
||||
{['실시간 텔레그램 알림', '자동 매수/매도 실행', '포트폴리오 손익 관리'].map(f => (
|
||||
<div key={f} className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<div className="w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500" /></div>
|
||||
{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div>
|
||||
<span className="text-[#04102b] font-extrabold text-lg">설치 49,000원~</span>
|
||||
<span className="ml-2 text-xs bg-emerald-50 border border-emerald-200 text-emerald-700 px-2 py-0.5 rounded-full font-medium">설치형</span>
|
||||
</div>
|
||||
<span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* ─ 프롬프트 ─ */}
|
||||
<Link href="/services/prompt" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
|
||||
<div className="relative bg-gradient-to-br from-[#0d0a2e] to-[#1a0f5c] px-6 pt-7 pb-5 overflow-hidden">
|
||||
<div className="absolute bottom-2 left-5 right-5 bg-black/30 rounded-lg px-3 py-2 font-mono text-xs opacity-25 overflow-hidden">
|
||||
<span className="text-violet-400">$</span><span className="text-white"> optimize prompt</span><br/>
|
||||
<span className="text-slate-500">→ </span><span className="text-green-400">efficiency: 94%</span>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2 w-24 h-24 rounded-full bg-violet-500/10 blur-xl" />
|
||||
<div className="relative">
|
||||
<div className="w-11 h-11 rounded-xl bg-violet-400/15 border border-violet-400/25 flex items-center justify-center mb-3">
|
||||
<svg className="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-violet-400/70 text-xs font-semibold mb-0.5 tracking-wide">PROMPT ENGINEERING</div>
|
||||
<h3 className="text-white text-xl font-extrabold">프롬프트 엔지니어링</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-4">ChatGPT·Claude에 최적화된 업무별 프롬프트를 설계하여 AI 활용 효율을 극대화합니다.</p>
|
||||
<div className="space-y-2 mb-5">
|
||||
{['업무별 맞춤 프롬프트', 'ChatGPT / Claude 최적화', '프롬프트 라이브러리 제공'].map(f => (
|
||||
<div key={f} className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<div className="w-4 h-4 rounded-full bg-violet-50 border border-violet-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-violet-500" /></div>
|
||||
{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div>
|
||||
<span className="text-[#04102b] font-extrabold text-lg">건당 30,000원~</span>
|
||||
<span className="ml-2 text-xs bg-violet-50 border border-violet-200 text-violet-700 px-2 py-0.5 rounded-full font-medium">건별</span>
|
||||
</div>
|
||||
<span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* ─ 업무자동화 ─ */}
|
||||
<Link href="/services/automation" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
|
||||
<div className="relative bg-gradient-to-br from-[#012030] to-[#013d50] px-6 pt-7 pb-5 overflow-hidden">
|
||||
<svg className="absolute inset-0 w-full h-full opacity-10" viewBox="0 0 200 120">
|
||||
<line x1="0" y1="60" x2="50" y2="60" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<circle cx="50" cy="60" r="3" fill="#22d3ee"/>
|
||||
<line x1="50" y1="60" x2="50" y2="30" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<circle cx="50" cy="30" r="3" fill="#22d3ee"/>
|
||||
<line x1="50" y1="30" x2="120" y2="30" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<circle cx="120" cy="30" r="3" fill="#22d3ee"/>
|
||||
<line x1="120" y1="30" x2="120" y2="90" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<circle cx="120" cy="90" r="3" fill="#22d3ee"/>
|
||||
<line x1="120" y1="90" x2="200" y2="90" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<line x1="50" y1="60" x2="80" y2="60" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<rect x="80" y="50" width="20" height="20" rx="2" fill="none" stroke="#22d3ee" strokeWidth="1"/>
|
||||
<line x1="100" y1="60" x2="120" y2="60" stroke="#22d3ee" strokeWidth="1"/>
|
||||
</svg>
|
||||
<div className="absolute top-2 right-2 w-24 h-24 rounded-full bg-cyan-400/10 blur-xl" />
|
||||
<div className="relative">
|
||||
<div className="w-11 h-11 rounded-xl bg-cyan-400/15 border border-cyan-400/25 flex items-center justify-center mb-3">
|
||||
<svg className="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-cyan-400/70 text-xs font-semibold mb-0.5 tracking-wide">RPA AUTOMATION</div>
|
||||
<h3 className="text-white text-xl font-extrabold">업무 자동화</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-4">매일 반복되는 엑셀 작업, 이메일 발송, 데이터 수집을 자동화하여 생산성을 높입니다.</p>
|
||||
<div className="space-y-2 mb-5">
|
||||
{['엑셀 / 구글 시트 자동화', '이메일 자동 발송', '웹 스크래핑 · 데이터 수집'].map(f => (
|
||||
<div key={f} className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<div className="w-4 h-4 rounded-full bg-cyan-50 border border-cyan-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-cyan-500" /></div>
|
||||
{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div>
|
||||
<span className="text-[#04102b] font-extrabold text-lg">5만원~</span>
|
||||
<span className="ml-2 text-xs bg-cyan-50 border border-cyan-200 text-cyan-700 px-2 py-0.5 rounded-full font-medium">프로젝트</span>
|
||||
</div>
|
||||
<span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
||||
{/* ─ AI 사주 분석 ─ */}
|
||||
<Link href="/saju" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#7c3aed]/30 hover:shadow-xl hover:shadow-violet-100 md:col-span-2">
|
||||
<div className="relative bg-gradient-to-br from-[#0d0a2e] via-[#1a0f5c] to-[#04102b] px-6 pt-7 pb-6 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-[0.06]"
|
||||
style={{ backgroundImage: 'radial-gradient(circle, #c4b5fd 1px, transparent 1px)', backgroundSize: '22px 22px' }} />
|
||||
<div className="absolute top-2 right-2 w-28 h-28 rounded-full bg-amber-400/10 blur-2xl" />
|
||||
<span className="absolute top-4 right-4 bg-violet-600 text-white text-xs font-bold px-2 py-0.5 rounded-lg tracking-wide">NEW</span>
|
||||
<div className="relative flex items-start gap-5">
|
||||
<div className="w-11 h-11 rounded-xl bg-violet-400/15 border border-violet-400/25 flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-amber-400/70 text-xs font-semibold mb-0.5 tracking-wide">AI SAJU ANALYTICS</div>
|
||||
<h3 className="text-white text-xl font-extrabold">AI 사주 분석</h3>
|
||||
<p className="text-violet-200/60 text-xs mt-1">전통 명리학과 GPT-4o의 만남 — 12가지 항목 상세 해석</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-5">
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-4">사주팔자 원국 계산부터 신강/신약 분석, 용신·희신, 대운까지 — AI가 따뜻하고 정확하게 해석해드립니다.</p>
|
||||
<div className="space-y-2 mb-5">
|
||||
{['전통 사주팔자 계산', 'AI 12가지 항목 해석', '무료 기본 · 유료 상세'].map(f => (
|
||||
<div key={f} className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<div className="w-4 h-4 rounded-full bg-violet-50 border border-violet-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-violet-500" /></div>
|
||||
{f}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div>
|
||||
<span className="text-[#04102b] font-extrabold text-lg">무료 체험 / 상세 ₩4,900</span>
|
||||
<span className="ml-2 text-xs bg-violet-50 border border-violet-200 text-violet-700 px-2 py-0.5 rounded-full font-medium">1회</span>
|
||||
</div>
|
||||
<span className="text-[#7c3aed] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* ─ Freelance CTA ─ */}
|
||||
<button
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[#1a56db] to-[#4338ca] flex items-center justify-center flex-shrink-0 shadow-lg shadow-blue-900/50">
|
||||
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[#5ba4ff] text-xs font-bold mb-0.5 uppercase tracking-wider">맞춤형 프로젝트</div>
|
||||
<h3 className="text-white text-lg font-extrabold mb-1">외주 개발 문의</h3>
|
||||
<p className="text-blue-200/50 text-sm">원하시는 서비스가 없으신가요? 요구사항에 맞게 처음부터 개발해드립니다.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-[#5ba4ff] font-semibold text-sm flex-shrink-0">
|
||||
문의하기 →
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* ─ Bottom: Tech + Trust ─ */}
|
||||
<div className="mt-8 grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#4338ca] rounded-full" />
|
||||
<h3 className="font-bold text-[#04102b] text-sm">기술 스택</h3>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{techStack.map((tech) => (
|
||||
<span key={tech} className="bg-[#f0f5ff] text-[#1a56db] text-xs font-semibold px-3 py-1.5 rounded-lg border border-[#dbe8ff]">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#4338ca] rounded-full" />
|
||||
<h3 className="font-bold text-[#04102b] text-sm">왜 맡겨도 되는가</h3>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
{ icon: '🌐', text: 'jaengseung-made.com — 지금 바로 확인 가능한 실제 운영 서비스' },
|
||||
{ icon: '🔒', text: '납품 전 마음에 안 드시면 이유 불문 전액 환불' },
|
||||
{ icon: '📋', text: '계약서 + 소스코드 전체 제공 — 잠수 없음, 연락 두절 없음' },
|
||||
{ icon: '⚡', text: '24시간 이내 답변 · 납기 지연 시 패널티 적용' },
|
||||
].map((item) => (
|
||||
<li key={item.text} className="flex items-start gap-2.5 text-sm text-slate-700">
|
||||
<span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span>
|
||||
{item.text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user