From 56834d0313b51b39e679710b18d38018bfbf2005 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sun, 18 Jan 2026 20:06:13 +0100
Subject: [PATCH] feat: add Crypto Commons Gathering 2026 site banner

- Add event-banner.tsx component with link to cryptocommonsgather.ing
- Integrate banner at top of header across all pages
- Adjust page padding to accommodate taller header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/events/page.tsx         |  2 +-
 app/membership/page.tsx     |  2 +-
 app/research/page.tsx       |  2 +-
 app/sponsors/page.tsx       |  2 +-
 components/event-banner.tsx | 27 ++++++++++++++
 components/header.tsx       | 70 ++++++++++++++++++++-----------------
 components/hero.tsx         |  2 +-
 7 files changed, 69 insertions(+), 38 deletions(-)
 create mode 100644 components/event-banner.tsx

diff --git a/app/events/page.tsx b/app/events/page.tsx
index cfd8cf5..be8fb28 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -8,7 +8,7 @@ export default function EventsPage() {
   return (
     <main className="min-h-screen">
       <Header />
-      <div className="pt-20">
+      <div className="pt-32">
         <section className="container mx-auto px-6 py-20">
           <div className="max-w-4xl mx-auto">
             <div className="flex items-center gap-3 mb-4">
diff --git a/app/membership/page.tsx b/app/membership/page.tsx
index b837bc7..611d660 100644
--- a/app/membership/page.tsx
+++ b/app/membership/page.tsx
@@ -9,7 +9,7 @@ export default function MembershipPage() {
   return (
     <main className="min-h-screen">
       <Header />
-      <div className="pt-20">
+      <div className="pt-32">
         {/* Hero Section */}
         <section className="bg-muted py-20">
           <div className="container mx-auto px-4">
diff --git a/app/research/page.tsx b/app/research/page.tsx
index e2937d6..3affd1d 100644
--- a/app/research/page.tsx
+++ b/app/research/page.tsx
@@ -8,7 +8,7 @@ export default function ResearchPage() {
   return (
     <main className="min-h-screen">
       <Header />
-      <div className="pt-20">
+      <div className="pt-32">
         {/* Hero Section */}
         <section className="bg-muted py-20">
           <div className="container mx-auto px-4">
diff --git a/app/sponsors/page.tsx b/app/sponsors/page.tsx
index 84a8eb4..ec5d496 100644
--- a/app/sponsors/page.tsx
+++ b/app/sponsors/page.tsx
@@ -8,7 +8,7 @@ export default function SponsorsPage() {
   return (
     <main className="min-h-screen">
       <Header />
-      <div className="pt-20">
+      <div className="pt-32">
         {/* Hero Section */}
         <section className="bg-muted py-20">
           <div className="container mx-auto px-4">
diff --git a/components/event-banner.tsx b/components/event-banner.tsx
new file mode 100644
index 0000000..f7f9d9e
--- /dev/null
+++ b/components/event-banner.tsx
@@ -0,0 +1,27 @@
+import Link from "next/link"
+import { ArrowRight, Sparkles } from "lucide-react"
+
+export function EventBanner() {
+  return (
+    <div className="bg-primary text-primary-foreground">
+      <Link
+        href="https://cryptocommonsgather.ing"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block"
+      >
+        <div className="container mx-auto px-6 py-3">
+          <div className="flex items-center justify-center gap-3 text-center">
+            <Sparkles className="h-5 w-5 animate-pulse hidden sm:block" />
+            <span className="font-semibold text-sm sm:text-base">
+              <span className="hidden sm:inline">Join us at the </span>
+              <span className="font-bold">Crypto Commons Gathering 2026</span>
+              <span className="hidden md:inline"> — Building the future of digital commons together</span>
+            </span>
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          </div>
+        </div>
+      </Link>
+    </div>
+  )
+}
diff --git a/components/header.tsx b/components/header.tsx
index 662fa3c..a1e4969 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,42 +1,46 @@
 import Link from "next/link"
 import Image from "next/image"
+import { EventBanner } from "./event-banner"
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-border">
-      <div className="container mx-auto px-6 py-4">
-        <div className="flex items-center justify-between">
-          <Link href="/" className="flex items-center gap-3">
-            <Image
-              src="/images/cca-logo.png"
-              alt="Crypto Commons Association"
-              width={48}
-              height={48}
-              className="h-12 w-auto"
-            />
-            <div className="text-2xl font-mono font-bold tracking-tight">CCA</div>
-          </Link>
+    <header className="fixed top-0 left-0 right-0 z-50">
+      <EventBanner />
+      <div className="bg-background/80 backdrop-blur-sm border-b border-border">
+        <div className="container mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="flex items-center gap-3">
+              <Image
+                src="/images/cca-logo.png"
+                alt="Crypto Commons Association"
+                width={48}
+                height={48}
+                className="h-12 w-auto"
+              />
+              <div className="text-2xl font-mono font-bold tracking-tight">CCA</div>
+            </Link>
 
-          <nav className="hidden md:flex items-center gap-8">
-            <Link href="/#about" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              About
-            </Link>
-            <Link href="/research" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              Research
-            </Link>
-            <Link href="/events" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              Events
-            </Link>
-            <Link href="/sponsors" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              Sponsors
-            </Link>
-            <Link href="/membership" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              Membership
-            </Link>
-            <Link href="/#contact" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-              Contact
-            </Link>
-          </nav>
+            <nav className="hidden md:flex items-center gap-8">
+              <Link href="/#about" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                About
+              </Link>
+              <Link href="/research" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Research
+              </Link>
+              <Link href="/events" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Events
+              </Link>
+              <Link href="/sponsors" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Sponsors
+              </Link>
+              <Link href="/membership" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Membership
+              </Link>
+              <Link href="/#contact" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                Contact
+              </Link>
+            </nav>
+          </div>
         </div>
       </div>
     </header>
diff --git a/components/hero.tsx b/components/hero.tsx
index 5cf47f1..b384530 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -2,7 +2,7 @@ import Image from "next/image"
 
 export function Hero() {
   return (
-    <section className="pt-32 pb-20 px-6">
+    <section className="pt-44 pb-20 px-6">
       <div className="container mx-auto max-w-5xl">
         <div className="flex flex-col md:flex-row items-center gap-12 md:gap-16">
           <div className="flex-shrink-0">