feat: 사이트 3구역 개편 + AI 상품 결제 연결 + SEO 업데이트
- 사이드바: AI상품/무료도구/외주의뢰 3그룹 구조로 개편 (ARIA 시맨틱) - 홈페이지: AI 상품 중심 재작성 (히어로+상품카드+무료도구+외주축소) - SEO: 메타데이터·OG태그·JSON-LD를 AI 상품 포지셔닝으로 변경 - 프롬프트 페이지: 프리미엄 상품 5개에 PortOne PaymentButton 연결 - AI 키트 페이지: 월 구독 CTA 2곳에 PaymentButton 연결 - 사주: 유료 전환 복원(4,900원) + PaymentButton 연결 - 코드 품질: 인라인 스타일→globals.css, emoji→SVG, 미사용 데이터 제거 - DB 마이그레이션 005: 전체 18개 상품 등록 SQL 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
701
app/page.tsx
701
app/page.tsx
@@ -6,168 +6,87 @@ import ContactModal from './components/ContactModal';
|
||||
import { trackCTAClick } from '../lib/gtag';
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
쟁승메이드 홈페이지 — 리뉴얼 v2
|
||||
쟁승메이드 홈페이지 — v3 (수익 구조 개편)
|
||||
설계 원칙:
|
||||
1. AI 템플릿 패턴 전면 제거 (orbs, bento, marquee)
|
||||
2. 박재오라는 사람이 직접 쓴 느낌
|
||||
3. 증거 우선 — running services, 실제 계약 조건
|
||||
4. 에디토리얼 레이아웃 — 타이포 중심
|
||||
1. AI 상품 → 무료 도구 → 외주 순서로 노출
|
||||
2. 매출 전환 동선 최우선
|
||||
3. 증거 기반 신뢰 확보
|
||||
═══════════════════════════════════════════════════ */
|
||||
|
||||
const PAIN_POINTS = [
|
||||
/* ── AI 상품 (매출 핵심) ─────────────────────────── */
|
||||
const AI_PRODUCTS = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
),
|
||||
problem: '중간에 연락이 끊겼다',
|
||||
desc: '착수금 받고 잠수, 완성 직전에 추가비용 요구. 개발자를 다시 찾아야 하는 상황.',
|
||||
color: 'text-red-400 bg-red-400/10',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
problem: '납기를 3번 넘겼다',
|
||||
desc: '"다음 주까지 드릴게요"가 두 달 됐다. 런칭 일정이 전부 밀렸다.',
|
||||
color: 'text-amber-400 bg-amber-400/10',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<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>
|
||||
),
|
||||
problem: '소스코드를 못 받았다',
|
||||
desc: '납품 후 수정이 필요한데 코드를 주지 않는다. 다음 개발자도 이어받을 수 없는 상황.',
|
||||
color: 'text-violet-400 bg-violet-400/10',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
),
|
||||
problem: '뭘 만들고 있는지 모른다',
|
||||
desc: '중간 보고가 없어서 방향이 맞는지 모른다. "다 되면 연락 준다"는 말만 반복.',
|
||||
color: 'text-cyan-400 bg-cyan-400/10',
|
||||
},
|
||||
];
|
||||
|
||||
const PROMISES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '계약서부터 씁니다',
|
||||
detail: '착수 전에 범위·금액·납기·수정 횟수를 문서로 확정합니다. 구두 약속은 없습니다.',
|
||||
enforce: '납기 지연 시 하루 총금액 1% 자동 차감 — 계약서 조항',
|
||||
color: 'border-blue-500/40',
|
||||
accent: 'text-blue-400',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '주 1회 진행 보고를 드립니다',
|
||||
detail: '매주 개발 현황·화면·이슈를 정리해서 공유합니다. 중간에 사라지는 일은 구조적으로 없습니다.',
|
||||
enforce: '보고 누락 시 다음 단계 착수 전 보고 완료 후 진행',
|
||||
color: 'border-emerald-500/40',
|
||||
accent: 'text-emerald-400',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '소스코드 전체를 이관합니다',
|
||||
detail: '완성된 코드 전부를 드립니다. 락인 없음. 이후 다른 개발자에게 인계, 직접 수정도 가능합니다.',
|
||||
enforce: '납품 완료 후 30일간 코드 관련 질문 무상 답변',
|
||||
color: 'border-violet-500/40',
|
||||
accent: 'text-violet-400',
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: '진행 현황을 마이페이지에서 직접 확인하세요',
|
||||
detail: '의뢰 접수부터 납품까지 7단계 진행 상황이 고객 마이페이지에 실시간 업데이트됩니다. 오늘 뭐가 진행되는지 물어볼 필요가 없습니다.',
|
||||
enforce: '단계 전환 시 마이페이지 즉시 반영 보장',
|
||||
color: 'border-cyan-500/40',
|
||||
accent: 'text-cyan-400',
|
||||
},
|
||||
];
|
||||
|
||||
const LIVE_SERVICES = [
|
||||
{
|
||||
name: '쟁승메이드',
|
||||
label: '이 사이트',
|
||||
url: '/freelance',
|
||||
desc: '기획·디자인·개발·배포·관리자까지 혼자 만들고 직접 운영 중. 이 사이트 자체가 포트폴리오.',
|
||||
tech: ['Next.js 16', 'Supabase', 'Tailwind', 'Vercel'],
|
||||
status: 'live',
|
||||
color: '#1a56db',
|
||||
},
|
||||
{
|
||||
name: 'AI 사주 분석',
|
||||
label: '유료 서비스',
|
||||
url: '/saju',
|
||||
desc: '생년월일 입력 → Gemini AI가 사주팔자 12항목 즉시 분석. 실제 결제·구매 발생 중.',
|
||||
tech: ['Google Gemini', 'Supabase', 'PG 연동'],
|
||||
status: 'live',
|
||||
color: '#7c3aed',
|
||||
},
|
||||
{
|
||||
name: 'AI 자동화 키트',
|
||||
label: '월 구독',
|
||||
url: '/services/ai-kit',
|
||||
desc: '업무 일지·이메일·SNS 6종 자동화 도구 구독형 서비스. 매달 새 도구 추가.',
|
||||
tech: ['월 19,900원', 'API 연동', '자동화'],
|
||||
status: 'live',
|
||||
color: '#0891b2',
|
||||
},
|
||||
];
|
||||
|
||||
const SERVICE_LIST = [
|
||||
{
|
||||
href: '/services/website',
|
||||
category: 'WEB',
|
||||
title: '홈페이지 / 쇼핑몰 제작',
|
||||
desc: '랜딩 페이지, 기업 소개 사이트, 쇼핑몰 신규 구축 및 리뉴얼',
|
||||
from: '20만원~',
|
||||
duration: '3일~',
|
||||
hot: true,
|
||||
href: '/services/prompt',
|
||||
tag: 'BEST',
|
||||
tagColor: 'bg-rose-500/15 text-rose-400 border-rose-500/20',
|
||||
title: '프롬프트 패키지',
|
||||
desc: 'ChatGPT·Claude 업무 최적화 프롬프트. 자소서, 마케팅, 이메일, 보고서 등 즉시 다운로드.',
|
||||
price: '9,900원~',
|
||||
action: '스토어 보기',
|
||||
},
|
||||
{
|
||||
href: '/services/automation',
|
||||
category: 'RPA',
|
||||
tag: 'HOT',
|
||||
tagColor: 'bg-amber-500/15 text-amber-400 border-amber-500/20',
|
||||
title: '업무 자동화 개발',
|
||||
desc: '엑셀 처리, 이메일·보고서 자동화, 데이터 수집 스크립트',
|
||||
from: '5만원~',
|
||||
duration: '1일~',
|
||||
hot: true,
|
||||
},
|
||||
{
|
||||
href: '/services/prompt',
|
||||
category: 'AI',
|
||||
title: '프롬프트 엔지니어링',
|
||||
desc: 'ChatGPT·Claude 업무 최적화 프롬프트 패키지 설계',
|
||||
from: '9,900원~',
|
||||
duration: '1~3일',
|
||||
hot: false,
|
||||
desc: '엑셀 처리, 이메일·보고서 자동화, 데이터 수집 스크립트. 반복 업무를 없앱니다.',
|
||||
price: '5만원~',
|
||||
action: '자세히 보기',
|
||||
},
|
||||
{
|
||||
href: '/services/ai-kit',
|
||||
category: 'KIT',
|
||||
title: 'AI 자동화 키트 구독',
|
||||
desc: '완성된 자동화 도구를 월 구독으로. 설치 없이 바로 사용.',
|
||||
from: '19,900원/월',
|
||||
duration: '즉시',
|
||||
hot: false,
|
||||
tag: '구독',
|
||||
tagColor: 'bg-violet-500/15 text-violet-400 border-violet-500/20',
|
||||
title: 'AI 자동화 키트',
|
||||
desc: '업무일지·이메일·SNS 자동화 도구 6종. 설치 없이 월 구독으로 바로 사용.',
|
||||
price: '19,900원/월',
|
||||
action: '구독 시작',
|
||||
},
|
||||
];
|
||||
|
||||
/* ── 무료 도구 (트래픽 엔진) ─────────────────────── */
|
||||
const FREE_TOOLS = [
|
||||
{
|
||||
href: '/saju',
|
||||
category: 'AI',
|
||||
icon: (
|
||||
<svg className="w-6 h-6 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
||||
</svg>
|
||||
),
|
||||
title: 'AI 사주 분석',
|
||||
desc: '생년월일 입력 → AI가 성격·직업·관계·운세를 즉시 분석',
|
||||
from: '무료',
|
||||
duration: '즉시',
|
||||
hot: false,
|
||||
desc: '생년월일 입력하면 AI가 성격·직업·관계·운세를 즉시 분석',
|
||||
badge: '무료',
|
||||
},
|
||||
{
|
||||
href: '/services/lotto',
|
||||
icon: (
|
||||
<svg className="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
title: '로또 번호 추천',
|
||||
desc: '빅데이터·통계 기반 AI 번호 분석. 매주 업데이트.',
|
||||
badge: '무료',
|
||||
},
|
||||
{
|
||||
href: '/tools',
|
||||
icon: (
|
||||
<svg className="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
|
||||
</svg>
|
||||
),
|
||||
title: '도구 쇼케이스',
|
||||
desc: '네이버 블로그 자동화, eBay 리스팅 등 AI 도구 데모',
|
||||
badge: 'DEMO',
|
||||
},
|
||||
];
|
||||
|
||||
/* ── 운영 중 서비스 (신뢰 지표) ──────────────────── */
|
||||
const LIVE_SERVICES = [
|
||||
{ name: '쟁승메이드', label: '이 사이트' },
|
||||
{ name: 'AI 사주 분석', label: '유료 서비스' },
|
||||
{ name: 'AI 자동화 키트', label: '월 구독' },
|
||||
{ name: '로또 번호 추천', label: '무료 서비스' },
|
||||
];
|
||||
|
||||
function useScrollReveal() {
|
||||
@@ -198,22 +117,6 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<div className="min-h-full" ref={containerRef}>
|
||||
<style>{`
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.reveal-d1 { transition-delay: 80ms; }
|
||||
.reveal-d2 { transition-delay: 160ms; }
|
||||
.reveal-d3 { transition-delay: 240ms; }
|
||||
.reveal-d4 { transition-delay: 320ms; }
|
||||
`}</style>
|
||||
<ContactModal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
@@ -222,7 +125,6 @@ export default function Home() {
|
||||
'개발하고 싶은 서비스를 간략히 설명해주세요',
|
||||
'희망 납품 일정과 예산 범위',
|
||||
'참고할 만한 사이트나 레퍼런스',
|
||||
'현재 운영 중인 시스템이 있다면 함께 알려주세요',
|
||||
]}
|
||||
accentColor="text-[#5ba4ff]"
|
||||
headerFrom="#04102b"
|
||||
@@ -230,13 +132,12 @@ export default function Home() {
|
||||
/>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
HERO — 에디토리얼, 단순, 증거 중심
|
||||
HERO — AI 상품 중심
|
||||
══════════════════════════════════════ */}
|
||||
<section
|
||||
className="relative overflow-hidden px-6 py-20 lg:px-14 lg:py-28"
|
||||
style={{ background: '#04102b' }}
|
||||
>
|
||||
{/* 배경: 미세한 대각선 패턴만, orbs 없음 */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.025]"
|
||||
style={{
|
||||
@@ -246,80 +147,73 @@ export default function Home() {
|
||||
/>
|
||||
|
||||
<div className="relative max-w-5xl">
|
||||
{/* 수동 작성 느낌의 identity tag */}
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<span className="font-mono text-xs text-[#5ba4ff]/60 tracking-[0.2em] uppercase">
|
||||
박재오 · 서울 · 백엔드 개발 7년
|
||||
쟁승메이드 · AI 프롬프트 · 자동화
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-xs text-emerald-400/80">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
프로젝트 접수 가능
|
||||
서비스 운영 중
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 헤드라인 — 개발 외주 + 구독 서비스 모두 포괄 */}
|
||||
<h1
|
||||
className="text-[2.6rem] md:text-[3.5rem] lg:text-[4.5rem] font-extrabold leading-[1.12] tracking-tight text-white mb-6"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
아이디어가 있다면,
|
||||
AI로 일하는 방식을
|
||||
<br />
|
||||
만드는 것부터
|
||||
<br />
|
||||
<span className="text-[#5ba4ff]">운영까지 맡기세요.</span>
|
||||
<span className="text-[#5ba4ff]">바꿔보세요.</span>
|
||||
</h1>
|
||||
|
||||
{/* 서브텍스트 */}
|
||||
<p
|
||||
className="text-[#8ba5cc] text-lg md:text-xl leading-relaxed mb-3 max-w-2xl"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
7년차 대기업 개발자가 직접 만드는 홈페이지·자동화·AI 서비스.
|
||||
프롬프트 패키지부터 업무 자동화, AI 사주 분석까지.
|
||||
<br />
|
||||
지금 이 사이트 자체가 포트폴리오입니다.
|
||||
7년차 현직 개발자가 직접 만들고 운영합니다.
|
||||
</p>
|
||||
<p
|
||||
className="text-white/60 text-base md:text-lg leading-relaxed mb-10 max-w-2xl"
|
||||
className="text-white/50 text-base leading-relaxed mb-10 max-w-2xl"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
연락 두절, 납기 지연, 소스코드 미인도 — 전부 계약서 한 장으로 해결합니다.
|
||||
9,900원부터 시작하는 AI 도구 — 지금 바로 구매하고 사용하세요.
|
||||
</p>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-wrap gap-3 mb-14">
|
||||
<button
|
||||
onClick={() => { trackCTAClick('무료 상담 신청', '/'); setModalOpen(true); }}
|
||||
<Link
|
||||
href="/services/prompt"
|
||||
className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-8 py-4 rounded-xl font-bold text-sm transition-colors"
|
||||
>
|
||||
무료 상담 신청
|
||||
AI 상품 둘러보기
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</Link>
|
||||
<Link
|
||||
href="/freelance"
|
||||
href="/saju"
|
||||
className="inline-flex items-center gap-2 border border-white/15 hover:border-white/30 text-white/60 hover:text-white px-8 py-4 rounded-xl font-semibold text-sm transition-all"
|
||||
>
|
||||
포트폴리오 보기
|
||||
무료 사주 분석 체험
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Live services — stats 대신 실제 운영 서비스 */}
|
||||
{/* Live services indicator */}
|
||||
<div className="border-t border-white/8 pt-8">
|
||||
<p className="font-mono text-[11px] text-[#5ba4ff]/40 tracking-[0.25em] uppercase mb-4">
|
||||
지금 운영 중인 서비스
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
{LIVE_SERVICES.map((s) => (
|
||||
<Link
|
||||
<span
|
||||
key={s.name}
|
||||
href={s.url}
|
||||
className="group flex items-center gap-2.5 text-sm text-[#8ba5cc] hover:text-white transition-colors"
|
||||
className="flex items-center gap-2.5 text-sm text-[#8ba5cc]"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse flex-shrink-0" />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse flex-shrink-0" />
|
||||
<span className="font-semibold">{s.name}</span>
|
||||
<span className="font-mono text-[11px] text-white/25">{s.label}</span>
|
||||
</Link>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,54 +221,107 @@ export default function Home() {
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 2 — 이런 상황이신가요?
|
||||
(고객 고통 공감, 신선한 접근)
|
||||
SECTION 2 — AI 상품 (매출 핵심)
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-white px-6 py-16 lg:px-14 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="reveal flex items-end justify-between mb-10 flex-wrap gap-4">
|
||||
<div>
|
||||
<p className="font-mono text-xs text-[#1a56db]/60 tracking-widest uppercase mb-2">
|
||||
Client Pain Points
|
||||
</p>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-[#04102b] leading-tight"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
개발자를 구하면 생기는 일
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-[#64748b] text-sm max-w-xs" style={{ wordBreak: 'keep-all' }}>
|
||||
저도 이 문제들이 싫어서 계약 방식을 아예 다르게 설계했습니다.
|
||||
<div className="reveal mb-10">
|
||||
<p className="font-mono text-xs text-[#1a56db]/60 tracking-widest uppercase mb-2">
|
||||
AI Products
|
||||
</p>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-[#04102b] leading-tight"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
지금 바로 구매할 수 있는 AI 상품
|
||||
</h2>
|
||||
<p className="text-[#64748b] text-sm mt-2" style={{ wordBreak: 'keep-all' }}>
|
||||
결제 즉시 사용 가능. 복잡한 상담 없이 바로 시작하세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{PAIN_POINTS.map((p, i) => (
|
||||
<div
|
||||
key={p.problem}
|
||||
className={`reveal reveal-d${i + 1} border border-[#e2e8f0] rounded-2xl p-6 hover:border-[#cbd5e1] hover:shadow-sm transition-all bg-white`}
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{AI_PRODUCTS.map((p, i) => (
|
||||
<Link
|
||||
key={p.href}
|
||||
href={p.href}
|
||||
className={`reveal reveal-d${i + 1} group relative flex flex-col border border-[#e2e8f0] hover:border-[#1a56db]/30 rounded-2xl p-6 transition-all hover:shadow-lg hover:shadow-blue-500/5 bg-white`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${p.color}`}>
|
||||
{p.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-[#0f172a] text-base mb-1">{p.problem}</p>
|
||||
<p className="text-[#64748b] text-sm leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
{p.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${p.tagColor}`}>
|
||||
{p.tag}
|
||||
</span>
|
||||
<span className="text-[#0f172a] font-extrabold text-sm">{p.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-extrabold text-[#0f172a] mb-2 group-hover:text-[#1a56db] transition-colors">
|
||||
{p.title}
|
||||
</h3>
|
||||
<p className="text-[#64748b] text-sm leading-relaxed flex-1 mb-5" style={{ wordBreak: 'keep-all' }}>
|
||||
{p.desc}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[#1a56db] text-sm font-bold group-hover:underline underline-offset-4">
|
||||
{p.action} →
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 3 — 박재오는 누구인가
|
||||
(bento 그리드 제거, 에디토리얼 대체)
|
||||
SECTION 3 — 무료 도구 (트래픽 엔진)
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-[#f8faff] px-6 py-16 lg:px-14 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="reveal mb-10">
|
||||
<p className="font-mono text-xs text-[#1a56db]/60 tracking-widest uppercase mb-2">
|
||||
Free Tools
|
||||
</p>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-[#04102b] leading-tight"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
무료로 체험해보세요
|
||||
</h2>
|
||||
<p className="text-[#64748b] text-sm mt-2">
|
||||
회원가입 없이 바로 사용할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{FREE_TOOLS.map((t, i) => (
|
||||
<Link
|
||||
key={t.href}
|
||||
href={t.href}
|
||||
className={`reveal reveal-d${i + 1} group flex items-start gap-4 bg-white border border-[#e2e8f0] hover:border-[#1a56db]/30 rounded-2xl p-5 transition-all hover:shadow-md`}
|
||||
>
|
||||
<span className="flex-shrink-0 mt-0.5">{t.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-bold text-[#0f172a] text-sm group-hover:text-[#1a56db] transition-colors">
|
||||
{t.title}
|
||||
</h3>
|
||||
<span className="text-[10px] font-bold text-sky-500 bg-sky-500/10 px-1.5 py-0.5 rounded">
|
||||
{t.badge}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[#64748b] text-xs leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
{t.desc}
|
||||
</p>
|
||||
</div>
|
||||
<svg className="w-4 h-4 text-[#cbd5e1] group-hover:text-[#1a56db] flex-shrink-0 mt-1 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 4 — 누가 만드나요 (About)
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-[#04102b] px-6 py-16 lg:px-14 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
@@ -382,7 +329,6 @@ export default function Home() {
|
||||
About
|
||||
</p>
|
||||
<div className="reveal grid lg:grid-cols-2 gap-10 lg:gap-16 items-start">
|
||||
{/* 좌측: 스토리 */}
|
||||
<div>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-white leading-tight mb-6"
|
||||
@@ -390,27 +336,23 @@ export default function Home() {
|
||||
>
|
||||
7년간 실제 서비스를 만들었습니다.
|
||||
<br />
|
||||
<span className="text-[#5ba4ff]">이제 당신의 서비스를 만듭니다.</span>
|
||||
<span className="text-[#5ba4ff]">이제 당신의 업무를 자동화합니다.</span>
|
||||
</h2>
|
||||
<div className="space-y-4 text-[#8ba5cc] text-base leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||||
<p>
|
||||
대기업 IT팀에서 백엔드 개발 7년 — 실제 운영되는 서비스의 API 설계, DB 구조, 배포 파이프라인을 직접 다뤘습니다.
|
||||
</p>
|
||||
<p>
|
||||
지금은 그 경험으로 <span className="text-white">홈페이지, 자동화 스크립트, AI 연동 서비스</span>를 개인사업자와 중소기업 대상으로 직접 개발합니다.
|
||||
</p>
|
||||
<p className="text-white/50 text-sm">
|
||||
사업자등록번호 267-53-00822 · 서울시 동작구 · bgg8988@gmail.com
|
||||
지금은 그 경험으로 <span className="text-white">AI 프롬프트 패키지, 업무 자동화, 구독형 AI 도구</span>를 직접 만들어 판매합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 기술 스택 — 마퀴 아닌 정적 태그 */}
|
||||
<div className="mt-8">
|
||||
<p className="font-mono text-[11px] text-[#5ba4ff]/40 tracking-widest uppercase mb-3">
|
||||
Tech Stack
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Next.js', 'TypeScript', 'Python', 'FastAPI', 'PostgreSQL', 'Supabase', 'Docker', 'AWS', 'Spring Boot', 'Redis'].map((t) => (
|
||||
{['Next.js', 'TypeScript', 'Python', 'FastAPI', 'PostgreSQL', 'Supabase', 'Docker', 'AWS'].map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="font-mono text-xs text-[#5ba4ff]/70 border border-[#5ba4ff]/15 px-2.5 py-1 rounded"
|
||||
@@ -422,38 +364,14 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 우측: 숫자로 증명 */}
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
value: '7년',
|
||||
label: '대기업 백엔드 개발 경력',
|
||||
sub: '실제 운영 서비스 다수 개발',
|
||||
color: 'border-blue-500/30',
|
||||
},
|
||||
{
|
||||
value: '3개',
|
||||
label: '현재 직접 운영 중인 서비스',
|
||||
sub: '이 사이트 포함 — 지금 이 순간도 작동 중',
|
||||
color: 'border-emerald-500/30',
|
||||
},
|
||||
{
|
||||
value: '100%',
|
||||
label: '소스코드 이관',
|
||||
sub: '납품 완료 후 전체 코드 전달, 락인 없음',
|
||||
color: 'border-violet-500/30',
|
||||
},
|
||||
{
|
||||
value: '24h',
|
||||
label: '이내 견적 답변',
|
||||
sub: '주말·공휴일 포함, 평균 3.8시간',
|
||||
color: 'border-amber-500/30',
|
||||
},
|
||||
{ value: '7년', label: '대기업 백엔드 개발 경력', sub: '실제 운영 서비스 다수 개발', color: 'border-blue-500/30' },
|
||||
{ value: '4개', label: '현재 직접 운영 중인 서비스', sub: '이 사이트 포함 — 지금 이 순간도 작동 중', color: 'border-emerald-500/30' },
|
||||
{ value: '100%', label: '외주 시 소스코드 이관', sub: '납품 후 전체 코드 전달, 락인 없음', color: 'border-violet-500/30' },
|
||||
{ value: '24h', label: '이내 견적 답변', sub: '주말·공휴일 포함', color: 'border-amber-500/30' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.value}
|
||||
className={`border-l-2 ${item.color} pl-5 py-2`}
|
||||
>
|
||||
<div key={item.value} className={`border-l-2 ${item.color} pl-5 py-2`}>
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-3xl font-extrabold text-white tracking-tight">{item.value}</span>
|
||||
<span className="text-[#8ba5cc] text-sm font-medium">{item.label}</span>
|
||||
@@ -467,250 +385,93 @@ export default function Home() {
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 4 — 약속 3가지
|
||||
(bento 제거, 에디토리얼 행 구조)
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-[#f8faff] px-6 py-16 lg:px-14 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="reveal mb-10">
|
||||
<p className="font-mono text-xs text-[#1a56db]/60 tracking-widest uppercase mb-2">
|
||||
Guarantee
|
||||
</p>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-[#04102b]"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
계약서에 박혀 있는 약속들
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="reveal space-y-px">
|
||||
{PROMISES.map((p, i) => (
|
||||
<div
|
||||
key={p.number}
|
||||
className={`flex flex-col md:flex-row md:items-start gap-6 py-8 ${
|
||||
i < PROMISES.length - 1 ? 'border-b border-[#e2e8f0]' : ''
|
||||
}`}
|
||||
>
|
||||
{/* 번호 */}
|
||||
<div className={`font-mono text-5xl font-extrabold ${p.accent} opacity-20 leading-none flex-shrink-0 w-16`}>
|
||||
{p.number}
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-extrabold text-[#0f172a] mb-2">{p.title}</h3>
|
||||
<p className="text-[#475569] text-base leading-relaxed mb-3" style={{ wordBreak: 'keep-all' }}>
|
||||
{p.detail}
|
||||
</p>
|
||||
<div className={`inline-flex items-center gap-2 text-xs font-semibold ${p.accent} border ${p.color} px-3 py-1.5 rounded-full`}>
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{p.enforce}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 5 — 지금 운영 중인 서비스
|
||||
(가짜 후기 대신 실제 증거)
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-[#04102b] px-6 py-16 lg:px-14 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="reveal mb-10">
|
||||
<p className="font-mono text-xs text-[#5ba4ff]/40 tracking-widest uppercase mb-2">
|
||||
Live Portfolio
|
||||
</p>
|
||||
<h2
|
||||
className="text-2xl md:text-3xl font-extrabold text-white"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
직접 만들고 운영 중인 서비스들
|
||||
</h2>
|
||||
<p className="text-[#8ba5cc] text-sm mt-2" style={{ wordBreak: 'keep-all' }}>
|
||||
고객 후기보다 확실한 증거입니다. 지금 바로 접속해서 확인하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{LIVE_SERVICES.map((s, i) => (
|
||||
<Link
|
||||
key={s.name}
|
||||
href={s.url}
|
||||
className={`reveal reveal-d${i + 1} group relative flex flex-col border border-white/8 hover:border-white/20 rounded-2xl p-6 transition-all hover:bg-white/3`}
|
||||
>
|
||||
{/* 상단 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="flex items-center gap-1.5 text-xs text-emerald-400 font-semibold">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||||
운영 중
|
||||
</span>
|
||||
<span
|
||||
className="text-xs font-mono px-2 py-0.5 rounded border"
|
||||
style={{ color: s.color, borderColor: `${s.color}40` }}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-white font-extrabold text-lg mb-2 group-hover:text-[#5ba4ff] transition-colors">
|
||||
{s.name}
|
||||
</h3>
|
||||
<p className="text-[#8ba5cc] text-sm leading-relaxed mb-4 flex-1" style={{ wordBreak: 'keep-all' }}>
|
||||
{s.desc}
|
||||
</p>
|
||||
|
||||
{/* 기술 태그 */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{s.tech.map((t) => (
|
||||
<span key={t} className="font-mono text-[11px] text-white/30 border border-white/8 px-2 py-0.5 rounded">
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 링크 화살표 */}
|
||||
<div className="absolute top-6 right-6 text-white/20 group-hover:text-white/50 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 6 — 서비스 목록
|
||||
(카드 그리드 → 에디토리얼 테이블)
|
||||
SECTION 5 — 외주 개발 (축소)
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-white px-6 py-16 lg:px-14 lg:py-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="reveal flex items-end justify-between flex-wrap gap-4 mb-8">
|
||||
<div>
|
||||
<p className="font-mono text-xs text-[#1a56db]/60 tracking-widest uppercase mb-2">Services</p>
|
||||
<p className="font-mono text-xs text-[#1a56db]/60 tracking-widest uppercase mb-2">
|
||||
Custom Development
|
||||
</p>
|
||||
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]" style={{ wordBreak: 'keep-all' }}>
|
||||
어떤 일을 맡겨 드릴 수 있나요
|
||||
맞춤 개발이 필요하신가요?
|
||||
</h2>
|
||||
<p className="text-[#64748b] text-sm mt-2" style={{ wordBreak: 'keep-all' }}>
|
||||
홈페이지 제작, 업무 시스템, API 개발 등 — 계약서 기반으로 안전하게 진행합니다.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="text-sm text-[#1a56db] font-semibold hover:underline underline-offset-4"
|
||||
>
|
||||
목록에 없는 것도 상담 가능 →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="reveal divide-y divide-[#f1f5f9]">
|
||||
{SERVICE_LIST.map((s) => (
|
||||
<Link
|
||||
key={s.href}
|
||||
href={s.href}
|
||||
className="group flex items-center gap-4 md:gap-6 py-5 hover:bg-[#f8faff] -mx-4 px-4 rounded-xl transition-colors"
|
||||
>
|
||||
{/* 카테고리 태그 */}
|
||||
<span className="font-mono text-xs font-bold text-[#94a3b8] w-10 flex-shrink-0">
|
||||
{s.category}
|
||||
</span>
|
||||
|
||||
{/* 서비스명 + 설명 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5 flex-wrap">
|
||||
<span className="font-extrabold text-[#0f172a] text-base group-hover:text-[#1a56db] transition-colors">
|
||||
{s.title}
|
||||
</span>
|
||||
{s.hot && (
|
||||
<span className="text-[10px] font-bold text-red-500 border border-red-200 px-1.5 py-0.5 rounded bg-red-50">
|
||||
HOT
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[#64748b] text-sm truncate" style={{ wordBreak: 'keep-all' }}>
|
||||
{s.desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 가격 + 기간 */}
|
||||
<div className="flex flex-col items-end flex-shrink-0">
|
||||
<span className="text-[#0f172a] font-extrabold text-xs sm:text-sm">{s.from}</span>
|
||||
<span className="text-[#94a3b8] text-xs font-mono">{s.duration}</span>
|
||||
</div>
|
||||
|
||||
{/* 화살표 */}
|
||||
<svg className="w-4 h-4 text-[#cbd5e1] group-hover:text-[#1a56db] flex-shrink-0 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<div className="reveal grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
{[
|
||||
{ icon: <svg className="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>, title: '계약서 먼저', desc: '범위·금액·납기를 문서로 확정' },
|
||||
{ icon: <svg className="w-6 h-6 text-emerald-500" 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>, title: '주 1회 보고', desc: '중간에 사라지는 일 없음' },
|
||||
{ icon: <svg className="w-6 h-6 text-violet-500" 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>, title: '소스코드 100%', desc: '전체 코드 이관, 락인 없음' },
|
||||
{ icon: <svg className="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>, title: '24시간 답변', desc: '주말·공휴일 포함 견적 회신' },
|
||||
].map((item) => (
|
||||
<div key={item.title} className="border border-[#e2e8f0] rounded-xl p-4 text-center">
|
||||
<span className="mb-2 block flex justify-center">{item.icon}</span>
|
||||
<p className="font-bold text-[#0f172a] text-sm mb-1">{item.title}</p>
|
||||
<p className="text-[#94a3b8] text-xs" style={{ wordBreak: 'keep-all' }}>{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="reveal flex flex-wrap gap-3">
|
||||
<Link
|
||||
href="/freelance"
|
||||
className="inline-flex items-center gap-2 bg-[#04102b] hover:bg-[#0a1a3f] text-white px-6 py-3 rounded-xl font-bold text-sm transition-colors"
|
||||
>
|
||||
포트폴리오 · 문의하기
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/website"
|
||||
className="inline-flex items-center gap-2 border border-[#e2e8f0] hover:border-[#1a56db]/30 text-[#475569] hover:text-[#1a56db] px-6 py-3 rounded-xl font-semibold text-sm transition-all"
|
||||
>
|
||||
홈페이지 제작 상세 보기
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════
|
||||
SECTION 7 — 최종 CTA (무료 이벤트 + 상담 통합)
|
||||
SECTION 6 — 최종 CTA
|
||||
══════════════════════════════════════ */}
|
||||
<section className="bg-[#04102b] px-6 py-20 lg:px-14">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* 무료 이벤트 배너 */}
|
||||
<div className="reveal border border-white/8 rounded-2xl p-6 md:p-8 mb-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 bg-red-500/15 border border-red-500/20 text-red-400 text-xs font-bold px-3 py-1 rounded-full mb-3">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
|
||||
선착순 3팀 한정
|
||||
</div>
|
||||
<h3 className="text-white font-extrabold text-xl mb-1" style={{ wordBreak: 'keep-all' }}>
|
||||
스타터 플랜, 선착순 3팀 20% 할인
|
||||
</h3>
|
||||
<p className="text-[#8ba5cc] text-sm" style={{ wordBreak: 'keep-all' }}>
|
||||
소개 사이트·랜딩 페이지 제작 문의 시 할인 적용. 이 배너 언급 필수.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="flex-shrink-0 bg-white text-[#04102b] font-extrabold text-sm px-7 py-3.5 rounded-xl hover:bg-[#f1f5ff] transition-colors whitespace-nowrap"
|
||||
>
|
||||
무료 신청하기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 메인 CTA */}
|
||||
<div className="reveal text-center">
|
||||
<p className="font-mono text-xs text-[#5ba4ff]/40 tracking-widest uppercase mb-4">Get Started</p>
|
||||
<h2
|
||||
className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-tight"
|
||||
style={{ wordBreak: 'keep-all' }}
|
||||
>
|
||||
어떤 것이든
|
||||
AI 도구로 업무를
|
||||
<br />
|
||||
먼저 말씀해 주세요.
|
||||
더 빠르게 처리하세요.
|
||||
</h2>
|
||||
<p className="text-[#8ba5cc] text-lg mb-10" style={{ wordBreak: 'keep-all' }}>
|
||||
상담은 무료입니다. 24시간 이내 답변드립니다.
|
||||
9,900원부터 시작. 맞춤 개발 상담은 무료입니다.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 justify-center">
|
||||
<button
|
||||
onClick={() => setModalOpen(true)}
|
||||
<Link
|
||||
href="/services/prompt"
|
||||
className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-10 py-4 rounded-xl font-extrabold text-base transition-colors"
|
||||
>
|
||||
무료 상담 신청
|
||||
AI 상품 보기
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</button>
|
||||
<a
|
||||
href="https://open.kakao.com/o/s9stoNvb"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-10 py-4 rounded-xl font-extrabold text-base transition-all"
|
||||
style={{ background: '#FEE500', color: '#3A1D1D' }}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => { trackCTAClick('무료 상담 신청', '/'); setModalOpen(true); }}
|
||||
className="inline-flex items-center gap-2 border border-white/15 hover:border-white/30 text-white/70 hover:text-white px-10 py-4 rounded-xl font-extrabold text-base transition-all"
|
||||
>
|
||||
카카오로 바로 채팅
|
||||
</a>
|
||||
맞춤 개발 상담
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-white/20 text-xs mt-8 font-mono">
|
||||
쟁승메이드 · 사업자 267-53-00822 · bgg8988@gmail.com · 010-3907-1392
|
||||
|
||||
Reference in New Issue
Block a user