From f9712ef7519928ba6400dcb6d90c28b15dd4e8ba Mon Sep 17 00:00:00 2001
From: Aman Varshney <amanvarshney.work@gmail.com>
Date: Tue, 20 May 2025 10:48:44 +0530
Subject: [PATCH] update landing page

just messing around, if you know any good design please send a pr :(
---
 apps/web/package.json                         |   1 +
 .../app/(home)/_components/FeatureCard.tsx    |  84 +++++++++
 .../app/(home)/_components/code-container.tsx | 176 +-----------------
 .../(home)/_components/sponsors-section.tsx   |  35 ++--
 .../app/(home)/_components/stack-builder.tsx  | 139 +-------------
 apps/web/src/app/(home)/page.tsx              | 144 +++++++-------
 apps/web/src/app/global.css                   |   2 +-
 apps/web/src/components/ui/button.tsx         |  59 ++++++
 bun.lock                                      |   1 +
 9 files changed, 233 insertions(+), 408 deletions(-)
 create mode 100644 apps/web/src/app/(home)/_components/FeatureCard.tsx
 create mode 100644 apps/web/src/components/ui/button.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 0bda863..8b0c94a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-slot": "^1.2.2",
     "@radix-ui/react-switch": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.6",
     "babel-plugin-react-compiler": "^19.1.0-rc.1",
diff --git a/apps/web/src/app/(home)/_components/FeatureCard.tsx b/apps/web/src/app/(home)/_components/FeatureCard.tsx
new file mode 100644
index 0000000..f6daf37
--- /dev/null
+++ b/apps/web/src/app/(home)/_components/FeatureCard.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import { useState } from "react";
+
+interface TechOption {
+	id: string;
+	name: string;
+	icon: string;
+}
+
+interface FeatureCardProps {
+	title: string;
+	description?: string;
+	options: TechOption[];
+	className?: string;
+}
+
+const FeatureCard: React.FC<FeatureCardProps> = ({
+	title,
+	options,
+	className,
+}) => {
+	const [isHovered, setIsHovered] = useState(false);
+
+	return (
+		<motion.div
+			className={cn(
+				"relative flex h-36 flex-col justify-between overflow-hidden rounded-lg border border-border bg-card p-4 shadow-sm",
+				className,
+			)}
+			onHoverStart={() => setIsHovered(true)}
+			onHoverEnd={() => setIsHovered(false)}
+			layout
+		>
+			<div>
+				<h4 className="mb-1 font-mono font-semibold text-foreground text-lg">
+					{title}
+				</h4>
+			</div>
+
+			<AnimatePresence>
+				{isHovered && (
+					<motion.div
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -20 }}
+						transition={{ duration: 0.2 }}
+						className="absolute inset-0 bg-card/90 p-3 backdrop-blur-sm"
+					>
+						<ScrollArea className="h-full">
+							<ul className="grid grid-cols-3 gap-2 p-1">
+								{options.map((option) => (
+									<li
+										key={option.id}
+										title={option.name}
+										className="flex items-center justify-center"
+									>
+										{option.icon.startsWith("/") ? (
+											<Image
+												src={option.icon}
+												alt={option.name}
+												width={24}
+												height={24}
+												className="object-contain "
+											/>
+										) : (
+											<span className="text-2xl">{option.icon}</span>
+										)}
+									</li>
+								))}
+							</ul>
+						</ScrollArea>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</motion.div>
+	);
+};
+
+export default FeatureCard;
diff --git a/apps/web/src/app/(home)/_components/code-container.tsx b/apps/web/src/app/(home)/_components/code-container.tsx
index 1c9f98d..ef26ff2 100644
--- a/apps/web/src/app/(home)/_components/code-container.tsx
+++ b/apps/web/src/app/(home)/_components/code-container.tsx
@@ -2,34 +2,12 @@
 import { cn } from "@/lib/utils";
 import { Check, ClipboardCopy } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import PackageIcon from "./icons";
 
 const CodeContainer = () => {
 	const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun");
 	const [copied, setCopied] = useState(false);
-	const [, setShowCursor] = useState(true);
-	const [step, setStep] = useState(0);
-
-	useEffect(() => {
-		const interval = setInterval(() => setShowCursor((p) => !p), 500);
-		return () => clearInterval(interval);
-	}, []);
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	useEffect(() => {
-		setStep(0);
-		const initialTimer = setTimeout(() => setStep(1), 1000);
-
-		return () => clearTimeout(initialTimer);
-	}, [selectedPM]);
-
-	useEffect(() => {
-		if (step > 0 && step < 5) {
-			const timer = setTimeout(() => setStep((s) => s + 1), 400);
-			return () => clearTimeout(timer);
-		}
-	}, [step]);
 
 	const commands = {
 		npm: "npx create-better-t-stack@latest",
@@ -37,12 +15,6 @@ const CodeContainer = () => {
 		bun: "bun create better-t-stack@latest",
 	};
 
-	const runCommands = {
-		npm: "npm run dev",
-		pnpm: "pnpm dev",
-		bun: "bun dev",
-	};
-
 	const copyToClipboard = async () => {
 		if (copied) return;
 		await navigator.clipboard.writeText(commands[selectedPM]);
@@ -85,21 +57,6 @@ const CodeContainer = () => {
 						<code className="whitespace-pre text-foreground">
 							{commands[selectedPM]}
 						</code>
-						{step === 0 && (
-							<motion.span
-								key="cursor-command"
-								initial={{ opacity: 0 }}
-								animate={{ opacity: [0, 1, 1, 0] }}
-								transition={{
-									duration: 1,
-									repeat: Number.POSITIVE_INFINITY,
-									repeatDelay: 0,
-									ease: "linear",
-								}}
-								className="ml-0.5 inline-block h-4 w-2 flex-shrink-0 bg-foreground"
-								aria-hidden="true"
-							/>
-						)}
 					</div>
 
 					<div className="absolute top-3 right-3">
@@ -141,137 +98,6 @@ const CodeContainer = () => {
 						</motion.button>
 					</div>
 				</div>
-
-				<AnimatePresence>
-					{step > 0 && (
-						<motion.div
-							initial={{ height: 0, opacity: 0 }}
-							animate={{
-								height: "auto",
-								opacity: 1,
-								transition: {
-									height: { duration: 0.3 },
-									opacity: { duration: 0.2, delay: 0.1 },
-								},
-							}}
-							exit={{ height: 0, opacity: 0, transition: { duration: 0.2 } }}
-							className="overflow-hidden border-border border-t bg-background/70 px-4 pt-3 pb-4"
-						>
-							<div className="space-y-1 text-muted-foreground text-xs">
-								{step >= 1 && (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										transition={{ duration: 0.3 }}
-									>
-										Creating a new Better-T-Stack project...
-									</motion.div>
-								)}
-
-								{step >= 2 && (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										transition={{ duration: 0.3, delay: 0.1 }}
-										className="pt-1"
-									>
-										<div>
-											<span className="inline-block w-20">Project:</span>
-											<span className="text-foreground/90">my-app</span>
-										</div>
-										<div>
-											<span className="inline-block w-20">Frontend:</span>
-											<span className="text-foreground/90">React Web</span>
-										</div>
-										<div>
-											<span className="inline-block w-20">Backend:</span>
-											<span className="text-foreground/90">Hono</span>
-										</div>
-										<div>
-											<span className="inline-block w-20">Database:</span>
-											<span className="text-foreground/90">
-												SQLite + Drizzle
-											</span>
-										</div>
-									</motion.div>
-								)}
-
-								{step >= 3 && (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										transition={{ duration: 0.3, delay: 0.2 }}
-										className="flex items-center gap-1.5 pt-1"
-									>
-										<Check className="size-3 flex-shrink-0 text-green-500" />
-										<span>Creating project structure</span>
-									</motion.div>
-								)}
-
-								{step >= 4 && (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										transition={{ duration: 0.3, delay: 0.3 }}
-										className="flex items-center gap-1.5"
-									>
-										<Check className="size-3 flex-shrink-0 text-green-500" />
-										<span>Installing dependencies</span>
-									</motion.div>
-								)}
-
-								{step >= 5 && (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										transition={{ duration: 0.3, delay: 0.4 }}
-										className="!mt-3 border-green-500 border-l-2 bg-muted/50 py-2 pl-3"
-									>
-										<span className="block font-medium text-foreground">
-											{" "}
-											Project created successfully! Run:
-										</span>
-										<div className="mt-1 flex flex-wrap items-center gap-1.5">
-											<code className="rounded bg-secondary px-1.5 py-0.5 text-secondary-foreground">
-												cd my-app
-											</code>
-											<span className="text-muted-foreground">&amp;&amp;</span>
-											<code className="rounded bg-secondary px-1.5 py-0.5 text-secondary-foreground">
-												{runCommands[selectedPM]}
-											</code>
-										</div>
-									</motion.div>
-								)}
-
-								{step >= 5 && (
-									<motion.div
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										transition={{ duration: 0.3, delay: 0.5 }}
-										className="!mt-3 flex items-center gap-2"
-									>
-										<span className="select-none text-muted-foreground">$</span>
-										<motion.span
-											key="cursor-done"
-											initial={{ opacity: 0 }}
-											animate={{ opacity: [0, 1, 1, 0] }}
-											transition={{
-												duration: 1,
-												repeat: Number.POSITIVE_INFINITY,
-												repeatDelay: 0,
-												ease: "linear",
-											}}
-											className="inline-block h-3.5 w-2 flex-shrink-0 bg-foreground"
-											aria-hidden="true"
-										/>
-									</motion.div>
-								)}
-							</div>
-						</motion.div>
-					)}
-				</AnimatePresence>
-
-				<div className="border-border border-t bg-muted/50 px-4 py-2 text-muted-foreground text-xs" />
 			</div>
 		</div>
 	);
diff --git a/apps/web/src/app/(home)/_components/sponsors-section.tsx b/apps/web/src/app/(home)/_components/sponsors-section.tsx
index 0e2c66f..2f3b54b 100644
--- a/apps/web/src/app/(home)/_components/sponsors-section.tsx
+++ b/apps/web/src/app/(home)/_components/sponsors-section.tsx
@@ -26,12 +26,11 @@ 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-4xl text-foreground tracking-tight sm:text-5xl lg:text-6xl">
+				<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">
-					This project is proudly supported by these amazing organizations and
-					individuals.
+					Supported by amazing organizations and individuals.
 				</p>
 			</div>
 			{loadingSponsors ? (
@@ -49,7 +48,7 @@ export default function SponsorsSection() {
 						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-base text-primary shadow-md transition-all hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
+						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"
@@ -69,7 +68,7 @@ export default function SponsorsSection() {
 					</a>
 				</div>
 			) : (
-				<div className="fade-in-sponsors grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-8 xl:grid-cols-5">
+				<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,
@@ -84,24 +83,22 @@ export default function SponsorsSection() {
 								href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl}
 								target="_blank"
 								rel="noopener noreferrer"
-								className="group hover:-translate-y-1 relative flex flex-col items-center gap-3 rounded-xl border border-border bg-card p-6 shadow-md transition-all duration-300 ease-in-out hover:border-primary hover:shadow-xl"
+								className="group flex flex-col items-center gap-2 text-center transition-opacity hover:opacity-80"
 								title={title}
 							>
-								<div className="relative mb-2">
-									<Image
-										src={entry.sponsor.avatarUrl}
-										alt={entry.sponsor.name || entry.sponsor.login}
-										width={80}
-										height={80}
-										className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
-										unoptimized
-									/>
-								</div>
-								<span className="break-words text-center font-mono font-semibold text-foreground text-sm">
+								<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="rounded-full bg-primary/10 px-3 py-1 text-center font-medium text-primary text-xs">
+									<span className="text-muted-foreground text-xs group-hover:text-primary/80">
 										{entry.tierName}
 									</span>
 								)}
@@ -116,7 +113,7 @@ export default function SponsorsSection() {
 						href="https://github.com/sponsors/AmanVarshney01"
 						target="_blank"
 						rel="noopener noreferrer"
-						className="inline-flex items-center gap-3 rounded-xl border border-primary bg-transparent px-6 py-3 font-mono font-semibold text-lg text-primary shadow-md 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"
+						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>
diff --git a/apps/web/src/app/(home)/_components/stack-builder.tsx b/apps/web/src/app/(home)/_components/stack-builder.tsx
index c321e3d..affc0f5 100644
--- a/apps/web/src/app/(home)/_components/stack-builder.tsx
+++ b/apps/web/src/app/(home)/_components/stack-builder.tsx
@@ -16,7 +16,6 @@ import {
 	isStackDefault,
 } from "@/lib/constant";
 import { stackParsers, stackQueryStatesOptions } from "@/lib/stack-url-state";
-import type { Sponsor } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import {
 	Check,
@@ -38,6 +37,7 @@ import { useQueryStates } from "nuqs";
 import type React from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import SponsorsSection from "./sponsors-section";
 
 const validateProjectName = (name: string): string | undefined => {
 	const INVALID_CHARS = ["<", ">", ":", '"', "|", "?", "*"];
@@ -908,9 +908,6 @@ const StackBuilder = () => {
 	const [, setLastChanges] = useState<
 		Array<{ category: string; message: string }>
 	>([]);
-	const [sponsors, setSponsors] = useState<Sponsor[]>([]);
-	const [loadingSponsors, setLoadingSponsors] = useState(true);
-	const [sponsorError, setSponsorError] = useState<string | null>(null);
 
 	const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
 	const contentRef = useRef<HTMLDivElement>(null);
@@ -1437,22 +1434,6 @@ const StackBuilder = () => {
 		setProjectNameError(validateProjectName(stack.projectName || ""));
 	}, [stack.projectName]);
 
-	useEffect(() => {
-		fetch("https://sponsors.amanv.dev/sponsors.json")
-			.then((res) => {
-				if (!res.ok) throw new Error("Failed to fetch sponsors");
-				return res.json();
-			})
-			.then((data) => {
-				setSponsors(Array.isArray(data) ? data : []);
-				setLoadingSponsors(false);
-			})
-			.catch(() => {
-				setSponsorError("Could not load sponsors");
-				setLoadingSponsors(false);
-			});
-	}, []);
-
 	const handleTechSelect = (
 		category: keyof typeof TECH_OPTIONS,
 		techId: string,
@@ -1910,123 +1891,7 @@ const StackBuilder = () => {
 								);
 							})}
 							<div className="h-10" />
-							<section className="mt-12 mb-8">
-								<div className="mb-12 text-center">
-									<h2 className="font-bold font-mono text-4xl text-foreground tracking-tight sm:text-5xl lg:text-6xl">
-										<span className="text-primary">Our Sponsors</span>
-									</h2>
-									<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
-										This project is proudly supported by these amazing
-										organizations and individuals.
-									</p>
-								</div>
-								{loadingSponsors ? (
-									<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground">
-										Loading sponsors...
-									</div>
-								) : sponsorError ? (
-									<div className="flex items-center justify-center py-12 text-base text-destructive">
-										{sponsorError}
-									</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 bg-primary px-6 py-3 font-mono text-lg text-primary-foreground shadow-lg transition-all hover:bg-primary/90 hover:shadow-xl focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
-										>
-											<svg
-												className="h-6 w-6"
-												fill="none"
-												stroke="currentColor"
-												strokeWidth="2"
-												viewBox="0 0 24 24"
-											>
-												<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>
-									</div>
-								) : (
-									<div className="fade-in-sponsors grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-8 xl:grid-cols-5">
-										{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 hover:-translate-y-1 relative flex flex-col items-center gap-3 rounded-xl border border-border bg-card p-6 shadow-md transition-all duration-300 ease-in-out hover:border-primary hover:shadow-xl"
-													title={title}
-												>
-													<div className="relative mb-2">
-														<Image
-															src={entry.sponsor.avatarUrl}
-															alt={entry.sponsor.name || entry.sponsor.login}
-															width={80}
-															height={80}
-															className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
-															unoptimized
-														/>
-													</div>
-													<span className="break-words text-center font-mono font-semibold text-foreground text-sm">
-														{entry.sponsor.name || entry.sponsor.login}
-													</span>
-													{entry.tierName && (
-														<span className="rounded-full bg-primary/10 px-3 py-1 text-center font-medium text-primary text-xs">
-															{entry.tierName}
-														</span>
-													)}
-												</a>
-											);
-										})}
-									</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-3 rounded-xl border border-primary bg-transparent px-6 py-3 font-mono font-semibold text-lg text-primary shadow-md 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>
+							<SponsorsSection />
 						</main>
 					</ScrollArea>
 				</div>
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index d86bfa3..9b3509d 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -1,12 +1,12 @@
 "use client";
-import ShinyText from "@/app/(home)/_components/shiny-text";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { TECH_OPTIONS } from "@/lib/constant";
 import { motion } from "motion/react";
+import Link from "next/link";
+import FeatureCard from "./_components/FeatureCard";
 import CodeContainer from "./_components/code-container";
-import CustomizableSection from "./_components/customizable-section";
 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";
 
@@ -45,108 +45,100 @@ export default function HomePage() {
 		},
 	};
 
+	const frontendOptions = TECH_OPTIONS.webFrontend.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 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",
+	);
+
 	return (
 		<>
 			<Navbar />
-			<main className="flex min-h-screen flex-col items-center justify-start overflow-x-hidden bg-background px-0 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-32">
+			<main className="flex min-h-screen 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="relative z-10 mx-auto mb-16 max-w-5xl text-center sm:mb-20"
+					className="relative z-10 mx-auto mb-12 w-full max-w-6xl sm:mb-16"
 					initial="hidden"
 					animate="visible"
 					variants={containerVariants}
 				>
-					<div className="px-1 sm:px-6 lg:px-8">
-						<div className="flex flex-col items-center justify-center space-y-4 text-center sm:space-y-5">
+					<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-4xl xs:text-5xl tracking-tight sm:text-6xl md:text-7xl"
+								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="border-primary border-b-2 pb-1 text-foreground dark:text-primary">
-									Better-T Stack
+								<span className="text-foreground dark:text-primary">
+									Roll Your Own Stack
 								</span>
 							</motion.h1>
 
-							<motion.div className="mb-1 sm:mb-2" variants={itemVariants}>
-								<NpmPackage />
-							</motion.div>
-
 							<motion.p
-								className="max-w-2xl px-1 font-mono text-lg text-muted-foreground sm:text-xl"
+								className="mx-auto mt-6 max-w-xl font-mono text-lg text-muted-foreground sm:text-xl lg:mx-0"
 								variants={itemVariants}
 							>
 								A modern CLI tool for scaffolding end-to-end type-safe
 								TypeScript projects with best practices and customizable
-								configurations
+								configurations.
 							</motion.p>
 
 							<motion.div
-								className="mx-auto mt-2 w-full max-w-3xl sm:mt-3"
 								variants={itemVariants}
+								className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row lg:justify-start"
 							>
-								<CodeContainer />
-							</motion.div>
-
-							<motion.div variants={itemVariants}>
-								<ShinyText
+								<Link href="/new">
+									<Button
+										size="lg"
+										variant="default"
+										className="w-full font-mono sm:w-auto"
+									>
+										Go to Stack Builder
+									</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>
-						</div>
-					</div>
-				</motion.div>
+						</motion.div>
 
-				<motion.div
-					className="w-full"
-					initial="hidden"
-					whileInView="visible"
-					viewport={{ once: true, amount: 0.2 }}
-					variants={sectionVariants}
-				>
-					<CustomizableSection />
-				</motion.div>
-
-				<motion.div
-					className="relative w-full pt-10 sm:pt-16"
-					initial="hidden"
-					whileInView="visible"
-					viewport={{ once: true, amount: 0.5 }}
-					variants={sectionVariants}
-				>
-					<div className="relative mx-auto max-w-5xl">
-						<div className="flex items-center justify-center">
-							<div className="hidden w-1/3 items-center sm:flex">
-								<div className="h-px flex-grow bg-gradient-to-r from-transparent via-primary/30 to-primary/50" />
-								<div className="h-2 w-2 rounded-full bg-primary/60" />
+						<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={frontendOptions} />
+								<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>
-							<div className="px-4 sm:px-6">
-								<div
-									className={cn(
-										"flex h-8 w-8 items-center justify-center rounded-full border border-primary/80 bg-card sm:h-9 sm:w-9",
-									)}
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										className="h-4 w-4 text-primary sm:h-5 sm:w-5"
-										viewBox="0 0 20 20"
-										fill="currentColor"
-									>
-										<title>Code Icon</title>
-										<path
-											fillRule="evenodd"
-											d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
-											clipRule="evenodd"
-										/>
-									</svg>
-								</div>
-							</div>
-							<div className="hidden w-1/3 items-center sm:flex">
-								<div className="h-2 w-2 rounded-full bg-primary/60" />
-								<div className="h-px flex-grow bg-gradient-to-l from-transparent via-primary/30 to-primary/50" />
-							</div>
-						</div>
-						<div className="mt-6 h-px w-full bg-gradient-to-r from-transparent via-primary/30 to-transparent sm:hidden" />
+						</motion.div>
 					</div>
 				</motion.div>
 
diff --git a/apps/web/src/app/global.css b/apps/web/src/app/global.css
index 1453c3c..3de5ca4 100644
--- a/apps/web/src/app/global.css
+++ b/apps/web/src/app/global.css
@@ -11,7 +11,7 @@
 
 .react-tweet-theme {
 	--tweet-container-margin: 0 !important;
-	@apply !bg-background !border-none !h-full !border-transparent;
+	@apply !bg-background !border-none !h-full !border-transparent !w-full;
 }
 
 .shiny-text {
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..cb18d26
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };
diff --git a/bun.lock b/bun.lock
index dd6cb85..c2d767a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -44,6 +44,7 @@
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.13",
         "@radix-ui/react-scroll-area": "^1.2.8",
+        "@radix-ui/react-slot": "^1.2.2",
         "@radix-ui/react-switch": "^1.2.4",
         "@radix-ui/react-tooltip": "^1.2.6",
         "babel-plugin-react-compiler": "^19.1.0-rc.1",