From 07c8a59ef6733404dfbdb9969941094a3132788d Mon Sep 17 00:00:00 2001
From: Aman Varshney <amanvarshney.work@gmail.com>
Date: Wed, 28 May 2025 10:07:10 +0530
Subject: [PATCH] redesign landing page (fifth time :)

---
 .../web/src/app/(home)/_components/footer.tsx |   2 +-
 .../web/src/app/(home)/_components/navbar.tsx |   2 +-
 .../(home)/_components/sponsors-section.tsx   | 270 ++++++++----
 .../app/(home)/_components/testimonials.tsx   | 199 +++++----
 apps/web/src/app/(home)/page.tsx              | 411 ++++++++++++------
 apps/web/src/app/global.css                   | 118 ++++-
 6 files changed, 691 insertions(+), 311 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/footer.tsx b/apps/web/src/app/(home)/_components/footer.tsx
index c5f18cb..a775aba 100644
--- a/apps/web/src/app/(home)/_components/footer.tsx
+++ b/apps/web/src/app/(home)/_components/footer.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 const Footer = () => {
 	return (
 		<footer className="relative w-full border-border border-t font-mono">
-			<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+			<div className="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-semibold text-base text-foreground">
diff --git a/apps/web/src/app/(home)/_components/navbar.tsx b/apps/web/src/app/(home)/_components/navbar.tsx
index 6b86eef..8bb9905 100644
--- a/apps/web/src/app/(home)/_components/navbar.tsx
+++ b/apps/web/src/app/(home)/_components/navbar.tsx
@@ -94,7 +94,7 @@ export default function Navbar() {
 						: "border-transparent border-b bg-transparent",
 				)}
 			>
-				<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+				<div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
 					<Link href="/" className="flex flex-shrink-0 items-center gap-2">
 						<Image
 							src="/logo.svg"
diff --git a/apps/web/src/app/(home)/_components/sponsors-section.tsx b/apps/web/src/app/(home)/_components/sponsors-section.tsx
index 2f3b54b..d2a969a 100644
--- a/apps/web/src/app/(home)/_components/sponsors-section.tsx
+++ b/apps/web/src/app/(home)/_components/sponsors-section.tsx
@@ -1,4 +1,5 @@
 import type { Sponsor } from "@/lib/types";
+import { Github, Globe, Heart, Terminal } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
@@ -24,109 +25,192 @@ export default function SponsorsSection() {
 	}, []);
 
 	return (
-		<section className="relative z-10 mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
-			<div className="mb-12 text-center">
-				<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
-					<span className="text-primary">Our Sponsors</span>
-				</h2>
-				<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
-					Supported by amazing organizations and individuals.
-				</p>
+		<div className="mb-12">
+			<div className="mb-6 flex items-center gap-2">
+				<Terminal className="terminal-glow h-4 w-4 text-primary" />
+				<span className="terminal-glow font-bold font-mono text-lg">
+					SPONSORS_DATABASE.JSON
+				</span>
+				<div className="h-px flex-1 bg-border" />
+				<span className="font-mono text-muted-foreground text-xs">
+					[{loadingSponsors ? "LOADING..." : sponsors.length} RECORDS]
+				</span>
 			</div>
+
+			<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
+				<div className="flex items-center gap-2 text-sm">
+					<span className="terminal-glow text-primary">$</span>
+					<span className="font-mono text-foreground">
+						# Amazing organizations and individuals supporting this project
+					</span>
+				</div>
+				<div className="mt-2 flex items-center gap-2 text-sm">
+					<span className="terminal-glow text-primary">$</span>
+					<span className="font-mono text-muted-foreground">
+						# Your support helps maintain and improve Better-T-Stack
+					</span>
+				</div>
+			</div>
+
 			{loadingSponsors ? (
-				<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground">
-					Loading sponsors...
+				<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
+					<div className="flex items-center justify-center gap-2">
+						<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+						<span className="font-mono text-muted-foreground">
+							LOADING_SPONSORS.EXE
+						</span>
+						<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+					</div>
 				</div>
 			) : sponsorError ? (
-				<div className="flex items-center justify-center py-12 text-base text-destructive">
-					{sponsorError}
+				<div className="terminal-block-hover rounded border border-border bg-destructive/10 p-8">
+					<div className="flex items-center justify-center gap-2">
+						<span className="text-destructive">✗</span>
+						<span className="font-mono text-destructive">
+							ERROR: {sponsorError}
+						</span>
+					</div>
 				</div>
 			) : sponsors.length === 0 ? (
-				<div className="flex flex-col items-center justify-center py-12 text-base text-muted-foreground">
-					No sponsors yet.
-					<a
-						href="https://github.com/sponsors/AmanVarshney01"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="mt-4 inline-flex items-center gap-2 rounded-lg border border-primary bg-transparent px-4 py-2 font-mono text-primary text-sm shadow-sm transition-all hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
-					>
-						<svg
-							className="h-4 w-4"
-							fill="none"
-							stroke="currentColor"
-							strokeWidth="2"
-							viewBox="0 0 24 24"
+				<div className="space-y-4">
+					<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
+						<div className="text-center">
+							<div className="mb-4 flex items-center justify-center gap-2">
+								<span className="font-mono text-muted-foreground">
+									NO_SPONSORS_FOUND.NULL
+								</span>
+							</div>
+							<div className="flex items-center justify-center gap-2 text-sm">
+								<span className="terminal-glow text-primary">$</span>
+								<span className="font-mono text-muted-foreground">
+									# Be the first to support this project!
+								</span>
+							</div>
+						</div>
+					</div>
+					<div className="terminal-block-hover rounded border border-border bg-background p-4">
+						<a
+							href="https://github.com/sponsors/AmanVarshney01"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
 						>
-							<title>Heart Icon</title>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-							/>
-						</svg>
-						Become a Sponsor
-					</a>
+							<Heart className="h-4 w-4" />
+							<span>BECOME_SPONSOR.EXE</span>
+						</a>
+					</div>
 				</div>
 			) : (
-				<div className="grid grid-cols-2 items-center justify-center gap-8 sm:grid-cols-3 lg:grid-cols-4 lg:gap-12">
-					{sponsors.map((entry) => {
-						const since = new Date(entry.createdAt).toLocaleDateString(
-							undefined,
-							{ year: "numeric", month: "short" },
-						);
-						const title = `@${entry.sponsor.login} - ${entry.sponsor.type}${
-							entry.isOneTime ? " (One-time)" : " (Monthly)"
-						}\nTier: ${entry.tierName || "N/A"}\nSince: ${since}`;
-						return (
-							<a
-								key={entry.sponsor.login}
-								href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl}
-								target="_blank"
-								rel="noopener noreferrer"
-								className="group flex flex-col items-center gap-2 text-center transition-opacity hover:opacity-80"
-								title={title}
-							>
-								<Image
-									src={entry.sponsor.avatarUrl}
-									alt={entry.sponsor.name || entry.sponsor.login}
-									width={170}
-									height={170}
-									className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
-									unoptimized
-								/>
-								<span className="truncate font-medium font-mono text-foreground text-sm group-hover:text-primary">
-									{entry.sponsor.name || entry.sponsor.login}
-								</span>
-								{entry.tierName && (
-									<span className="text-muted-foreground text-xs group-hover:text-primary/80">
-										{entry.tierName}
-									</span>
-								)}
-							</a>
-						);
-					})}
+				<div className="space-y-6">
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+						{sponsors.map((entry, index) => {
+							const since = new Date(entry.createdAt).toLocaleDateString(
+								undefined,
+								{ year: "numeric", month: "short" },
+							);
+							return (
+								<div
+									key={entry.sponsor.login}
+									className="terminal-block-hover rounded border border-border bg-background"
+									style={{ animationDelay: `${index * 50}ms` }}
+								>
+									<div className="border-border border-b bg-muted/20 px-3 py-2">
+										<div className="flex items-center gap-2">
+											<span className="text-primary text-xs">▶</span>
+											<span className="truncate font-mono font-semibold text-xs">
+												[SPONSOR_{String(index + 1).padStart(3, "0")}]
+											</span>
+											<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
+												<span>{entry.isOneTime ? "ONE-TIME" : "MONTHLY"}</span>
+												<span>•</span>
+												<span>SINCE {since.toUpperCase()}</span>
+											</div>
+										</div>
+									</div>
+									<div className="p-4">
+										<div className="flex items-center gap-4">
+											<div className="flex-shrink-0">
+												<Image
+													src={entry.sponsor.avatarUrl}
+													alt={entry.sponsor.name || entry.sponsor.login}
+													width={100}
+													height={100}
+													className="rounded border border-border bg-background transition-colors duration-300"
+													unoptimized
+												/>
+											</div>
+											<div className="min-w-0 flex-1 space-y-2">
+												<div>
+													<h3 className="truncate font-mono font-semibold text-foreground text-sm">
+														{entry.sponsor.name || entry.sponsor.login}
+													</h3>
+													{entry.tierName && (
+														<p className="font-mono text-primary text-xs">
+															{entry.tierName}
+														</p>
+													)}
+												</div>
+												<div className="flex flex-col gap-1">
+													<a
+														href={`https://github.com/${entry.sponsor.login}`}
+														target="_blank"
+														rel="noopener noreferrer"
+														className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
+													>
+														<Github className="h-4 w-4" />
+														<span className="truncate">
+															github.com/{entry.sponsor.login}
+														</span>
+													</a>
+													{(entry.sponsor.websiteUrl ||
+														entry.sponsor.linkUrl) && (
+														<a
+															href={
+																entry.sponsor.websiteUrl ||
+																entry.sponsor.linkUrl
+															}
+															target="_blank"
+															rel="noopener noreferrer"
+															className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
+														>
+															<Globe className="h-4 w-4" />
+															<span className="truncate">
+																{(
+																	entry.sponsor.websiteUrl ||
+																	entry.sponsor.linkUrl
+																)
+																	?.replace(/^https?:\/\//, "")
+																	?.replace(/\/$/, "")}
+															</span>
+														</a>
+													)}
+
+													{/* <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs">
+														<span className="text-xs">👤</span>
+														<span>{entry.sponsor.type.toUpperCase()}</span>
+													</div> */}
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+
+					<div className="terminal-block-hover rounded border border-border bg-background p-4">
+						<a
+							href="https://github.com/sponsors/AmanVarshney01"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
+						>
+							<Heart className="h-4 w-4" />
+							<span>SUPPORT_PROJECT.EXE</span>
+						</a>
+					</div>
 				</div>
 			)}
-			{sponsors.length > 0 && (
-				<div className="mt-16 text-center">
-					<a
-						href="https://github.com/sponsors/AmanVarshney01"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="inline-flex items-center gap-2 rounded-lg border border-primary bg-transparent px-5 py-2.5 font-mono font-semibold text-base text-primary shadow-sm transition-all duration-300 ease-in-out hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
-					>
-						<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-							<title>Heart Icon</title>
-							<path
-								fillRule="evenodd"
-								d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
-								clipRule="evenodd"
-							/>
-						</svg>
-						Support Our Project!
-					</a>
-				</div>
-			)}
-		</section>
+		</div>
 	);
 }
diff --git a/apps/web/src/app/(home)/_components/testimonials.tsx b/apps/web/src/app/(home)/_components/testimonials.tsx
index d486d99..72ecea8 100644
--- a/apps/web/src/app/(home)/_components/testimonials.tsx
+++ b/apps/web/src/app/(home)/_components/testimonials.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Terminal } from "lucide-react";
 import { motion } from "motion/react";
 import { useMemo, useState } from "react";
 import { Tweet } from "react-tweet";
@@ -113,105 +113,130 @@ export default function Testimonials() {
 	};
 
 	return (
-		<motion.section className="relative z-10 mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:px-6 sm:py-24 lg:space-y-16 lg:px-8">
-			<div className="text-center">
-				<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
-					Loved by <span className="text-primary">Developers</span>
-				</h2>
-				<p className="mx-auto mt-4 max-w-2xl font-mono text-lg text-muted-foreground leading-relaxed">
-					See what people are saying about Better-T-Stack on X.
-				</p>
+		<div className="mb-12">
+			<div className="mb-6 flex items-center gap-2">
+				<Terminal className="terminal-glow h-4 w-4 text-primary" />
+				<span className="terminal-glow font-bold font-mono text-lg">
+					DEVELOPER_TESTIMONIALS.LOG
+				</span>
+				<div className="h-px flex-1 bg-border" />
+				<span className="font-mono text-muted-foreground text-xs">
+					[{TWEET_IDS.length} ENTRIES]
+				</span>
+			</div>
+
+			<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
+				<div className="flex items-center gap-2 text-sm">
+					<span className="terminal-glow text-primary">$</span>
+					<span className="font-mono text-foreground">
+						# Community feedback from X (Twitter)
+					</span>
+				</div>
+				<div className="mt-2 flex items-center gap-2 text-sm">
+					<span className="terminal-glow text-primary">$</span>
+					<span className="font-mono text-muted-foreground">
+						# Real developers sharing their experience
+					</span>
+				</div>
 			</div>
 
 			<motion.div
-				className={cn("grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3")}
+				className={cn("grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3")}
 				variants={gridVariants}
+				initial="hidden"
+				animate="visible"
 			>
-				{visibleTweetIndices.map((index) => (
-					<div
+				{visibleTweetIndices.map((index, i) => (
+					<motion.div
 						key={TWEET_IDS[index]}
-						className="overflow-hidden rounded-lg border border-border"
+						className="terminal-block-hover overflow-hidden rounded border border-border bg-background"
+						style={{ animationDelay: `${i * 50}ms` }}
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ delay: i * 0.1 }}
 					>
-						<Tweet id={TWEET_IDS[index]} />
-					</div>
+						<div className="border-border border-b bg-muted/20 px-3 py-2">
+							<div className="flex items-center gap-2">
+								<span className="text-primary text-xs">▶</span>
+								<span className="font-mono font-semibold text-xs">
+									[TWEET_{String(index + 1).padStart(3, "0")}]
+								</span>
+							</div>
+						</div>
+						<div className="p-0">
+							<Tweet id={TWEET_IDS[index]} />
+						</div>
+					</motion.div>
 				))}
 			</motion.div>
 
 			{totalPages > 1 && (
-				<motion.div
-					className="mt-10 flex items-center justify-between sm:mt-12"
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					transition={{ delay: 0.5, duration: 0.5 }}
-				>
-					<motion.button
-						whileHover={{ scale: 1.05 }}
-						whileTap={{ scale: 0.95 }}
-						onClick={handlePrev}
-						disabled={currentPage === 1}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
-						)}
-						aria-label="Previous page"
-					>
-						<ChevronLeft className="size-4" />
-						Prev
-					</motion.button>
+				<div className="terminal-block-hover mt-8 rounded border border-border bg-muted/20 p-4">
+					<div className="flex items-center justify-between">
+						<button
+							type="button"
+							onClick={handlePrev}
+							disabled={currentPage === 1}
+							className={cn(
+								"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",
+								currentPage === 1
+									? "cursor-not-allowed opacity-50"
+									: "hover:bg-muted/50",
+							)}
+						>
+							<ChevronLeft className="h-3 w-3" />
+							PREV
+						</button>
 
-					<div className="hidden items-center gap-1 sm:flex">
-						{paginationDots.map((page, index) =>
-							typeof page === "number" ? (
-								<button
-									type="button"
-									key={`${page}-${
-										// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-										index
-									}`}
-									onClick={() => goToPage(page)}
-									className={cn(
-										"flex h-8 w-8 items-center justify-center rounded-md font-medium text-sm transition-colors",
-										currentPage === page
-											? "bg-primary/10 text-primary"
-											: "text-muted-foreground hover:bg-muted",
-									)}
-									aria-label={`Go to page ${page}`}
-									aria-current={currentPage === page ? "page" : undefined}
-								>
-									{page}
-								</button>
-							) : (
-								<span
-									key={`ellipsis-${
-										// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-										index
-									}`}
-									className="flex h-8 w-8 items-center justify-center text-muted-foreground text-sm"
-									aria-hidden="true"
-								>
-									...
-								</span>
-							),
-						)}
-					</div>
-					<div className="text-muted-foreground text-sm sm:hidden">
-						Page {currentPage} of {totalPages}
-					</div>
+						<div className="flex items-center gap-1">
+							<span className="font-mono text-muted-foreground text-xs">
+								PAGE:
+							</span>
+							{paginationDots.map((page, index) =>
+								typeof page === "number" ? (
+									<button
+										type="button"
+										key={`page-${page}`}
+										onClick={() => goToPage(page)}
+										className={cn(
+											"terminal-block-hover flex h-6 w-6 items-center justify-center rounded border border-border font-mono text-xs transition-colors",
+											currentPage === page
+												? "terminal-glow bg-primary/20 text-primary"
+												: "bg-background text-muted-foreground hover:text-foreground",
+										)}
+									>
+										{page}
+									</button>
+								) : (
+									<span
+										key={`ellipsis-${
+											index < paginationDots.length / 2 ? "start" : "end"
+										}`}
+										className="flex h-6 w-6 items-center justify-center font-mono text-muted-foreground text-xs"
+									>
+										...
+									</span>
+								),
+							)}
+						</div>
 
-					<motion.button
-						whileHover={{ scale: 1.05 }}
-						whileTap={{ scale: 0.95 }}
-						onClick={handleNext}
-						disabled={currentPage === totalPages}
-						className={cn(
-							"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
-						)}
-						aria-label="Next page"
-					>
-						Next
-						<ChevronRight className="size-4" />
-					</motion.button>
-				</motion.div>
+						<button
+							type="button"
+							onClick={handleNext}
+							disabled={currentPage === totalPages}
+							className={cn(
+								"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",
+								currentPage === totalPages
+									? "cursor-not-allowed opacity-50"
+									: "hover:bg-muted/50",
+							)}
+						>
+							NEXT
+							<ChevronRight className="h-3 w-3" />
+						</button>
+					</div>
+				</div>
 			)}
-		</motion.section>
+		</div>
 	);
 }
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 4c6566f..1dbe10a 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/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>
 	);
 }
