design: 전 사이트 AI 템플릿 그라디언트 완전 제거 (Round 5)
- services/website: featured 가격 카드 linear-gradient → #0d1240 솔리드 - saju/input: blur-3xl orb + radial-gradient 도트 패턴 제거, bg-gradient-to-br → 솔리드+대각 패턴 - payment/fail + success: 헤더 그라디언트→#04102b, 로고 아이콘→#1a56db, 버튼→#1a56db 솔리드 - mypage: 탭 활성 상태·액센트 라인·버튼 전체 gradient → 솔리드 (#1a56db/amber-500) amber 알림 카드 gradient → bg-amber-50, 사주 결과 버튼 → #04102b Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -301,7 +301,7 @@ export default function MyPage() {
|
|||||||
onClick={() => setTab(t.key)}
|
onClick={() => setTab(t.key)}
|
||||||
className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
|
className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
|
||||||
tab === t.key
|
tab === t.key
|
||||||
? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow'
|
? 'bg-[#1a56db] text-white shadow'
|
||||||
: 'text-slate-500 hover:text-slate-700'
|
: 'text-slate-500 hover:text-slate-700'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -324,7 +324,7 @@ export default function MyPage() {
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||||
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
|
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
|
||||||
<div className="w-1 h-5 bg-gradient-to-b from-blue-600 to-violet-600 rounded-full" />
|
<div className="w-1 h-5 bg-[#1a56db] rounded-full" />
|
||||||
계정 정보
|
계정 정보
|
||||||
</h2>
|
</h2>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
@@ -349,7 +349,7 @@ export default function MyPage() {
|
|||||||
|
|
||||||
{/* 구독 중인 서비스 - 요약 (탭으로 유도) */}
|
{/* 구독 중인 서비스 - 요약 (탭으로 유도) */}
|
||||||
{activeSubs.length > 0 && (
|
{activeSubs.length > 0 && (
|
||||||
<div className="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-200 p-5 flex items-center justify-between gap-3">
|
<div className="bg-amber-50 rounded-2xl border border-amber-200 p-5 flex items-center justify-between gap-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<span className="text-2xl">{PLAN_LABELS[activeSubs[0].product_id]?.emoji ?? '🎟'}</span>
|
<span className="text-2xl">{PLAN_LABELS[activeSubs[0].product_id]?.emoji ?? '🎟'}</span>
|
||||||
<div>
|
<div>
|
||||||
@@ -372,7 +372,7 @@ export default function MyPage() {
|
|||||||
{/* 텔레그램 연동 카드 */}
|
{/* 텔레그램 연동 카드 */}
|
||||||
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||||
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
|
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
|
||||||
<div className="w-1 h-5 bg-gradient-to-b from-sky-500 to-blue-600 rounded-full" />
|
<div className="w-1 h-5 bg-[#1a56db] rounded-full" />
|
||||||
텔레그램 알림 연동
|
텔레그램 알림 연동
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowTelegramGuide(true)}
|
onClick={() => setShowTelegramGuide(true)}
|
||||||
@@ -464,7 +464,7 @@ export default function MyPage() {
|
|||||||
<button
|
<button
|
||||||
onClick={handleTelegramConnect}
|
onClick={handleTelegramConnect}
|
||||||
disabled={telegramLinkState === 'generating'}
|
disabled={telegramLinkState === 'generating'}
|
||||||
className="px-5 py-2.5 text-sm font-bold text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-400 hover:to-blue-500 rounded-xl shadow-sm shadow-sky-200 transition disabled:opacity-60"
|
className="px-5 py-2.5 text-sm font-bold text-white bg-[#1a56db] hover:bg-[#1e4fc2] rounded-xl shadow-sm shadow-sky-200 transition disabled:opacity-60"
|
||||||
>
|
>
|
||||||
{telegramLinkState === 'generating' ? '생성 중...' : '텔레그램 연결하기'}
|
{telegramLinkState === 'generating' ? '생성 중...' : '텔레그램 연결하기'}
|
||||||
</button>
|
</button>
|
||||||
@@ -474,7 +474,7 @@ export default function MyPage() {
|
|||||||
|
|
||||||
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
|
||||||
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
|
<h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
|
||||||
<div className="w-1 h-5 bg-gradient-to-b from-blue-600 to-violet-600 rounded-full" />
|
<div className="w-1 h-5 bg-[#1a56db] rounded-full" />
|
||||||
빠른 메뉴
|
빠른 메뉴
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
@@ -606,7 +606,7 @@ export default function MyPage() {
|
|||||||
{/* 액션 버튼 */}
|
{/* 액션 버튼 */}
|
||||||
<div className="flex gap-2 flex-wrap">
|
<div className="flex gap-2 flex-wrap">
|
||||||
<a href="/services/lotto/recommend"
|
<a href="/services/lotto/recommend"
|
||||||
className="flex-1 text-center py-2 text-sm font-bold text-white bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 rounded-xl transition shadow-sm">
|
className="flex-1 text-center py-2 text-sm font-bold text-white bg-amber-500 hover:bg-amber-400 rounded-xl transition shadow-sm">
|
||||||
번호 추천받기
|
번호 추천받기
|
||||||
</a>
|
</a>
|
||||||
{isActive && (
|
{isActive && (
|
||||||
@@ -721,7 +721,7 @@ export default function MyPage() {
|
|||||||
)}
|
)}
|
||||||
<Link
|
<Link
|
||||||
href={buildSajuResultUrl(rec)}
|
href={buildSajuResultUrl(rec)}
|
||||||
className="block w-full text-center py-2 rounded-xl text-xs 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-xs font-bold bg-[#04102b] hover:bg-[#0a1f5c] text-white transition"
|
||||||
>
|
>
|
||||||
{rec.is_paid && rec.interpretation ? 'AI 해석 다시 보기 →' : '결과 보기 →'}
|
{rec.is_paid && rec.interpretation ? 'AI 해석 다시 보기 →' : '결과 보기 →'}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -828,7 +828,7 @@ function EmptyState({
|
|||||||
<div className="text-slate-500 text-sm mb-6">{desc}</div>
|
<div className="text-slate-500 text-sm mb-6">{desc}</div>
|
||||||
<Link
|
<Link
|
||||||
href={linkHref}
|
href={linkHref}
|
||||||
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm hover:opacity-90 transition-all shadow-lg shadow-blue-600/20"
|
className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm transition-all shadow-lg shadow-blue-600/20"
|
||||||
>
|
>
|
||||||
{linkLabel} →
|
{linkLabel} →
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ function FailContent() {
|
|||||||
<div className="flex justify-center gap-3 flex-wrap">
|
<div className="flex justify-center gap-3 flex-wrap">
|
||||||
<button
|
<button
|
||||||
onClick={() => window.history.back()}
|
onClick={() => window.history.back()}
|
||||||
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20"
|
className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20 transition"
|
||||||
>
|
>
|
||||||
다시 시도하기
|
다시 시도하기
|
||||||
</button>
|
</button>
|
||||||
@@ -45,9 +45,9 @@ export default function PaymentFailPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
|
<div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
|
||||||
<div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
|
<div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
|
||||||
<div className="bg-gradient-to-r from-[#04102b] to-[#0a1f5c] px-6 py-4">
|
<div className="bg-[#04102b] px-6 py-4" 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="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-sm">쟁승메이드 결제</span>
|
<span className="text-white font-bold text-sm">쟁승메이드 결제</span>
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ function SuccessContent() {
|
|||||||
<Link href="/mypage" className="inline-flex items-center gap-2 bg-white border border-[#dbe8ff] text-slate-600 px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-slate-50 transition">
|
<Link href="/mypage" className="inline-flex items-center gap-2 bg-white border border-[#dbe8ff] text-slate-600 px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-slate-50 transition">
|
||||||
결제 내역 확인
|
결제 내역 확인
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/" className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-5 py-2.5 rounded-xl font-semibold text-sm">
|
<Link href="/" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition">
|
||||||
홈으로 →
|
홈으로 →
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -98,7 +98,7 @@ function SuccessContent() {
|
|||||||
<div className="flex justify-center gap-3 flex-wrap">
|
<div className="flex justify-center gap-3 flex-wrap">
|
||||||
<Link
|
<Link
|
||||||
href="/mypage?tab=payments"
|
href="/mypage?tab=payments"
|
||||||
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20"
|
className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20 transition"
|
||||||
>
|
>
|
||||||
결제 내역 확인 →
|
결제 내역 확인 →
|
||||||
</Link>
|
</Link>
|
||||||
@@ -117,9 +117,9 @@ export default function PaymentSuccessPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
|
<div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
|
||||||
<div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
|
<div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
|
||||||
<div className="bg-gradient-to-r from-[#04102b] to-[#0a1f5c] px-6 py-4">
|
<div className="bg-[#04102b] px-6 py-4" 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="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-sm">쟁승메이드 결제</span>
|
<span className="text-white font-bold text-sm">쟁승메이드 결제</span>
|
||||||
|
|||||||
@@ -4,10 +4,8 @@ export default function SajuInputPage() {
|
|||||||
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-[#0a1f5c] to-[#04102b] px-6 py-12">
|
<div className="relative overflow-hidden px-6 py-12"
|
||||||
<div className="absolute inset-0 opacity-[0.05]"
|
style={{ background: '#04102b', backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
|
||||||
style={{ backgroundImage: 'radial-gradient(circle, #a78bfa 1px, transparent 1px)', backgroundSize: '28px 28px' }} />
|
|
||||||
<div className="absolute right-0 top-0 w-72 h-72 rounded-full bg-violet-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" />
|
|
||||||
|
|
||||||
<div className="relative max-w-xl mx-auto text-center">
|
<div className="relative max-w-xl mx-auto text-center">
|
||||||
<div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
|
<div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
|
||||||
|
|||||||
@@ -798,7 +798,7 @@ export default function WebsiteServicePage() {
|
|||||||
{plans.map((plan) => (
|
{plans.map((plan) => (
|
||||||
<div key={plan.name} className="ws-plan-card" style={{
|
<div key={plan.name} className="ws-plan-card" style={{
|
||||||
padding: 32, borderRadius: 20,
|
padding: 32, borderRadius: 20,
|
||||||
background: plan.featured ? 'linear-gradient(135deg, #1e1b4b, #312e81)' : '#080d1a',
|
background: plan.featured ? '#0d1240' : '#080d1a',
|
||||||
border: `1px solid ${plan.featured ? plan.color + '40' : 'rgba(255,255,255,0.05)'}`,
|
border: `1px solid ${plan.featured ? plan.color + '40' : 'rgba(255,255,255,0.05)'}`,
|
||||||
position: 'relative', overflow: 'hidden',
|
position: 'relative', overflow: 'hidden',
|
||||||
boxShadow: plan.featured ? `0 24px 64px ${plan.color}12` : 'none',
|
boxShadow: plan.featured ? `0 24px 64px ${plan.color}12` : 'none',
|
||||||
|
|||||||
Reference in New Issue
Block a user