Skip to content

Commit 24ab587

Browse files
yanboishereyanboishere
committed
Front-end background and consistency modifications
1 parent 2f5c2f1 commit 24ab587

2 files changed

Lines changed: 62 additions & 62 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,25 @@ const GlobeAnimation = dynamic(
1111

1212
export default function HomePage() {
1313
return (
14-
<div className="min-h-screen relative overflow-hidden">
14+
<div className="min-h-screen relative overflow-hidden bg-white">
1515
{/* Three.js Background Animation */}
1616
<GlobeAnimation />
1717

1818
{/* Navigation */}
1919
<nav className="relative z-10 bg-transparent">
2020
<div className="container mx-auto px-4 py-4">
2121
<div className="flex justify-between items-center">
22-
<Link href="/" className="text-xl font-bold text-white">
22+
<Link href="/" className="text-xl font-bold text-gray-900">
2323
WorkWork Ledger
2424
</Link>
2525
<div className="flex gap-6">
26-
<Link href="/clients" className="text-gray-300 hover:text-white transition-colors">
26+
<Link href="/clients" className="text-gray-600 hover:text-gray-900 transition-colors">
2727
客户
2828
</Link>
29-
<Link href="/projects" className="text-gray-300 hover:text-white transition-colors">
29+
<Link href="/projects" className="text-gray-600 hover:text-gray-900 transition-colors">
3030
项目
3131
</Link>
32-
<Link href="/invoices" className="text-gray-300 hover:text-white transition-colors">
32+
<Link href="/invoices" className="text-gray-600 hover:text-gray-900 transition-colors">
3333
发票
3434
</Link>
3535
</div>
@@ -40,83 +40,83 @@ export default function HomePage() {
4040
{/* Hero Section */}
4141
<div className="relative z-10 container mx-auto px-4 py-20">
4242
<div className="text-center mb-16">
43-
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
44-
<span className="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
43+
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
44+
<span className="bg-gradient-to-r from-emerald-600 to-cyan-600 bg-clip-text text-transparent">
4545
WorkWork Ledger
4646
</span>
4747
</h1>
48-
<p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
48+
<p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
4949
轻量级收入管理工具，专为数字游民、自由职业者和小型工作室设计。
5050
<br />
51-
<span className="text-emerald-400">30秒创建发票</span>，支持多币种和
52-
<span className="text-cyan-400">稳定币收款</span>。
51+
<span className="text-emerald-600">30秒创建发票</span>，支持多币种和
52+
<span className="text-cyan-600">稳定币收款</span>。
5353
</p>
5454
</div>
5555

5656
{/* Stats */}
5757
<div className="flex justify-center gap-12 mb-16">
5858
<div className="text-center">
59-
<div className="text-3xl font-bold text-emerald-400">5+</div>
60-
<div className="text-gray-400 text-sm">支持币种</div>
59+
<div className="text-3xl font-bold text-emerald-600">5+</div>
60+
<div className="text-gray-500 text-sm">支持币种</div>
6161
</div>
6262
<div className="text-center">
63-
<div className="text-3xl font-bold text-cyan-400">3</div>
64-
<div className="text-gray-400 text-sm">区块链网络</div>
63+
<div className="text-3xl font-bold text-cyan-600">3</div>
64+
<div className="text-gray-500 text-sm">区块链网络</div>
6565
</div>
6666
<div className="text-center">
67-
<div className="text-3xl font-bold text-purple-400">∞</div>
68-
<div className="text-gray-400 text-sm">全球收款</div>
67+
<div className="text-3xl font-bold text-purple-600">∞</div>
68+
<div className="text-gray-500 text-sm">全球收款</div>
6969
</div>
7070
</div>
7171

7272
{/* Feature Cards */}
7373
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto mb-16">
7474
{/* Clients Card */}
7575
<Link href="/clients" className="group">
76-
<div className="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10 hover:border-emerald-500/50 transition-all hover:bg-white/10">
77-
<div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mb-4">
78-
<svg className="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
76+
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200 hover:border-emerald-500/50 transition-all hover:bg-white shadow-sm hover:shadow-md">
77+
<div className="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mb-4">
78+
<svg className="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7979
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
8080
</svg>
8181
</div>
82-
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-emerald-400 transition-colors">
82+
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-emerald-600 transition-colors">
8383
客户管理
8484
</h3>
85-
<p className="text-gray-400 text-sm">
85+
<p className="text-gray-500 text-sm">
8686
管理全球客户信息，快速创建和搜索客户记录。
8787
</p>
8888
</div>
8989
</Link>
9090

9191
{/* Projects Card */}
9292
<Link href="/projects" className="group">
93-
<div className="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10 hover:border-cyan-500/50 transition-all hover:bg-white/10">
94-
<div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
95-
<svg className="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
93+
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200 hover:border-cyan-500/50 transition-all hover:bg-white shadow-sm hover:shadow-md">
94+
<div className="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mb-4">
95+
<svg className="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
9696
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
9797
</svg>
9898
</div>
99-
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-cyan-400 transition-colors">
99+
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-cyan-600 transition-colors">
100100
项目管理
101101
</h3>
102-
<p className="text-gray-400 text-sm">
102+
<p className="text-gray-500 text-sm">
103103
创建项目用于标记发票，按项目追踪收入。
104104
</p>
105105
</div>
106106
</Link>
107107

108108
{/* Invoices Card */}
109109
<Link href="/invoices" className="group">
110-
<div className="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10 hover:border-purple-500/50 transition-all hover:bg-white/10">
111-
<div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
112-
<svg className="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
110+
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200 hover:border-purple-500/50 transition-all hover:bg-white shadow-sm hover:shadow-md">
111+
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
112+
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
113113
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
114114
</svg>
115115
</div>
116-
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
116+
<h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
117117
发票管理
118118
</h3>
119-
<p className="text-gray-400 text-sm">
119+
<p className="text-gray-500 text-sm">
120120
创建专业发票，支持多币种，自动计算税额。
121121
</p>
122122
</div>
@@ -135,61 +135,61 @@ export default function HomePage() {
135135

136136
{/* Features List */}
137137
<div className="max-w-4xl mx-auto">
138-
<h2 className="text-2xl font-semibold text-white mb-8 text-center">核心功能</h2>
138+
<h2 className="text-2xl font-semibold text-gray-900 mb-8 text-center">核心功能</h2>
139139
<div className="grid md:grid-cols-2 gap-4">
140-
<div className="flex gap-4 p-4 bg-white/5 backdrop-blur rounded-xl border border-white/10">
141-
<div className="flex-shrink-0 w-10 h-10 bg-emerald-500/20 rounded-full flex items-center justify-center">
142-
<svg className="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
140+
<div className="flex gap-4 p-4 bg-white/80 backdrop-blur rounded-xl border border-gray-200 shadow-sm">
141+
<div className="flex-shrink-0 w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center">
142+
<svg className="w-5 h-5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
143143
<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" />
144144
</svg>
145145
</div>
146146
<div>
147-
<h3 className="font-medium text-white">多币种支持</h3>
148-
<p className="text-sm text-gray-400">支持 USD、EUR、HKD、GBP、JPY</p>
147+
<h3 className="font-medium text-gray-900">多币种支持</h3>
148+
<p className="text-sm text-gray-500">支持 USD、EUR、HKD、GBP、JPY</p>
149149
</div>
150150
</div>
151-
<div className="flex gap-4 p-4 bg-white/5 backdrop-blur rounded-xl border border-white/10">
152-
<div className="flex-shrink-0 w-10 h-10 bg-cyan-500/20 rounded-full flex items-center justify-center">
153-
<svg className="w-5 h-5 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
151+
<div className="flex gap-4 p-4 bg-white/80 backdrop-blur rounded-xl border border-gray-200 shadow-sm">
152+
<div className="flex-shrink-0 w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
153+
<svg className="w-5 h-5 text-cyan-600" fill="currentColor" viewBox="0 0 20 20">
154154
<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" />
155155
</svg>
156156
</div>
157157
<div>
158-
<h3 className="font-medium text-white">自动计算</h3>
159-
<p className="text-sm text-gray-400">自动计算小计、税额和总额</p>
158+
<h3 className="font-medium text-gray-900">自动计算</h3>
159+
<p className="text-sm text-gray-500">自动计算小计、税额和总额</p>
160160
</div>
161161
</div>
162-
<div className="flex gap-4 p-4 bg-white/5 backdrop-blur rounded-xl border border-white/10">
163-
<div className="flex-shrink-0 w-10 h-10 bg-purple-500/20 rounded-full flex items-center justify-center">
164-
<svg className="w-5 h-5 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
162+
<div className="flex gap-4 p-4 bg-white/80 backdrop-blur rounded-xl border border-gray-200 shadow-sm">
163+
<div className="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
164+
<svg className="w-5 h-5 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
165165
<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" />
166166
</svg>
167167
</div>
168168
<div>
169-
<h3 className="font-medium text-white">状态追踪</h3>
170-
<p className="text-sm text-gray-400">草稿、已发送、已付款、逾期、已取消</p>
169+
<h3 className="font-medium text-gray-900">状态追踪</h3>
170+
<p className="text-sm text-gray-500">草稿、已发送、已付款、逾期、已取消</p>
171171
</div>
172172
</div>
173-
<div className="flex gap-4 p-4 bg-white/5 backdrop-blur rounded-xl border border-white/10">
174-
<div className="flex-shrink-0 w-10 h-10 bg-yellow-500/20 rounded-full flex items-center justify-center">
175-
<svg className="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
173+
<div className="flex gap-4 p-4 bg-white/80 backdrop-blur rounded-xl border border-gray-200 shadow-sm">
174+
<div className="flex-shrink-0 w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
175+
<svg className="w-5 h-5 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
176176
<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" />
177177
</svg>
178178
</div>
179179
<div>
180-
<h3 className="font-medium text-white">稳定币收款</h3>
181-
<p className="text-sm text-gray-400">支持 USDC/USDT 多链收款 (Arbitrum, Base, Polygon)</p>
180+
<h3 className="font-medium text-gray-900">稳定币收款</h3>
181+
<p className="text-sm text-gray-500">支持 USDC/USDT 多链收款 (Arbitrum, Base, Polygon)</p>
182182
</div>
183183
</div>
184184
</div>
185185
</div>
186186
</div>
187187

188188
{/* Footer */}
189-
<footer className="relative z-10 border-t border-white/10 mt-20">
190-
<div className="container mx-auto px-4 py-8 text-center text-gray-400">
189+
<footer className="relative z-10 border-t border-gray-200 mt-20">
190+
<div className="container mx-auto px-4 py-8 text-center text-gray-500">
191191
<p>© 2024 WorkWork Ledger. 专为数字游民和自由职业者打造。</p>
192-
<p className="text-sm mt-2 text-gray-500">
192+
<p className="text-sm mt-2 text-gray-400">
193193
🌍 Work anywhere, get paid everywhere.
194194
</p>
195195
</div>

‎src/components/home/globe-animation.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,12 @@ export function GlobeAnimation() {
133133
const pos = latLngToVector3(lat, lng, globeRadius);
134134
dotPositions.push(pos.x, pos.y, pos.z);
135135

136-
// Ocean color - blue/cyan theme
136+
// Ocean color - blue/cyan theme (darker for light background)
137137
const colorVariation = Math.random() * 0.2;
138138
dotColors.push(
139-
0.1 + colorVariation * 0.1, // R
140-
0.5 + colorVariation * 0.3, // G
141-
0.7 + colorVariation * 0.3 // B
139+
0.2 + colorVariation * 0.1, // R
140+
0.4 + colorVariation * 0.2, // G
141+
0.6 + colorVariation * 0.2 // B
142142
);
143143

144144
// Size variation
@@ -206,9 +206,9 @@ export function GlobeAnimation() {
206206
// Add subtle globe outline
207207
const outlineGeometry = new THREE.SphereGeometry(globeRadius - 0.5, 64, 64);
208208
const outlineMaterial = new THREE.MeshBasicMaterial({
209-
color: 0x0a1628,
209+
color: 0xe2e8f0,
210210
transparent: true,
211-
opacity: 0.3,
211+
opacity: 0.5,
212212
});
213213
const globeOutline = new THREE.Mesh(outlineGeometry, outlineMaterial);
214214
scene.add(globeOutline);
@@ -402,7 +402,7 @@ export function GlobeAnimation() {
402402
className="absolute inset-0 -z-10"
403403
style={{
404404
background:
405-
'radial-gradient(ellipse at center, #0f172a 0%, #020617 70%, #000000 100%)',
405+
'radial-gradient(ellipse at center, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%)',
406406
}}
407407
/>
408408
);

0 commit comments

Comments
 (0)