Skip to content

Commit 374326d

Browse files
AmanVarshney01AmanVarshney01
authored
fix(web): improve ui (#863)
1 parent e2c813c commit 374326d

18 files changed

+208
-220
lines changed

‎apps/web/src/app/(home)/_components/FeatureCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function FeatureCard({ title, options, className }: FeatureCardPr
6060
return (
6161
<motion.div
6262
className={cn(
63-
"relative flex h-36 flex-col overflow-hidden rounded-lg border border-border bg-fd-background p-2 shadow-sm",
63+
"relative flex h-36 flex-col overflow-hidden rounded border border-border bg-fd-background p-2 shadow-sm",
6464
className,
6565
)}
6666
layout

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ export default function CommandSection() {
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" />
38-
<span className="font-semibold font-mono text-sm">CLI_COMMAND</span>
38+
<span className="font-bold font-mono text-lg sm:text-xl">CLI_COMMAND</span>
3939
</div>
4040
<DropdownMenu>
4141
<DropdownMenuTrigger
4242
render={
4343
<button
4444
type="button"
45-
className="flex items-center gap-2 rounded border border-border px-3 py-1.5 text-xs transition-colors hover:bg-muted/10"
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"
4646
/>
4747
}
4848
>
@@ -78,7 +78,7 @@ export default function CommandSection() {
7878
<button
7979
type="button"
8080
onClick={() => copyCommand(commands[selectedPM], selectedPM)}
81-
className="flex items-center gap-1 rounded border border-border px-2 py-1 text-xs hover:bg-muted/10"
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"
8282
>
8383
{copiedCommand === selectedPM ? (
8484
<Check className="h-3 w-3 text-primary" />
@@ -96,9 +96,9 @@ export default function CommandSection() {
9696
<div className="mb-4 flex items-center justify-between">
9797
<div className="flex items-center gap-2">
9898
<ChevronRight className="h-4 w-4 text-primary transition-transform group-hover:translate-x-1" />
99-
<span className="font-semibold font-mono text-sm">STACK_BUILDER</span>
99+
<span className="font-bold font-mono text-lg sm:text-xl">STACK_BUILDER</span>
100100
</div>
101-
<div className="rounded border border-border bg-muted/30 px-2 py-1 text-xs">
101+
<div className="rounded border border-border bg-muted/30 px-2 py-1 font-mono text-xs">
102102
INTERACTIVE
103103
</div>
104104
</div>
@@ -109,7 +109,7 @@ export default function CommandSection() {
109109
<Zap className="h-4 w-4 text-primary" />
110110
<span className="text-foreground">Interactive configuration wizard</span>
111111
</div>
112-
<div className="rounded border border-border bg-muted/30 px-2 py-1 text-xs">
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">
113113
START
114114
</div>
115115
</div>

‎apps/web/src/app/(home)/_components/footer.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Github } from "lucide-react";
1+
import { Github, Terminal } from "lucide-react";
22
import Image from "next/image";
33
import Link from "next/link";
44

@@ -10,25 +10,26 @@ const Footer = () => {
1010
<div className="container mx-auto px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
1111
<div className="mb-8 grid gap-8 sm:mb-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
1212
<div className="sm:col-span-2 lg:col-span-1">
13-
<h3 className="mb-3 flex items-center gap-2 font-semibold text-base text-foreground sm:mb-4">
14-
<span>Better-T-Stack</span>
13+
<h3 className="mb-3 flex items-center gap-2 font-semibold font-mono text-base text-foreground sm:mb-4">
14+
<Terminal className="h-4 w-4 text-primary" />
15+
<span>BETTER_T_STACK.INFO</span>
1516
</h3>
16-
<p className="mb-4 text-muted-foreground text-sm leading-relaxed sm:mb-6 sm:text-base lg:pr-4">
17+
<p className="mb-4 font-mono text-muted-foreground text-sm leading-relaxed sm:mb-6 sm:text-base lg:pr-4">
1718
Type-safe, modern TypeScript scaffolding for full-stack web development
1819
</p>
19-
<div className="flex space-x-4">
20+
<div className="flex gap-2">
2021
<Link
2122
href="https://github.com/AmanVarshney01/create-better-t-stack"
2223
target="_blank"
23-
className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
24+
className="inline-flex items-center justify-center rounded border border-border p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
2425
aria-label="GitHub Repository"
2526
>
2627
<Github size={20} />
2728
</Link>
2829
<Link
2930
href="https://www.npmjs.com/package/create-better-t-stack"
3031
target="_blank"
31-
className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground invert-0 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:invert"
32+
className="inline-flex items-center justify-center rounded border border-border p-2 text-muted-foreground invert-0 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:invert"
3233
aria-label="NPM Package"
3334
>
3435
<Image src={npmIcon} alt="NPM" width={20} height={20} />
@@ -37,8 +38,10 @@ const Footer = () => {
3738
</div>
3839

3940
<div>
40-
<h3 className="mb-3 font-semibold text-base text-foreground sm:mb-4">Resources</h3>
41-
<ul className="space-y-2 text-muted-foreground text-sm sm:space-y-3 sm:text-base">
41+
<h3 className="mb-3 font-semibold font-mono text-base text-foreground sm:mb-4">
42+
RESOURCES.LIST
43+
</h3>
44+
<ul className="space-y-2 font-mono text-muted-foreground text-sm sm:space-y-3 sm:text-base">
4245
<li>
4346
<Link
4447
target="_blank"
@@ -70,8 +73,10 @@ const Footer = () => {
7073
</div>
7174

7275
<div>
73-
<h3 className="mb-3 font-semibold text-base text-foreground sm:mb-4">Contact</h3>
74-
<div className="space-y-3 text-muted-foreground text-sm sm:space-y-4 sm:text-base">
76+
<h3 className="mb-3 font-semibold font-mono text-base text-foreground sm:mb-4">
77+
CONTACT.ENV
78+
</h3>
79+
<div className="space-y-3 font-mono text-muted-foreground text-sm sm:space-y-4 sm:text-base">
7580
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
7681
<span className="inline-flex w-fit rounded bg-muted px-2 py-1 font-mono text-xs sm:text-sm">
7782
$
@@ -86,12 +91,12 @@ const Footer = () => {
8691
</div>
8792

8893
<div className="flex flex-col items-center justify-between gap-4 border-border border-t pt-6 sm:flex-row sm:gap-6 sm:pt-8">
89-
<p className="text-center text-muted-foreground text-xs sm:text-left sm:text-sm">
94+
<p className="text-center font-mono text-muted-foreground text-xs sm:text-left sm:text-sm">
9095
© {new Date().getFullYear()} Better-T-Stack. All rights reserved.
9196
</p>
92-
<p className="flex items-center gap-1.5 text-muted-foreground text-xs sm:text-sm">
93-
Built with
94-
<span className="bg-gradient-to-r from-primary to-primary/80 bg-clip-text font-medium text-transparent">
97+
<p className="flex items-center gap-1.5 font-mono text-muted-foreground text-xs sm:text-sm">
98+
<span className="text-primary">$</span> Built with{" "}
99+
<span className="bg-linear-to-r from-primary to-primary/80 bg-clip-text font-medium text-transparent">
95100
TypeScript
96101
</span>
97102
</p>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,19 @@ export default function SponsorsSection({ sponsorsData }: { sponsorsData: Sponso
2626
<div className="mb-6 flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap">
2727
<div className="flex items-center gap-2">
2828
<Terminal className="h-5 w-5 text-primary" />
29-
<span className="font-bold text-lg sm:text-xl">SPONSORS_DATABASE.JSON</span>
29+
<span className="font-bold font-mono text-lg sm:text-xl">SPONSORS_DATABASE.JSON</span>
3030
</div>
3131
<div className="hidden h-px flex-1 bg-border sm:block" />
32-
<div className="flex items-center gap-2">
33-
<span className="text-muted-foreground text-xs">[{totalCurrentSponsors} RECORDS]</span>
34-
</div>
32+
<span className="w-full text-right font-mono text-muted-foreground text-xs sm:w-auto sm:text-left">
33+
[{totalCurrentSponsors} RECORDS]
34+
</span>
3535
</div>
3636
{totalCurrentSponsors === 0 ? (
3737
<div className="space-y-4">
3838
<div className="rounded border border-border p-8">
3939
<div className="text-center">
4040
<div className="mb-4 flex items-center justify-center gap-2">
41-
<span className="text-muted-foreground">NO_SPONSORS_FOUND.NULL</span>
41+
<span className="font-mono text-muted-foreground">NO_SPONSORS_FOUND.NULL</span>
4242
</div>
4343
<div className="flex items-center justify-center gap-2 text-sm">
4444
<span className="text-primary">$</span>
@@ -237,7 +237,7 @@ export default function SponsorsSection({ sponsorsData }: { sponsorsData: Sponso
237237
) : (
238238
<ChevronDown className="h-4 w-4 text-muted-foreground" />
239239
)}
240-
<span className="font-semibold text-muted-foreground text-sm">
240+
<span className="font-semibold font-mono text-muted-foreground text-sm">
241241
PAST_SPONSORS.ARCHIVE
242242
</span>
243243
<span className="text-muted-foreground text-xs">({pastSponsors.length})</span>
@@ -287,7 +287,7 @@ export default function SponsorsSection({ sponsorsData }: { sponsorsData: Sponso
287287
</div>
288288
<div className="grid grid-cols-1 grid-rows-[1fr_auto] justify-between">
289289
<div>
290-
<h3 className="truncate font-semibold text-muted-foreground text-sm">
290+
<h3 className="truncate font-semibold font-mono text-muted-foreground text-sm">
291291
{entry.name}
292292
</h3>
293293
{shouldShowLifetimeTotal(entry) ? (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function StatsSection() {
3535
<div className="group cursor-pointer rounded border border-border bg-fd-background 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" />
38-
<span className="font-semibold font-mono text-sm sm:text-base">CLI_ANALYTICS.JSON</span>
38+
<span className="font-bold font-mono text-lg sm:text-xl">CLI_ANALYTICS.JSON</span>
3939
</div>
4040

4141
<div className="space-y-3">
@@ -90,7 +90,7 @@ export default function StatsSection() {
9090
<div className="group cursor-pointer rounded border border-border bg-fd-background 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" />
93-
<span className="font-semibold font-mono text-sm sm:text-base">GITHUB_REPO.GIT</span>
93+
<span className="font-bold font-mono text-lg sm:text-xl">GITHUB_REPO.GIT</span>
9494
</div>
9595

9696
<div className="space-y-3">
@@ -142,7 +142,7 @@ export default function StatsSection() {
142142
<div className="group cursor-pointer rounded border border-border bg-fd-background 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" />
145-
<span className="font-semibold font-mono text-sm sm:text-base">NPM_PACKAGE.JS</span>
145+
<span className="font-bold font-mono text-lg sm:text-xl">NPM_PACKAGE.JS</span>
146146
</div>
147147

148148
<div className="space-y-3">

0 commit comments

Comments
 (0)