From 77a78dabace4ea686274fce75f43c8370bfc2fe7 Mon Sep 17 00:00:00 2001
From: louis <louislim2005@gmail.com>
Date: Mon, 19 May 2025 22:03:32 +0800
Subject: [PATCH] Updated navbar to sticky with frosted glass background

---
 frontend/src/components/Landing/index.tsx |  4 ++--
 frontend/src/components/Layout.tsx        |  2 +-
 frontend/src/components/Navbar.tsx        |  2 +-
 frontend/src/pages/404.tsx                |  2 +-
 frontend/src/pages/events.tsx             |  2 +-
 frontend/src/pages/index.tsx              | 12 +++++++-----
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx
index ce04867..231aa6f 100644
--- a/frontend/src/components/Landing/index.tsx
+++ b/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>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 3f25de9..7dee43d 100644
--- a/frontend/src/components/Layout.tsx
+++ b/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 />
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 8e3f161..b90df55 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/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"
diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
index 09b3c77..1bed756 100644
--- a/frontend/src/pages/404.tsx
+++ b/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>
diff --git a/frontend/src/pages/events.tsx b/frontend/src/pages/events.tsx
index a1aadb5..7892e4c 100644
--- a/frontend/src/pages/events.tsx
+++ b/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 />
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 821be72..4528001 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import Navbar from '@/components/Navbar';
 import Landing from '@/components/Landing';
 import Sponsors from '@/components/Sponsors/index';
 import AboutHomePage from '@/components/About/AboutHomepage';
@@ -5,11 +6,12 @@ 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>
   );
 }