refactor(web): organize stack builder

apps/web/src/app/(home)/_components/customizable-section.tsx

@@ -1,46 +0,0 @@
-import { motion } from "motion/react";
-import StackBuilder from "./stack-builder";
-
-export default function CustomizableSection() {
-	return (
-		<section className="relative z-10 mx-auto mt-20 w-full space-y-16 px-4 sm:px-6">
-			<div className="relative space-y-8 text-center">
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true, margin: "-100px" }}
-					transition={{ duration: 0.5 }}
-					className="relative"
-				>
-					<h2 className="font-bold text-2xl tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
-						<span className="border-primary border-b-2 pb-1 text-foreground dark:text-primary">
-							Roll Your Own Stack
-						</span>
-					</h2>
-				</motion.div>
-
-				<motion.div
-					initial={{ opacity: 0, y: 15 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true, margin: "-100px" }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-					className="mx-auto max-w-3xl space-y-6"
-				>
-					<p className="text-lg text-muted-foreground leading-relaxed sm:text-xl">
-						Build your perfect TypeScript stack.
-					</p>
-				</motion.div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				whileInView={{ opacity: 1, y: 0 }}
-				viewport={{ once: true, margin: "-50px" }}
-				transition={{ duration: 0.6, delay: 0.2 }}
-				className="relative border"
-			>
-				<StackBuilder />
-			</motion.div>
-		</section>
-	);
-}

apps/web/src/app/(home)/new/layout.tsx

@@ -1,30 +0,0 @@
-import type { Metadata } from "next";
-import type { ReactNode } from "react";
-
-export const metadata: Metadata = {
-	title: "Stack Builder - Better-T-Stack",
-	description: "Interactive Ui to roll your own stack",
-	openGraph: {
-		title: "Stack Builder - Better-T-Stack",
-		description: "Interactive Ui to roll your own stack",
-		url: "https://better-t-stack.dev/new",
-		images: [
-			{
-				url: "https://r2.better-t-stack.dev/og.png",
-				width: 1200,
-				height: 630,
-				alt: "Better-T-Stack Stack Builder",
-			},
-		],
-	},
-	twitter: {
-		card: "summary_large_image",
-		title: "Stack Builder - Better-T-Stack",
-		description: "Interactive Ui to roll your own stack",
-		images: ["https://r2.better-t-stack.dev/og.png"],
-	},
-};
-
-export default function NewLayout({ children }: { children: ReactNode }) {
-	return children;
-}

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

@@ -1,9 +1,37 @@
-import StackBuilder from "../_components/stack-builder";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import StackBuilder from "./_components/stack-builder";
+
+export const metadata: Metadata = {
+	title: "Stack Builder - Better-T-Stack",
+	description: "Interactive Ui to roll your own stack",
+	openGraph: {
+		title: "Stack Builder - Better-T-Stack",
+		description: "Interactive Ui to roll your own stack",
+		url: "https://better-t-stack.dev/new",
+		images: [
+			{
+				url: "https://r2.better-t-stack.dev/og.png",
+				width: 1200,
+				height: 630,
+				alt: "Better-T-Stack Stack Builder",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "Stack Builder - Better-T-Stack",
+		description: "Interactive Ui to roll your own stack",
+		images: ["https://r2.better-t-stack.dev/og.png"],
+	},
+};
 
 export default function FullScreenStackBuilder() {
 	return (
-		<div className="grid h-[calc(100vh-64px)] w-full flex-1 grid-cols-1 overflow-hidden">
+		<Suspense>
-			<StackBuilder />
+			<div className="grid h-[calc(100vh-64px)] w-full flex-1 grid-cols-1 overflow-hidden">
-		</div>
+				<StackBuilder />
+			</div>
+		</Suspense>
 	);
 }