fix styling move navbar from root & fix bugs

Author: FgrReloaded

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

@@ -18,7 +18,7 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
 
 	return (
 		<div className="relative group">
-			<div className="bg-gray-950/90 border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
+			<div className="bg-gray-950/20 backdrop-blur-xl border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
 				<button
 					type="button"
 					onClick={copyToClipboard}

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

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

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

@@ -18,8 +18,6 @@ const TerminalDisplay = () => {
 ║      ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗   ║
 ║      ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝   ║
 ║                                                            ║
-║              The Modern Full-Stack Framework               ║
-║                                                            ║
 ╚════════════════════════════════════════════════════════════╝
   `;
 

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

@@ -2,12 +2,18 @@ import { baseOptions } from "@/app/layout.config";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import Navbar from "./_components/Navbar";
 
 export const metadata: Metadata = {
 	title: "Better-T-Stack",
 	description: "Unleash the power of better-t-stack",
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
-	return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+	return (
+		<HomeLayout {...baseOptions}>
+			<Navbar />
+			{children}
+		</HomeLayout>
+	);
 }

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

@@ -20,7 +20,7 @@ const poppins = Poppins({
 export default function HomePage() {
 	return (
 		<main
-			className="min-h-screen flex flex-col items-center justify-start p-8"
+			className="min-h-screen flex flex-col items-center justify-start p-8 pt-20"
 			style={poppins.style}
 		>
 			<BackgroundGradients />

apps/web/src/app/layout.tsx

@@ -1,8 +1,7 @@
 import "./global.css";
 import { RootProvider } from "fumadocs-ui/provider";
 import { Poppins } from "next/font/google";
-import { type ReactNode, Suspense } from "react";
-import Navbar from "./(home)/_components/Navbar";
+import type { ReactNode } from "react";
 
 const poppins = Poppins({
 	subsets: ["latin"],
@@ -20,20 +19,11 @@ export default function Layout({ children }: { children: ReactNode }) {
 						},
 					}}
 				>
-					<Navbar />
-					<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 pt-20 transition-colors duration-300  overflow-hidden">
-						<Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
+					<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 transition-colors duration-300  overflow-hidden">
+						{children}
 					</div>
 				</RootProvider>
 			</body>
 		</html>
 	);
 }
-
-function LoadingSpinner() {
-	return (
-		<div className="flex items-center justify-center min-h-[200px]">
-			<div className="w-8 h-8 border-4 border-zinc-300 border-t-zinc-800 rounded-full animate-spin" />
-		</div>
-	);
-}