feat: Implement proper Three.js logo system with custom environment mapping
- Replace CDN-based Three.js with npm packages for reliable loading - Add DRACO loader support for compressed GLB files - Implement custom horizon gradient environment mapping - Use exact material properties from reference logo.html (MeshPhysicalMaterial) - Apply proper metallic sheen, clearcoat, and reflectivity settings - Fix camera positioning and canvas sizing to prevent clipping - Maintain square aspect ratio for consistent logo display - Load user's mobius-ring.glb with fallback torus geometry 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -0,0 +1,68 @@
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import ThreeLogo from './ThreeLogo';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-30 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg md:left-64">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<div className="flex items-center gap-chorus-sm px-chorus-sm py-chorus-sm">
|
||||
<ThreeLogo width={64} height={64} />
|
||||
<div>
|
||||
<div className="font-thin font-logo">CHORUS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul className="primary-nav horizontal-menu md:flex items-center">
|
||||
<li className="menu-item">
|
||||
<div className="menu-item">Overview</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="menu-item"><Link href="/" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Overview</Link></li>
|
||||
<li className="menu-item"><Link href="/identity" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Identity</Link></li>
|
||||
<li className="menu-item"><Link href="/usage" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Usage Guidelines</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item">
|
||||
<div className="menu-item">Visual Identity</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="menu-item"><Link href="/visual-identity" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Visual Identity</Link></li>
|
||||
<li className="menu-item"><Link href="/logo" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Logo System</Link></li>
|
||||
<li className="menu-item"><Link href="/typography" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Typography</Link></li>
|
||||
<li className="menu-item"><Link href="/colors" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Color Palette</Link></li>
|
||||
<li className="menu-item"><Link href="/iconography" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Iconography</Link></li>
|
||||
<li className="menu-item"><Link href="/accessibility" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Accessibility</Link></li>
|
||||
<li className="menu-item"><Link href="/components" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Components</Link></li>
|
||||
<li className="menu-item"><Link href="/motion" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Motion System</Link></li>
|
||||
<li className="menu-item"><Link href="/implementation" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Implementation</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item">
|
||||
<div className="menu-item">Communications</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="menu-item"><Link href="/culture" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Culture</Link></li>
|
||||
<li className="menu-item"><Link href="/communications" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</Link></li>
|
||||
<li className="menu-item"><Link href="/public-relations" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</Link></li>
|
||||
<li className="menu-item"><Link href="/investor-relations" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</Link></li>
|
||||
<li className="menu-item"><Link href="/collaborators" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</Link></li>
|
||||
<li className="menu-item"><Link href="/social-media" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<nav className="flex items-center space-x-chorus-xs px-chorus-xs py-chorus-xs">
|
||||
<Link href="/" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Home</Link>
|
||||
<span className="text-carbon-500 dark:text-mulberry-400">/</span>
|
||||
<span className="text-carbon-800 dark:text-mulberry-200">Brand Guide</span>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Reference in New Issue
Block a user