Skip to content

Commit 322da3f

Browse files
max-programmingmax-programming
committed
Added dark mode styles and seo utility function
1 parent 2281197 commit 322da3f

8 files changed

Lines changed: 174 additions & 128 deletions

File tree

‎src/components/landing/landing-hero.tsx‎

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,64 +5,76 @@ export function LandingHero() {
55
return (
66
<div className="space-y-6">
77
{/* Brand Badge with Whim */}
8-
<div className="inline-flex items-center gap-2 bg-indigo-50 px-3 py-1.5 rounded-full text-indigo-700 font-medium text-sm border border-indigo-100">
8+
<div className="inline-flex items-center gap-2 bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1.5 rounded-full text-indigo-700 dark:text-indigo-300 font-medium text-sm border border-indigo-100 dark:border-indigo-800">
99
<Flame className="w-4 h-4" />
1010
Whim
1111
</div>
1212

1313
{/* Headline */}
1414
<div className="space-y-3">
15-
<h1 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-slate-900 leading-tight">
15+
<h1 className="text-3xl lg:text-4xl xl:text-5xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
1616
Share Secrets
17-
<span className="text-indigo-600 block">Safely & Securely</span>
17+
<span className="text-indigo-600 dark:text-indigo-400 block">
18+
Safely & Securely
19+
</span>
1820
</h1>
1921

20-
<p className="text-base lg:text-lg text-slate-600 leading-relaxed max-w-md">
22+
<p className="text-base lg:text-lg text-slate-600 dark:text-slate-300 leading-relaxed max-w-md">
2123
Share sensitive information on a{" "}
22-
<span className="font-medium text-slate-700">whim</span> - your
23-
secrets automatically self-destruct after being read or when time
24-
expires. Perfect for one-time sharing of API keys, passwords, and
24+
<span className="font-medium text-slate-700 dark:text-slate-200">
25+
whim
26+
</span>{" "}
27+
- your secrets automatically self-destruct after being read or when
28+
time expires. Perfect for one-time sharing of API keys, passwords, and
2529
confidential data that shouldn't linger around.
2630
</p>
2731
</div>
2832

2933
{/* Feature Badges - More Compact */}
3034
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
31-
<Card className="py-2 shadow-sm border-2 border-slate-200 bg-slate-50 hover:border-indigo-200 transition-colors">
35+
<Card className="py-2 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
3236
<CardContent className="px-2.5 py-0">
3337
<div className="flex items-center gap-2">
34-
<Shield className="w-4 h-4 text-indigo-600 flex-shrink-0" />
38+
<Shield className="w-4 h-4 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
3539
<div>
36-
<div className="font-medium text-xs text-slate-900">
40+
<div className="font-medium text-xs text-slate-900 dark:text-slate-100">
3741
Encrypted
3842
</div>
39-
<div className="text-xs text-slate-500">End-to-end</div>
43+
<div className="text-xs text-slate-500 dark:text-slate-400">
44+
End-to-end
45+
</div>
4046
</div>
4147
</div>
4248
</CardContent>
4349
</Card>
4450

45-
<Card className="py-2 shadow-sm border-2 border-slate-200 bg-slate-50 hover:border-indigo-200 transition-colors">
51+
<Card className="py-2 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
4652
<CardContent className="px-2.5 py-0">
4753
<div className="flex items-center gap-2">
48-
<Clock className="w-4 h-4 text-indigo-600 flex-shrink-0" />
54+
<Clock className="w-4 h-4 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
4955
<div>
50-
<div className="font-medium text-xs text-slate-900">Timed</div>
51-
<div className="text-xs text-slate-500">Auto-delete</div>
56+
<div className="font-medium text-xs text-slate-900 dark:text-slate-100">
57+
Timed
58+
</div>
59+
<div className="text-xs text-slate-500 dark:text-slate-400">
60+
Auto-delete
61+
</div>
5262
</div>
5363
</div>
5464
</CardContent>
5565
</Card>
5666

57-
<Card className="py-2 shadow-sm border-2 border-slate-200 bg-slate-50 hover:border-indigo-200 transition-colors">
67+
<Card className="py-2 shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
5868
<CardContent className="px-2.5 py-0">
5969
<div className="flex items-center gap-2">
60-
<Lock className="w-4 h-4 text-indigo-600 flex-shrink-0" />
70+
<Lock className="w-4 h-4 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
6171
<div>
62-
<div className="font-medium text-xs text-slate-900">
72+
<div className="font-medium text-xs text-slate-900 dark:text-slate-100">
6373
Protected
6474
</div>
65-
<div className="text-xs text-slate-500">Optional pwd</div>
75+
<div className="text-xs text-slate-500 dark:text-slate-400">
76+
Optional pwd
77+
</div>
6678
</div>
6779
</div>
6880
</CardContent>
@@ -71,19 +83,19 @@ export function LandingHero() {
7183

7284
{/* Trust Indicators - Fill bottom space */}
7385
<div className="space-y-3 pt-2">
74-
<div className="flex items-center gap-2 text-sm text-slate-600">
75-
<Users className="w-4 h-4 text-indigo-600" />
86+
<div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
87+
<Users className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
7688
<span>Trusted by developers worldwide</span>
7789
</div>
78-
<div className="flex items-center gap-2 text-sm text-slate-600">
79-
<Github className="w-4 h-4 text-indigo-600" />
90+
<div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
91+
<Github className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
8092
<span>Open source & transparent</span>
8193
</div>
82-
<div className="flex items-center gap-2 text-sm text-slate-600">
83-
<Zap className="w-4 h-4 text-indigo-600" />
94+
<div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
95+
<Zap className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
8496
<span>Zero-knowledge architecture</span>
8597
</div>
86-
<div className="text-xs text-slate-500">
98+
<div className="text-xs text-slate-500 dark:text-slate-400">
8799
Act on your <span className="font-medium">whim</span> to share secrets
88100
instantly. Perfect for API keys, passwords, private notes, and any
89101
sensitive data that needs to vanish without a trace.

‎src/components/landing/landing-process-flow.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,29 @@ import { Card, CardContent } from "~/components/ui/card";
44
export function LandingProcessFlow() {
55
return (
66
<div className="lg:pl-4">
7-
<Card className="shadow-sm border-2 border-slate-200 bg-slate-50/50 hover:border-indigo-200 transition-colors py-2">
7+
<Card className="shadow-sm border-2 border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/30 hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors py-2">
88
<CardContent className="py-2">
9-
<div className="flex items-center justify-center md:justify-start text-xs text-slate-600">
10-
<div className="text-lg font-medium text-slate-700 mb-1">
9+
<div className="flex items-center justify-center md:justify-start text-xs text-slate-600 dark:text-slate-300">
10+
<div className="text-lg font-medium text-slate-700 dark:text-slate-200 mb-1">
1111
Share secrets on a whim
1212
</div>
1313
</div>
14-
<div className="flex items-center justify-between md:justify-start gap-1.5 text-base text-slate-600">
14+
<div className="flex items-center justify-between md:justify-start gap-1.5 text-base text-slate-600 dark:text-slate-300">
1515
<div className="flex md:flex-row flex-col items-center gap-1.5">
1616
<Edit3 className="size-4" />
1717
<span>Write</span>
1818
</div>
19-
<ArrowRight className="size-4 text-slate-400" />
19+
<ArrowRight className="size-4 text-slate-400 dark:text-slate-500" />
2020
<div className="flex md:flex-row flex-col items-center gap-1.5">
2121
<Timer className="size-4" />
2222
<span>Time</span>
2323
</div>
24-
<ArrowRight className="size-4 text-slate-400" />
24+
<ArrowRight className="size-4 text-slate-400 dark:text-slate-500" />
2525
<div className="flex md:flex-row flex-col items-center gap-1.5">
2626
<Link2 className="size-4" />
2727
<span>Share</span>
2828
</div>
29-
<ArrowRight className="size-4 text-slate-400" />
29+
<ArrowRight className="size-4 text-slate-400 dark:text-slate-500" />
3030
<div className="flex md:flex-row flex-col items-center gap-1.5">
3131
<Zap className="size-4" />
3232
<span>Vanish</span>

‎src/components/landing/landing-secret-form.tsx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -96,36 +96,36 @@ export function LandingSecretForm() {
9696
return (
9797
<div className="lg:pl-4">
9898
<TooltipProvider>
99-
<Card className="border-2 border-slate-200 bg-slate-50 shadow-md hover:border-indigo-200 transition-colors">
99+
<Card className="border-2 border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 shadow-md hover:border-indigo-200 dark:hover:border-indigo-700 transition-colors">
100100
<CardHeader className="text-center pb-4">
101-
<CardTitle className="text-xl text-slate-900">
101+
<CardTitle className="text-xl text-slate-900 dark:text-slate-100">
102102
Create Your Secret Whim
103103
</CardTitle>
104-
<CardDescription className="text-slate-500">
104+
<CardDescription className="text-slate-500 dark:text-slate-400">
105105
Share on a whim, vanish without a trace
106106
</CardDescription>
107107
</CardHeader>
108108

109109
<CardContent className="space-y-5 px-6">
110110
<div>
111-
<label className="block text-sm font-medium text-slate-700 mb-2">
111+
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
112112
Your Secret
113113
</label>
114114
<Textarea
115115
placeholder="Type your secret on a whim... API keys, passwords, private notes, or anything confidential"
116116
value={message}
117117
onChange={e => setMessage(e.target.value)}
118-
className="min-h-[120px] resize-none bg-white border-slate-200 focus:border-indigo-300 focus:ring-indigo-200 text-sm"
118+
className="min-h-[120px] resize-none bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600 focus:border-indigo-300 dark:focus:border-indigo-500 focus:ring-indigo-200 dark:focus:ring-indigo-500/20 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-500 dark:placeholder:text-slate-400"
119119
disabled={isPending}
120120
/>
121121
</div>
122122

123-
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
123+
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
124124
<div className="flex items-start gap-2">
125-
<Eye className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
126-
<div className="text-sm text-blue-800">
125+
<Eye className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
126+
<div className="text-sm text-blue-800 dark:text-blue-200">
127127
<p className="font-medium mb-1">One-Time Access</p>
128-
<p className="text-blue-700">
128+
<p className="text-blue-700 dark:text-blue-300">
129129
Your secret will be permanently destroyed the moment someone
130130
opens the link, even if it hasn't reached the expiry time.
131131
</p>
@@ -140,7 +140,7 @@ export function LandingSecretForm() {
140140
<Button
141141
onClick={handleCreateSecret}
142142
disabled={!isFormValid || isPending}
143-
className="w-full h-12 text-lg font-semibold bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 disabled:text-slate-500 transition-all duration-200 transform hover:scale-[1.02] shadow-md hover:shadow-lg"
143+
className="w-full h-12 text-lg font-semibold bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 disabled:bg-slate-300 dark:disabled:bg-slate-600 disabled:text-slate-500 dark:disabled:text-slate-400 transition-all duration-200 transform hover:scale-[1.02] shadow-md hover:shadow-lg text-white"
144144
>
145145
{isPending ? (
146146
<>
@@ -164,7 +164,7 @@ export function LandingSecretForm() {
164164
</Tooltip>
165165
</CardContent>
166166

167-
<CardFooter className="justify-center pt-3 pb-5 text-slate-500">
167+
<CardFooter className="justify-center pt-3 pb-5 text-slate-500 dark:text-slate-400">
168168
<Shield className="size-3 mr-1" />
169169
<p className="text-sm">
170170
Your whim is encrypted • OTP protected • One-time access
@@ -192,19 +192,19 @@ export function LandingSecretForm() {
192192
</AlertDialogHeader>
193193

194194
<div className="my-4">
195-
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 max-h-32 overflow-y-auto">
196-
<p className="text-sm text-slate-800 whitespace-pre-wrap break-words">
195+
<div className="bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-lg p-4 max-h-32 overflow-y-auto">
196+
<p className="text-sm text-slate-800 dark:text-slate-200 whitespace-pre-wrap break-words">
197197
{message}
198198
</p>
199199
</div>
200200
</div>
201201

202-
<div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
202+
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 mb-4">
203203
<div className="flex items-start gap-2">
204-
<AlertTriangle className="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0" />
205-
<div className="text-sm text-red-800">
204+
<AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0" />
205+
<div className="text-sm text-red-800 dark:text-red-200">
206206
<p className="font-medium mb-1">⚠️ Important Warning</p>
207-
<p className="text-red-700">
207+
<p className="text-red-700 dark:text-red-300">
208208
Once created, this secret will be destroyed forever after
209209
the first person opens the link. Make sure you really want
210210
to share this information.
@@ -217,7 +217,7 @@ export function LandingSecretForm() {
217217
<AlertDialogCancel>Cancel</AlertDialogCancel>
218218
<AlertDialogAction
219219
onClick={handleConfirmCreate}
220-
className="bg-indigo-600 hover:bg-indigo-700"
220+
className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white"
221221
>
222222
Yes, Create Whim
223223
</AlertDialogAction>
@@ -242,11 +242,11 @@ export function LandingSecretForm() {
242242
<div className="space-y-4 mt-4">
243243
{/* OTP Section */}
244244
<div className="space-y-2">
245-
<label className="text-sm font-medium text-slate-700">
245+
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">
246246
One-Time Password (OTP)
247247
</label>
248248
<div className="flex items-center gap-2">
249-
<div className="flex-1 p-3 bg-slate-50 border border-slate-200 rounded-md font-mono text-lg font-bold text-center tracking-wider">
249+
<div className="flex-1 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-md font-mono text-lg font-bold text-center tracking-wider text-slate-900 dark:text-slate-100">
250250
{whimResult?.otp}
251251
</div>
252252
<Button
@@ -258,24 +258,24 @@ export function LandingSecretForm() {
258258
className="px-3"
259259
>
260260
{copiedStates.otp ? (
261-
<CheckCircle className="w-4 h-4 text-green-600" />
261+
<CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
262262
) : (
263263
<Copy className="w-4 h-4" />
264264
)}
265265
</Button>
266266
</div>
267-
<p className="text-xs text-slate-500">
267+
<p className="text-xs text-slate-500 dark:text-slate-400">
268268
The recipient will need this OTP to access the secret.
269269
</p>
270270
</div>
271271

272272
{/* URL Section */}
273273
<div className="space-y-2">
274-
<label className="text-sm font-medium text-slate-700">
274+
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">
275275
Share URL
276276
</label>
277277
<div className="flex items-center gap-2">
278-
<div className="flex-1 p-3 bg-slate-50 border border-slate-200 rounded-md font-mono text-sm break-all">
278+
<div className="flex-1 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-md font-mono text-sm break-all text-slate-900 dark:text-slate-100">
279279
{whimUrl}
280280
</div>
281281
<Button
@@ -285,24 +285,24 @@ export function LandingSecretForm() {
285285
className="px-3"
286286
>
287287
{copiedStates.url ? (
288-
<CheckCircle className="w-4 h-4 text-green-600" />
288+
<CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400" />
289289
) : (
290290
<Copy className="w-4 h-4" />
291291
)}
292292
</Button>
293293
</div>
294-
<p className="text-xs text-slate-500">
294+
<p className="text-xs text-slate-500 dark:text-slate-400">
295295
Share this URL with the intended recipient.
296296
</p>
297297
</div>
298298

299299
{/* Warning */}
300-
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
300+
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
301301
<div className="flex items-start gap-2">
302-
<Eye className="w-4 h-4 text-amber-600 mt-0.5 flex-shrink-0" />
303-
<div className="text-sm text-amber-800">
302+
<Eye className="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
303+
<div className="text-sm text-amber-800 dark:text-amber-200">
304304
<p className="font-medium mb-1">Important</p>
305-
<p className="text-amber-700">
305+
<p className="text-amber-700 dark:text-amber-300">
306306
The secret will be permanently destroyed after the first
307307
access or when the link expires. Make sure to share both
308308
the URL and OTP securely.
@@ -315,7 +315,7 @@ export function LandingSecretForm() {
315315
<div className="flex justify-center pt-2">
316316
<Button
317317
onClick={handleDialogClose}
318-
className="bg-indigo-600 hover:bg-indigo-700"
318+
className="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white"
319319
>
320320
Create Another
321321
</Button>

0 commit comments

Comments
 (0)