Updated navbar to sticky with frosted glass background

Author: TR-04

frontend/src/components/Landing/index.tsx

@@ -4,10 +4,10 @@ import Navbar from '@/components/Navbar';
 const Landing = () => {
   return (
     <section
-      className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden"
+      className="flex flex-col min-h-screen justify-end py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden"
       id="landing"
     >
-      <Navbar />
+      
       <Background />
       <div className="flex justify-between items-end">
         <div>

frontend/src/components/Layout.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative">
       <Navbar />
       {children}
       <Footer />

frontend/src/components/Navbar.tsx

@@ -12,7 +12,7 @@ const Navbar = () => {
   }, []);
 
   return (
-    <nav className="flex justify-between items-center relative z-10">
+    <nav className="sticky top-10 flex justify-between items-center relative z-10 shadow-lg rounded-md bg-white/15 backdrop-blur-md px-6 py-6">
       <Link href="/">
         <Image
           src="/assets/csesoc_logo.svg"

frontend/src/pages/404.tsx

@@ -3,7 +3,7 @@ import Navbar from '@/components/Navbar';
 
 export default function Custom404() {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative">
       <div className="items-center text-center">
         <Navbar />
         <h1 className="text-5xl font-bold pt-24">404 - Page Not Found</h1>

frontend/src/pages/events.tsx

@@ -5,7 +5,7 @@ import Events from '@/components/Event';
 
 export default function EventsPage() {
   return (
-    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative">
       <Navbar />
       <Events/>
       <Footer />

frontend/src/pages/index.tsx

@@ -1,15 +1,17 @@
+import Navbar from '@/components/Navbar';
 import Landing from '@/components/Landing';
 import Sponsors from '@/components/Sponsors/index';
 import AboutHomePage from '@/components/About/AboutHomepage';
 import EventsBrief from '@/components/Event/EventsBrief';
 
 export default function HomePage() {
   return (
-    <section>
-      <Landing />
-      <AboutHomePage />
-      <EventsBrief />
-      <Sponsors />
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative">
+        <Navbar />
+        <Landing />
+        <AboutHomePage />
+        <EventsBrief />
+        <Sponsors />
     </section>
   );
 }