From 060affd61a2c4964384272c888c68f579b5ffd05 Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Sat, 25 Apr 2026 21:13:27 +1200
Subject: [PATCH 01/10] navbar but missing font for web3uoa log

---
 src/components/navbar.tsx | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 7db2c27..e1c1a23 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -9,7 +9,11 @@ const navLinks = [
   { label: "About", href: "#about" },
   { label: "Events", href: "#events" },
   { label: "Partners", href: "#partners" },
-  { label: "Claim your Web3 ID!", href: "#identity", isCTA: true },
+  
+  { label: "Search", href : "#search" }, // TODO: add search page
+  { label: "Join Us", href: "#join_us" }, // TODO: add Us
+  { label: "Connect Wallet" , href: "#connect_wallet"}, // TODO: add wallet connection
+  //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true }  // not sure if need 
 ];
 
 export function Navbar() {
@@ -24,10 +28,11 @@ export function Navbar() {
   const isAdmin = mounted && isAllowedAdminAddress(address);
 
   return (
-    <nav className="absolute top-0 left-0 right-0 z-50 bg-transparent py-4 text-foreground">
-      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+    <nav className="absolute z-50 bg-[#404246]/60 backdrop-blur-md border-b border-white/10 flex justify-between items-center px-8 w-[80%] left-1/2 translate-x-[-50%] top-[5%] 
+    rounded-full text-white shadow-lg whitespace-nowrap">
+      <div className="container h-16 flex items-center justify-between">
         {/* Logo */}
-        <a href="#" className="flex items-center gap-3 group">
+        <a href="#" className="flex items-center group flex-shrink-0">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"
@@ -37,12 +42,12 @@ export function Navbar() {
         </a>
 
         {/* Desktop links */}
-        <div className="hidden md:flex items-center gap-8">
+        <div className="hidden md:flex items-center gap-15 absolute right-[-14%] -translate-x-1/2">
           {navLinks.map((link) => (
             <a
               key={link.href}
               href={link.href}
-              className={`text-sm font-bold tracking-wide transition-all ${link.isCTA ? "text-primary bg-primary/10 px-4 py-2 rounded-full border border-primary/20 hover:bg-primary/20 hover:-translate-y-0.5 shadow-sm" : "text-foreground/80 hover:text-primary"}`}
+              className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
             >
               {link.label}
             </a>
@@ -55,7 +60,9 @@ export function Navbar() {
               Admin Panel
             </a>
           )}
-          <Button
+
+          {/* Comment it out, not sure should i delete this */}
+          {/*<Button
             size="sm"
             className="rounded-xl px-6 py-5 font-bold shadow-md hover:shadow-lg transition-transform hover:-translate-y-0.5"
             asChild
@@ -67,7 +74,8 @@ export function Navbar() {
             >
               Join Us
             </a>
-          </Button>
+          </Button>*/}
+
         </div>
 
         {/* Mobile menu button */}
@@ -86,14 +94,14 @@ export function Navbar() {
 
       {/* Mobile menu */}
       {mobileOpen && (
-        <div className="md:hidden absolute top-full left-0 right-0 bg-background/98 backdrop-blur-xl border-b border-border shadow-lg">
+        <div className="md:hidden absolute top-full left-0 right-0 bg-[#404246]/60 backdrop-blur-md border-b border-border shadow-lg rounded-md">
           <div className="container mx-auto px-6 py-6 flex flex-col gap-4">
             {navLinks.map((link) => (
               <a
                 key={link.href}
                 href={link.href}
                 onClick={() => setMobileOpen(false)}
-                className={`text-base font-bold py-2 transition-colors border-b border-border/50 ${link.isCTA ? "text-primary" : "text-foreground/80 hover:text-primary"}`}
+                className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
               >
                 {link.label}
               </a>
@@ -107,9 +115,11 @@ export function Navbar() {
                 Admin Panel
               </a>
             )}
+            {/*
             <div className="flex justify-center py-2">
               <appkit-button balance="hide" />
             </div>
+            
             <Button
               size="lg"
               className="rounded-xl font-bold mt-4 w-full h-12"
@@ -122,7 +132,7 @@ export function Navbar() {
               >
                 Join Us
               </a>
-            </Button>
+            </Button>*/}
           </div>
         </div>
       )}

From 0635c11d49a539d51e852eec583fa544f0917f82 Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Tue, 28 Apr 2026 15:28:14 +1200
Subject: [PATCH 02/10] implement theme toggle, fix navbar issues

---
 src/app/globals.css       |  58 ++++++++++++++++---
 src/app/layout.tsx        |  18 +++++-
 src/app/page.tsx          |   2 +-
 src/components/hero.tsx   |  25 ++++----
 src/components/navbar.tsx | 119 +++++++++++++++++++++++++++-----------
 5 files changed, 163 insertions(+), 59 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 3f44c43..8e23749 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,24 +1,34 @@
 @import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+/* this is for the color when toggle_theme this is for the light theme*/
+  --color-web3: rgba(63, 101, 226);
+  --color-uoa: rgba(255, 255, 255);
+  --color-hero-text: rgba(0, 0, 0);
+  --color-nav-text: rgba(0, 0, 0);
+  --color-nav-bg: rgba(255, 255, 255, 0.6);
+  --color-nav-text-hover: rgba(63, 101, 226);
+  --color-button: rgba(255, 255, 255.6);
+  --color-button-bor: var(--color-button-b);
+  --color-button-txt: rgba(63, 101, 226);
+
   --font-sans:
     "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
   --font-mono:
     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
-    
-  --color-background: oklch(1 0 0); /* Pure White */
-  --color-foreground: oklch(0.15 0 0); /* Almost Black */
+
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.15 0 0);
   --color-card: oklch(1 0 0);
   --color-card-foreground: oklch(0.15 0 0);
   --color-popover: oklch(1 0 0);
   --color-popover-foreground: oklch(0.15 0 0);
-  --color-primary: oklch(0.55 0.22 260); /* Vibrant, accessible blue */
+  --color-primary: oklch(0.55 0.22 260);
   --color-primary-foreground: oklch(1 0 0);
-  --color-secondary: oklch(0.96 0 0); /* Light gray */
+  --color-secondary: oklch(0.96 0 0);
   --color-secondary-foreground: oklch(0.15 0 0);
   --color-muted: oklch(0.95 0 0);
   --color-muted-foreground: oklch(0.45 0 0);
@@ -54,9 +64,9 @@
     scroll-behavior: smooth;
   }
   body {
-    @apply bg-background text-foreground font-sans antialiased;
-    margin: 0;
+    background-image: var(--background-theme);
     min-height: 100vh;
+    transition: background-image 0.3s ease;
   }
   ::selection {
     background-color: oklch(0.55 0.22 260 / 0.2);
@@ -65,3 +75,33 @@
     -webkit-user-drag: none;
   }
 }
+
+/* this is for the color when toggle_theme this is for the light theme*/
+:root {
+  --background-theme: linear-gradient(135deg, #c8dff5 0%, #ddd0e8 60%, #f8f4fc 100%);
+  --color-nav-bar-text: rgba(0, 0, 0);
+  --nav-bar-bg: rgba(255, 255, 255, 0.6);
+  --color-button-b: rgb(63, 101, 226);
+}
+
+/* dark theme*/
+.dark {
+  --background-theme: radial-gradient(ellipse at top right, #b0c4d8 0%, #7b82b0 40%, #1a1a2e 100%);
+  --color-nav-bar-bg: rgba(64, 66, 70, 0.6);
+  --color-nav-text: rgba(255,255,255);
+  --color-nav-bar-text: rgba(255, 255, 255);
+  --color-nav-text-hover: rgba(163, 222, 244);
+  --color-web3: rgba(163, 222, 244);
+  --color-uoa: rgba(0,0,0);
+  --color-hero-text: rgba(255, 255, 255); 
+  --color-button: rgba(63,101,226,0.6);
+
+  --color-button-b: rgb(163, 222, 244);
+
+  --color-nav-bg: rgba(64, 66, 70, 0.6);
+  --color-button-txt: rgba(63, 101, 226);
+}
+
+.theme-transitioning * {
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5e75b1f..2f88f65 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "./globals.css";
 import { Navbar } from "@/components/navbar";
 import { Footer } from "@/components/footer";
 import { Web3Provider } from "@/components/web3-provider";
+import Script from "next/script";
 
 export const metadata: Metadata = {
   title: "WEB3UOA - University of Auckland Web3 Club",
@@ -17,9 +18,22 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className="min-h-screen bg-background text-foreground antialiased"
+        className="min-h-screen text-foreground antialiased"
         suppressHydrationWarning
       >
+        {/*Prevent flash of wrong theme when reload page*/}
+        <Script id="theme-init" strategy="beforeInteractive">{`
+          (function() {
+            try {
+              const saved = localStorage.getItem('theme');
+              const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+              const theme = saved || preferred;
+              if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+              }
+            } catch(e) {}
+          })();
+        `}</Script>
         <Web3Provider>
           <Navbar />
           {children}
@@ -28,4 +42,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index afa8660..ec86893 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,7 +13,7 @@ export default function Home() {
       {/* ENS Subname Claim Section */}
       <section
         id="identity"
-        className="min-h-[80vh] flex flex-col justify-center py-20 bg-secondary/20 border-b border-border/50 relative overflow-hidden"
+        className="min-h-[80vh] flex flex-col justify-center py-20 border-b border-border/50 relative overflow-hidden"
       >
         {/* Abstract background blobs for styling */}
         <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse" />
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 4cee764..264ced0 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -3,25 +3,23 @@ import { Instagram, Linkedin, ArrowRight } from "lucide-react";
 
 export function Hero() {
   return (
-    <section className="relative min-h-screen flex items-center justify-center bg-background overflow-hidden border-b border-border/50">
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden border-b border-border/50">
       <div className="container relative z-10 px-4 pt-32 pb-20">
         <div className="flex flex-col lg:flex-row items-center justify-between gap-16">
           {/* Hero text (left side) */}
           <div className="flex-1 space-y-8 text-center lg:text-left">
-            <span className="inline-block text-xs font-black uppercase tracking-[0.3em] text-primary bg-primary/10 px-4 py-2 rounded-full border border-primary/20">
-              University of Auckland
-            </span>
-            <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-[7rem] font-black tracking-tight text-foreground leading-[1.05]">
-              WEB3<span className="text-primary">UOA</span>
+            <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-[7rem] font-black tracking-tight leading-[1.05]">
+              <span className="text-web3">WEB3</span>
+              <span className="text-uoa">UOA</span>
             </h1>
-            <p className="text-xl md:text-2xl text-muted-foreground font-medium tracking-wide max-w-2xl mx-auto lg:mx-0">
-              Educating the next generation of blockchain innovators.
+            <p className="text-hero-text text-xl md:text-2xl font-medium tracking-wide max-w-2xl mx-auto lg:mx-0">
+              The next generation of blockchain innovators
             </p>
 
             <div className="flex flex-col sm:flex-row items-center lg:justify-start justify-center gap-4 pt-4">
               <Button
                 size="lg"
-                className="text-base px-8 h-14 shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5 rounded-xl font-bold"
+                className="text-base px-8 h-14 border-2 transition-all rounded-xl font-bold !bg-nav-bg !border-button-bor !text-button-bor hover:!bg-button-bor hover:!text-white hover:!border-button-bor"
                 asChild
               >
                 <a
@@ -29,20 +27,18 @@ export function Hero() {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Join the Club <ArrowRight className="ml-2 w-5 h-5" />
+                  Join the Club
                 </a>
               </Button>
               <Button
-                variant="outline"
                 size="lg"
-                className="text-base px-8 h-14 border-2 transition-all hover:bg-secondary rounded-xl font-bold"
+                className="text-base px-8 h-14 border-2 transition-all rounded-xl font-bold !bg-nav-bg !border-button-bor !text-button-bor hover:!bg-button-bor hover:!text-white hover:!border-button-bor"
                 asChild
               >
                 <a href="#about">Learn More</a>
               </Button>
             </div>
 
-            {/* Social Links */}
             <div className="flex items-center lg:justify-start justify-center gap-8 pt-8">
               <a
                 href="https://instagram.com/web3uoa"
@@ -79,7 +75,8 @@ export function Hero() {
                 <Linkedin className="w-6 h-6" />
               </a>
             </div>
-          </div>
+          </div> 
+
 
           {/* Logo element (right side) */}
           <div className="flex-1 flex justify-center lg:justify-end items-center relative">
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index e1c1a23..c8fd60b 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Sun, Moon } from 'lucide-react'
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
@@ -9,15 +10,15 @@ const navLinks = [
   { label: "About", href: "#about" },
   { label: "Events", href: "#events" },
   { label: "Partners", href: "#partners" },
-  
-  { label: "Search", href : "#search" }, // TODO: add search page
+  { label: "Search", href: "#search" }, // TODO: add search page
   { label: "Join Us", href: "#join_us" }, // TODO: add Us
-  { label: "Connect Wallet" , href: "#connect_wallet"}, // TODO: add wallet connection
+  { label: "Connect Wallet", href: "#connect_wallet" }, // TODO: add wallet connection
   //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true }  // not sure if need 
 ];
 
 export function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [theme, setTheme] = useState("light");
   const [mounted, setMounted] = useState(false);
   const { address } = useAccount();
 
@@ -25,29 +26,58 @@ export function Navbar() {
     setMounted(true);
   }, []);
 
+  // save theme preference to localStorage for persistence across sessions
+  // read saved preference (client only)
+  useEffect(() => {
+    const saved = localStorage.getItem("theme") as "light" | "dark" | null;
+    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    setTheme(saved || preferred);
+  }, []);
+
+  // 3. Apply theme + save it whenever it changes for the theme 
+  useEffect(() => {
+    document.documentElement.classList.add('theme-transitioning');
+
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+
+    localStorage.setItem("theme", theme); // ← this saves it
+
+    setTimeout(() => {
+      document.documentElement.classList.remove('theme-transitioning');
+    }, 300);
+  }, [theme]);
+
   const isAdmin = mounted && isAllowedAdminAddress(address);
 
   return (
-    <nav className="absolute z-50 bg-[#404246]/60 backdrop-blur-md border-b border-white/10 flex justify-between items-center px-8 w-[80%] left-1/2 translate-x-[-50%] top-[5%] 
-    rounded-full text-white shadow-lg whitespace-nowrap">
-      <div className="container h-16 flex items-center justify-between">
+    <nav className="absolute z-50 bg-nav-bg border-b border-white/10
+      w-[95%] sm:w-[90%] lg:w-[80%]
+      left-1/2 -translate-x-1/2 top-[3%] sm:top-[5%]
+      rounded-full text-nav-text shadow-lg">
+
+      <div className="h-14 sm:h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 gap-4">
+
         {/* Logo */}
-        <a href="#" className="flex items-center group flex-shrink-0">
+        <a href="#" className="flex items-center gap-2 group flex-shrink-0">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"
-            className="w-10 h-10 transition-transform duration-500 group-hover:scale-110 drop-shadow-sm"
+            className="w-8 h-8 sm:w-10 sm:h-10 transition-transform duration-500 group-hover:scale-110 drop-shadow-sm"
           />
-          <span className="text-xl font-black tracking-tight">WEB3UOA</span>
+          <span className="text-nav-text text-lg sm:text-xl font-black tracking-tight">WEB3UOA</span>
         </a>
 
         {/* Desktop links */}
-        <div className="hidden md:flex items-center gap-15 absolute right-[-14%] -translate-x-1/2">
+        <div className="hidden lg:flex items-center gap-5 xl:gap-15 flex-shrink-0 ml-auto">
           {navLinks.map((link) => (
             <a
               key={link.href}
               href={link.href}
-              className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
+              className="nav-bar-text text-base font-semibold tracking-wide transition-colors duration-100 hover:text-nav-text-hover whitespace-nowrap"
             >
               {link.label}
             </a>
@@ -55,19 +85,32 @@ export function Navbar() {
           {isAdmin && (
             <a
               href="/admin"
-              className="text-sm font-bold tracking-wide transition-colors text-yellow-500 hover:text-yellow-400"
+              className="text-sm font-bold tracking-wide transition-colors text-yellow-500 hover:text-yellow-400 whitespace-nowrap"
             >
               Admin Panel
             </a>
           )}
 
+          {/* toggle_theme button */}
+          <Button
+            size="sm"
+            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+            className="text-text bg-transparent hover:bg-transparent active:bg-transparent focus-visible:ring-0 flex-shrink-0 hover:cursor-pointer"
+          >
+            <span className="relative h-6 w-6 block">
+              {/* fade in and out animation */}
+              <Sun className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 1 : 0 }} />
+              <Moon className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 0 : 1 }} />
+            </span>
+          </Button>
+
           {/* Comment it out, not sure should i delete this */}
           {/*<Button
             size="sm"
             className="rounded-xl px-6 py-5 font-bold shadow-md hover:shadow-lg transition-transform hover:-translate-y-0.5"
             asChild
           >
-            <a
+            
               href="https://forms.gle/vzRb7t46SPBUwi7v8"
               target="_blank"
               rel="noopener noreferrer"
@@ -75,33 +118,42 @@ export function Navbar() {
               Join Us
             </a>
           </Button>*/}
-
         </div>
 
         {/* Mobile menu button */}
-        <button
-          onClick={() => setMobileOpen(!mobileOpen)}
-          className="md:hidden p-2 rounded-lg text-foreground transition-colors hover:bg-secondary"
-          aria-label="Toggle menu"
-        >
-          {mobileOpen ? (
-            <X className="w-6 h-6" />
-          ) : (
-            <Menu className="w-6 h-6" />
-          )}
-        </button>
+        <div className="lg:hidden flex items-center gap-2 flex-shrink-0">
+          <Button
+            size="sm"
+            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+            className="text-text bg-transparent hover:bg-transparent active:bg-transparent focus-visible:ring-0 flex-shrink-0 hover:cursor-pointer"
+          >
+            <span className="relative h-6 w-6 block">
+              {/* fade in and out animation */}
+              <Sun className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 1 : 0 }} />
+              <Moon className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 0 : 1 }} />
+            </span>
+          </Button>
+
+          <button
+            onClick={() => setMobileOpen(!mobileOpen)}
+            className="p-2 rounded-lg text-nav-text transition-colors hover:bg-white/10"
+            aria-label="Toggle menu"
+          >
+            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
       </div>
 
-      {/* Mobile menu */}
+      {/* Mobile dropdown */}
       {mobileOpen && (
-        <div className="md:hidden absolute top-full left-0 right-0 bg-[#404246]/60 backdrop-blur-md border-b border-border shadow-lg rounded-md">
-          <div className="container mx-auto px-6 py-6 flex flex-col gap-4">
+        <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-[#404246]/90 backdrop-blur-md border border-white/10 shadow-lg rounded-2xl overflow-hidden">
+          <div className="px-6 py-5 flex flex-col gap-1">
             {navLinks.map((link) => (
               <a
                 key={link.href}
                 href={link.href}
                 onClick={() => setMobileOpen(false)}
-                className="text-white text-base font-semibold tracking-wide transition-all hover:text-primary"
+                className="text-nav-text text-base font-semibold tracking-wide py-2.5 px-3 rounded-lg transition-all hover:bg-white/10 hover:text-primary"
               >
                 {link.label}
               </a>
@@ -110,22 +162,23 @@ export function Navbar() {
               <a
                 href="/admin"
                 onClick={() => setMobileOpen(false)}
-                className="text-base font-bold text-yellow-500 hover:text-yellow-400 py-2 transition-colors border-b border-border/50"
+                className="text-base font-bold text-yellow-500 hover:text-yellow-400 py-2.5 px-3 rounded-lg transition-colors hover:bg-white/10"
               >
                 Admin Panel
               </a>
             )}
+            {/* Comment it out, not sure should i delete this */}
             {/*
             <div className="flex justify-center py-2">
               <appkit-button balance="hide" />
             </div>
-            
+
             <Button
               size="lg"
               className="rounded-xl font-bold mt-4 w-full h-12"
               asChild
             >
-              <a
+              
                 href="https://forms.gle/vzRb7t46SPBUwi7v8"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -138,4 +191,4 @@ export function Navbar() {
       )}
     </nav>
   );
-}
+}
\ No newline at end of file

From 694171902d72d19bad150ce9d009d3399edbb6a2 Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Wed, 6 May 2026 16:45:03 +1200
Subject: [PATCH 03/10] fix background of the hamburger navba on mobile

---
 src/components/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index c8fd60b..303122a 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -146,7 +146,7 @@ export function Navbar() {
 
       {/* Mobile dropdown */}
       {mobileOpen && (
-        <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-[#404246]/90 backdrop-blur-md border border-white/10 shadow-lg rounded-2xl overflow-hidden">
+        <div className="lg:hidden absolute top-full left-0 right-0 mt-2 bg-nav-bg backdrop-blur-md border border-white/10 shadow-lg rounded-2xl overflow-hidden">
           <div className="px-6 py-5 flex flex-col gap-1">
             {navLinks.map((link) => (
               <a

From fe33eab940c06c84595242453fd7814acae5595e Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Thu, 7 May 2026 22:02:55 +1200
Subject: [PATCH 04/10] update logo font

---
 src/app/globals.css       | 6 +++++-
 src/components/hero.tsx   | 4 ++--
 src/components/navbar.tsx | 3 ++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 8e23749..b399b12 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -12,7 +13,10 @@
   --color-button: rgba(255, 255, 255.6);
   --color-button-bor: var(--color-button-b);
   --color-button-txt: rgba(63, 101, 226);
-
+  
+  --font-russo: 
+  'Russo One', sans-serif;
+  
   --font-sans:
     "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 264ced0..e6ba882 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -9,8 +9,8 @@ export function Hero() {
           {/* Hero text (left side) */}
           <div className="flex-1 space-y-8 text-center lg:text-left">
             <h1 className="text-6xl sm:text-7xl md:text-8xl lg:text-[7rem] font-black tracking-tight leading-[1.05]">
-              <span className="text-web3">WEB3</span>
-              <span className="text-uoa">UOA</span>
+              <span className="text-web3 font-russo">WEB3</span>
+              <span className="text-uoa font-russo">UOA</span>
             </h1>
             <p className="text-hero-text text-xl md:text-2xl font-medium tracking-wide max-w-2xl mx-auto lg:mx-0">
               The next generation of blockchain innovators
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 303122a..ee69f0b 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
 import { useAccount } from "wagmi";
 import { isAllowedAdminAddress } from "@/lib/admin-auth";
+import { Russo_One } from 'next/font/google'
 
 const navLinks = [
   { label: "About", href: "#about" },
@@ -68,7 +69,7 @@ export function Navbar() {
             alt="WEB3UOA"
             className="w-8 h-8 sm:w-10 sm:h-10 transition-transform duration-500 group-hover:scale-110 drop-shadow-sm"
           />
-          <span className="text-nav-text text-lg sm:text-xl font-black tracking-tight">WEB3UOA</span>
+          <span className="text-nav-text text-lg sm:text-xl font-black tracking-tight font-russo">WEB3UOA</span>
         </a>
 
         {/* Desktop links */}

From 64a57b0fd49240aac1f6519d3868704a752e1ffe Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Thu, 7 May 2026 22:04:32 +1200
Subject: [PATCH 05/10] remove unsued code

---
 src/components/navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index ee69f0b..9ae1859 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
 import { useAccount } from "wagmi";
 import { isAllowedAdminAddress } from "@/lib/admin-auth";
-import { Russo_One } from 'next/font/google'
 
 const navLinks = [
   { label: "About", href: "#about" },

From 5d268ada23092d79e695cbc0cbe3efa6bf9942fa Mon Sep 17 00:00:00 2001
From: rebeccafitzpatr <rebecca.fitzpatr@gmail.com>
Date: Wed, 13 May 2026 16:43:15 +1200
Subject: [PATCH 06/10] Merge branch 'main' into nav_bar

---
 src/components/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 5ae4bf3..cb7a918 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -29,7 +29,7 @@ export function Navbar() {
     rounded-full text-white shadow-lg whitespace-nowrap">
       <div className="container h-16 flex items-center justify-between">
         {/* Logo */}
-        <a href="#" className="flex items-center group flex-shrink-0">
+        <Link href="#" className="flex items-center group flex-shrink-0">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"

From 4be8261d0722b763cabe739ce8648e21acaf1f05 Mon Sep 17 00:00:00 2001
From: rebeccafitzpatr <rebecca.fitzpatr@gmail.com>
Date: Wed, 13 May 2026 21:49:05 +1200
Subject: [PATCH 07/10] merge navbar

---
 src/components/navbar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index c770450..63d5cd7 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -112,6 +112,7 @@ export function Navbar() {
 
             <WalletButton />
           </Button>
+          </div>
 
           {/* Comment it out, not sure should i delete this */}
           {/*<Button

From 95d667ca59fc9393d4e62c90dc6245a353df983b Mon Sep 17 00:00:00 2001
From: rebeccafitzpatr <rebecca.fitzpatr@gmail.com>
Date: Wed, 13 May 2026 21:55:22 +1200
Subject: [PATCH 08/10] Remove extra buttons

---
 src/components/navbar.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 63d5cd7..bacc566 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -3,8 +3,8 @@ import { Sun, Moon } from 'lucide-react'
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
-import { useAccount } from "wagmi";
-import { isAllowedAdminAddress } from "@/lib/admin-auth";
+//import { useAccount } from "wagmi";
+//import { isAllowedAdminAddress } from "@/lib/admin-auth";
 import { useWallet } from "@/hooks/use-wallet";
 import { WalletButton } from "@/components/wallet-button";
 import { usePathname } from "next/navigation";
@@ -24,7 +24,7 @@ export function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [theme, setTheme] = useState("light");
   const [mounted, setMounted] = useState(false);
-  const { address } = useAccount();
+  //const { address } = useAccount();
 
   useEffect(() => {
     setMounted(true);
@@ -174,14 +174,14 @@ export function Navbar() {
               </Link>
             )}
             {/* Comment it out, not sure should i delete this */}
-            <div
+            {/* <div
               className="flex justify-center py-2"
               onClickCapture={() => setMobileOpen(false)}
-            >
-              <WalletButton />
-            </div>
+            > */}
+              {/* <WalletButton /> */}
+            {/* </div> */}
 
-            <Button
+            {/* <Button
               size="lg"
               className="rounded-xl font-bold mt-4 w-full h-12"
               asChild
@@ -192,8 +192,8 @@ export function Navbar() {
                 rel="noopener noreferrer"
               >
                 Join Us
-              </Link>
-            </Button>
+              </Link> 
+            </Button>*/}
           </div>
         </div>
       )}

From af86ab32eaf8d4f0eb95f86c6be9147a644daedd Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Wed, 13 May 2026 22:59:20 +1200
Subject: [PATCH 09/10] fixed navbar

---
 src/components/navbar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index bacc566..707321e 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -109,14 +109,14 @@ export function Navbar() {
               <Sun className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 1 : 0 }} />
               <Moon className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 0 : 1 }} />
             </span>
-
-            <WalletButton />
+            {/* Comment it out, not sure should i delete this */}
+            {/*<WalletButton />*/}
           </Button>
           </div>
 
           {/* Comment it out, not sure should i delete this */}
           {/*<Button
-          
+
           <Button
             size="sm"
             className="rounded-xl px-6 py-5 font-bold shadow-md hover:shadow-lg transition-transform hover:-translate-y-0.5"
@@ -124,7 +124,7 @@ export function Navbar() {
           >
             <Link href="/pages/join-us">Join Us</Link>
           </Button>
-        </div>
+        </div>*/}
 
         {/* Mobile menu button */}
         <div className="lg:hidden flex items-center gap-2 flex-shrink-0">

From 62f8f4c352f59b59c9933142ed05108b142c74d1 Mon Sep 17 00:00:00 2001
From: Joseph <josephwu5354@gmail.com>
Date: Thu, 14 May 2026 12:59:41 +1200
Subject: [PATCH 10/10] merged with page navargation and clean unused code

---
 src/components/navbar.tsx | 69 +++++++++++++--------------------------
 1 file changed, 23 insertions(+), 46 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 707321e..c73b2a7 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -3,20 +3,21 @@ import { Sun, Moon } from 'lucide-react'
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
-//import { useAccount } from "wagmi";
-//import { isAllowedAdminAddress } from "@/lib/admin-auth";
-import { useWallet } from "@/hooks/use-wallet";
-import { WalletButton } from "@/components/wallet-button";
-import { usePathname } from "next/navigation";
+import { useAccount } from "wagmi";
+import { isAllowedAdminAddress } from "@/lib/admin-auth";
 import Link from "next/link";
 
 const navLinks = [
-  { label: "About", href: "#about" },
-  { label: "Events", href: "#events" },
-  { label: "Partners", href: "#partners" },
+  { label: "About", href: "/pages/about" },
+  { label: "Events", href: "/pages/events" },
+  { label: "Partners", href: "/pages/partners" },
+  // { label: "Claim your Web3 ID!", href: "/pages/claim-id", isCTA: true },
+  // { label: "About", href: "#about" },
+  // { label: "Events", href: "#events" },
+  // { label: "Partners", href: "#partners" },
   { label: "Search", href: "#search" }, // TODO: add search page
   { label: "Join Us", href: "#join_us" }, // TODO: add Us
-  { label: "Connect Wallet", href: "#connect_wallet" }, // TODO: add wallet connection
+  { label: "Connect Wallet", href: "/pages/claim-id" }, // TODO: add wallet connection
   //{ label: "Claim your Web3 ID!", href: "#identity", isCTA: true }  // not sure if need 
 ];
 
@@ -24,7 +25,7 @@ export function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
   const [theme, setTheme] = useState("light");
   const [mounted, setMounted] = useState(false);
-  //const { address } = useAccount();
+  const { address } = useAccount();
 
   useEffect(() => {
     setMounted(true);
@@ -55,10 +56,7 @@ export function Navbar() {
     }, 300);
   }, [theme]);
 
-  //const isAdmin = mounted && isAllowedAdminAddress(address);
-  const { isAdmin } = useWallet();
-  const pathname = usePathname();
-  const isHome = pathname === "/";
+  const isAdmin = mounted && isAllowedAdminAddress(address);
 
   return (
     <nav className="absolute z-50 bg-nav-bg border-b border-white/10
@@ -69,7 +67,7 @@ export function Navbar() {
       <div className="h-14 sm:h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 gap-4">
 
         {/* Logo */}
-        <Link href="#" className="flex items-center gap-2 group flex-shrink-0">
+        <Link href="/" className="flex items-center gap-2 group flex-shrink-0">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"
@@ -109,25 +107,25 @@ export function Navbar() {
               <Sun className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 1 : 0 }} />
               <Moon className="absolute inset-0 size-6 transition-opacity duration-300" style={{ opacity: theme === "light" ? 0 : 1 }} />
             </span>
-            {/* Comment it out, not sure should i delete this */}
-            {/*<WalletButton />*/}
           </Button>
-          </div>
 
           {/* Comment it out, not sure should i delete this */}
           {/*<Button
-
-          <Button
             size="sm"
             className="rounded-xl px-6 py-5 font-bold shadow-md hover:shadow-lg transition-transform hover:-translate-y-0.5"
             asChild
           >
-            <Link href="/pages/join-us">Join Us</Link>
-          </Button>
-        </div>*/}
-
+            
+              href="https://forms.gle/vzRb7t46SPBUwi7v8"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Join Us
+            </a>
+          </Button>*/}
+        </div>
         {/* Mobile menu button */}
-        <div className="lg:hidden flex items-center gap-2 flex-shrink-0">
+        <div className="xl:hidden flex items-center gap-2 flex-shrink-0">
           <Button
             size="sm"
             onClick={() => setTheme(theme === "light" ? "dark" : "light")}
@@ -173,27 +171,6 @@ export function Navbar() {
                 Admin Panel
               </Link>
             )}
-            {/* Comment it out, not sure should i delete this */}
-            {/* <div
-              className="flex justify-center py-2"
-              onClickCapture={() => setMobileOpen(false)}
-            > */}
-              {/* <WalletButton /> */}
-            {/* </div> */}
-
-            {/* <Button
-              size="lg"
-              className="rounded-xl font-bold mt-4 w-full h-12"
-              asChild
-            >
-              <Link
-                href="https://forms.gle/vzRb7t46SPBUwi7v8"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Join Us
-              </Link> 
-            </Button>*/}
           </div>
         </div>
       )}