5e0be60c30
This release transforms PING into a sophisticated newspaper-style digital publication with enhanced readability and professional presentation. Major Features: - New FeaturedPostHero component with full-width newspaper design - Completely redesigned homepage with responsive newspaper grid layout - Enhanced PostCard component with refined typography and spacing - Improved mobile-first responsive design (mobile → tablet → desktop → 2XL) - Archive section with multi-column layout for deeper content discovery Technical Improvements: - Enhanced blog post validation and error handling in lib/blog.ts - Better date handling and normalization for scheduled posts - Improved Dockerfile with correct content volume mount paths - Fixed port configuration (3025 throughout stack) - Updated Tailwind config with refined typography and newspaper aesthetics - Added getFeaturedPost() function for hero selection UI/UX Enhancements: - Professional newspaper-style borders and dividers - Improved dark mode styling throughout - Better content hierarchy and visual flow - Enhanced author bylines and metadata presentation - Refined color palette with newspaper sophistication Documentation: - Added DESIGN_BRIEF_NEWSPAPER_LAYOUT.md detailing design principles - Added TESTING_RESULTS_25_POSTS.md with test scenarios This release establishes PING as a premium publication platform for AI orchestration and contextual intelligence thought leadership. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
71 lines
3.0 KiB
TypeScript
71 lines
3.0 KiB
TypeScript
'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-mulberry-950/80 backdrop-blur-md border-b border-carbon-200/50 dark:border-carbon-800/50'
|
|
: 'bg-white/20 dark:bg-mulberry-950/20 backdrop-blur-sm'
|
|
}`}>
|
|
<nav className="blog-container py-chorus-lg">
|
|
{/* Traditional Newspaper Masthead Layout */}
|
|
<div className="flex flex-col items-center space-y-4">
|
|
{/* Logo Group - Centered */}
|
|
<Link href="/" className="flex items-center space-x-4 group">
|
|
<div className="w-16 h-16 group-hover:scale-110 transition-transform">
|
|
<ThreeLogo className="w-full h-full" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-logo font-thin text-3xl leading-none text-carbon-900 dark:text-carbon-100 text-center">CHORUS</span>
|
|
<span className="text-carbon-600 dark:text-carbon-500 text-sm font-bold tracking-wider text-left">PING!</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Navigation Bar - Below Logo */}
|
|
<div className="flex items-center justify-center space-x-8 border-t border-b border-carbon-200 dark:border-carbon-800 py-3 w-full max-w-2xl">
|
|
<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 text-sm uppercase tracking-wide"
|
|
>
|
|
Home
|
|
</Link>
|
|
<span className="text-carbon-300 dark:text-carbon-700">•</span>
|
|
<Link
|
|
href="/"
|
|
className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium text-sm uppercase tracking-wide"
|
|
>
|
|
All Posts
|
|
</Link>
|
|
<span className="text-carbon-300 dark:text-carbon-700">•</span>
|
|
<div className="flex items-center space-x-4">
|
|
|
|
<Link
|
|
href="https://chorus.services"
|
|
className="px-3 py-1 bg-carbon-900 dark:bg-mulberry-700 hover:bg-carbon-800 dark:hover:bg-mulberry-600 text-white dark:text-mulberry-100 rounded font-medium transition-colors text-xs uppercase tracking-wide"
|
|
>
|
|
Join Waitlist
|
|
</Link>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
)
|
|
} |