Skip to content

Commit 537547a

Browse files
max-programmingmax-programming
committed
Landing page revamp and scroll area
1 parent c446ee3 commit 537547a

6 files changed

Lines changed: 257 additions & 90 deletions

File tree

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

Lines changed: 33 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Shield, Clock, Lock, Flame, Users, Zap, Github } from "lucide-react";
1+
import { Shield, Clock, Lock, Flame } from "lucide-react";
22
import { Card, CardContent } from "~/components/ui/card";
33

44
export function LandingHero() {
@@ -26,81 +26,66 @@ export function LandingHero() {
2626
</span>{" "}
2727
- your secrets automatically self-destruct after being read or when
2828
time expires. Perfect for one-time sharing of API keys, passwords, and
29-
confidential data that shouldn't linger around.
29+
confidential data.
3030
</p>
3131
</div>
3232

33-
{/* Feature Badges - More Compact */}
34-
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
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">
36-
<CardContent className="px-2.5 py-0">
37-
<div className="flex items-center gap-2">
38-
<Shield className="w-4 h-4 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
33+
{/* Essential Features - Condensed on Mobile */}
34+
<div className="grid grid-cols-3 gap-2 sm:gap-3">
35+
<Card className="py-2 sm:py-4 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">
36+
<CardContent className="px-2 sm:px-4 py-0">
37+
<div className="text-center space-y-1 sm:space-y-2">
38+
<div className="flex justify-center">
39+
<Shield className="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" />
40+
</div>
3941
<div>
40-
<div className="font-medium text-xs text-slate-900 dark:text-slate-100">
42+
<div className="font-semibold text-xs sm:text-sm text-slate-900 dark:text-slate-100">
4143
Encrypted
4244
</div>
43-
<div className="text-xs text-slate-500 dark:text-slate-400">
44-
End-to-end
45+
<div className="text-xs sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5 sm:mt-1">
46+
Stored securely
4547
</div>
4648
</div>
4749
</div>
4850
</CardContent>
4951
</Card>
5052

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">
52-
<CardContent className="px-2.5 py-0">
53-
<div className="flex items-center gap-2">
54-
<Clock className="w-4 h-4 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
53+
<Card className="py-2 sm:py-4 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">
54+
<CardContent className="px-2 sm:px-4 py-0">
55+
<div className="text-center space-y-1 sm:space-y-2">
56+
<div className="flex justify-center">
57+
<Clock className="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" />
58+
</div>
5559
<div>
56-
<div className="font-medium text-xs text-slate-900 dark:text-slate-100">
57-
Self-destruct
60+
<div className="font-semibold text-xs sm:text-sm text-slate-900 dark:text-slate-100">
61+
Self-Destruct
5862
</div>
59-
<div className="text-xs text-slate-500 dark:text-slate-400">
60-
Auto-delete
63+
<div className="text-xs sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5 sm:mt-1">
64+
Deleted after reading
6165
</div>
6266
</div>
6367
</div>
6468
</CardContent>
6569
</Card>
6670

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">
68-
<CardContent className="px-2.5 py-0">
69-
<div className="flex items-center gap-2">
70-
<Lock className="w-4 h-4 text-indigo-600 dark:text-indigo-400 flex-shrink-0" />
71+
<Card className="py-2 sm:py-4 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">
72+
<CardContent className="px-2 sm:px-4 py-0">
73+
<div className="text-center space-y-1 sm:space-y-2">
74+
<div className="flex justify-center">
75+
<Lock className="w-4 h-4 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" />
76+
</div>
7177
<div>
72-
<div className="font-medium text-xs text-slate-900 dark:text-slate-100">
73-
Protected
78+
<div className="font-semibold text-xs sm:text-sm text-slate-900 dark:text-slate-100">
79+
Password Protected
7480
</div>
75-
<div className="text-xs text-slate-500 dark:text-slate-400">
76-
One-time password required
81+
<div className="text-xs sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5 sm:mt-1">
82+
OTP required
7783
</div>
7884
</div>
7985
</div>
8086
</CardContent>
8187
</Card>
8288
</div>
83-
84-
{/* Trust Indicators - Fill bottom space */}
85-
<div className="space-y-3 pt-2">
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" />
88-
<span>Trusted by developers worldwide</span>
89-
</div>
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" />
92-
<span>Open source & transparent</span>
93-
</div>
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" />
96-
<span>Zero-knowledge architecture</span>
97-
</div>
98-
<div className="text-xs text-slate-500 dark:text-slate-400">
99-
Act on your <span className="font-medium">whim</span> to share secrets
100-
instantly. Perfect for API keys, passwords, private notes, and any
101-
sensitive data that needs to vanish without a trace.
102-
</div>
103-
</div>
10489
</div>
10590
);
10691
}

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

