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>
This commit is contained in:
Jeff Emmett 2026-01-18 20:06:13 +01:00
parent 0f683d08fb
commit 56834d0313
7 changed files with 69 additions and 38 deletions

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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>
)
}

View File

@ -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>

View File

@ -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">