redesign landing page (fifth time :)

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

@@ -1,13 +1,20 @@
 "use client";
-import { Button } from "@/components/ui/button";
 import { TECH_OPTIONS } from "@/lib/constant";
+import { cn } from "@/lib/utils";
 import discordLogo from "@/public/icon/discord.svg";
-import { Github, Star, Terminal } from "lucide-react";
+import {
+	Check,
+	ChevronRight,
+	Copy,
+	Github,
+	Star,
+	Terminal,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import CodeContainer from "./_components/code-container";
 import Footer from "./_components/footer";
+import PackageIcon from "./_components/icons";
 import Navbar from "./_components/navbar";
 import NpmPackage from "./_components/npm-package";
 import SponsorsSection from "./_components/sponsors-section";
@@ -16,6 +23,14 @@ import Testimonials from "./_components/testimonials";
 export default function HomePage() {
 	const [stars, setStars] = useState<number | null>(null);
 	const [isLoadingStars, setIsLoadingStars] = useState(true);
+	const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
+	const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun");
+
+	const commands = {
+		npm: "npx create-better-t-stack@latest my-app",
+		pnpm: "pnpm create better-t-stack@latest my-app",
+		bun: "bun create better-t-stack@latest my-app",
+	};
 
 	useEffect(() => {
 		async function fetchStars() {
@@ -38,6 +53,12 @@ export default function HomePage() {
 		fetchStars();
 	}, []);
 
+	const copyCommand = (command: string, packageManager: string) => {
+		navigator.clipboard.writeText(command);
+		setCopiedCommand(packageManager);
+		setTimeout(() => setCopiedCommand(null), 2000);
+	};
+
 	const frontendOptions = [
 		...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"),
 		...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"),
@@ -110,150 +131,288 @@ export default function HomePage() {
 	];
 
 	return (
-		<>
+		<div className="terminal-scanlines min-h-screen bg-background font-mono">
 			<Navbar />
-			<main className="min-h-svh bg-background">
-				<div className="min-h-svh">
-					<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
+			<main className="terminal-matrix-bg p-6 pt-28">
+				<div className="mb-8 flex items-center justify-center">
+					<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 md:gap-6">
+						<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
+							{`
+██████╗  ██████╗ ██╗     ██╗
+██╔══██╗██╔═══██╗██║     ██║
+██████╔╝██║   ██║██║     ██║
+██╔══██╗██║   ██║██║     ██║
+██║  ██║╚██████╔╝███████╗███████╗
+╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚══════╝`}
+						</pre>
+
+						<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
+							{`
+██╗   ██╗ ██████╗ ██╗   ██╗██████╗
+╚██╗ ██╔╝██╔═══██╗██║   ██║██╔══██╗
+ ╚████╔╝ ██║   ██║██║   ██║██████╔╝
+  ╚██╔╝  ██║   ██║██║   ██║██╔══██╗
+   ██║   ╚██████╔╝╚██████╔╝██║  ██║
+   ╚═╝    ╚═════╝  ╚═════╝ ╚═╝  ╚═╝`}
+						</pre>
+
+						<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
+							{`
+ ██████╗ ██╗    ██╗███╗   ██╗
+██╔═══██╗██║    ██║████╗  ██║
+██║   ██║██║ █╗ ██║██╔██╗ ██║
+██║   ██║██║███╗██║██║╚██╗██║
+╚██████╔╝╚███╔███╔╝██║ ╚████║
+ ╚═════╝  ╚══╝╚══╝ ╚═╝  ╚═══╝`}
+						</pre>
+
+						<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
+							{`
+███████╗████████╗ █████╗  ██████╗██╗  ██╗
+██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+███████╗   ██║   ███████║██║     █████╔╝
+╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝`}
+						</pre>
+					</div>
+				</div>
+
+				<div className="mb-6 text-center">
+					<p className="mx-auto max-w-2xl font-mono text-lg text-muted-foreground">
+						# Modern CLI for scaffolding end-to-end type-safe TypeScript
+						projects
+					</p>
+					<p className="mx-auto mt-2 max-w-2xl font-mono text-muted-foreground text-sm">
+						# Production-ready • Customizable • Best practices included
+					</p>
+					<NpmPackage />
+				</div>
+
+				<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
+					<div className="mb-4 flex items-center justify-between">
+						<div className="flex items-center gap-2">
+							<Terminal className="terminal-glow h-4 w-4 text-primary" />
+							<span className="terminal-glow font-semibold text-sm">
+								QUICK_START
+							</span>
+						</div>
+						<div className="flex items-center rounded border border-border bg-background p-0.5">
+							{(["bun", "pnpm", "npm"] as const).map((pm) => (
+								<button
+									type="button"
+									key={pm}
+									onClick={() => setSelectedPM(pm)}
+									className={cn(
+										"flex items-center gap-1.5 rounded px-2 py-1 font-mono text-xs transition-colors duration-150",
+										selectedPM === pm
+											? "terminal-glow bg-primary/20 text-primary"
+											: "text-muted-foreground hover:text-foreground",
+									)}
+								>
+									<PackageIcon pm={pm} className="h-3 w-3" />
+									{pm.toUpperCase()}
+								</button>
+							))}
+						</div>
+					</div>
+
+					<div className="space-y-3">
+						<div className="flex items-center justify-between rounded border border-border bg-background p-3">
+							<div className="flex items-center gap-2 text-sm">
+								<span className="terminal-glow text-primary">$</span>
+								<span className="font-mono text-foreground">
+									{commands[selectedPM]}
+								</span>
+							</div>
+							<button
+								type="button"
+								onClick={() => copyCommand(commands[selectedPM], selectedPM)}
+								className="terminal-block-hover flex items-center gap-1 rounded border border-border bg-muted/20 px-2 py-1 text-xs hover:bg-muted/50"
+							>
+								{copiedCommand === selectedPM ? (
+									<Check className="h-3 w-3 text-primary" />
+								) : (
+									<Copy className="h-3 w-3" />
+								)}
+								{copiedCommand === selectedPM ? "COPIED!" : "COPY"}
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-3">
+					<Link href="/new">
+						<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
+							<div className="flex items-center gap-2">
+								<ChevronRight className="terminal-glow h-4 w-4 text-primary" />
+								<span className="font-mono font-semibold">
+									STACK_BUILDER.EXE
+								</span>
+							</div>
+							<p className="mt-2 font-mono text-muted-foreground text-sm">
+								[EXEC] Interactive configuration wizard
+							</p>
+						</div>
+					</Link>
+
+					<Link
+						href="https://github.com/amanvarshney01/create-better-t-stack"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
+							<div className="flex items-center justify-between">
+								<div className="flex items-center gap-2">
+									<Github className="terminal-glow h-4 w-4 text-primary" />
+									<span className="font-mono font-semibold">
+										GITHUB_REPO.GIT
 									</span>
 								</div>
+								{stars !== null && !isLoadingStars && (
+									<div className="flex items-center gap-1 rounded border border-border bg-muted/30 px-2 py-1 font-mono text-xs">
+										<Star className="h-3 w-3 text-accent" />
+										{stars}
+									</div>
+								)}
 							</div>
-
-							<h1 className="font-bold text-5xl 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.
+							<p className="mt-2 font-mono text-muted-foreground text-sm">
+								[LINK] Star the repository on GitHub
 							</p>
+						</div>
+					</Link>
 
-							<NpmPackage />
+					<Link
+						href="https://discord.com/invite/tMunxM5R"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
+							<div className="flex items-center gap-2">
+								<Image src={discordLogo} alt="discord" className="h-4 w-4" />
+								<span className="font-mono font-semibold">
+									DISCORD_CHAT.IRC
+								</span>
+							</div>
+							<p className="mt-2 font-mono text-muted-foreground text-sm">
+								[JOIN] Connect to developer community
+							</p>
+						</div>
+					</Link>
+				</div>
 
-							<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:bg-muted/50 hover:text-foreground sm:w-auto dark:hover:text-foreground"
-											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/30 px-1.5 py-0.5 text-xs">
-													<Star className="h-3 w-3 text-yellow-400" />
-													{stars}
+				<div className="mb-12">
+					<div className="mb-6 flex items-center gap-2">
+						<span className="terminal-glow font-bold font-mono text-lg">
+							TECH_STACK_MATRIX.DB
+						</span>
+						<div className="h-px flex-1 bg-border" />
+						<span className="font-mono text-muted-foreground text-xs">
+							[
+							{techStackCategories.reduce(
+								(acc, cat) => acc + cat.options.length,
+								0,
+							)}{" "}
+							PACKAGES]
+						</span>
+					</div>
+
+					<div className="terminal-block-hover rounded border border-border bg-background">
+						<div className="border-border border-b bg-muted/20 px-4 py-3">
+							<div className="flex items-center gap-2">
+								<Terminal className="terminal-glow h-4 w-4 text-primary" />
+								<span className="font-mono font-semibold text-sm">
+									/tech-stack/packages/
+								</span>
+							</div>
+						</div>
+
+						<div className="space-y-3 p-4">
+							{techStackCategories.map((category, categoryIndex) => (
+								<div key={category.category} className="space-y-2">
+									<div className="directory-header flex items-center gap-2 rounded px-2 py-2 transition-colors">
+										<span className="font-mono font-semibold text-foreground text-sm">
+											{category.category.toLowerCase().replace(/\s+/g, "-")}/
+										</span>
+										<span className="font-mono text-muted-foreground text-xs">
+											({category.options.length} items)
+										</span>
+									</div>
+
+									<div className="ml-6 grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+										{category.options.map((option, optionIndex) => (
+											<div
+												key={option.id}
+												className="file-browser-item file-load-animation flex items-center gap-3 rounded border border-border bg-muted/10 px-3 py-2"
+												style={{
+													animationDelay: `${
+														categoryIndex * 100 + optionIndex * 30
+													}ms`,
+												}}
+											>
+												{option.icon !== "" && (
+													<Image
+														src={option.icon}
+														alt={option.name}
+														height={16}
+														width={16}
+														unoptimized
+														className="file-icon h-4 w-4 flex-shrink-0"
+													/>
+												)}
+												<span className="flex-1 truncate font-mono text-xs">
+													{option.name.toLowerCase().replace(/\s+/g, "-")}.pkg
 												</span>
-											)}
-										</Button>
-									</Link>
-									<Link
-										href="https://discord.com/invite/tMunxM5R"
-										target="_blank"
-										rel="noopener noreferrer"
-									>
-										<Button
-											size="lg"
-											variant="outline"
-											className="w-full hover:bg-muted/50 hover:text-foreground sm:w-auto dark:hover:text-foreground"
-										>
-											<Image
-												src={discordLogo}
-												alt="discord"
-												className="size-4"
-											/>
-											Join Discord
-										</Button>
-									</Link>
+												<span className="font-mono text-muted-foreground text-xs opacity-0 transition-opacity group-hover:opacity-100">
+													-rw-r--r--
+												</span>
+											</div>
+										))}
+									</div>
 								</div>
-								<CodeContainer />
+							))}
+						</div>
+
+						<div className="border-border border-t bg-muted/20 px-4 py-2">
+							<div className="flex items-center justify-between text-xs">
+								<span className="font-mono text-muted-foreground">
+									$ ls -la /tech-stack/packages/
+								</span>
+								<span className="font-mono text-muted-foreground">
+									{techStackCategories.length} directories,{" "}
+									{techStackCategories.reduce(
+										(acc, cat) => acc + cat.options.length,
+										0,
+									)}{" "}
+									files
+								</span>
 							</div>
 						</div>
 					</div>
 				</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 className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
+					<div className="terminal-glow mb-2 font-mono font-semibold text-sm">
+						SYSTEM_INFO.LOG
+					</div>
+					<div className="grid grid-cols-1 gap-2 font-mono text-xs md:grid-cols-3">
+						<div>
+							<span className="text-primary">OS:</span> TypeScript_Runtime_v5.x
 						</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 !== "" && (
-																<Image
-																	src={option.icon}
-																	alt={option.name}
-																	height={50}
-																	width={50}
-																	unoptimized
-																	className="h-4 w-4"
-																/>
-															)}
-															<span className="text-sm">{option.name}</span>
-														</div>
-													))}
-												</div>
-											</td>
-										</tr>
-									))}
-								</tbody>
-							</table>
+						<div>
+							<span className="text-primary">ARCH:</span> Full_Stack_Framework
+						</div>
+						<div>
+							<span className="text-primary">STATUS:</span>{" "}
+							<span className="terminal-glow text-accent">READY</span>
 						</div>
 					</div>
 				</div>
+
 				<Testimonials />
 				<SponsorsSection />
 			</main>
 			<Footer />
-		</>
+		</div>
 	);
 }