UoaWDCC · rebeccafitzpatr · May 14, 2026 · Apr 25, 2026 · Apr 28, 2026 · May 6, 2026
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,24 +1,38 @@
+@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
 @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-russo: 
+  'Russo One', sans-serif;
+
   --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 +68,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 +79,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;
+}
diff --git 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>
   );
-}
+}
diff --git 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
@@ -3,46 +3,42 @@ 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 font-russo">WEB3</span>
+              <span className="text-uoa font-russo">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
                   href="https://forms.gle/vzRb7t46SPBUwi7v8"
                   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">