Add multi-page routing with navbar navigation

src/app/pages/about/page.tsx

@@ -0,0 +1,9 @@
+import { About } from "@/components/about";
+
+export default function AboutPage() {
+  return (
+    <main>
+      <About />
+    </main>
+  );
+}

src/app/pages/claim-id/page.tsx

@@ -0,0 +1,49 @@
+import { EnsClaim } from "@/components/ens-claim";
+import { CheckCircle, Wallet, Globe } from "lucide-react";
+
+const features = [
+  {
+    icon: CheckCircle,
+    title: "Verified Member",
+    description: "Show your club affiliation prominently on social media and leaderboards.",
+  },
+  {
+    icon: Wallet,
+    title: "Easy Transfers",
+    description: "Send and receive crypto easily without copying 42-character hex strings.",
+  },
+  {
+    icon: Globe,
+    title: "Web3 Native",
+    description: "Log into dApps seamlessly using your new human-readable ENS subname.",
+  },
+];
+
+export default function ClaimIdPage() {
+  return (
+    <main className="pt-24 min-h-screen">
+      <div className="container mx-auto px-4 py-16 text-center">
+        <h1 className="text-5xl font-black mb-4">
+          Get your <span className="text-primary">.web3uoa.eth</span> identity
+        </h1>
+        <p className="text-muted-foreground text-lg max-w-2xl mx-auto mb-12">
+          Ditch the long standard wallet addresses. Claim your personalised, readable Web3
+          identity, exclusive to University of Auckland Web3 Club members.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+          {features.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <div key={feature.title} className="p-6 rounded-2xl border border-border bg-secondary/30 text-left">
+                <Icon className="w-8 h-8 text-primary mb-4" />
+                <h3 className="font-bold text-lg mb-2">{feature.title}</h3>
+                <p className="text-muted-foreground text-sm">{feature.description}</p>
+              </div>
+            );
+          })}
+        </div>
+        <EnsClaim />
+      </div>
+    </main>
+  );
+}

src/app/pages/events/page.tsx

@@ -0,0 +1,9 @@
+import { Events } from "@/components/events";
+
+export default function EventsPage() {
+  return (
+    <main>
+      <Events />
+    </main>
+  );
+}

src/app/pages/partners/page.tsx

@@ -0,0 +1,9 @@
+import { Sponsors } from "@/components/sponsors";
+
+export default function SponsorsPage() {
+  return (
+    <main>
+      <Sponsors />
+    </main>
+  );
+}

src/components/navbar.tsx

@@ -4,12 +4,13 @@ import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
 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: "Claim your Web3 ID!", href: "#identity", isCTA: true },
+  { 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 },
 ];
 
 export function Navbar() {
@@ -27,46 +28,46 @@ export function Navbar() {
     <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">
         {/* Logo */}
-        <a href="#" className="flex items-center gap-3 group">
+        <Link href="/" className="flex items-center gap-3 group">
           <img
             src="/logo/web3uoa_logo.png"
             alt="WEB3UOA"
             className="w-10 h-10 transition-transform duration-500 group-hover:scale-110 drop-shadow-sm"
           />
           <span className="text-xl font-black tracking-tight">WEB3UOA</span>
-        </a>
+        </Link>
 
         {/* Desktop links */}
         <div className="hidden md:flex items-center gap-8">
           {navLinks.map((link) => (
-            <a
+            <Link
               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"}`}
             >
               {link.label}
-            </a>
+            </Link>
           ))}
           {isAdmin && (
-            <a
+            <Link
               href="/admin"
               className="text-sm font-bold tracking-wide transition-colors text-yellow-500 hover:text-yellow-400"
             >
               Admin Panel
-            </a>
+            </Link>
           )}
           <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
+            <Link
               href="https://forms.gle/vzRb7t46SPBUwi7v8"
               target="_blank"
               rel="noopener noreferrer"
             >
               Join Us
-            </a>
+            </Link>
           </Button>
         </div>
 
@@ -89,23 +90,23 @@ export function Navbar() {
         <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="container mx-auto px-6 py-6 flex flex-col gap-4">
             {navLinks.map((link) => (
-              <a
+              <Link
                 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"}`}
               >
                 {link.label}
-              </a>
+              </Link>
             ))}
             {isAdmin && (
-              <a
+              <Link
                 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"
               >
                 Admin Panel
-              </a>
+              </Link>
             )}
             <div className="flex justify-center py-2">
               <appkit-button balance="hide" />
@@ -115,13 +116,13 @@ export function Navbar() {
               className="rounded-xl font-bold mt-4 w-full h-12"
               asChild
             >
-              <a
+              <Link
                 href="https://forms.gle/vzRb7t46SPBUwi7v8"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Join Us
-              </a>
+              </Link>
             </Button>
           </div>
         </div>