Initial commit: CHORUS PING! blog

- Next.js 14 blog application with theme support
- Docker containerization with volume bindings
- Traefik integration with Let's Encrypt SSL
- MDX support for blog posts
- Theme toggle with localStorage persistence
- Scheduled posts directory structure
- Brand guidelines compliance with CHORUS colors

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/BlogHeader.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import Link from 'next/link'
+import { useState, useEffect } from 'react'
+import ThreeLogo from './ThreeLogo'
+import ThemeToggle from './ThemeToggle'
+
+export default function BlogHeader() {
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <header className={`sticky top-0 z-50 transition-all duration-300 ${
+      isScrolled 
+        ? 'bg-white/80 dark:bg-carbon-950/80 backdrop-blur-md border-b border-carbon-200/50 dark:border-carbon-800/50' 
+        : 'bg-white/20 dark:bg-carbon-950/20 backdrop-blur-sm'
+    }`}>
+      <nav className="blog-container py-4">
+        <div className="flex items-center justify-between">
+          <Link href="/" className="flex items-center space-x-3 group">
+            <div className="w-14 h-14 group-hover:scale-110 transition-transform">
+              <ThreeLogo className="w-full h-full" />
+            </div>
+            <div className="flex flex-col">
+              <span className="font-logo font-semibold text-lg leading-none text-carbon-900 dark:text-carbon-100">CHORUS</span>
+              <span className="text-carbon-600 dark:text-carbon-500 text-xs font-medium">PING!</span>
+            </div>
+          </Link>
+
+          <div className="hidden md:flex items-center space-x-8">
+            <Link 
+              href="/" 
+              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
+            >
+              All Posts
+            </Link>
+            <Link 
+              href="/tags" 
+              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
+            >
+              Topics
+            </Link>
+            <Link 
+              href="https://chorus.services" 
+              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium"
+            >
+              About CHORUS
+            </Link>
+          </div>
+
+          <div className="flex items-center space-x-4">
+            <ThemeToggle />
+            <Link
+              href="https://chorus.services"
+              className="px-4 py-2 bg-carbon-900 dark:bg-mulberry-700 hover:bg-carbon-800 dark:hover:bg-mulberry-600 text-white dark:text-mulberry-100 rounded-lg font-medium transition-colors text-sm"
+            >
+              Join Waitlist
+            </Link>
+          </div>
+        </div>
+      </nav>
+    </header>
+  )
+}