From 6d03d6b97e7917c4133aec40445ecc9e5ec1e70f Mon Sep 17 00:00:00 2001
From: fgrreloaded <nk.nitish.nk500@gmail.com>
Date: Mon, 17 Feb 2025 22:47:45 +0530
Subject: [PATCH] fix styling move navbar from root & fix bugs

---
 .../app/(home)/_components/CommandDisplay.tsx    |  2 +-
 apps/web/src/app/(home)/_components/Navbar.tsx   |  2 +-
 apps/web/src/app/(home)/_components/Terminal.tsx |  2 --
 apps/web/src/app/(home)/layout.tsx               |  8 +++++++-
 apps/web/src/app/(home)/page.tsx                 |  2 +-
 apps/web/src/app/layout.tsx                      | 16 +++-------------
 6 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/CommandDisplay.tsx b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
index 6ec4686..44536be 100644
--- a/apps/web/src/app/(home)/_components/CommandDisplay.tsx
+++ b/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}
diff --git a/apps/web/src/app/(home)/_components/Navbar.tsx b/apps/web/src/app/(home)/_components/Navbar.tsx
index d658e96..f7918cb 100644
--- a/apps/web/src/app/(home)/_components/Navbar.tsx
+++ b/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"
diff --git a/apps/web/src/app/(home)/_components/Terminal.tsx b/apps/web/src/app/(home)/_components/Terminal.tsx
index 431cc97..a270ba5 100644
--- a/apps/web/src/app/(home)/_components/Terminal.tsx
+++ b/apps/web/src/app/(home)/_components/Terminal.tsx
@@ -18,8 +18,6 @@ const TerminalDisplay = () => {
 ║      ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗   ║
 ║      ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝   ║
 ║                                                            ║
-║              The Modern Full-Stack Framework               ║
-║                                                            ║
 ╚════════════════════════════════════════════════════════════╝
   `;
 
diff --git a/apps/web/src/app/(home)/layout.tsx b/apps/web/src/app/(home)/layout.tsx
index 0e550b5..47859c9 100644
--- a/apps/web/src/app/(home)/layout.tsx
+++ b/apps/web/src/app/(home)/layout.tsx
@@ -2,6 +2,7 @@ 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",
@@ -9,5 +10,10 @@ export const metadata: Metadata = {
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
-	return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+	return (
+		<HomeLayout {...baseOptions}>
+			<Navbar />
+			{children}
+		</HomeLayout>
+	);
 }
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 0bb0141..a436426 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/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 />
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 5b3fe5a..1914440 100644
--- a/apps/web/src/app/layout.tsx
+++ b/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>
-	);
-}