Skip to content

Commit 57dbd7d

Browse files
AmanVarshney01AmanVarshney01
committed
update ui
1 parent bade679 commit 57dbd7d

File tree

9 files changed

+328
-202
lines changed

9 files changed

+328
-202
lines changed

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,6 @@ export default function SponsorsSection() {
117117
<div className="border-border border-b bg-muted/20 px-3 py-2">
118118
<div className="flex items-center gap-2">
119119
<span className="text-primary text-xs">▶</span>
120-
<span className="truncate font-mono font-semibold text-xs">
121-
[SPONSOR_{String(index + 1).padStart(3, "0")}]
122-
</span>
123120
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
124121
<span>{entry.isOneTime ? "ONE-TIME" : "MONTHLY"}</span>
125122
<span>•</span>

‎apps/web/src/app/(home)/_components/stack-builder.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,20 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
319319
}
320320
if (nextStack.api === "none" && (isConvex || isBackendNone)) {
321321
} else if (nextStack.api === "none" && !(isConvex || isBackendNone)) {
322+
if (nextStack.examples.length > 0) {
323+
notes.api.notes.push("API 'None' selected: Examples will be removed.");
324+
notes.examples.notes.push(
325+
"Examples require an API. They will be removed when API is 'None'.",
326+
);
327+
notes.api.hasIssue = true;
328+
notes.examples.hasIssue = true;
329+
nextStack.examples = [];
330+
changed = true;
331+
changes.push({
332+
category: "api",
333+
message: "Examples removed (API 'None' does not support examples)",
334+
});
335+
}
322336
}
323337

