update landing page ui

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

@@ -7,7 +7,7 @@ const Footer = () => {
 			<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
 				<div className="mb-12 grid gap-8 md:grid-cols-3">
 					<div>
-						<h3 className="mb-4 flex items-center gap-2 font-bold text-foreground text-lg">
+						<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">
 							<span>Better-T Stack</span>
 						</h3>
 						<p className="text-muted-foreground leading-relaxed">
@@ -44,7 +44,7 @@ const Footer = () => {
 					</div>
 
 					<div>
-						<h3 className="mb-4 font-bold text-foreground text-lg">
+						<h3 className="mb-4 font-semibold text-base text-foreground">
 							Resources
 						</h3>
 						<ul className="space-y-2.5 text-muted-foreground">
@@ -90,7 +90,9 @@ const Footer = () => {
 					</div>
 
 					<div>
-						<h3 className="mb-4 font-bold text-foreground text-lg">Contact</h3>
+						<h3 className="mb-4 font-semibold text-base text-foreground">
+							Contact
+						</h3>
 						<div className="space-y-2.5 text-muted-foreground">
 							<p className="flex items-center">
 								<span className="mr-2 rounded bg-muted px-2 py-1 font-mono text-sm">

apps/web/src/app/(home)/_components/navbar.tsx

@@ -47,6 +47,7 @@ export default function Navbar() {
 			label: "Demo",
 			target: "_blank",
 		},
+		{ href: "/showcase", label: "Showcase" },
 		{ href: "/docs", label: "Docs" },
 		{
 			href: "https://www.npmjs.com/package/create-better-t-stack",
@@ -67,6 +68,7 @@ export default function Navbar() {
 			label: "Demo",
 			target: "_blank",
 		},
+		{ href: "/showcase", label: "Showcase" },
 		{ href: "/docs", label: "Docs" },
 		{
 			href: "https://www.npmjs.com/package/create-better-t-stack",

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

@@ -1,14 +1,13 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { TECH_OPTIONS } from "@/lib/constant";
-import { Github, Star } from "lucide-react";
-import { motion } from "motion/react";
+import { Github, Star, Terminal } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import FeatureCard from "./_components/FeatureCard";
 import CodeContainer from "./_components/code-container";
 import Footer from "./_components/footer";
 import Navbar from "./_components/navbar";
+import NpmPackage from "./_components/npm-package";
 import SponsorsSection from "./_components/sponsors-section";
 import Testimonials from "./_components/testimonials";
 
@@ -37,191 +36,200 @@ export default function HomePage() {
 		fetchStars();
 	}, []);
 
-	const containerVariants = {
-		hidden: { opacity: 0 },
-		visible: {
-			opacity: 1,
-			transition: {
-				staggerChildren: 0.15,
-			},
-		},
-	};
-
-	const itemVariants = {
-		hidden: { opacity: 0, y: 20 },
-		visible: {
-			opacity: 1,
-			y: 0,
-			transition: {
-				duration: 0.5,
-				ease: "easeOut",
-			},
-		},
-	};
-
-	const sectionVariants = {
-		hidden: { opacity: 0, y: 30 },
-		visible: {
-			opacity: 1,
-			y: 0,
-			transition: {
-				duration: 0.6,
-				ease: "easeOut",
-			},
-		},
-	};
-
-	const webFrontendOptions = TECH_OPTIONS.webFrontend.filter(
-		(option) => option.id !== "none",
-	);
-	const nativeFrontendOptions = TECH_OPTIONS.nativeFrontend.filter(
-		(option) => option.id !== "none",
-	);
-	const combinedFrontendOptions = [
-		...webFrontendOptions,
-		...nativeFrontendOptions,
+	const frontendOptions = [
+		...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"),
+		...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"),
 	];
 
 	const backendOptions = TECH_OPTIONS.backend.filter(
 		(option) => option.id !== "none",
 	);
-	const runtimeOptions = TECH_OPTIONS.runtime.filter(
-		(option) => option.id !== "none",
-	);
-	const apiLayerOptions = TECH_OPTIONS.api.filter(
-		(option) => option.id !== "none",
-	);
 	const databaseOptions = TECH_OPTIONS.database.filter(
 		(option) => option.id !== "none",
 	);
+	const runtimeOptions = TECH_OPTIONS.runtime;
+	const packageManagerOptions = TECH_OPTIONS.packageManager;
+	const apiOptions = TECH_OPTIONS.api.filter((option) => option.id !== "none");
 	const ormOptions = TECH_OPTIONS.orm.filter((option) => option.id !== "none");
 	const dbSetupOptions = TECH_OPTIONS.dbSetup.filter(
 		(option) => option.id !== "none",
 	);
-	const addonsOptions = TECH_OPTIONS.addons.filter(
-		(option) => option.id !== "none",
-	);
-	const examplesOptions = TECH_OPTIONS.examples.filter(
-		(option) => option.id !== "none",
+	const authOptions = TECH_OPTIONS.auth.filter(
+		(option) => option.id !== "false",
 	);
+	const addonsOptions = TECH_OPTIONS.addons;
+	const examplesOptions = TECH_OPTIONS.examples;
+
+	const techStackCategories = [
+		{
+			category: "Frontend Frameworks",
+			options: frontendOptions,
+		},
+		{
+			category: "Backend Frameworks",
+			options: backendOptions,
+		},
+		{
+			category: "Database Systems",
+			options: databaseOptions,
+		},
+		{
+			category: "Runtime Environments",
+			options: runtimeOptions,
+		},
+		{
+			category: "API Layers",
+			options: apiOptions,
+		},
+		{
+			category: "ORM Solutions",
+			options: ormOptions,
+		},
+		{
+			category: "Database Setup",
+			options: dbSetupOptions,
+		},
+		{
+			category: "Authentication",
+			options: authOptions,
+		},
+		{
+			category: "Package Managers",
+			description: "Dependency management tools",
+			options: packageManagerOptions,
+		},
+		{
+			category: "Development Tools",
+			options: addonsOptions,
+		},
+		{
+			category: "Example Projects",
+			options: examplesOptions,
+		},
+	];
 
 	return (
 		<>
 			<Navbar />
-			<main className="flex min-h-svh flex-col items-center justify-center overflow-x-hidden bg-background px-4 pt-24 pb-10 sm:px-6 md:px-8 md:pt-28 lg:pt-32">
-				<motion.div
-					className="mx-auto min-h-svh w-full max-w-6xl"
-					initial="hidden"
-					animate="visible"
-					variants={containerVariants}
-				>
-					<div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-2 lg:gap-16">
-						<motion.div
-							className="mt-10 text-center lg:text-left"
-							variants={itemVariants}
-						>
-							<motion.h1
-								className="font-bold font-mono text-5xl xs:text-6xl tracking-tight sm:text-7xl md:text-8xl lg:text-7xl xl:text-8xl"
-								variants={itemVariants}
-							>
-								<span className="text-foreground dark:text-primary">
-									Roll Your Own Stack
-								</span>
-							</motion.h1>
+			<main className="min-h-svh bg-background">
+				<div className="relative h-svh overflow-hidden">
+					<div className="relative px-4 pt-32 pb-16 sm:px-6 md:px-8">
+						<div className="mx-auto max-w-4xl text-center">
+							<div>
+								<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/50 px-3 py-1">
+									<Terminal className="h-4 w-4 text-primary" />
+									<span className="font-medium text-sm">
+										CLI Tool for Developers
+									</span>
+								</div>
+							</div>
 
-							<motion.p
-								className="mx-auto mt-6 max-w-xl font-mono text-lg text-muted-foreground sm:text-xl lg:mx-0"
-								variants={itemVariants}
-							>
+							<h1 className="font-bold text-4xl tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
+								<span className="text-foreground">Roll Your Own</span>
+								<br />
+								<span className="text-primary">Stack</span>
+							</h1>
+
+							<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
 								A modern CLI tool for scaffolding end-to-end type-safe
 								TypeScript projects with best practices and customizable
 								configurations.
-							</motion.p>
+							</p>
 
-							<motion.div
-								variants={itemVariants}
-								className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row lg:justify-start"
-							>
-								<Link href="/new">
-									<Button
-										size="lg"
-										variant="default"
-										className="w-full font-mono sm:w-auto"
-									>
-										Go to Stack Builder
-									</Button>
-								</Link>
-								<Link
-									href="https://github.com/amanvarshney01/create-better-t-stack"
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									<Button
-										size="lg"
-										variant="outline"
-										className="w-full font-mono hover:bg-background hover:text-primary sm:w-auto"
-										disabled={isLoadingStars}
-									>
-										<Github className="mr-2 h-4 w-4" />
-										Star on GitHub
-										{stars !== null && !isLoadingStars && (
-											<span className="ml-2 flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs">
-												<Star className="h-3 w-3 text-yellow-400" />
-												{stars}
-											</span>
-										)}
-										{isLoadingStars && (
-											<span className="ml-2 h-4 w-10 animate-pulse rounded-sm" />
-										)}
-									</Button>
-								</Link>
-								{/* <ShinyText
-									text="Type-safe. Modern. Minimal. Fast."
-									speed={3}
-									className="font-mono text-muted-foreground text-xs xs:text-sm sm:text-base"
-								/> */}
-							</motion.div>
-						</motion.div>
+							<NpmPackage />
 
-						<motion.div className="mx-auto w-full" variants={itemVariants}>
-							<CodeContainer />
-							<div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3">
-								<FeatureCard
-									title="Frontend"
-									options={combinedFrontendOptions}
-								/>
-								<FeatureCard title="Backend" options={backendOptions} />
-								<FeatureCard title="Runtime" options={runtimeOptions} />
-								<FeatureCard title="API Layer" options={apiLayerOptions} />
-								<FeatureCard title="Database" options={databaseOptions} />
-								<FeatureCard title="ORM" options={ormOptions} />
-								<FeatureCard title="Database Setup" options={dbSetupOptions} />
-								<FeatureCard title="Addons" options={addonsOptions} />
-								<FeatureCard title="Examples" options={examplesOptions} />
+							<div className="mt-8 flex flex-col items-center justify-center gap-4">
+								<div className="flex flex-col items-center gap-3 sm:flex-row">
+									<Link href="/new">
+										<Button size="lg" className="w-full sm:w-auto">
+											Stack Builder
+										</Button>
+									</Link>
+									<Link
+										href="https://github.com/amanvarshney01/create-better-t-stack"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<Button
+											size="lg"
+											variant="outline"
+											className="w-full hover:text-primary sm:w-auto"
+											disabled={isLoadingStars}
+										>
+											<Github className="mr-2 h-4 w-4" />
+											Star on GitHub
+											{stars !== null && !isLoadingStars && (
+												<span className="ml-2 flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs">
+													<Star className="h-3 w-3 text-yellow-400" />
+													{stars}
+												</span>
+											)}
+										</Button>
+									</Link>
+								</div>
+								<CodeContainer />
 							</div>
-						</motion.div>
+						</div>
 					</div>
-				</motion.div>
+				</div>
 
-				<motion.div
-					className="w-full"
-					initial="hidden"
-					whileInView="visible"
-					viewport={{ once: true, amount: 0.15 }}
-					variants={sectionVariants}
-				>
-					<Testimonials />
-				</motion.div>
+				<div className="px-4 py-16 sm:px-6 md:px-8">
+					<div className="mx-auto max-w-6xl">
+						<div className="mb-12 text-center">
+							<h2 className="font-bold text-3xl tracking-tight sm:text-4xl">
+								Tech Stack Options
+							</h2>
+							<p className="mt-4 text-lg text-muted-foreground">
+								Choose from modern, production-ready technologies
+							</p>
+						</div>
 
-				<motion.div
-					className="w-full"
-					initial="hidden"
-					whileInView="visible"
-					viewport={{ once: true, amount: 0.15 }}
-					variants={sectionVariants}
-				>
-					<SponsorsSection />
-				</motion.div>
+						<div className="overflow-hidden rounded-lg border">
+							<table className="w-full">
+								<thead className="bg-muted/50">
+									<tr>
+										<th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
+											Category
+										</th>
+										<th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
+											Options
+										</th>
+									</tr>
+								</thead>
+								<tbody className="divide-y divide-border">
+									{techStackCategories.map((category) => (
+										<tr key={category.category} className="hover:bg-muted/30">
+											<td className="px-6 py-4">
+												<div className="font-medium">{category.category}</div>
+											</td>
+											<td className="px-6 py-4">
+												<div className="flex flex-wrap gap-2">
+													{category.options.map((option) => (
+														<div
+															key={option.id}
+															className="flex items-center gap-2 rounded border bg-background px-2 py-1"
+														>
+															{option.icon && (
+																<img
+																	src={option.icon}
+																	alt={option.name}
+																	className="h-4 w-4"
+																/>
+															)}
+															<span className="text-sm">{option.name}</span>
+														</div>
+													))}
+												</div>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+				<Testimonials />
+				<SponsorsSection />
 			</main>
 			<Footer />
 		</>

apps/web/src/app/global.css

@@ -147,38 +147,38 @@
 :root {
 	--radius: 0.35rem;
 	/* --background: oklch(0.96 0.01 264.53); */
-	--background: oklch(1.0 0 0);
+	--background: oklch(1 0 0);
 	--foreground: oklch(0.44 0.04 279.33);
-	--card: oklch(1.0 0 0);
+	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.44 0.04 279.33);
 	--popover: oklch(0.86 0.01 268.48);
 	--popover-foreground: oklch(0.44 0.04 279.33);
-	--primary: oklch(0.55 0.25 297.02);
-	--primary-foreground: oklch(1.0 0 0);
+	--primary: oklch(0.5 0.18 297.02);
+	--primary-foreground: oklch(1 0 0);
 	--secondary: oklch(0.86 0.01 268.48);
 	--secondary-foreground: oklch(0.44 0.04 279.33);
 	--muted: oklch(0.91 0.01 264.51);
 	--muted-foreground: oklch(0.55 0.03 279.08);
-	--accent: oklch(0.55 0.25 297.02 / 60%);
-	--accent-foreground: oklch(1.0 0 0);
+	--accent: oklch(0.5 0.18 297.02 / 60%);
+	--accent-foreground: oklch(1 0 0);
 	--destructive: oklch(0.55 0.22 19.81);
 	--border: oklch(0.81 0.02 271.2);
 	--input: oklch(0.86 0.01 268.48);
-	--ring: oklch(0.55 0.25 297.02);
-	--chart-1: oklch(0.55 0.25 297.02);
-	--chart-2: oklch(0.55 0.25 297.02 / 60%);
+	--ring: oklch(0.5 0.18 297.02);
+	--chart-1: oklch(0.5 0.18 297.02);
+	--chart-2: oklch(0.5 0.18 297.02 / 60%);
 	--chart-3: oklch(0.63 0.18 140.44);
 	--chart-4: oklch(0.69 0.2 42.43);
 	--chart-5: oklch(0.71 0.1 33.1);
 	--sidebar: oklch(0.93 0.01 264.52);
 	--sidebar-foreground: oklch(0.44 0.04 279.33);
-	--sidebar-primary: oklch(0.55 0.25 297.02);
-	--sidebar-primary-foreground: oklch(1.0 0 0);
-	--sidebar-accent: oklch(0.55 0.25 297.02 / 60%);
-	--sidebar-accent-foreground: oklch(1.0 0 0);
+	--sidebar-primary: oklch(0.5 0.18 297.02);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.5 0.18 297.02 / 60%);
+	--sidebar-accent-foreground: oklch(1 0 0);
 	--sidebar-border: oklch(0.81 0.02 271.2);
-	--sidebar-ring: oklch(0.55 0.25 297.02);
-	--destructive-foreground: oklch(1.0 0 0);
+	--sidebar-ring: oklch(0.5 0.18 297.02);
+	--destructive-foreground: oklch(1 0 0);
 	--font-sans: Montserrat, sans-serif;
 	--font-serif: Georgia, serif;
 	--font-mono: Fira Code, monospace;
@@ -213,31 +213,31 @@
 	--card-foreground: oklch(0.88 0.04 272.28);
 	--popover: oklch(0.4 0.03 280.15);
 	--popover-foreground: oklch(0.88 0.04 272.28);
-	--primary: oklch(0.79 0.12 304.77);
+	--primary: oklch(0.69 0.08 304.77);
 	--primary-foreground: oklch(0.24 0.03 283.91);
 	--secondary: oklch(0.48 0.03 278.64);
 	--secondary-foreground: oklch(0.88 0.04 272.28);
 	--muted: oklch(0.3 0.03 276.21);
 	--muted-foreground: oklch(0.75 0.04 273.93);
-	--accent: oklch(0.79 0.12 304.77 / 60%);
+	--accent: oklch(0.69 0.08 304.77 / 60%);
 	--accent-foreground: oklch(0.24 0.03 283.91);
 	--destructive: oklch(0.76 0.13 2.76);
 	--border: oklch(0.32 0.03 281.98);
 	--input: oklch(0.32 0.03 281.98);
-	--ring: oklch(0.79 0.12 304.77);
-	--chart-1: oklch(0.79 0.12 304.77);
-	--chart-2: oklch(0.79 0.12 304.77 / 60%);
+	--ring: oklch(0.69 0.08 304.77);
+	--chart-1: oklch(0.69 0.08 304.77);
+	--chart-2: oklch(0.69 0.08 304.77 / 60%);
 	--chart-3: oklch(0.86 0.11 142.72);
 	--chart-4: oklch(0.82 0.1 52.63);
 	--chart-5: oklch(0.92 0.02 30.49);
 	--sidebar: oklch(0.18 0.02 284.2);
 	--sidebar-foreground: oklch(0.88 0.04 272.28);
-	--sidebar-primary: oklch(0.79 0.12 304.77);
+	--sidebar-primary: oklch(0.69 0.08 304.77);
 	--sidebar-primary-foreground: oklch(0.24 0.03 283.91);
-	--sidebar-accent: oklch(0.79 0.12 304.77 / 60%);
+	--sidebar-accent: oklch(0.69 0.08 304.77 / 60%);
 	--sidebar-accent-foreground: oklch(0.24 0.03 283.91);
 	--sidebar-border: oklch(0.4 0.03 280.15);
-	--sidebar-ring: oklch(0.79 0.12 304.77);
+	--sidebar-ring: oklch(0.69 0.08 304.77);
 	--destructive-foreground: oklch(0.24 0.03 283.91);
 	--radius: 0.35rem;
 	--font-sans: Montserrat, sans-serif;

apps/web/src/app/showcase/_components/ShowcaseItem.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { motion } from "motion/react";
+import Image from "next/image";
+import Link from "next/link";
+
+export interface ShowcaseItemProps {
+	title: string;
+	description: string;
+	imageUrl: string;
+	liveUrl?: string;
+	sourceUrl?: string;
+	tags: string[];
+}
+
+export default function ShowcaseItem({
+	title,
+	description,
+	imageUrl,
+	liveUrl,
+	sourceUrl,
+	tags,
+}: ShowcaseItemProps) {
+	const itemVariants = {
+		hidden: { opacity: 0, y: 20 },
+		visible: {
+			opacity: 1,
+			y: 0,
+			transition: {
+				duration: 0.5,
+				ease: "easeOut",
+			},
+		},
+	};
+
+	return (
+		<motion.div
+			variants={itemVariants}
+			className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card p-6 shadow-sm"
+		>
+			<div className="relative mb-4 aspect-[4/3] w-full overflow-hidden rounded-md">
+				<Image
+					src={imageUrl}
+					alt={title}
+					fill
+					className="object-cover transition-transform duration-300 ease-in-out hover:scale-105"
+					unoptimized
+				/>
+			</div>
+			<h3 className="mb-2 font-mono font-semibold text-primary text-xl">
+				{title}
+			</h3>
+			<p className="mb-4 flex-grow text-muted-foreground text-sm">
+				{description}
+			</p>
+			<div className="mb-4">
+				{tags.map((tag) => (
+					<span
+						key={tag}
+						className="mr-2 mb-2 inline-block rounded-full bg-muted px-2 py-1 font-mono text-muted-foreground text-xs"
+					>
+						{tag}
+					</span>
+				))}
+			</div>
+			<div className="mt-auto flex space-x-3">
+				{liveUrl && (
+					<Link
+						href={liveUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-mono text-primary text-sm hover:underline"
+					>
+						Live Demo
+					</Link>
+				)}
+				{sourceUrl && (
+					<Link
+						href={sourceUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-mono text-muted-foreground text-sm hover:underline"
+					>
+						Source Code
+					</Link>
+				)}
+			</div>
+		</motion.div>
+	);
+}

apps/web/src/app/showcase/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { motion } from "motion/react";
+import Navbar from "../(home)/_components/navbar";
+import ShowcaseItem from "./_components/ShowcaseItem";
+
+const showcaseProjects = [
+	{
+		title: "Project Alpha",
+		description: "A cool project built with Better-T-Stack.",
+		imageUrl: "https://via.placeholder.com/400x300?text=Project+Alpha",
+		liveUrl: "#",
+		sourceUrl: "#",
+		tags: ["Next.js", "tRPC", "Drizzle"],
+	},
+	{
+		title: "Beta App",
+		description: "Another awesome application powered by Better-T-Stack.",
+		imageUrl: "https://via.placeholder.com/400x300?text=Beta+App",
+		liveUrl: "#",
+		sourceUrl: "#",
+		tags: ["Hono", "React Native", "SQLite"],
+	},
+	{
+		title: "Gamma Platform",
+		description: "Showcasing the versatility of Better-T-Stack.",
+		imageUrl: "https://via.placeholder.com/400x300?text=Gamma+Platform",
+		liveUrl: "#",
+		tags: ["Convex", "TanStack Router"],
+	},
+];
+
+export default function ShowcasePage() {
+	const containerVariants = {
+		hidden: { opacity: 0 },
+		visible: {
+			opacity: 1,
+			transition: {
+				staggerChildren: 0.1,
+				delayChildren: 0.2,
+			},
+		},
+	};
+
+	const itemVariants = {
+		hidden: { opacity: 0, y: 20 },
+		visible: {
+			opacity: 1,
+			y: 0,
+			transition: {
+				duration: 0.5,
+				ease: "easeOut",
+			},
+		},
+	};
+
+	return (
+		<>
+			<Navbar />
+			<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">
+				<motion.div
+					className="mx-auto w-full max-w-6xl"
+					initial="hidden"
+					animate="visible"
+					variants={containerVariants}
+				>
+					<motion.div className="mb-12 text-center" variants={itemVariants}>
+						<h1 className="font-bold font-mono text-4xl tracking-tight sm:text-5xl md:text-6xl">
+							<span className="text-foreground dark:text-primary">
+								Showcase
+							</span>
+						</h1>
+						<p className="mx-auto mt-4 max-w-2xl font-mono text-lg text-muted-foreground sm:text-xl">
+							Discover amazing projects built with Better-T-Stack.
+						</p>
+					</motion.div>
+
+					<motion.div
+						className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
+						variants={containerVariants}
+					>
+						{showcaseProjects.map((project) => (
+							<ShowcaseItem key={project.title} {...project} />
+						))}
+					</motion.div>
+				</motion.div>
+			</main>
+		</>
+	);
+}

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "2.11.0",
+      "version": "2.12.0",
       "bin": {
         "create-better-t-stack": "dist/index.js",
       },

package.json

@@ -10,6 +10,7 @@
 		"build:web": "turbo run build --filter=web",
 		"build:cli": "turbo run build --filter=create-better-t-stack",
 		"check": "turbo check",
+		"format": "biome check --write .",
 		"publish-packages": "turbo run build --filter=create-better-t-stack && changeset publish",
 		"build:web:cloudflare": "bun install && bun run build:web",
 		"deploy:web": "bun run build:web:cloudflare && bunx wrangler pages deploy ./apps/web/out"