some minor adjustments

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

@@ -304,10 +304,13 @@ const CustomizableStack = () => {
 					zoomOnPinch={false}
 					preventScrolling={false}
 					nodesConnectable={true}
-					nodesDraggable={false}
+					nodesDraggable={true}
 					connectOnClick={true}
 					deleteKeyCode="Delete"
 					selectionKeyCode="Shift"
+					proOptions={{
+						hideAttribution: true,
+					}}
 				>
 					<Background
 						className="bg-gray-950/5"

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

@@ -41,7 +41,7 @@ const Navbar = () => {
 
 	return (
 		<nav
-			className={`fixed top-0 left-0 z-[100] w-screen px-8 py-5 flex items-center sm:justify-between justify-center transition-all duration-300 ${
+			className={`fixed top-0 right-0 z-[100] w-screen px-8 py-5 flex items-center sm:justify-between justify-center transition-all duration-300 ${
 				scrolled
 					? "bg-transparent border-transparent"
 					: "sm:bg-black/10 sm:backdrop-blur-xl sm:border-b border-white/10"

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

@@ -77,6 +77,22 @@ const TechConstellation = () => {
 	const centerRef = useRef<HTMLDivElement>(null);
 	const techRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
 	const [isVisible, setIsVisible] = useState(false);
+	const [stars, setStars] = useState<
+		Array<{
+			left: string;
+			top: string;
+			delay: string;
+		}>
+	>([]);
+
+	useEffect(() => {
+		const newStars = Array.from({ length: 20 }, () => ({
+			left: `${Math.random() * 100}%`,
+			top: `${Math.random() * 100}%`,
+			delay: `${Math.random() * 5}s`,
+		}));
+		setStars(newStars);
+	}, []);
 
 	const calculateRadius = (category: string) => {
 		switch (category) {
@@ -210,15 +226,14 @@ const TechConstellation = () => {
 			)}
 
 			<div className="absolute inset-0 overflow-hidden">
-				{[...Array(20)].map((_, i) => (
+				{stars.map((star) => (
 					<div
-						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+						key={star.top}
-						key={`star-${i}`}
 						className="absolute w-2 h-2 bg-blue-500 rounded-full opacity-20"
 						style={{
-							left: `${Math.random() * 100}%`,
+							left: star.left,
-							top: `${Math.random() * 100}%`,
+							top: star.top,
-							animationDelay: `${Math.random() * 5}s`,
+							animationDelay: star.delay,
 						}}
 					/>
 				))}

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

@@ -1,5 +1,3 @@
-import { baseOptions } from "@/app/layout.config";
-import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import Footer from "./_components/Footer";
@@ -12,10 +10,10 @@ export const metadata: Metadata = {
 
 export default function Layout({ children }: { children: ReactNode }) {
 	return (
-		<HomeLayout {...baseOptions}>
+		<main className="relative z-10 min-h-svh bg-zinc-50 dark:bg-zinc-950 transition-colors duration-300 overflow-hidden">
 			<Navbar />
 			{children}
 			<Footer />
-		</HomeLayout>
+		</main>
 	);
 }

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

@@ -1,6 +1,5 @@
 "use client";
 import ShinyText from "components/ShinyText/ShinyText";
-import { Poppins } from "next/font/google";
 import React from "react";
 import BackgroundGradients from "./_components/BackgroundGradients";
 import CodeContainer from "./_components/CodeContainer";
@@ -12,17 +11,9 @@ import TechConstellation from "./_components/TechConstellation";
 import TerminalDisplay from "./_components/Terminal";
 import Testimonials from "./_components/Testimonials";
 
-const poppins = Poppins({
-	subsets: ["latin"],
-	weight: ["400", "500", "600", "700"],
-});
-
 export default function HomePage() {
 	return (
-		<main
+		<main className="flex flex-col items-center justify-start sm:p-8 p-4 !pt-40">
-			className="min-h-screen flex flex-col items-center justify-start sm:p-8 p-4 !pt-20"
-			style={poppins.style}
-		>
 			<BackgroundGradients />
 			<Spotlight />
 			<SideCircles />

apps/web/src/app/layout.tsx

@@ -11,7 +11,7 @@ const poppins = Poppins({
 export default function Layout({ children }: { children: ReactNode }) {
 	return (
 		<html lang="en" className={poppins.className} suppressHydrationWarning>
-			<body className="flex flex-col min-h-screen relative bg-black">
+			<body>
 				<RootProvider
 					search={{
 						options: {
@@ -19,9 +19,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 						},
 					}}
 				>
-					<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 transition-colors duration-300  overflow-hidden">
+					{children}
-						{children}
-					</div>
 				</RootProvider>
 			</body>
 		</html>

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "0.7.4",
+      "version": "0.7.5",
       "bin": {
         "create-better-t-stack": "dist/index.js"
       },