gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: AI 템플릿 패턴 전면 제거 Round 2 + 컨텐츠 정합성 수정

Browse Source 
- 홈: hero gradient text → solid #5ba4ff, 토스페이먼츠 tech 제거, 사주 가격 '무료'로 수정
- 사주: CTA 버튼 gradient 제거, radial dots+이모지 CTA 섹션 → diagonal pattern
  유료 카드 gradient+orb 제거, FAQ 유료 언급 수정, 가격 섹션 제목 수정
- freelance: useCounter/StatCard 제거 → 4개 보증 카드로 대체, 모든 gradient 제거
- login: blur orbs 제거, gradient logo/버튼 → solid
- mypage: gradient 헤더/아바타 → solid + diagonal pattern
- DashboardShell: gradient '쟁' 로고 → solid
- automation: gradient step/pricing/CTA → solid
- ai-kit: gradient 배경들 → solid, gradient text → solid red-400

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-04-02 01:48:00 +09:00
parent 50872de773
commit 572b0bce45
8 changed files with 210 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/DashboardShell.tsx
View File

@@ -33,7 +33,7 @@ export default function DashboardShell({ children }: { children: React.ReactNode
</svg> </svg>
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs"> <div className="w-7 h-7 rounded-lg bg-[#1a56db] flex items-center justify-center text-white font-bold text-xs">
쟁 쟁
</div> </div>
<span className="text-white font-bold text-base">쟁승메이드</span> <span className="text-white font-bold text-base">쟁승메이드</span>

288
app/freelance/page.tsx
View File

@@ -1,41 +1,8 @@
'use client'; 'use client';
import { useState, useEffect, useRef } from 'react'; import { useState } from 'react';
import ContactForm from '../components/ContactForm'; import ContactForm from '../components/ContactForm';
/* ─── Counter Hook ─── */
function useCounter(target: number, duration = 1400) {
const [count, setCount] = useState(0);
const started = useRef(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && !started.current) {
started.current = true;
const step = target / (duration / 16);
let current = 0;
const timer = setInterval(() => {
current += step;
if (current >= target) {
setCount(target);
clearInterval(timer);
} else {
setCount(Math.floor(current));
}
}, 16);
}
},
{ threshold: 0.3 }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, [target, duration]);
return { count, ref };
}
/* ─── Data ─── */ /* ─── Data ─── */
const portfolio = [ const portfolio = [
{ {
@@ -46,9 +13,8 @@ const portfolio = [
tags: ['Python', 'Gmail API', 'Google Apps Script'], tags: ['Python', 'Gmail API', 'Google Apps Script'],
status: '납품 완료', status: '납품 완료',
statusType: 'done', statusType: 'done',
accentFrom: '#200a0a',
accentTo: '#4a1010',
accentColor: 'text-red-400', accentColor: 'text-red-400',
accentBg: 'bg-[#200a0a]',
borderAccent: 'border-red-400/20', borderAccent: 'border-red-400/20',
}, },
{ {
@@ -59,9 +25,8 @@ const portfolio = [
tags: ['Python', 'Selenium', 'Telegram Bot'], tags: ['Python', 'Selenium', 'Telegram Bot'],
status: '납품 완료', status: '납품 완료',
statusType: 'done', statusType: 'done',
accentFrom: '#0d0a2e',
accentTo: '#1a0f5c',
accentColor: 'text-violet-400', accentColor: 'text-violet-400',
accentBg: 'bg-[#0d0a2e]',
borderAccent: 'border-violet-400/20', borderAccent: 'border-violet-400/20',
}, },
{ {
@@ -72,9 +37,8 @@ const portfolio = [
tags: ['Python', 'OpenPyXL', 'ReportLab'], tags: ['Python', 'OpenPyXL', 'ReportLab'],
status: '납품 완료', status: '납품 완료',
statusType: 'done', statusType: 'done',
accentFrom: '#012030',
accentTo: '#013d50',
accentColor: 'text-cyan-400', accentColor: 'text-cyan-400',
accentBg: 'bg-[#012030]',
borderAccent: 'border-cyan-400/20', borderAccent: 'border-cyan-400/20',
}, },
{ {
@@ -85,9 +49,8 @@ const portfolio = [
tags: ['Python', '공공데이터 API', 'PostgreSQL', 'Telegram'], tags: ['Python', '공공데이터 API', 'PostgreSQL', 'Telegram'],
status: '납품 완료', status: '납품 완료',
statusType: 'done', statusType: 'done',
accentFrom: '#04102b',
accentTo: '#0a2060',
accentColor: 'text-blue-400', accentColor: 'text-blue-400',
accentBg: 'bg-[#04102b]',
borderAccent: 'border-blue-400/20', borderAccent: 'border-blue-400/20',
}, },
]; ];
@@ -195,90 +158,106 @@ const process = [
}, },
]; ];
/* ─── Sub-components ─── */ const guarantees = [
function StatCard({ {
target, label: '계약서 필수',
suffix = '', detail: '구두 약속 없음 — 착수 전 계약서 발송',
label, icon: (
sublabel, <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
pulse = false, <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
accentClass, </svg>
}: { ),
target: number; accentText: 'text-sky-400',
suffix?: string; accentBorder: 'border-sky-400/20',
label: string; },
sublabel: string; {
pulse?: boolean; label: '납기 지연 패널티',
accentClass: string; detail: '하루 지연 = 10만원 감면 — 그래서 안 늦습니다',
}) { icon: (
const { count, ref } = useCounter(target); <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
return ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
<div ref={ref} className="bg-[#04102b]/60 border border-[#1a3a7a]/50 rounded-2xl p-6 text-center backdrop-blur"> </svg>
<div className={`text-4xl font-extrabold tracking-tight mb-1 ${accentClass}`}> ),
{count}{suffix} accentText: 'text-amber-400',
</div> accentBorder: 'border-amber-400/20',
<div className="text-white font-bold text-sm mb-1 flex items-center justify-center gap-2"> },
{pulse && <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse flex-shrink-0" />} {
{label} label: '소스코드 100% 인도',
</div> detail: '납품 후 전체 소스코드 + 배포 가이드 제공',
<div className="text-[#5ba4ff]/50 text-xs">{sublabel}</div> icon: (
</div> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
); <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
} </svg>
),
accentText: 'text-emerald-400',
accentBorder: 'border-emerald-400/20',
},
{
label: '1개월 무상 AS',
detail: '납품 후 한 달 — 버그·수정 무상 대응',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
),
accentText: 'text-violet-400',
accentBorder: 'border-violet-400/20',
},
];
/* ─── Main Page ─── */ /* ─── Main Page ─── */
export default function FreelancePage() { export default function FreelancePage() {
const [_contactPreset] = useState('');
return ( return (
<div className="min-h-full bg-[#f0f5ff]"> <div className="min-h-full bg-[#f0f5ff]">
{/* ─── Hero ─── */} {/* ─── Hero ─── */}
<div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#071a4a] to-[#04102b] px-6 py-14 lg:px-12"> <div
<div className="absolute inset-0 opacity-[0.04]" className="relative overflow-hidden bg-[#04102b] px-6 py-14 lg:px-12"
style={{ backgroundImage: 'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)', backgroundSize: '40px 40px' }} /> style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}
<div className="absolute right-0 top-0 w-[500px] h-[500px] rounded-full bg-blue-500/5 blur-3xl" /> >
<div className="relative max-w-5xl mx-auto"> <div className="relative max-w-5xl mx-auto">
<div className="text-center mb-10"> <div className="mb-10">
<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-2 rounded-full mb-5"> <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-2 rounded-full mb-5">
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" /> <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
현재 프로젝트 접수 가능 현재 프로젝트 접수 가능
</div> </div>
<h1 className="text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight mb-4"> <h1 className="text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight mb-4">
연락 두절? 그런 거 없습니다.<br /> 연락 두절? 그런 거 없습니다.<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]"> <span className="text-[#5ba4ff]">납기 지키고, 끝까지 책임집니다</span>
납기 지키고, 끝까지 책임집니다
</span>
</h1> </h1>
<p className="text-blue-200/60 text-base md:text-lg max-w-xl mx-auto leading-relaxed mb-2"> <p className="text-blue-200/60 text-base md:text-lg max-w-xl leading-relaxed mb-2">
개발자에게 맡겼다가 연락 두절된 경험 있으신가요?<br /> 개발자에게 맡겼다가 연락 두절된 경험 있으신가요?<br />
계약서 작성, 중간 보고, 소스코드 인도까지 — 단계마다 증거를 남깁니다. 계약서 작성, 중간 보고, 소스코드 인도까지 — 단계마다 증거를 남깁니다.
</p> </p>
</div> </div>
{/* ─ Live Counters ─ */} {/* Developer tag */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="flex items-center gap-4 bg-white/5 border border-white/10 rounded-2xl px-6 py-3 mb-8 w-fit">
<StatCard target={2} label="진행 중" sublabel="현재 개발 중인 프로젝트" pulse accentClass="text-emerald-400" /> <div className="w-10 h-10 rounded-full bg-[#1a56db] flex items-center justify-center text-white font-extrabold text-sm flex-shrink-0">
<StatCard target={3} label="상담 중" sublabel="검토 및 견적 협의 중" pulse accentClass="text-amber-400" /> 박
<StatCard target={47} suffix="+" label="최종 납품" sublabel="자동화 28 · 웹개발 14 · 기타 5" accentClass="text-[#5ba4ff]" /> </div>
<StatCard target={98} suffix="%" label="고객 만족도" sublabel="재의뢰·소개 고객 비율 포함" accentClass="text-violet-400" /> <div>
<div className="text-white font-bold text-sm">쟁토리 (박재오)</div>
<div className="text-blue-300/50 text-xs">대기업 백엔드 7년 · Python / Java / Next.js</div>
</div>
<div className="hidden sm:flex gap-2">
{['Python', 'Java', 'Next.js', 'Docker'].map(t => (
<span key={t} className="bg-[#1a56db]/20 border border-[#1a56db]/30 text-[#5ba4ff] text-xs px-2 py-0.5 rounded-md font-mono">{t}</span>
))}
</div>
</div> </div>
{/* developer tag */} {/* 보증 카드 4개 */}
<div className="mt-8 flex justify-center"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="inline-flex items-center gap-4 bg-white/5 border border-white/10 rounded-2xl px-6 py-3"> {guarantees.map((g) => (
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#1a56db] to-[#4338ca] flex items-center justify-center text-white font-extrabold text-sm flex-shrink-0"> <div key={g.label} className={`bg-[#04102b]/60 border ${g.accentBorder} rounded-xl p-4`}>
박 <div className={`${g.accentText} mb-2`}>{g.icon}</div>
<div className="text-white font-bold text-sm mb-1">{g.label}</div>
<div className="text-blue-300/40 text-xs leading-relaxed">{g.detail}</div>
</div> </div>
<div> ))}
<div className="text-white font-bold text-sm">쟁토리</div>
<div className="text-blue-300/50 text-xs">시니어 백엔드 개발자 · Python / Java / Next.js</div>
</div>
<div className="hidden sm:flex gap-2">
{['Python', 'Java', 'Next.js', 'Docker'].map(t => (
<span key={t} className="bg-[#1a56db]/20 border border-[#1a56db]/30 text-[#5ba4ff] text-xs px-2 py-0.5 rounded-md font-mono">{t}</span>
))}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -299,14 +278,8 @@ export default function FreelancePage() {
className="bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:shadow-xl hover:shadow-blue-100 hover:-translate-y-1 transition-all duration-200 group" className="bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:shadow-xl hover:shadow-blue-100 hover:-translate-y-1 transition-all duration-200 group"
> >
{/* card header */} {/* card header */}
<div <div className={`px-5 pt-5 pb-8 ${item.accentBg}`}>
className="px-5 pt-5 pb-8 relative overflow-hidden" <div className="flex items-start justify-between">
style={{ background: `linear-gradient(135deg, ${item.accentFrom}, ${item.accentTo})` }}
>
{/* grid texture */}
<div className="absolute inset-0 opacity-[0.06]"
style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '20px 20px' }} />
<div className="relative flex items-start justify-between">
<div> <div>
<div className={`text-xs font-bold mb-2 uppercase tracking-wider ${item.accentColor}`}>{item.category}</div> <div className={`text-xs font-bold mb-2 uppercase tracking-wider ${item.accentColor}`}>{item.category}</div>
<h3 className="text-white font-extrabold text-sm leading-snug">{item.title}</h3> <h3 className="text-white font-extrabold text-sm leading-snug">{item.title}</h3>
@@ -427,26 +400,32 @@ export default function FreelancePage() {
{/* Vertical timeline */} {/* Vertical timeline */}
<div className="relative"> <div className="relative">
{/* connecting line */} {/* connecting line */}
<div className="absolute left-6 top-6 bottom-6 w-px bg-gradient-to-b from-[#1a56db] via-[#dbe8ff] to-[#1a56db]" /> <div className="absolute left-6 top-6 bottom-6 w-px bg-[#dbe8ff]" />
<div className="space-y-4"> <div className="space-y-4">
{process.map((p) => ( {process.map((p) => (
<div key={p.num} className={`relative flex gap-5 ${p.highlight ? '' : ''}`}> <div key={p.num} className="relative flex gap-5">
{/* step circle */} {/* step circle */}
<div className={`relative z-10 w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg ${ <div className={`relative z-10 w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg ${
p.highlight p.highlight
? 'bg-gradient-to-br from-[#1a56db] to-[#4338ca] shadow-blue-500/30 border border-[#1a56db]/50' ? 'bg-[#1a56db] shadow-blue-500/30 border border-[#1a56db]/50'
: 'bg-white border-2 border-[#dbe8ff]' : 'bg-white border-2 border-[#dbe8ff]'
}`}> }`}>
<span className={p.highlight ? 'text-white' : 'text-[#1a56db]'}>{p.icon}</span> <span className={p.highlight ? 'text-white' : 'text-[#1a56db]'}>{p.icon}</span>
</div> </div>
{/* content */} {/* content */}
<div className={`flex-1 rounded-2xl border p-5 mb-0 ${ <div
p.highlight className={`flex-1 rounded-2xl border p-5 mb-0 ${
? 'bg-gradient-to-br from-[#04102b] to-[#0a2060] border-[#1a56db]/40 shadow-lg shadow-blue-900/20' p.highlight
: 'bg-white border-[#dbe8ff]' ? 'border-[#1a56db]/40'
}`}> : 'bg-white border-[#dbe8ff]'
}`}
style={p.highlight ? {
background: '#04102b',
backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
} : {}}
>
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
@@ -474,14 +453,14 @@ export default function FreelancePage() {
</div> </div>
</div> </div>
{/* ─── 기술 스택 & 강점 ─── */} {/* ─── 기술 스택 & 신뢰 ─── */}
<div className="px-6 pb-12 lg:px-12"> <div className="px-6 pb-12 lg:px-12">
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-5"> <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-5">
{/* Tech Stack */} {/* Tech Stack */}
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6"> <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<div className="flex items-center gap-2 mb-4"> <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" /> <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
<h3 className="font-bold text-[#04102b] text-sm">개발 가능 기술 스택</h3> <h3 className="font-bold text-[#04102b] text-sm">개발 가능 기술 스택</h3>
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
@@ -506,21 +485,67 @@ export default function FreelancePage() {
</div> </div>
{/* 신뢰 포인트 */} {/* 신뢰 포인트 */}
<div className="bg-gradient-to-br from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-6"> <div
className="rounded-2xl border border-[#1a3a7a] p-6"
style={{
background: '#04102b',
backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
}}
>
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<div className="w-1 h-5 bg-gradient-to-b from-[#5ba4ff] to-[#818cf8] rounded-full" /> <div className="w-1 h-5 bg-[#5ba4ff] rounded-full" />
<h3 className="font-bold text-white text-sm">신뢰할 수 있는 이유</h3> <h3 className="font-bold text-white text-sm">신뢰할 수 있는 이유</h3>
</div> </div>
<ul className="space-y-3.5"> <ul className="space-y-3.5">
{[ {[
{ icon: '🌐', title: '지금 URL로 직접 확인', desc: 'jaengseung-made.com — 로또 분석, 주식 자동매매 지금도 운영 중' }, {
{ icon: '📋', title: '계약서 먼저, 개발 나중', desc: '구두 약속 없음 — 견적서·계약서 발송 후 착수' }, title: '지금 URL로 직접 확인',
{ icon: '🔒', title: '납품 전 전액 환불 보장', desc: '마음에 안 드시면 이유 불문 전액 환불' }, desc: 'jaengseung-made.com — 로또 분석, 주식 자동매매 지금도 운영 중',
{ icon: '📦', title: '소스코드 100% 인도', desc: '완성 후 전체 소스코드 + 배포 가이드 제공' }, icon: (
{ icon: '⚡', title: '납기 지연 시 패널티', desc: '하루 늦을 때마다 10만원 감면 — 그래서 안 늦습니다' }, <svg className="w-4 h-4 text-[#5ba4ff] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
),
},
{
title: '계약서 먼저, 개발 나중',
desc: '구두 약속 없음 — 견적서·계약서 발송 후 착수',
icon: (
<svg className="w-4 h-4 text-[#5ba4ff] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
),
},
{
title: '납품 전 전액 환불 보장',
desc: '마음에 안 드시면 이유 불문 전액 환불',
icon: (
<svg className="w-4 h-4 text-[#5ba4ff] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
),
},
{
title: '소스코드 100% 인도',
desc: '완성 후 전체 소스코드 + 배포 가이드 제공',
icon: (
<svg className="w-4 h-4 text-[#5ba4ff] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
),
},
{
title: '납기 지연 시 패널티',
desc: '하루 늦을 때마다 10만원 감면 — 그래서 안 늦습니다',
icon: (
<svg className="w-4 h-4 text-[#5ba4ff] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
},
].map((item) => ( ].map((item) => (
<li key={item.title} className="flex items-start gap-3"> <li key={item.title} className="flex items-start gap-3">
<span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span> {item.icon}
<div> <div>
<div className="text-white text-sm font-bold">{item.title}</div> <div className="text-white text-sm font-bold">{item.title}</div>
<div className="text-blue-300/50 text-xs">{item.desc}</div> <div className="text-blue-300/50 text-xs">{item.desc}</div>
@@ -583,7 +608,10 @@ export default function FreelancePage() {
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-5 text-center"> <div
className="rounded-2xl border border-[#1a3a7a] p-5 text-center"
style={{ background: '#04102b' }}
>
<div className="text-2xl font-extrabold text-white mb-0.5">24h</div> <div className="text-2xl font-extrabold text-white mb-0.5">24h</div>
<div className="text-[#5ba4ff] text-xs font-bold mb-1">이내 답변 보장</div> <div className="text-[#5ba4ff] text-xs font-bold mb-1">이내 답변 보장</div>
<div className="text-blue-300/40 text-xs">영업일 기준 · 주말 포함</div> <div className="text-blue-300/40 text-xs">영업일 기준 · 주말 포함</div>

14
app/login/page.tsx
View File

@@ -76,18 +76,16 @@ function LoginForm() {
return ( return (
<div className="min-h-screen bg-[#04102b] flex items-center justify-center p-4"> <div className="min-h-screen bg-[#04102b] flex items-center justify-center p-4">
{/* 배경 장식 */} {/* 배경 장식 */}
<div className="absolute inset-0 overflow-hidden pointer-events-none"> <div
<div className="absolute inset-0 opacity-[0.03]" className="absolute inset-0 pointer-events-none"
style={{ backgroundImage: 'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)', backgroundSize: '40px 40px' }} /> style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}
<div className="absolute top-0 right-0 w-96 h-96 rounded-full bg-blue-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" /> />
<div className="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-violet-500/10 blur-3xl translate-y-1/2 -translate-x-1/4" />
</div>
<div className="relative w-full max-w-md"> <div className="relative w-full max-w-md">
{/* 로고 */} {/* 로고 */}
<div className="text-center mb-8"> <div className="text-center mb-8">
<Link href="/" className="inline-flex items-center gap-3 group"> <Link href="/" className="inline-flex items-center gap-3 group">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-blue-500/25"> <div className="w-12 h-12 rounded-xl bg-[#1a56db] flex items-center justify-center text-white font-bold text-xl">
쟁 쟁
</div> </div>
<div className="text-left"> <div className="text-left">
@@ -153,7 +151,7 @@ function LoginForm() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-blue-600/20 disabled:opacity-50 disabled:cursor-not-allowed" className="w-full bg-[#1a56db] hover:bg-[#1e4fc2] text-white font-bold py-3 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
> >
{loading ? '처리 중...' : (isSignUp ? '회원가입' : '로그인')} {loading ? '처리 중...' : (isSignUp ? '회원가입' : '로그인')}
</button> </button>

4
app/mypage/page.tsx
View File

@@ -268,10 +268,10 @@ export default function MyPage() {
)} )}
{/* 헤더 */} {/* 헤더 */}
<div className="bg-gradient-to-br from-[#04102b] via-[#0a1f5c] to-[#04102b] px-6 py-10"> <div className="bg-[#04102b] px-6 py-10" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-white text-xl font-bold shadow-lg flex-shrink-0"> <div className="w-14 h-14 rounded-full bg-[#1a56db] flex items-center justify-center text-white text-xl font-bold flex-shrink-0">
{user.email?.[0].toUpperCase()} {user.email?.[0].toUpperCase()}
</div> </div>
<div> <div>

13
app/page.tsx
View File

@@ -88,8 +88,8 @@ const LIVE_SERVICES = [
name: '쟁승메이드', name: '쟁승메이드',
label: '이 사이트', label: '이 사이트',
url: '/freelance', url: '/freelance',
desc: '기획·디자인·개발·배포·결제·관리자까지 혼자 만들고 직접 운영 중. 이 사이트 자체가 포트폴리오.', desc: '기획·디자인·개발·배포·관리자까지 혼자 만들고 직접 운영 중. 이 사이트 자체가 포트폴리오.',
tech: ['Next.js 16', 'Supabase', 'Tailwind', 'Vercel', '토스페이먼츠'], tech: ['Next.js 16', 'Supabase', 'Tailwind', 'Vercel'],
status: 'live', status: 'live',
color: '#1a56db', color: '#1a56db',
}, },
@@ -155,7 +155,7 @@ const SERVICE_LIST = [
category: 'AI', category: 'AI',
title: 'AI 사주 분석', title: 'AI 사주 분석',
desc: '생년월일 입력 → AI가 성격·직업·관계·운세를 즉시 분석', desc: '생년월일 입력 → AI가 성격·직업·관계·운세를 즉시 분석',
from: '4,900원/건', from: '무료',
duration: '즉시', duration: '즉시',
hot: false, hot: false,
}, },
@@ -218,12 +218,7 @@ export default function Home() {
<br /> <br />
만드는 것부터 만드는 것부터
<br /> <br />
<span <span className="text-[#5ba4ff]">운영까지 맡기세요.</span>
className="text-transparent bg-clip-text"
style={{ backgroundImage: 'linear-gradient(90deg, #5ba4ff 0%, #a78bfa 100%)' }}
>
운영까지 맡기세요.
</span>
</h1> </h1>
{/* 서브텍스트 */} {/* 서브텍스트 */}

54
app/saju/page.tsx
View File

@@ -12,7 +12,7 @@ const faqItems = [
}, },
{ {
q: 'AI 해석은 어떻게 동작하나요?', q: 'AI 해석은 어떻게 동작하나요?',
a: '전통 명리학 계산 로직(오행, 신강/신약, 용신/희신 등)으로 산출된 데이터를 GPT-4o에 전달하여 12개 항목의 상세 해석을 생성합니다. 기본 원국 분석은 무료이며, AI 상세 해석은 유료(₩4,900)로 제공됩니다.', a: '전통 명리학 계산 로직(오행, 신강/신약, 용신/희신 등)으로 산출된 데이터를 Gemini AI에 전달하여 12개 항목의 상세 해석을 생성합니다. 현재 기본 원국 분석과 AI 상세 해석 모두 무료로 제공됩니다.',
}, },
{ {
q: '태어난 시간을 모르면 어떻게 하나요?', q: '태어난 시간을 모르면 어떻게 하나요?',
@@ -98,7 +98,7 @@ export default function SajuPage() {
<div className="flex flex-col sm:flex-row items-center justify-center gap-3"> <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
<Link <Link
href="/saju/input" href="/saju/input"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-violet-900/40" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -169,7 +169,7 @@ export default function SajuPage() {
)} )}
<Link <Link
href={buildResultUrl(rec)} href={buildResultUrl(rec)}
className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-gradient-to-r from-[#04102b] to-[#0a2060] text-white hover:from-[#0a1f5c] hover:to-[#1a3a7a] transition" className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-[#04102b] hover:bg-[#0a1f5c] text-white border border-[#1a3a7a] transition"
> >
다시 보기 → 다시 보기 →
</Link> </Link>
@@ -180,28 +180,29 @@ export default function SajuPage() {
)} )}
{/* ─── 바로 시작하기 CTA ─── */} {/* ─── 바로 시작하기 CTA ─── */}
<div className="bg-gradient-to-r from-[#04102b] via-[#0a1f5c] to-[#0d2d8a] rounded-2xl border border-[#1a3a7a] p-8 text-center relative overflow-hidden"> <div
<div className="absolute inset-0 opacity-[0.04]" className="rounded-2xl border border-[#1a3a7a] p-8 text-center"
style={{ backgroundImage: 'radial-gradient(circle, #a78bfa 1px, transparent 1px)', backgroundSize: '25px 25px' }} /> style={{
<div className="relative"> background: '#04102b',
<div className="text-3xl mb-3">✨</div> backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
<h3 className="text-2xl font-extrabold text-white mb-2">지금 무료로 시작하세요</h3> }}
<p className="text-blue-200/60 text-sm mb-6">회원가입 없이, 생년월일만 입력하면 바로 확인 가능합니다</p> >
<Link <h3 className="text-2xl font-extrabold text-white mb-2">지금 무료로 시작하세요</h3>
href="/saju/input" <p className="text-blue-200/60 text-sm mb-6">회원가입 없이, 생년월일만 입력하면 바로 확인 가능합니다</p>
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] text-white px-8 py-3.5 rounded-xl font-semibold text-base hover:from-[#1e4fc2] hover:to-[#6d28d9] transition-all shadow-lg shadow-violet-900/40" <Link
> href="/saju/input"
사주 입력하러 가기 → className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#04102b] px-8 py-3.5 rounded-xl font-bold text-base transition-all"
</Link> >
</div> 사주 입력하러 가기 →
</Link>
</div> </div>
{/* ─── 무료 vs 유료 비교표 ─── */} {/* ─── 무료 vs 유료 비교표 ─── */}
<div> <div>
<div className="text-center mb-8"> <div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p> <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">무료 vs 유료 비교</h2> <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">무엇을 분석해드리나요</h2>
<p className="text-slate-500 text-sm mt-2">기본 원국은 무료로, AI 상세 해석은 단 ₩4,900에</p> <p className="text-slate-500 text-sm mt-2">기본 원국부터 AI 상세 해석까지 — 현재 전부 무료</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
@@ -247,12 +248,17 @@ export default function SajuPage() {
</div> </div>
</div> </div>
{/* 유료 */} {/* AI 해석 (현재 무료) */}
<div className="bg-gradient-to-br from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-6 shadow-lg relative overflow-hidden"> <div
<div className="absolute top-4 right-4 bg-amber-400 text-[#04102b] text-xs font-bold px-2 py-0.5 rounded-lg"> className="rounded-2xl border border-[#1a3a7a] p-6 shadow-lg relative overflow-hidden"
₩4,900 style={{
background: '#04102b',
backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
}}
>
<div className="absolute top-4 right-4 bg-emerald-400 text-[#04102b] text-xs font-bold px-2 py-0.5 rounded-lg">
현재 무료
</div> </div>
<div className="absolute bottom-0 right-0 w-32 h-32 rounded-full bg-violet-500/10 blur-2xl" />
<div className="flex items-center gap-3 mb-5 relative"> <div className="flex items-center gap-3 mb-5 relative">
<div className="w-10 h-10 rounded-xl bg-violet-500/20 border border-violet-400/30 flex items-center justify-center"> <div className="w-10 h-10 rounded-xl bg-violet-500/20 border border-violet-400/30 flex items-center justify-center">
<svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">

10
app/services/ai-kit/page.tsx
View File

@@ -253,7 +253,7 @@ export default function AiKitPage() {
</div> </div>
{/* 총합 카드 */} {/* 총합 카드 */}
<div className="bg-gradient-to-r from-red-50 to-orange-50 border border-red-200 rounded-2xl p-6 mb-8"> <div className="bg-red-50 border border-red-200 rounded-2xl p-6 mb-8">
<div className="flex flex-col md:flex-row items-center justify-between gap-4"> <div className="flex flex-col md:flex-row items-center justify-between gap-4">
<div> <div>
<p className="text-sm font-bold text-red-600 mb-1">6가지 반복 업무를 혼자 할 때</p> <p className="text-sm font-bold text-red-600 mb-1">6가지 반복 업무를 혼자 할 때</p>
@@ -342,7 +342,7 @@ export default function AiKitPage() {
))} ))}
</div> </div>
<div className="mt-8 bg-gradient-to-r from-indigo-900/50 to-violet-900/50 border border-indigo-500/30 rounded-2xl p-6 text-center"> <div className="mt-8 bg-[#0a0f2e] border border-indigo-500/30 rounded-2xl p-6 text-center">
<p className="text-white text-lg font-extrabold mb-1"> <p className="text-white text-lg font-extrabold mb-1">
실수 1번이 계약 1건을 날립니다. 실수 1번이 계약 1건을 날립니다.
</p> </p>
@@ -391,7 +391,7 @@ export default function AiKitPage() {
</div> </div>
{/* 업데이트 알림 */} {/* 업데이트 알림 */}
<div className="mt-6 bg-gradient-to-r from-indigo-50 to-cyan-50 border border-indigo-200 rounded-2xl p-5 flex items-start gap-4"> <div className="mt-6 bg-indigo-50 border border-indigo-200 rounded-2xl p-5 flex items-start gap-4">
<div className="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600 flex-shrink-0"> <div className="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600 flex-shrink-0">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -496,13 +496,13 @@ export default function AiKitPage() {
</div> </div>
{/* ─── 최하단 CTA ─── */} {/* ─── 최하단 CTA ─── */}
<div className="px-6 py-14 lg:px-12 bg-gradient-to-br from-[#0a0f2e] to-[#0f1a5c]"> <div className="px-6 py-14 lg:px-12 bg-[#0a0f2e]" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
<div className="max-w-2xl mx-auto text-center"> <div className="max-w-2xl mx-auto text-center">
{/* 마지막 카피: 기회비용 프레이밍 */} {/* 마지막 카피: 기회비용 프레이밍 */}
<p className="text-indigo-300/60 text-sm font-bold uppercase tracking-widest mb-3">구독 안 하면 내일도 동일합니다</p> <p className="text-indigo-300/60 text-sm font-bold uppercase tracking-widest mb-3">구독 안 하면 내일도 동일합니다</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-white mb-3"> <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-3">
월 19,900원 vs<br /> 월 19,900원 vs<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-400"> <span className="text-red-400">
월 409,000원어치 시간 낭비 월 409,000원어치 시간 낭비
</span> </span>
</h2> </h2>

8
app/services/automation/page.tsx
View File

@@ -244,11 +244,11 @@ export default function AutomationPage() {
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">진행 프로세스</h2> <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">진행 프로세스</h2>
</div> </div>
<div className="relative"> <div className="relative">
<div className="hidden sm:block absolute top-10 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-cyan-200 via-[#dbe8ff] to-cyan-200" /> <div className="hidden sm:block absolute top-10 left-[10%] right-[10%] h-0.5 bg-[#dbe8ff]" />
<div className="grid grid-cols-1 sm:grid-cols-5 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-5 gap-4">
{process.map((p) => ( {process.map((p) => (
<div key={p.step} className="relative text-center"> <div key={p.step} className="relative text-center">
<div className="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-[#012030] to-[#013d50] border border-cyan-400/20 flex flex-col items-center justify-center mb-3 shadow-lg shadow-cyan-900/20"> <div className="w-20 h-20 mx-auto rounded-2xl bg-[#012030] border border-cyan-400/20 flex flex-col items-center justify-center mb-3">
<span className="text-cyan-400 text-xs font-bold">STEP</span> <span className="text-cyan-400 text-xs font-bold">STEP</span>
<span className="text-white font-extrabold text-lg leading-none">{p.step}</span> <span className="text-white font-extrabold text-lg leading-none">{p.step}</span>
</div> </div>
@@ -272,7 +272,7 @@ export default function AutomationPage() {
{plans.map((plan) => ( {plans.map((plan) => (
<div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${ <div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
plan.highlight plan.highlight
? 'bg-gradient-to-br from-[#012030] to-[#013d50] border-cyan-400/30 shadow-2xl shadow-cyan-900/20 scale-105' ? 'bg-[#012030] border-cyan-400/30 shadow-2xl shadow-cyan-900/20 scale-105'
: 'bg-white border-[#dbe8ff]' : 'bg-white border-[#dbe8ff]'
}`}> }`}>
{plan.highlight && ( {plan.highlight && (
@@ -411,7 +411,7 @@ export default function AutomationPage() {
{/* ─── CTA ─── */} {/* ─── CTA ─── */}
<div className="px-6 pb-12 lg:px-12"> <div className="px-6 pb-12 lg:px-12">
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<div className="bg-gradient-to-r from-[#012030] to-[#013d50] rounded-2xl border border-cyan-400/20 p-8 text-center"> <div className="bg-[#012030] rounded-2xl border border-cyan-400/20 p-8 text-center" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)' }}>
<p className="text-cyan-400 text-xs font-bold uppercase tracking-widest mb-2">FREE CONSULTATION</p> <p className="text-cyan-400 text-xs font-bold uppercase tracking-widest mb-2">FREE CONSULTATION</p>
<h3 className="text-white text-2xl font-extrabold mb-2">어떤 업무든 상담해보세요</h3> <h3 className="text-white text-2xl font-extrabold mb-2">어떤 업무든 상담해보세요</h3>
<p className="text-cyan-100/40 text-sm mb-6">자동화 가능한 업무라면 무엇이든 도와드립니다</p> <p className="text-cyan-100/40 text-sm mb-6">자동화 가능한 업무라면 무엇이든 도와드립니다</p>