324338
if (nextStack.database === "none") {
@@ -1283,6 +1297,17 @@ const StackBuilder = () => {
12831297
"Disabled: This example requires a web frontend.",
12841298
);
12851299
}
1300+
if (
1301+
stack.api === "none" &&
1302+
!rules.isConvex &&
1303+
!rules.isBackendNone
1304+
) {
1305+
addRule(
1306+
category,
1307+
techId,
1308+
"Disabled: Examples require an API. Cannot be selected when API is 'None'.",
1309+
);
1310+
}
12861311
if (
12871312
stack.database === "none" &&
12881313
techId === "todo" &&

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export default function Testimonials() {
178178
onClick={handlePrev}
179179
disabled={currentPage === 1}
180180
className={cn(
181-
"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
181+
"terminal-block-hover hidden items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors sm:flex",
182182
currentPage === 1
183183
? "cursor-not-allowed opacity-50"
184184
: "hover:bg-muted/50",
@@ -225,7 +225,7 @@ export default function Testimonials() {
225225
onClick={handleNext}
226226
disabled={currentPage === totalPages}
227227
className={cn(
228-
"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
228+
"terminal-block-hover hidden items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors sm:flex",
229229
currentPage === totalPages
230230
? "cursor-not-allowed opacity-50"
231231
: "hover:bg-muted/50",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ export default function HomePage() {
361361
/>
362362
)}
363363
<span className="flex-1 truncate font-mono text-xs">
364-
{option.name.toLowerCase().replace(/\s+/g, "-")}.pkg
364+
{option.name.toLowerCase().replace(/\s+/g, "-")}
365365
</span>
366366
<span className="font-mono text-muted-foreground text-xs opacity-0 transition-opacity group-hover:opacity-100">
367367
-rw-r--r--

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
"use client";
2+
3+
import { ExternalLink, File, Github, Monitor } from "lucide-react";
4+
import { motion } from "motion/react";
5+
import Image from "next/image";
6+
import Link from "next/link";
7+
8+
export interface ShowcaseItemProps {
9+
title: string;
10+
description: string;
11+
imageUrl: string;
12+
liveUrl?: string;
13+
sourceUrl?: string;
14+
tags: string[];
15+
index?: number;
16+
}
17+
18+
export default function ShowcaseItem({
19+
title,
20+
description,
21+
imageUrl,
22+
liveUrl,
23+
sourceUrl,
24+
tags,
25+
index = 0,
26+
}: ShowcaseItemProps) {
27+
const itemVariants = {
28+
hidden: { opacity: 0, y: 20 },
29+
visible: {
30+
opacity: 1,
31+
y: 0,
32+
transition: {
33+
duration: 0.5,
34+
ease: "easeOut",
35+
},
36+
},
37+
};
38+
39+
const projectId = `PROJECT_${String(index + 1).padStart(3, "0")}`;
40+
41+
return (
42+
<motion.div
43+
variants={itemVariants}
44+
className="terminal-block-hover flex h-full flex-col overflow-hidden rounded border border-border bg-background"
45+
style={{ animationDelay: `${index * 100}ms` }}
46+
>
47+
<div className="border-border border-b bg-muted/20 px-3 py-2">
48+
<div className="flex items-center gap-2">
49+
<File className="h-3 w-3 text-primary" />
50+
<span className="font-mono font-semibold text-foreground text-xs">
51+
{projectId}.PROJECT
52+
</span>
53+
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
54+
<span>•</span>
55+
<span>{tags.length} DEPS</span>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<div className="relative aspect-[4/3] w-full overflow-hidden bg-muted/10">
61+
<Image
62+
src={imageUrl}
63+
alt={title}
64+
fill
65+
className="object-cover transition-all duration-300 ease-in-out hover:scale-105"
66+
unoptimized
67+
/>
68+
<div className="absolute inset-0 bg-black/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
69+
</div>
70+
71+
<div className="flex flex-1 flex-col p-4">
72+
<h3 className="mb-2 font-bold font-mono text-lg text-primary">
73+
{title}
74+
</h3>
75+
76+
<p className="mb-4 flex-grow font-mono text-muted-foreground text-sm leading-relaxed">
77+
{description}
78+
</p>
79+
80+
<div className="mb-4">
81+
<div className="mb-2 flex items-center gap-2">
82+
<span className="font-mono text-muted-foreground text-xs">
83+
DEPENDENCIES:
84+
</span>
85+
</div>
86+
<div className="flex flex-wrap gap-1">
87+
{tags.map((tag) => (
88+
<span
89+
key={tag}
90+
className="rounded border border-border bg-muted/30 px-2 py-1 font-mono text-foreground text-xs transition-colors hover:bg-muted/50"
91+
>
92+
{tag}
93+
</span>
94+
))}
95+
</div>
96+
</div>
97+
98+
<div className="mt-auto space-y-2">
99+
<div className="grid gap-2">
100+
{liveUrl && (
101+
<Link
102+
href={liveUrl}
103+
target="_blank"
104+
rel="noopener noreferrer"
105+
className="flex items-center gap-2 rounded border border-border bg-primary/10 px-3 py-2 font-mono text-primary text-sm transition-all hover:bg-primary/20 hover:text-primary"
106+
>
107+
<Monitor className="h-3 w-3" />
108+
<span>LAUNCH_DEMO.EXE</span>
109+
<ExternalLink className="ml-auto h-3 w-3" />
110+
</Link>
111+
)}
112+
{sourceUrl && (
113+
<Link
114+
href={sourceUrl}
115+
target="_blank"
116+
rel="noopener noreferrer"
117+
className="flex items-center gap-2 rounded border border-border bg-muted/20 px-3 py-2 font-mono text-muted-foreground text-sm transition-all hover:bg-muted/40 hover:text-foreground"
118+
>
119+
<Github className="h-3 w-3" />
120+
<span>VIEW_SOURCE.GIT</span>
121+
<ExternalLink className="ml-auto h-3 w-3" />
122+
</Link>
123+
)}
124+
</div>
125+
126+
<div className="border-border border-t pt-2">
127+
<div className="flex items-center gap-2 text-xs">
128+
<span className="terminal-glow text-primary">$</span>
129+
<span className="font-mono text-muted-foreground">
130+
echo &quot;Status: READY&quot;
131+
</span>
132+
<div className="ml-auto flex items-center gap-1">
133+
<div className="h-1 w-1 animate-pulse rounded-full bg-green-400" />
134+
<span className="font-mono text-green-400 text-xs">ONLINE</span>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
</motion.div>
141+
);
142+
}

‎apps/web/src/app/(home)/showcase/page.tsx

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
"use client";
2+
3+
import { FolderOpen, Terminal } from "lucide-react";
4+
import { motion } from "motion/react";
5+
import Navbar from "../_components/navbar";
6+
import ShowcaseItem from "./_components/ShowcaseItem";
7+
8+
const showcaseProjects = [
9+
{
10+
title: "Project Alpha",
11+
description: "A cool project built with Better-T-Stack.",
12+
imageUrl: "https://via.placeholder.com/400x300?text=Project+Alpha",
13+
liveUrl: "#",
14+
sourceUrl: "#",
15+
tags: ["Next.js", "tRPC", "Drizzle"],
16+
},
17+
{
18+
title: "Beta App",
19+
description: "Another awesome application powered by Better-T-Stack.",
20+
imageUrl: "https://via.placeholder.com/400x300?text=Beta+App",
21+
liveUrl: "#",
22+
sourceUrl: "#",
23+
tags: ["Hono", "React Native", "SQLite"],
24+
},
25+
{
26+
title: "Gamma Platform",
27+
description: "Showcasing the versatility of Better-T-Stack.",
28+
imageUrl: "https://via.placeholder.com/400x300?text=Gamma+Platform",
29+
liveUrl: "#",
30+
tags: ["Convex", "TanStack Router"],
31+
},
32+
];
33+
34+
export default function ShowcasePage() {
35+
const containerVariants = {
36+
hidden: { opacity: 0 },
37+
visible: {
38+
opacity: 1,
39+
transition: {
40+
staggerChildren: 0.1,
41+
delayChildren: 0.2,
42+
},
43+
},
44+
};
45+
46+
const itemVariants = {
47+
hidden: { opacity: 0, y: 20 },
48+
visible: {
49+
opacity: 1,
50+
y: 0,
51+
transition: {
52+
duration: 0.5,
53+
ease: "easeOut",
54+
},
55+
},
56+
};
57+
58+
return (
59+
<>
60+
<Navbar />
61+
<main className="flex min-h-svh flex-col items-center bg-background px-4 pt-24 pb-10 sm:px-6 md:px-8 md:pt-28 lg:pt-32">
62+
<motion.div
63+
className="mx-auto w-full max-w-6xl"
64+
initial="hidden"
65+
animate="visible"
66+
variants={containerVariants}
67+
>
68+
<motion.div className="mb-8" variants={itemVariants}>
69+
<div className="mb-6 flex items-center gap-2">
70+
<Terminal className="terminal-glow h-4 w-4 text-primary" />
71+
<span className="terminal-glow font-bold font-mono text-lg">
72+
PROJECT_SHOWCASE.EXE
73+
</span>
74+
<div className="h-px flex-1 bg-border" />
75+
<span className="font-mono text-muted-foreground text-xs">
76+
[{showcaseProjects.length} PROJECTS FOUND]
77+
</span>
78+
</div>
79+
80+
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
81+
<div className="flex items-center gap-2 text-sm">
82+
<span className="terminal-glow text-primary">$</span>
83+
<span className="font-mono text-foreground">
84+
user@dev-machine:~/showcase$ ls -la
85+
</span>
86+
</div>
87+
<div className="mt-2 flex items-center gap-2 text-sm">
88+
<span className="terminal-glow text-primary">$</span>
89+
<span className="font-mono text-muted-foreground">
90+
# Discover amazing projects built with Better-T-Stack
91+
</span>
92+
</div>
93+
<div className="mt-2 flex items-center gap-2 text-sm">
94+
<span className="terminal-glow text-primary">$</span>
95+
<span className="font-mono text-muted-foreground">
96+
# Real-world implementations showcasing stack capabilities
97+
</span>
98+
</div>
99+
</div>
100+
101+
<div className="terminal-block-hover rounded border border-border bg-background p-3">
102+
<div className="flex items-center gap-2 font-mono text-sm">
103+
<FolderOpen className="h-4 w-4 text-blue-400" />
104+
<span className="text-foreground">/showcase/projects/</span>
105+
<div className="ml-auto text-muted-foreground text-xs">
106+
drwxr-xr-x {showcaseProjects.length} items
107+
</div>
108+
</div>
109+
</div>
110+
</motion.div>
111+
112+
<motion.div
113+
className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"
114+
variants={containerVariants}
115+
>
116+
{showcaseProjects.map((project, index) => (
117+
<ShowcaseItem key={project.title} {...project} index={index} />
118+
))}
119+
</motion.div>
120+
121+
<motion.div className="mt-8" variants={itemVariants}>
122+
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-4">
123+
<div className="flex items-center gap-2 text-sm">
124+
<span className="terminal-glow text-primary">$</span>
125+
<span className="font-mono text-muted-foreground">
126+
# Want to showcase your project? Submit via GitHub issues
127+
</span>
128+
</div>
129+
<div className="mt-2 flex items-center gap-2 text-sm">
130+
<span className="terminal-glow text-primary">$</span>
131+
<span className="font-mono text-foreground">
132+
echo &quot;Built something amazing? We&apos;d love to feature
133+
it!&quot;
134+
</span>
135+
</div>
136+
</div>
137+
</motion.div>
138+
</motion.div>
139+
</main>
140+
</>
141+
);
142+
}

0 commit comments

Comments
 (0)