Fixed Navbar bug

Author: ClaudioGSDB

src/app/client-layout.tsx

@@ -18,12 +18,12 @@ export default function ClientLayout({
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen bg-gray-100">
+      <div className="min-h-screen">
         {user && (
           <Sidebar isCollapsed={isCollapsed} onCollapse={setIsCollapsed} />
         )}
         <div
-          className={`min-h-screen transition-all duration-300 ${
+          className={`transition-all duration-300 ${
             user ? (isCollapsed ? "lg:ml-16" : "lg:ml-48") : ""
           }`}
         >

src/app/events/page.tsx

@@ -1,16 +1,17 @@
-//Events page.tsx
 "use client";
 import Calendar from "@/components/client-events/Calendar";
 import MonthlyEvents from "@/components/client-events/MonthlyEvents";
 
 export default function Events() {
   return (
-    <section id="events" className="in-h-screen pt-20">
+    <>
       <div className="bg" />
-      <div className="relative mx-auto max-w-7xl px-10 text-white">
-        <MonthlyEvents />
-        <Calendar />
-      </div>
-    </section>
+      <section className="relative min-h-screen">
+        <div className="mx-auto max-w-7xl px-10 py-8 text-white">
+          <MonthlyEvents />
+          <Calendar />
+        </div>
+      </section>
+    </>
   );
 }

src/app/globals.css

@@ -22,5 +22,5 @@ body {
   background: linear-gradient(60deg, #000000, #3c4175);
   inset: 0;
   position: fixed;
-  z-index: 0;
+  z-index: -1;
 }

src/app/page.tsx

@@ -47,7 +47,7 @@ const Website = () => {
         {/* Hero Content */}
         <div className="flex min-h-screen items-center px-4">
           {/* Content Container with Grid */}
-          <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-8 pt-20 md:grid-cols-2">
+          <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-8 md:grid-cols-2">
             {/* Logo Section */}
             <div className="relative flex items-center justify-center">
               {/* Outer Glow */}

src/components/Navbar/PublicNavbar.tsx

@@ -15,7 +15,7 @@ export default function Navbar() {
         @import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
       `}</style>
 
-      <nav className="fixed left-0 right-0 top-0 z-50 bg-black">
+      <nav className="z-50 bg-black">
         {/* Main navbar */}
         <div className="mx-auto px-12">
           <div className="flex h-20 items-center justify-between">
@@ -113,7 +113,7 @@ export default function Navbar() {
         </div>
 
         {/* Red and blue lines at bottom */}
-        <div className="absolute bottom-0 left-0 right-0">
+        <div className="relative">
           <div className="h-[4px] w-full bg-orange-600"></div>
         </div>
       </nav>