From 2c3300ea042f4e3cb6da4ca4736cc2363d31b300 Mon Sep 17 00:00:00 2001
From: fgrreloaded <nk.nitish.nk500@gmail.com>
Date: Sat, 1 Mar 2025 22:09:26 +0530
Subject: [PATCH] redesigned the code container box

---
 .../app/(home)/_components/CodeContainer.tsx  | 216 ++++++++++++++----
 apps/web/src/app/(home)/page.tsx              |   8 +-
 2 files changed, 174 insertions(+), 50 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx
index 9e3cce9..0817bb7 100644
--- a/apps/web/src/app/(home)/_components/CodeContainer.tsx
+++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx
@@ -1,8 +1,5 @@
 "use client";
-
-import { ChevronRight } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import PackageIcon from "./Icons";
 
 const CodeContainer = () => {
 	const [isOpen, setIsOpen] = useState(false);
@@ -11,6 +8,8 @@ const CodeContainer = () => {
 	);
 	const [copied, setCopied] = useState(false);
 	const menuRef = useRef<HTMLDivElement>(null);
+	const [typingComplete, setTypingComplete] = useState(false);
+	const [currentStep, setCurrentStep] = useState(0);
 
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
@@ -25,8 +24,8 @@ const CodeContainer = () => {
 
 	const commands = {
 		npm: "npx create-better-t-stack@latest",
-		yarn: "yarn dlx create better-t-stack",
-		pnpm: "pnpm dlx create better-t-stack",
+		yarn: "yarn dlx create-better-t-stack",
+		pnpm: "pnpm dlx create-better-t-stack",
 		bun: "bunx create-better-t-stack",
 	};
 
@@ -38,53 +37,178 @@ const CodeContainer = () => {
 		setTimeout(() => setCopied(false), 2000);
 	};
 
+	useEffect(() => {
+		if (!typingComplete) {
+			const timer = setTimeout(() => {
+				setTypingComplete(true);
+			}, 1000);
+			return () => clearTimeout(timer);
+		}
+
+		if (typingComplete && currentStep < 5) {
+			const timer = setTimeout(() => {
+				setCurrentStep((prev) => prev + 1);
+			}, 800);
+			return () => clearTimeout(timer);
+		}
+	}, [typingComplete, currentStep]);
+
 	return (
-		<div className="w-full max-w-3xl mx-auto mt-12">
-			<div className="relative group">
-				<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200" />
-				<div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
-					<div className="sm:p-4 p-2 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							<ChevronRight />
-							<span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400">
-								{commands[selectedPM]}
+		<div className="w-full max-w-3xl mx-auto mt-8">
+			<div className="rounded-md bg-gray-950/50 backdrop-blur-3xl border border-blue-500/30 overflow-hidden">
+				<div className="flex items-center justify-between bg-blue-900/10 px-4 py-2 border-b border-blue-800/30">
+					<div className="flex items-center">
+						<div className="flex space-x-2">
+							<div className="w-3 h-3 rounded-full bg-red-500/60" />
+							<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
+							<div className="w-3 h-3 rounded-full bg-green-500/60" />
+						</div>
+						<div className="ml-4 text-sm text-blue-300 font-mono">terminal</div>
+					</div>
+
+					{/* Package Manager Selector */}
+					<div className="relative" ref={menuRef}>
+						<button
+							type="button"
+							onClick={() => setIsOpen(!isOpen)}
+							className="flex items-center px-2 py-1 text-sm bg-black/50 rounded border border-blue-500/30 hover:bg-blue-900/20"
+						>
+							<span className="text-blue-400 mr-2">{selectedPM}</span>
+							<svg
+								className="w-4 h-4 text-blue-400"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<title>Toggle Dropdown</title>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d={isOpen ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}
+								/>
+							</svg>
+						</button>
+
+						{isOpen && (
+							<div className="absolute right-0 mt-2 w-36 bg-black border border-blue-500/30 rounded-md shadow-lg z-50">
+								<ul>
+									{(
+										Object.keys(commands) as Array<
+											"npm" | "yarn" | "pnpm" | "bun"
+										>
+									).map((pm) => (
+										<li key={pm}>
+											<button
+												type="button"
+												className={`block w-full text-left px-4 py-2 text-sm ${
+													selectedPM === pm
+														? "bg-blue-900/30 text-blue-400"
+														: "text-gray-300 hover:bg-blue-900/20"
+												}`}
+												onClick={() => copyToClipboard(pm)}
+											>
+												{pm}
+											</button>
+										</li>
+									))}
+								</ul>
+							</div>
+						)}
+					</div>
+				</div>
+
+				<div className="p-4 font-mono text-sm">
+					<div className="flex items-center">
+						<div className="flex-grow">
+							<span className="text-blue-500 mr-2">$</span>
+							<span className="text-white">{commands[selectedPM]}</span>
+							<span
+								className={
+									typingComplete ? "hidden" : "text-blue-500 animate-pulse ml-1"
+								}
+							>
+								▌
 							</span>
 						</div>
-						<div className="relative" ref={menuRef}>
-							<button
-								type="button"
-								onClick={() => setIsOpen(!isOpen)}
-								className="flex items-center space-x-2 px-3 py-2 w-10 justify-center rounded-md cursor-pointer hover:bg-white/10 transition-colors text-gray-300 hover:text-white relative"
-							>
-								{copied ? (
-									<span className="flex items-center space-x-2">
-										<CheckIcon className="w-5 h-5" />
-									</span>
-								) : (
-									<span className="flex items-center space-x-2">
-										<CopyIcon className="w-5 h-5" />
-									</span>
+						<button
+							type="button"
+							onClick={() => copyToClipboard(selectedPM)}
+							className="text-blue-400 hover:text-blue-300"
+							title="Copy to clipboard"
+						>
+							{copied ? (
+								<CheckIcon className="w-5 h-5" />
+							) : (
+								<CopyIcon className="w-5 h-5" />
+							)}
+						</button>
+					</div>
+
+					{typingComplete && (
+						<>
+							<div className="mt-2 pl-4 text-yellow-400">
+								{currentStep >= 1 && (
+									<p
+										className={`transition-opacity duration-300 ${
+											currentStep >= 1 ? "opacity-100" : "opacity-0"
+										}`}
+									>
+										Creating a new Better-T-Stack project
+									</p>
 								)}
-							</button>
-							{isOpen && (
-								<div className="absolute right-6 top-8 mt-2 w-24 rounded-lg backdrop-blur-lg bg-violet-950/10 shadow-xl ring-1 ring-white/10 divide-y divide-gray-700/30 transition-all duration-200">
-									{(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => (
-										<button
-											type="button"
-											key={pm}
-											onClick={() => copyToClipboard(pm)}
-											className="group cursor-pointer flex items-center w-full px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 first:rounded-t-lg last:rounded-b-lg"
-										>
-											<PackageIcon
-												className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform"
-												pm={pm}
-											/>{" "}
-											{pm}
-										</button>
-									))}
+								{currentStep >= 2 && (
+									<div className="mt-2">
+										<p className="text-white">
+											Project name:{" "}
+											<span className="text-yellow-400">my-t-stack</span>
+										</p>
+										<p className="text-white">
+											Database:{" "}
+											<span className="text-yellow-400">postgres</span>
+										</p>
+										<p className="text-white">
+											ORM: <span className="text-yellow-400">drizzle</span>
+										</p>
+										<p className="text-white">
+											Authentication:{" "}
+											<span className="text-yellow-400">yes</span>
+										</p>
+										<p className="text-white">
+											Features:{" "}
+											<span className="text-yellow-400">
+												docker, github-actions, SEO
+											</span>
+										</p>
+									</div>
+								)}
+							</div>
+
+							{currentStep >= 3 && (
+								<div className="mt-3 pl-4">
+									<p className="text-blue-400">✓ Creating project structure</p>
+									{currentStep >= 4 && (
+										<p className="text-blue-400">✓ Installing dependencies</p>
+									)}
+									{currentStep >= 5 && (
+										<>
+											<p className="text-blue-400">✓ Setting up database</p>
+											<p className="text-blue-400">
+												✓ Configuring authentication
+											</p>
+											<p className="text-white mt-2">
+												Project ready! Happy coding!
+											</p>
+										</>
+									)}
 								</div>
 							)}
-						</div>
+						</>
+					)}
+
+					<div className={`flex mt-4 ${typingComplete ? "" : "hidden"}`}>
+						<span className="text-blue-500 mr-2">$</span>
+						<span className="text-blue-500 animate-pulse">▌</span>
 					</div>
 				</div>
 			</div>
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 196335e..9518dce 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -15,11 +15,11 @@ export default function HomePage() {
 				<div className="relative z-10">
 					<div className="flex flex-col items-center justify-center space-y-4 text-center">
 						<h1 className="text-6xl font-extrabold text-white">
-							<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
+							<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
 								Better-T Stack
 							</span>
 							<span className="relative">
-								<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 via-pink-500 to-rose-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
+								<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
 							</span>
 						</h1>
 						<NpmPackage />
@@ -28,7 +28,7 @@ export default function HomePage() {
 							<span className="inline-block transform hover:scale-105 transition-transform duration-200">
 								Scaffold
 							</span>{" "}
-							<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">
+							<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">
 								production-ready
 							</span>{" "}
 							<span className="inline-block transition-transform duration-200">
@@ -44,7 +44,7 @@ export default function HomePage() {
 					</div>
 				</div>
 				<div className="absolute inset-0 -z-10">
-					<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20 blur-3xl transform -skew-y-12" />
+					<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 blur-3xl transform -skew-y-12" />
 				</div>
 			</div>
 			<TerminalDisplay />