From fe7a86f5a93e56536fd64b8f1aa5ac20c844e2dc Mon Sep 17 00:00:00 2001
From: vxd <ved2997@yahoo.com>
Date: Thu, 6 Aug 2026 20:00:16 +0100
Subject: [PATCH 1/3] Cleaned up Navbar - made it bigger, removed intrusive Get
 Started icon, made logo bigger and brighter, added navbar disappearing on
 scroll

---
 src/app/components/navigation/navbar.js | 48 ++++++++++++++++++-------
 src/app/page.js                         | 16 +++++----
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/app/components/navigation/navbar.js b/src/app/components/navigation/navbar.js
index 04e49ae..6480b34 100644
--- a/src/app/components/navigation/navbar.js
+++ b/src/app/components/navigation/navbar.js
@@ -1,41 +1,65 @@
 'use client'
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 
+
 const Navbar = () => {
     const [menuOpen, setMenuOpen] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const lastYPos = useRef(0);
+
+    // Makes navbar disappear on scroll
+    useEffect(() => {
+        
+
+        const hasScrolled = () => {
+            const currentYPos = window.scrollY;
+            setHidden(currentYPos > 200 && currentYPos>lastYPos.current);
+            lastYPos.current = currentYPos;
+        };
+        window.addEventListener("scroll", hasScrolled);
 
+        return () => {
+            window.removeEventListener("scroll", hasScrolled)
+        };
+    }, []);
+
+    let height; 
+    Navbar.height = "[72px]";    
+    
     const toggleMenu = () => {
         setMenuOpen(!menuOpen);
     };
 
     return (
-        <header className="sticky top-0 z-50 w-full bg-slate-900 border-b border-slate-700">
+        <header className={`fixed top-0 z-50 w-full bg-slate-900 border-b border-slate-700 transition-all duration-300 
+            ${hidden ? "opacity-0 -translate-y-full pointer-events-none" : "opacity-100 translate-y-0"
+    }`}>
             <div className="mx-auto max-w-[95vw] px-6 sm:px-8">
-                <div className="flex h-16 items-center justify-between">
+                <div className={`flex h-18 items-center justify-between transition-all duration-300`}>
                     {/* Logo */}
-                    <Link href="/" className="flex items-center select-none" onClick={() => setMenuOpen(false)}>
+                    <Link href="/" className="flex items-center justify-center select-none" onClick={() => setMenuOpen(false)}>
                         <img 
                             src="/GCSE Log Logo.svg" 
                             alt="GCSE Log" 
-                            className="h-10 drop-shadow-sm"
+                            className="block h-12 drop-shadow-sm translate-y-[2.5px] brightness-175 hover:brightness-200 transition-all duration-300"
                         />
                     </Link>
 
                     {/* Desktop Navigation */}
-                    <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-white">
-                        <Link href="/" className="hover:text-purple-200 transition-colors">
+                    <nav className="hidden md:flex items-center gap-10 text-lg font-medium text-white">
+                        <Link href="/" className="hover:text-purple-300 transition-colors">
                             Home
                         </Link>
-                        <Link href="/subjects" className="hover:text-purple-200 transition-colors">
+                        <Link href="/subjects" className="hover:text-purple-300 transition-colors">
                             Browse
                         </Link>
-                        <Link href="/#about" className="hover:text-purple-200 transition-colors">
+                        <Link href="/#about" className="hover:text-purple-300 transition-colors">
                             About
                         </Link>
-                        <Link href="/opportunities" className="hover:text-purple-200 transition-colors">
+                        <Link href="/opportunities" className="hover:text-purple-300 transition-colors">
                             Opportunities
                         </Link>
                     </nav>
@@ -44,9 +68,9 @@ const Navbar = () => {
                     <div className="flex items-center gap-3">
                         <Link 
                             href="/subjects" 
-                            className="hidden sm:inline-flex items-center gap-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 text-sm font-semibold transition-all duration-200"
+                            className="hidden sm:inline-flex items-center gap-2 rounded-xl border-b border-white/20 bg-white/5 hover:bg-purple-700 hover:border-purple-700 text-white px-4 py-2 text-base font-semibold transition-all duration-200"
                         >
-                            Get Started <ArrowRight size={16}/>
+                            Submit Resources <ArrowRight size={16}/>
                         </Link>
 
                         {/* Mobile menu button */}
diff --git a/src/app/page.js b/src/app/page.js
index 5175303..8c9b3b5 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -450,13 +450,15 @@ function CallToAction() {
 export default function Home() {
   return (
     <div className="bg-slate-900 text-slate-300" style={{ fontFamily: 'DM Sans, sans-serif' }}>
-      <Navbar />
-      <Hero />
-      <Features />
-      <FeaturedResources />
-      <About />
-      <CallToAction />
-            <Footer />
+      <Navbar /> 
+        <main className={`pt-${Navbar.height}`}> {/*added padding of Navbar.height because fixed now*/}
+          <Hero /> 
+          <Features />
+          <FeaturedResources />
+          <About />
+          <CallToAction />
+                <Footer />
+        </main>
     </div>
   );
 }

From 5f45599cb7583995f22f99cdbc8b0adb8d1d59ae Mon Sep 17 00:00:00 2001
From: Ved Thakkar <128282723+vexed289@users.noreply.github.com>
Date: Thu, 6 Aug 2026 20:45:27 +0100
Subject: [PATCH 2/3] bug fix

---
 src/app/page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/page.js b/src/app/page.js
index 8c9b3b5..693641a 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -451,7 +451,7 @@ export default function Home() {
   return (
     <div className="bg-slate-900 text-slate-300" style={{ fontFamily: 'DM Sans, sans-serif' }}>
       <Navbar /> 
-        <main className={`pt-${Navbar.height}`}> {/*added padding of Navbar.height because fixed now*/}
+        <main className={"pt-[72px]"}> {/*added padding of Navbar.height because fixed now*/}
           <Hero /> 
           <Features />
           <FeaturedResources />

From 680a90e0dd2f2edd8cc3e384f87a5c76acb2dcac Mon Sep 17 00:00:00 2001
From: Ved Thakkar <128282723+vexed289@users.noreply.github.com>
Date: Thu, 6 Aug 2026 20:46:09 +0100
Subject: [PATCH 3/3] bug fix

---
 src/app/components/navigation/navbar.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/app/components/navigation/navbar.js b/src/app/components/navigation/navbar.js
index 6480b34..06180da 100644
--- a/src/app/components/navigation/navbar.js
+++ b/src/app/components/navigation/navbar.js
@@ -24,10 +24,7 @@ const Navbar = () => {
         return () => {
             window.removeEventListener("scroll", hasScrolled)
         };
-    }, []);
-
-    let height; 
-    Navbar.height = "[72px]";    
+    }, []); 
     
     const toggleMenu = () => {
         setMenuOpen(!menuOpen);
@@ -131,4 +128,4 @@ const Navbar = () => {
     );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;