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 />
 		</>