Lines changed: 125 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,135 @@
1-
import { ArrowRight, Edit3, Timer, Link2, Zap } from "lucide-react";
2-
import { Card, CardContent } from "~/components/ui/card";
1+
import { Edit3, Shield, Link2, Eye, Clock, Zap } from "lucide-react";
2+
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
33

44
export function LandingProcessFlow() {
55
return (
6-
<div className="lg:pl-4">
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">
8-
<CardContent className="py-2">
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">
11-
Share secrets on a whim
6+
<div>
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">
8+
<CardHeader className="pb-4">
9+
<CardTitle className="text-xl text-slate-900 dark:text-slate-100 flex items-center gap-2">
10+
<Shield className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
11+
How It Works
12+
</CardTitle>
13+
</CardHeader>
14+
<CardContent className="space-y-4">
15+
{/* Step 1 */}
16+
<div className="flex items-start gap-3">
17+
<div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
18+
<span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
19+
1
20+
</span>
21+
</div>
22+
<div className="flex-1">
23+
<div className="flex items-center gap-2 mb-1">
24+
<Edit3 className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
25+
<h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
26+
Write Your Secret
27+
</h3>
28+
</div>
29+
<p className="text-sm text-slate-600 dark:text-slate-300">
30+
Type your sensitive information (API keys, passwords, private
31+
notes) into the secure form.
32+
</p>
1233
</div>
1334
</div>
14-
<div className="flex items-center justify-between md:justify-start gap-1.5 text-base text-slate-600 dark:text-slate-300">
15-
<div className="flex md:flex-row flex-col items-center gap-1.5">
16-
<Edit3 className="size-4" />
17-
<span>Write</span>
18-
</div>
19-
<ArrowRight className="size-4 text-slate-400 dark:text-slate-500" />
20-
<div className="flex md:flex-row flex-col items-center gap-1.5">
21-
<Timer className="size-4" />
22-
<span>Time</span>
23-
</div>
24-
<ArrowRight className="size-4 text-slate-400 dark:text-slate-500" />
25-
<div className="flex md:flex-row flex-col items-center gap-1.5">
26-
<Link2 className="size-4" />
27-
<span>Share</span>
28-
</div>
29-
<ArrowRight className="size-4 text-slate-400 dark:text-slate-500" />
30-
<div className="flex md:flex-row flex-col items-center gap-1.5">
31-
<Zap className="size-4" />
32-
<span>Vanish</span>
35+
36+
{/* Step 2 */}
37+
<div className="flex items-start gap-3">
38+
<div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
39+
<span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
40+
2
41+
</span>
42+
</div>
43+
<div className="flex-1">
44+
<div className="flex items-center gap-2 mb-1">
45+
<Shield className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
46+
<h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
47+
Encrypt & Generate
48+
</h3>
49+
</div>
50+
<p className="text-sm text-slate-600 dark:text-slate-300">
51+
Your secret is encrypted {/*end-to-end*/} and a unique URL +
52+
one-time password (OTP) are generated.
53+
</p>
3354
</div>
3455
</div>
56+
57+
{/* Step 3 */}
58+
<div className="flex items-start gap-3">
59+
<div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
60+
<span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
61+
3
62+
</span>
63+
</div>
64+
<div className="flex-1">
65+
<div className="flex items-center gap-2 mb-1">
66+
<Link2 className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
67+
<h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
68+
Share the Link & OTP
69+
</h3>
70+
</div>
71+
<p className="text-sm text-slate-600 dark:text-slate-300">
72+
Send the URL and OTP to your recipient through separate channels
73+
for maximum security.
74+
</p>
75+
</div>
76+
</div>
77+
78+
{/* Step 4 */}
79+
<div className="flex items-start gap-3">
80+
<div className="flex-shrink-0 w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center">
81+
<span className="text-indigo-600 dark:text-indigo-400 font-semibold text-sm">
82+
4
83+
</span>
84+
</div>
85+
<div className="flex-1">
86+
<div className="flex items-center gap-2 mb-1">
87+
<Eye className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
88+
<h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
89+
One-Time Access
90+
</h3>
91+
</div>
92+
<p className="text-sm text-slate-600 dark:text-slate-300">
93+
The recipient opens the link, enters the OTP, and views your
94+
secret once.
95+
</p>
96+
</div>
97+
</div>
98+
99+
{/* Step 5 */}
100+
<div className="flex items-start gap-3">
101+
<div className="flex-shrink-0 w-8 h-8 bg-red-100 dark:bg-red-900/50 rounded-full flex items-center justify-center">
102+
<span className="text-red-600 dark:text-red-400 font-semibold text-sm">
103+
5
104+
</span>
105+
</div>
106+
<div className="flex-1">
107+
<div className="flex items-center gap-2 mb-1">
108+
<Zap className="w-4 h-4 text-red-600 dark:text-red-400" />
109+
<h3 className="font-semibold text-sm text-slate-900 dark:text-slate-100">
110+
Automatic Destruction
111+
</h3>
112+
</div>
113+
<p className="text-sm text-slate-600 dark:text-slate-300">
114+
The secret is permanently deleted from our servers immediately
115+
after being viewed.
116+
</p>
117+
</div>
118+
</div>
119+
120+
{/* Security Note */}
121+
{/* <div className="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg p-3 mt-4">
122+
<div className="flex items-start gap-2">
123+
<Clock className="w-4 h-4 text-indigo-600 dark:text-indigo-400 mt-0.5 flex-shrink-0" />
124+
<div className="text-sm text-indigo-800 dark:text-indigo-200">
125+
<p className="font-medium mb-1">Zero-Knowledge Security</p>
126+
<p className="text-indigo-700 dark:text-indigo-300">
127+
Your secret is encrypted in your browser before being sent to
128+
our servers. We never see your data in plain text.
129+
</p>
130+
</div>
131+
</div>
132+
</div> */}
35133
</CardContent>
36134
</Card>
37135
</div>

‎src/components/theme-toggle.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { type Theme } from "~/server/theme";
21
import { Button } from "./ui/button";
32
import { Moon, Sun } from "lucide-react";
43
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
54
import { themeQuery } from "~/lib/queries";
6-
import { setThemeServerFn } from "~/server/theme";
5+
import { setThemeServerFn, type Theme } from "~/server/theme";
76

87
export function ThemeToggle() {
98
const queryClient = useQueryClient();

‎src/components/ui/scroll-area.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from "react"
2+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
3+
4+
import { cn } from "~/lib/utils"
5+
6+
function ScrollArea({
7+
className,
8+
children,
9+
...props
10+
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
11+
return (
12+
<ScrollAreaPrimitive.Root
13+
data-slot="scroll-area"
14+
className={cn("relative", className)}
15+
{...props}
16+
>
17+
<ScrollAreaPrimitive.Viewport
18+
data-slot="scroll-area-viewport"
19+
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
20+
>
21+
{children}
22+
</ScrollAreaPrimitive.Viewport>
23+
<ScrollBar />
24+
<ScrollAreaPrimitive.Corner />
25+
</ScrollAreaPrimitive.Root>
26+
)
27+
}
28+
29+
function ScrollBar({
30+
className,
31+
orientation = "vertical",
32+
...props
33+
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
34+
return (
35+
<ScrollAreaPrimitive.ScrollAreaScrollbar
36+
data-slot="scroll-area-scrollbar"
37+
orientation={orientation}
38+
className={cn(
39+
"flex touch-none p-px transition-colors select-none",
40+
orientation === "vertical" &&
41+
"h-full w-2.5 border-l border-l-transparent",
42+
orientation === "horizontal" &&
43+
"h-2.5 flex-col border-t border-t-transparent",
44+
className
45+
)}
46+
{...props}
47+
>
48+
<ScrollAreaPrimitive.ScrollAreaThumb
49+
data-slot="scroll-area-thumb"
50+
className="bg-border relative flex-1 rounded-full"
51+
/>
52+
</ScrollAreaPrimitive.ScrollAreaScrollbar>
53+
)
54+
}
55+
56+
export { ScrollArea, ScrollBar }

‎src/routes/__root.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { seo } from "~/lib/seo";
1313
import { ThemeToggle } from "~/components/theme-toggle";
1414
import { Footer } from "~/components/footer";
1515
import { themeQuery } from "~/lib/queries";
16+
import { ScrollArea } from "~/components/ui/scroll-area";
1617

1718
export const Route = wrapCreateRootRouteWithSentry(
1819
createRootRouteWithContext<{
@@ -75,16 +76,18 @@ function RootDocument({ children }: Readonly<{ children: React.ReactNode }>) {
7576
)}
7677
</head>
7778
<body className="min-h-screen flex flex-col">
78-
<main className="flex-1 flex flex-col">{children}</main>
79+
<ScrollArea className="h-screen overflow-y-auto">
80+
<main className="flex-1 flex flex-col">{children}</main>
7981

80-
<Footer />
82+
<Footer />
8183

82-
{/* Theme Toggle - Fixed position in top-right corner */}
83-
<div className="fixed top-4 right-4 z-50">
84-
<ThemeToggle />
85-
</div>
84+
{/* Theme Toggle - Fixed position in top-right corner */}
85+
<div className="fixed top-4 right-4 z-50">
86+
<ThemeToggle />
87+
</div>
8688

87-
<Scripts />
89+
<Scripts />
90+
</ScrollArea>
8891
</body>
8992
</html>
9093
);

0 commit comments

Comments
 (0)