diff --git a/apps/web/src/app/global.css b/apps/web/src/app/global.css
index d29afb5..dee9293 100644
--- a/apps/web/src/app/global.css
+++ b/apps/web/src/app/global.css
@@ -5,9 +5,9 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
-.bg-noise {
-	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
-}
+/* .bg-noise {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
+} */
 
 .react-tweet-theme {
 	--tweet-container-margin: 0 !important;
@@ -274,3 +274,115 @@
 		letter-spacing: var(--tracking-normal);
 	}
 }
+
+/* Terminal-style animations and effects */
+.terminal-cursor {
+	animation: blink 1s infinite;
+	border-right: 2px solid currentColor;
+	padding-right: 2px;
+}
+
+@keyframes blink {
+	0%,
+	50% {
+		border-color: transparent;
+	}
+	51%,
+	100% {
+		border-color: currentColor;
+	}
+}
+
+.terminal-glow {
+	text-shadow: 0 0 5px currentColor;
+}
+
+.terminal-scanlines {
+	position: relative;
+}
+
+.terminal-scanlines::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: repeating-linear-gradient(
+		0deg,
+		transparent,
+		transparent 2px,
+		rgba(255, 255, 255, 0.03) 2px,
+		rgba(255, 255, 255, 0.03) 4px
+	);
+	pointer-events: none;
+}
+
+.terminal-block-hover {
+	transition: all 0.2s ease;
+	border: 1px solid var(--border);
+}
+
+.terminal-block-hover:hover {
+	border-color: var(--primary);
+	box-shadow: 0 0 10px rgba(136, 57, 239, 0.3);
+	transform: translateY(-1px);
+}
+
+/* .terminal-matrix-bg {
+	background: linear-gradient(90deg, transparent 98%, var(--border) 100%),
+		linear-gradient(0deg, transparent 98%, var(--border) 100%);
+	background-size: 20px 20px;
+} */
+
+.ascii-art {
+	font-family: "Courier New", monospace;
+	line-height: 1;
+	letter-spacing: 0;
+}
+
+.terminal-prompt::before {
+	content: "> ";
+	color: var(--primary);
+	font-weight: bold;
+}
+
+/* File browser specific styles */
+.file-browser-item {
+	transition: all 0.15s ease;
+	position: relative;
+}
+
+.file-browser-item:hover {
+	background-color: var(--accent);
+	color: var(--accent-foreground);
+	transform: translateX(2px);
+}
+
+.file-browser-item:hover .file-icon {
+	filter: brightness(1.2);
+}
+
+.directory-header {
+	position: relative;
+	cursor: pointer;
+}
+
+.directory-header:hover {
+	background-color: var(--muted);
+}
+
+@keyframes file-load {
+	0% {
+		opacity: 0;
+		transform: translateX(-10px);
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.file-load-animation {
+	animation: file-load 0.3s ease-out forwards;
+}