Skip to content

Commit ff67b81

Browse files
ankitkr104ankitkr104
committed
feat: redesign homepage experience
1 parent 1ae4791 commit ff67b81

File tree

3 files changed

+389
-9
lines changed

3 files changed

+389
-9
lines changed

‎src/routes/__root.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,12 @@ function LatencyBadge() {
125125

126126
function Navbar() {
127127
return (
128-
<div className="navbar bg-base-100 border-b border-base-300 min-h-12 h-12 z-50 px-4">
128+
<div className="glass-navbar navbar min-h-16 h-16 z-50 px-4 md:px-6">
129129
<div className="flex-1">
130-
<Link to="/trackpad" className="btn btn-ghost text-xl normal-case">
130+
<Link
131+
to="/trackpad"
132+
className="glass-btn glass-btn-neutral btn btn-sm md:btn-md text-xl font-semibold normal-case rounded-xl"
133+
>
131134
<img
132135
src="/app_icon/IconLine.png"
133136
height={32}
@@ -137,19 +140,32 @@ function Navbar() {
137140
Rein
138141
</Link>
139142
</div>
140-
<div className="flex-none flex items-center gap-2">
143+
<div className="flex-none flex items-center gap-2 md:gap-3">
141144
<LatencyBadge />
145+
<Link
146+
to="/"
147+
className="glass-btn glass-btn-neutral btn btn-sm rounded-xl"
148+
activeProps={{
149+
className: "glass-btn glass-btn-primary btn btn-sm rounded-xl",
150+
}}
151+
>
152+
Home
153+
</Link>
142154
<Link
143155
to="/trackpad"
144-
className="btn btn-ghost btn-sm"
145-
activeProps={{ className: "btn-active bg-base-200" }}
156+
className="glass-btn glass-btn-neutral btn btn-sm rounded-xl"
157+
activeProps={{
158+
className: "glass-btn glass-btn-primary btn btn-sm rounded-xl",
159+
}}
146160
>
147161
Trackpad
148162
</Link>
149163
<Link
150164
to="/settings"
151-
className="btn btn-ghost btn-sm"
152-
activeProps={{ className: "btn-active bg-base-200" }}
165+
className="glass-btn glass-btn-neutral btn btn-sm rounded-xl"
166+
activeProps={{
167+
className: "glass-btn glass-btn-primary btn btn-sm rounded-xl",
168+
}}
153169
>
154170
Settings
155171
</Link>

‎src/routes/index.tsx‎

Lines changed: 147 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,150 @@
1-
import { Navigate, createFileRoute } from "@tanstack/react-router"
1+
import { Link, createFileRoute } from "@tanstack/react-router"
2+
import { MousePointer2, QrCode, Settings2, Wifi } from "lucide-react"
3+
import { APP_CONFIG } from "../config"
4+
import { useConnection } from "../contexts/ConnectionProvider"
25

36
export const Route = createFileRoute("/")({
4-
component: () => <Navigate to="/settings" />,
7+
component: HomePage,
58
})
9+
10+
function HomePage() {
11+
const { status, latency, platform } = useConnection()
12+
13+
const statusColor =
14+
status === "connected"
15+
? "text-success"
16+
: status === "connecting"
17+
? "text-warning"
18+
: "text-error"
19+
20+
return (
21+
<div className="home-shell h-full overflow-hidden">
22+
<section className="relative flex min-h-full w-full items-center px-4 py-8 md:px-6 md:py-12">
23+
<div className="home-ambient pointer-events-none absolute inset-0 -z-10" />
24+
<div className="home-grid pointer-events-none absolute inset-0 -z-10 opacity-35" />
25+
26+
<div className="mx-auto flex w-full max-w-7xl flex-col gap-8">
27+
<div className="grid items-center gap-7 lg:grid-cols-[1.1fr_0.9fr] lg:gap-10">
28+
<div className="home-enter-up max-w-3xl">
29+
<h1 className="text-balance text-4xl font-black leading-[1.05] tracking-tight md:text-6xl">
30+
Control your desktop
31+
<br />
32+
from anywhere
33+
<br />
34+
on your network.
35+
</h1>
36+
<p className="mt-5 max-w-2xl text-base-content/70 md:text-lg">
37+
{APP_CONFIG.SITE_NAME} turns your phone into a fast, precise desktop
38+
companion with fluid cursor control, keyboard input, and instant
39+
setup.
40+
</p>
41+
42+
<div className="mt-8 flex flex-wrap gap-3">
43+
<Link
44+
to="/trackpad"
45+
className="glass-btn glass-btn-primary btn btn-wide"
46+
>
47+
<MousePointer2 size={16} />
48+
Launch Trackpad
49+
</Link>
50+
<Link
51+
to="/settings"
52+
className="glass-btn glass-btn-neutral btn btn-wide"
53+
>
54+
<Settings2 size={16} />
55+
Configure Device
56+
</Link>
57+
</div>
58+
59+
<div className="mt-8 grid gap-3 text-sm sm:grid-cols-3">
60+
<div className="glass-subcard rounded-xl p-3">
61+
<p className="font-semibold">Network Pairing</p>
62+
<p className="text-base-content/65">Same Wi-Fi, zero friction</p>
63+
</div>
64+
<div className="glass-subcard rounded-xl p-3">
65+
<p className="font-semibold">Responsive Input</p>
66+
<p className="text-base-content/65">Low latency feel</p>
67+
</div>
68+
<div className="glass-subcard rounded-xl p-3">
69+
<p className="font-semibold">QR Share</p>
70+
<p className="text-base-content/65">Connect in seconds</p>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div className="home-enter-up-delay">
76+
<div className="glass-card card h-full">
77+
<div className="card-body gap-4">
78+
<div className="flex items-center justify-between">
79+
<h2 className="card-title text-2xl">Live Session</h2>
80+
<span className="badge badge-accent badge-sm">Realtime</span>
81+
</div>
82+
83+
<div className="glass-subcard rounded-xl p-4">
84+
<p className="text-xs uppercase tracking-widest text-base-content/60">
85+
Connection
86+
</p>
87+
<p className={`mt-1 text-lg font-semibold capitalize ${statusColor}`}>
88+
{status}
89+
</p>
90+
</div>
91+
92+
<div className="grid gap-3 sm:grid-cols-2">
93+
<div className="glass-subcard rounded-xl p-4">
94+
<p className="text-xs uppercase tracking-widest text-base-content/60">Latency</p>
95+
<p className="mt-1 text-lg font-semibold">
96+
{latency === null ? "-" : `${latency} ms`}
97+
</p>
98+
</div>
99+
<div className="glass-subcard rounded-xl p-4">
100+
<p className="text-xs uppercase tracking-widest text-base-content/60">Host OS</p>
101+
<p className="mt-1 text-lg font-semibold">{platform ?? "Unknown"}</p>
102+
</div>
103+
</div>
104+
105+
<div className="glass-subcard rounded-xl p-4">
106+
<div className="flex items-center gap-2 text-sm font-medium">
107+
<QrCode size={16} className="text-primary" />
108+
Fast Pairing Flow
109+
</div>
110+
<div className="mt-3 space-y-2 text-sm text-base-content/70">
111+
<p>1. Open Settings and generate share QR</p>
112+
<p>2. Scan from phone browser</p>
113+
<p>3. Start controlling immediately</p>
114+
</div>
115+
</div>
116+
117+
<p className="text-right text-xs text-base-content/60">{APP_CONFIG.SITE_NAME} v1.0.0</p>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
123+
<div className="grid gap-3 md:grid-cols-3">
124+
<div className="glass-card glass-hover group rounded-2xl p-4">
125+
<div className="mb-2 inline-flex rounded-lg bg-primary/10 p-2 text-primary">
126+
<Wifi size={16} />
127+
</div>
128+
<p className="font-semibold">Stable Connection</p>
129+
<p className="mt-1 text-sm text-base-content/70">Automatic reconnect keeps your session resilient.</p>
130+
</div>
131+
<div className="glass-card glass-hover group rounded-2xl p-4">
132+
<div className="mb-2 inline-flex rounded-lg bg-secondary/10 p-2 text-secondary">
133+
<MousePointer2 size={16} />
134+
</div>
135+
<p className="font-semibold">Precision Touch</p>
136+
<p className="mt-1 text-sm text-base-content/70">Smooth movement with configurable sensitivity.</p>
137+
</div>
138+
<div className="glass-card glass-hover group rounded-2xl p-4">
139+
<div className="mb-2 inline-flex rounded-lg bg-accent/10 p-2 text-accent">
140+
<Settings2 size={16} />
141+
</div>
142+
<p className="font-semibold">Control Settings</p>
143+
<p className="mt-1 text-sm text-base-content/70">Customize theme, scroll behavior, and connection config.</p>
144+
</div>
145+
</div>
146+
</div>
147+
</section>
148+
</div>
149+
)
150+
}

0 commit comments

Comments
 (0)