Skip to content

Commit e009bc8

Browse files
AmanVarshney01AmanVarshney01
authored
feat(web): improve ui (#871)
* feat(web): improve ui * fix
1 parent 48b92a8 commit e009bc8

30 files changed

+992
-561
lines changed

‎apps/web/public/favicon/favicon.svg‎

Lines changed: 43 additions & 6 deletions
Loading

‎apps/web/public/logo-dark.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎apps/web/public/logo-light.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎apps/web/public/logo.svg‎

Lines changed: 42 additions & 4 deletions
Loading

‎apps/web/src/app/(home)/_components/command-section.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function CommandSection() {
3131

3232
return (
3333
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
34-
<div className="flex h-full flex-col justify-between rounded border border-border bg-fd-background p-4">
34+
<div className="flex h-full flex-col justify-between rounded-2xl bg-fd-background/75 p-4 transition-colors hover:bg-muted/10">
3535
<div className="mb-4 flex items-center justify-between">
3636
<div className="flex items-center gap-2">
3737
<Terminal className="h-4 w-4 text-primary" />
@@ -42,7 +42,7 @@ export default function CommandSection() {
4242
render={
4343
<button
4444
type="button"
45-
className="flex items-center gap-2 rounded border border-border px-3 py-1.5 font-mono text-xs transition-colors hover:bg-muted/10"
45+
className="flex items-center gap-2 rounded-md bg-muted/20 px-3 py-1.5 font-mono text-xs transition-colors hover:bg-muted/35"
4646
/>
4747
}
4848
>
@@ -70,46 +70,55 @@ export default function CommandSection() {
7070
</div>
7171

7272
<div className="space-y-3">
73-
<div className="flex items-center justify-between rounded border border-border bg-fd-background p-3">
73+
<div
74+
role="button"
75+
tabIndex={0}
76+
className="builder-focus-ring flex cursor-pointer items-center justify-between rounded-xl bg-muted/20 p-3"
77+
onClick={() => copyCommand(commands[selectedPM], selectedPM)}
78+
onKeyDown={(event) => {
79+
if (event.key === "Enter" || event.key === " ") {
80+
event.preventDefault();
81+
copyCommand(commands[selectedPM], selectedPM);
82+
}
83+
}}
84+
aria-label={`Copy ${selectedPM} command`}
85+
title="Click to copy command"
86+
>
7487
<div className="flex items-center gap-2 font-mono text-sm">
7588
<span className="text-primary">$</span>
7689
<span className="text-foreground">{commands[selectedPM]}</span>
7790
</div>
78-
<button
79-
type="button"
80-
onClick={() => copyCommand(commands[selectedPM], selectedPM)}
81-
className="flex items-center gap-1 rounded border border-border px-2 py-1 font-mono text-xs transition-colors hover:bg-muted/10"
82-
>
91+
<span className="flex items-center gap-1 rounded-md bg-muted/20 px-2 py-1 font-mono text-xs transition-colors group-hover:bg-muted/35">
8392
{copiedCommand === selectedPM ? (
8493
<Check className="h-3 w-3 text-primary" />
8594
) : (
8695
<Copy className="h-3 w-3" />
8796
)}
8897
{copiedCommand === selectedPM ? "COPIED!" : "COPY"}
89-
</button>
98+
</span>
9099
</div>
91100
</div>
92101
</div>
93102

94103
<Link href="/new">
95-
<div className="group flex h-full cursor-pointer flex-col justify-between rounded border border-border bg-fd-background p-4 transition-colors hover:bg-muted/10">
104+
<div className="group flex h-full cursor-pointer flex-col justify-between rounded-2xl bg-fd-background/75 p-4 transition-colors hover:bg-muted/10">
96105
<div className="mb-4 flex items-center justify-between">
97106
<div className="flex items-center gap-2">
98107
<ChevronRight className="h-4 w-4 text-primary transition-transform group-hover:translate-x-1" />
99108
<span className="font-bold font-mono text-lg sm:text-xl">STACK_BUILDER</span>
100109
</div>
101-
<div className="rounded border border-border bg-muted/30 px-2 py-1 font-mono text-xs">
110+
<div className="rounded-md bg-primary/15 px-2 py-1 font-mono text-xs text-primary">
102111
INTERACTIVE
103112
</div>
104113
</div>
105114

106115
<div className="space-y-3">
107-
<div className="flex items-center justify-between rounded border border-border bg-fd-background p-3">
116+
<div className="flex items-center justify-between rounded-xl bg-muted/20 p-3">
108117
<div className="flex items-center gap-2 text-sm">
109118
<Zap className="h-4 w-4 text-primary" />
110119
<span className="text-foreground">Interactive configuration wizard</span>
111120
</div>
112-
<div className="rounded border border-primary bg-primary px-2 py-1 font-mono text-primary-foreground text-xs transition-colors group-hover:bg-primary/90">
121+
<div className="rounded-md bg-primary px-2 py-1 font-mono text-primary-foreground text-xs transition-colors group-hover:bg-primary/90">
113122
START
114123
</div>
115124
</div>

‎apps/web/src/app/(home)/_components/hero-section.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import NpmPackage from "./npm-package";
22

33
export default function HeroSection() {
44
return (
5-
<div>
6-
<div className="mb-8 flex items-center justify-center">
5+
<section className="rounded-2xl bg-fd-background px-4 py-6 sm:px-6 sm:py-8">
6+
<div className="relative mb-6 flex items-center justify-center rounded-2xl bg-fd-background px-3 py-4 sm:px-4 sm:py-5">
77
<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 md:gap-6">
88
<pre className="ascii-art text-primary text-xs leading-tight sm:text-sm">
99
{`
@@ -48,11 +48,11 @@ export default function HeroSection() {
4848
</div>
4949

5050
<div className="text-center">
51-
<p className="mx-auto text-lg text-muted-foreground">
51+
<p className="mx-auto max-w-3xl font-mono text-base text-muted-foreground sm:text-lg">
5252
Modern CLI for scaffolding end-to-end type-safe TypeScript projects
5353
</p>
5454
<NpmPackage />
5555
</div>
56-
</div>
56+
</section>
5757
);
5858
}

‎apps/web/src/app/(home)/_components/stats-section.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function StatsSection() {
3232
return (
3333
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
3434
<Link href="/analytics">
35-
<div className="group cursor-pointer rounded border border-border bg-fd-background p-4 transition-colors hover:bg-muted/10">
35+
<div className="group cursor-pointer rounded-2xl bg-fd-background/75 p-4 transition-colors hover:bg-muted/10">
3636
<div className="mb-3 flex items-center gap-2">
3737
<Terminal className="h-4 w-4 text-primary" />
3838
<span className="font-bold font-mono text-lg sm:text-xl">CLI_ANALYTICS.JSON</span>
@@ -65,7 +65,7 @@ export default function StatsSection() {
6565
<span className="font-mono text-foreground text-sm">{avgProjectsPerDay}</span>
6666
</div>
6767

68-
<div className="border-border/50 border-t pt-3">
68+
<div className="rounded-lg bg-muted/15 px-2.5 py-2">
6969
<div className="flex items-center justify-between gap-2 text-xs">
7070
<span className="font-mono text-muted-foreground">Last Updated</span>
7171
<span className="truncate font-mono text-accent">
@@ -87,7 +87,7 @@ export default function StatsSection() {
8787
target="_blank"
8888
rel="noopener noreferrer"
8989
>
90-
<div className="group cursor-pointer rounded border border-border bg-fd-background p-4 transition-colors hover:bg-muted/10">
90+
<div className="group cursor-pointer rounded-2xl bg-fd-background/75 p-4 transition-colors hover:bg-muted/10">
9191
<div className="mb-3 flex items-center gap-2">
9292
<Github className="h-4 w-4 text-primary" />
9393
<span className="font-bold font-mono text-lg sm:text-xl">GITHUB_REPO.GIT</span>
@@ -122,7 +122,7 @@ export default function StatsSection() {
122122
</span>
123123
</div>
124124

125-
<div className="border-border/50 border-t pt-3">
125+
<div className="rounded-lg bg-muted/15 px-2.5 py-2">
126126
<div className="flex items-center justify-between gap-2 text-xs">
127127
<span className="font-mono text-muted-foreground">Repository</span>
128128
<span className="truncate font-mono text-accent">
@@ -139,7 +139,7 @@ export default function StatsSection() {
139139
target="_blank"
140140
rel="noopener noreferrer"
141141
>
142-
<div className="group cursor-pointer rounded border border-border bg-fd-background p-4 transition-colors hover:bg-muted/10">
142+
<div className="group cursor-pointer rounded-2xl bg-fd-background/75 p-4 transition-colors hover:bg-muted/10">
143143
<div className="mb-3 flex items-center gap-2">
144144
<Terminal className="h-4 w-4 text-primary" />
145145
<span className="font-bold font-mono text-lg sm:text-xl">NPM_PACKAGE.JS</span>
@@ -179,7 +179,7 @@ export default function StatsSection() {
179179
</span>
180180
</div>
181181

182-
<div className="border-border/50 border-t pt-3">
182+
<div className="rounded-lg bg-muted/15 px-2.5 py-2">
183183
<div className="flex items-center justify-between gap-2 text-xs">
184184
<span className="font-mono text-muted-foreground">Package</span>
185185
<span className="truncate font-mono text-accent">create-better-t-stack</span>

‎apps/web/src/app/(home)/analytics/_components/analytics-header.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export function AnalyticsHeader({
2020
const legacyDate = format(new Date(legacy.lastUpdatedIso), "MMM d, yyyy 'at' HH:mm");
2121

2222
return (
23-
<div className="mb-4">
24-
<div className="mb-6 flex flex-wrap items-end justify-between gap-4 sm:flex-nowrap">
23+
<div className="mb-4 space-y-4">
24+
<div className="flex flex-wrap items-end justify-between gap-4">
2525
<div className="flex flex-col gap-1">
2626
<div className="flex items-center gap-2 text-primary">
2727
<Terminal className="h-5 w-5" />
@@ -33,8 +33,8 @@ export function AnalyticsHeader({
3333
</div>
3434
</div>
3535

36-
<div className="rounded border border-border bg-fd-background p-4 font-mono text-sm shadow-sm transition-colors hover:border-primary/50">
37-
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
36+
<div className="rounded-xl bg-gradient-to-br from-primary/12 via-fd-background to-fd-background/90 p-4 ring-1 ring-border/40 sm:p-5">
37+
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
3838
<div className="flex items-center gap-2">
3939
<span className="text-primary">$</span>
4040
<span className="text-muted-foreground">status:</span>
@@ -48,15 +48,15 @@ export function AnalyticsHeader({
4848
)}
4949
</div>
5050

51-
<div className="my-3 h-px w-full bg-border/50" />
51+
<div className="my-3 h-px w-full bg-border/35" />
5252

5353
<div className="space-y-1.5 text-muted-foreground text-xs">
5454
<div className="flex items-start gap-2">
55-
<span className="mt-0.5 text-primary shrink-0">&gt;</span>
55+
<span className="mt-0.5 shrink-0 text-primary">&gt;</span>
5656
<span>No personal data collected - anonymous usage stats only</span>
5757
</div>
5858
<div className="flex items-start gap-2">
59-
<span className="mt-0.5 text-primary shrink-0">&gt;</span>
59+
<span className="mt-0.5 shrink-0 text-primary">&gt;</span>
6060
<span>
6161
Source code:{" "}
6262
<Link
@@ -71,8 +71,8 @@ export function AnalyticsHeader({
7171
</div>
7272
</div>
7373

74-
<div className="mt-4 flex flex-col gap-2 rounded border border-border/50 bg-muted/20 p-3 text-xs">
75-
<div className="flex items-center gap-2 font-mono font-semibold">
74+
<div className="mt-4 rounded-lg bg-muted/25 p-3 text-xs">
75+
<div className="mb-2 flex items-center gap-2 font-mono font-semibold">
7676
<span className="text-primary">#</span>
7777
<span className="text-foreground">Legacy Data (pre-Convex)</span>
7878
</div>

‎apps/web/src/app/(home)/analytics/_components/analytics-page.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,13 @@ export default function AnalyticsPage({
2323
};
2424
}) {
2525
return (
26-
<div className="mx-auto min-h-svh">
26+
<div className="mx-auto min-h-svh bg-fd-background">
2727
<div className="container mx-auto space-y-10 px-4 py-8 pt-16">
2828
<AnalyticsHeader lastUpdated={data.lastUpdated} legacy={legacy} />
2929

3030
<MetricsCards data={data} />
3131

32-
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
33-
<div className="lg:col-span-3">
34-
<LiveLogs />
35-
</div>
36-
</div>
32+
<LiveLogs />
3733

3834
<TimelineSection data={data} />
3935

‎apps/web/src/app/(home)/analytics/_components/chart-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function ChartCard({
1010
children: ReactNode;
1111
}) {
1212
return (
13-
<div className="group rounded border border-border bg-fd-background transition-colors hover:bg-muted/10">
13+
<div className="group rounded-xl bg-fd-background/85 ring-1 ring-border/35 transition-all duration-200 hover:-translate-y-0.5 hover:ring-primary/35">
1414
<div className="space-y-4 p-4">
1515
<div className="flex items-start justify-between gap-4">
1616
<div className="space-y-1">

0 commit comments

Comments
 (0)