add new stack builder page

apps/web/src/app/(home)/_components/Navbar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Github, Menu, X } from "lucide-react";
+import { Github, Maximize2, Menu, X } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import PackageIcon from "./Icons";
@@ -47,10 +47,10 @@ const Navbar = () => {
 	return (
 		<>
 			<nav
-				className={`z-[100] flex w-screen items-center justify-between px-4 py-4 transition-all duration-300 sm:px-8 ${
+				className={`fixed top-0 z-[100] flex w-full items-center justify-between px-4 py-4 transition-all duration-300 sm:px-8 ${
 					scrolled
-						? "border-transparent bg-transparent"
-						: "border-gray-200 border-b bg-gray-50/80 backdrop-blur-xl dark:border-gray-800/50 dark:bg-gray-950/80"
+						? "bg-transparent"
+						: "bg-gray-50/80 backdrop-blur-xl dark:bg-gray-950/80"
 				}`}
 			>
 				<div
@@ -138,10 +138,17 @@ const Navbar = () => {
 				</div>
 
 				<div
-					className={`hidden justify-end transition-opacity duration-300 md:flex ${
+					className={`hidden justify-end gap-2 transition-opacity duration-300 md:flex ${
 						scrolled ? "pointer-events-none opacity-0" : "opacity-100"
 					}`}
 				>
+					<Link
+						href="/new"
+						className="inline-flex items-center rounded-lg border border-blue-300 bg-blue-100/90 px-4 py-1 font-mono text-blue-700 text-sm backdrop-blur-sm transition-colors hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900/90 dark:text-blue-300 dark:hover:bg-blue-800/50"
+					>
+						<Maximize2 className="mr-2 size-4" />
+						Stack Builder
+					</Link>
 					<Link
 						href="https://www.github.com/better-t-stack/create-better-t-stack"
 						target="_blank"
@@ -169,7 +176,6 @@ const Navbar = () => {
 				</button>
 			</nav>
 
-			{/* Mobile Menu - Terminal Style */}
 			<div
 				className={`fixed inset-0 z-[99] pt-16 backdrop-blur-md transition-all duration-300 ease-in-out md:hidden ${
 					mobileMenuOpen
@@ -178,7 +184,6 @@ const Navbar = () => {
 				}`}
 			>
 				<div className="mx-4 mt-4 overflow-hidden rounded-lg border border-gray-300 bg-gray-100/95 shadow-lg dark:border-gray-700 dark:bg-gray-900/95">
-					{/* Terminal Header */}
 					<div className="flex items-center bg-gray-200 px-4 py-2 dark:bg-gray-800">
 						<div className="mr-4 flex space-x-2">
 							<div className="h-3 w-3 rounded-full bg-red-500" />
@@ -190,7 +195,6 @@ const Navbar = () => {
 						</div>
 					</div>
 
-					{/* Terminal Body */}
 					<div className="p-4 font-mono text-sm">
 						<div className="pb-3">
 							<span className="text-green-600 dark:text-green-500">

apps/web/src/app/(home)/_components/StackArchitech.tsx

@@ -14,11 +14,13 @@ import {
 	ClipboardCopy,
 	HelpCircle,
 	InfoIcon,
+	Maximize2,
 	RefreshCw,
 	Settings,
 	Star,
 	Terminal,
 } from "lucide-react";
+import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 
 const validateProjectName = (name: string): string | undefined => {
@@ -46,7 +48,11 @@ const validateProjectName = (name: string): string | undefined => {
 	return undefined;
 };
 
-const StackArchitect = () => {
+const StackArchitect = ({
+	fullscreen = false,
+}: {
+	fullscreen?: boolean;
+}) => {
 	const [stack, setStack] = useState<StackState>(DEFAULT_STACK);
 	const [command, setCommand] = useState(
 		"npx create-better-t-stack@latest my-better-t-app --yes",
@@ -520,7 +526,7 @@ const StackArchitect = () => {
 	}, []);
 
 	return (
-		<div className="mx-auto w-full">
+		<div className={`mx-auto w-full ${fullscreen ? "max-w-none" : ""}`}>
 			<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-white">
 				<div className="flex items-center justify-between bg-gray-200 px-2 py-2 sm:px-4 dark:bg-gray-800">
 					<div className="flex space-x-2">
@@ -548,6 +554,13 @@ const StackArchitect = () => {
 						>
 							<Star className="h-4 w-4" />
 						</button>
+						<Link
+							href={fullscreen ? "/" : "/new"}
+							className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
+							title={fullscreen ? "Exit Fullscreen" : "Open Fullscreen"}
+						>
+							<Maximize2 className="h-4 w-4" />
+						</Link>
 						<button
 							type="button"
 							onClick={copyToClipboard}
@@ -704,7 +717,7 @@ const StackArchitect = () => {
 							</span>
 						</div>
 
-						<div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
+						<div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
 							{TECH_OPTIONS[activeTab as keyof typeof TECH_OPTIONS].map(
 								(tech) => {
 									let isSelected = false;