Merge pull request #14 from ComputerScienceHouse/gold

Change website to be gold themed, with logo front and center

Author: IsaacIngram

public/csh-50th-logo.png

@@ -22,9 +22,11 @@ export function Navbar() {
         <div className="flex items-center justify-between h-16 md:h-20">
           {/* Logo */}
           <Link to="/" className="flex items-center gap-2">
-            <span className="text-xl md:text-2xl font-display font-bold text-gradient">
-              CSH 50th
-            </span>
+            <img 
+              src="/csh-50th-logo.png" 
+              alt="CSH 50th Anniversary" 
+              className="h-10 md:h-12 w-auto"
+            />
           </Link>
 
           {/* Desktop Navigation */}

src/components/Navbar.tsx

@@ -16,8 +16,8 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         // CSH branded variants
-        hero: "bg-gradient-to-r from-[hsl(322,78%,39%)] to-[hsl(346,79%,50%)] text-white font-semibold shadow-lg shadow-[hsl(322,78%,39%)]/30 hover:scale-105 hover:shadow-xl hover:shadow-[hsl(322,78%,39%)]/40",
-        "hero-outline": "border-2 border-[hsl(322,78%,39%)] bg-transparent text-foreground hover:bg-[hsl(322,78%,39%)]/10 hover:border-[hsl(346,79%,50%)]",
+        hero: "bg-gradient-to-r from-[hsl(43,74%,49%)] to-[hsl(45,85%,55%)] text-black font-semibold shadow-lg shadow-[hsl(43,74%,49%)]/30 hover:scale-105 hover:shadow-xl hover:shadow-[hsl(43,74%,49%)]/40",
+        "hero-outline": "border-2 border-[hsl(43,74%,49%)] bg-transparent text-foreground hover:bg-[hsl(43,74%,49%)]/10 hover:border-[hsl(45,85%,55%)]",
         glass: "bg-[hsl(240,10%,10%)]/80 backdrop-blur-xl border border-[hsl(240,10%,25%)]/50 text-foreground hover:bg-[hsl(240,10%,16%)]/80",
       },
       size: {

src/components/ui/button.tsx

@@ -6,7 +6,7 @@
 
 @layer base {
   :root {
-    /* CSH Brand Colors - Dark Theme */
+    /* Golden Anniversary - Dark Theme */
     --background: 240 10% 6%;
     --foreground: 0 0% 98%;
 
@@ -16,35 +16,35 @@
     --popover: 240 10% 10%;
     --popover-foreground: 0 0% 98%;
 
-    /* Primary: CSH Magenta #B0197E */
-    --primary: 322 78% 39%;
-    --primary-foreground: 0 0% 100%;
+    /* Primary: Rich Goldenrod #DAA520 */
+    --primary: 43 74% 49%;
+    --primary-foreground: 240 10% 6%;
 
-    /* Secondary: CSH Red #E11C52 */
-    --secondary: 346 79% 50%;
-    --secondary-foreground: 0 0% 100%;
+    /* Secondary: Warm Gold */
+    --secondary: 45 85% 55%;
+    --secondary-foreground: 240 10% 6%;
 
     --muted: 240 10% 16%;
     --muted-foreground: 240 5% 65%;
 
-    --accent: 322 78% 39%;
-    --accent-foreground: 0 0% 100%;
+    --accent: 43 74% 49%;
+    --accent-foreground: 240 10% 6%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
 
     --border: 240 10% 20%;
     --input: 240 10% 20%;
-    --ring: 322 78% 39%;
+    --ring: 43 74% 49%;
 
     --radius: 0.75rem;
 
-    /* Custom CSH tokens */
-    --csh-magenta: 322 78% 39%;
-    --csh-red: 346 79% 50%;
-    --csh-gradient: linear-gradient(135deg, hsl(322, 78%, 39%) 0%, hsl(346, 79%, 50%) 100%);
-    --csh-gradient-soft: linear-gradient(135deg, hsl(322, 78%, 39%, 0.2) 0%, hsl(346, 79%, 50%, 0.2) 100%);
-    --csh-glow: 0 0 60px hsl(322, 78%, 39%, 0.4);
+    /* Golden Anniversary tokens */
+    --csh-magenta: 43 74% 49%;
+    --csh-red: 45 85% 55%;
+    --csh-gradient: linear-gradient(135deg, hsl(43, 74%, 49%) 0%, hsl(45, 85%, 55%) 100%);
+    --csh-gradient-soft: linear-gradient(135deg, hsl(43, 74%, 49%, 0.2) 0%, hsl(45, 85%, 55%, 0.2) 100%);
+    --csh-glow: 0 0 60px hsl(43, 74%, 49%, 0.4);
 
     /* Glass effect */
     --glass-bg: hsl(240, 10%, 10%, 0.8);
@@ -121,8 +121,8 @@
 }
 
 @keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 30px hsl(322, 78%, 39%, 0.3); }
-  50% { box-shadow: 0 0 60px hsl(346, 79%, 50%, 0.5); }
+  0%, 100% { box-shadow: 0 0 30px hsl(43, 74%, 49%, 0.3); }
+  50% { box-shadow: 0 0 60px hsl(45, 85%, 55%, 0.5); }
 }
 
 @keyframes fade-up {

src/index.css

@@ -26,20 +26,21 @@ const Index = () => {
         <div className="container mx-auto px-4 relative z-10">
           <div className="max-w-4xl mx-auto text-center">
             {/* Badge */}
-            <div className="inline-flex items-center gap-2 glass rounded-full px-4 py-2 mb-8 animate-fade-up">
+            <div className="inline-flex items-center gap-2 glass rounded-full px-4 py-2 mb-8 mt-12 animate-fade-up">
               <Sparkles className="w-4 h-4 text-csh-magenta" />
               <span className="text-sm font-medium text-muted-foreground">
                 April 10-12, 2026 • Rochester, NY
               </span>
             </div>
 
-            {/* Main Headline */}
-            <h1 className="text-5xl md:text-7xl lg:text-8xl font-display font-bold mb-6 animate-fade-up" style={{ animationDelay: "0.1s" }}>
-              <span className="text-foreground">CSH </span>
-              <span className="text-gradient">50th</span>
-              <br />
-              <span className="text-foreground">Anniversary</span>
-            </h1>
+            {/* Main Headline - Logo */}
+            <div className="mb-6 animate-fade-up flex justify-center" style={{ animationDelay: "0.1s" }}>
+              <img 
+                src="/csh-50th-logo.png" 
+                alt="CSH 50th Anniversary" 
+                className="w-full max-w-md h-auto"
+              />
+            </div>
 
             {/* Subheadline */}
             <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8 animate-fade-up" style={{ animationDelay: "0.2s" }}>