Files
zeekay 2643792f94 feat: Add proper Hanzo branding with header and footer
- Add @hanzo/logo package with official Hanzo logo
- Create Header component with navigation and logo
- Create Footer component with links and branding
- Update layout to include header/footer throughout site
- Fixed header with backdrop blur and proper z-index
- Responsive design with mobile menu button
2025-10-28 19:25:24 -07:00

109 lines
3.4 KiB
TypeScript

import Link from 'next/link';
import { HanzoLogo } from '@hanzo/logo/react';
export function Footer() {
return (
<footer className="py-12 px-4 bg-black border-t border-white/10">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
{/* Brand */}
<div>
<div className="flex items-center gap-3 mb-4">
<HanzoLogo variant="white" size={28} />
<span className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
Templates
</span>
</div>
<p className="text-gray-400 text-sm">
Premium UI/UX templates for modern web applications
</p>
</div>
{/* Product */}
<div>
<h4 className="font-bold mb-4">Product</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li>
<Link href="/gallery" className="hover:text-white transition-colors">
Templates
</Link>
</li>
<li>
<Link href="/docs" className="hover:text-white transition-colors">
Documentation
</Link>
</li>
<li>
<Link href="/pricing" className="hover:text-white transition-colors">
Pricing
</Link>
</li>
</ul>
</div>
{/* Company */}
<div>
<h4 className="font-bold mb-4">Company</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li>
<Link href="/about" className="hover:text-white transition-colors">
About
</Link>
</li>
<li>
<a
href="https://hanzo.ai"
className="hover:text-white transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Hanzo AI
</a>
</li>
<li>
<a
href="https://github.com/hanzoai"
className="hover:text-white transition-colors"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
</li>
</ul>
</div>
{/* Legal */}
<div>
<h4 className="font-bold mb-4">Legal</h4>
<ul className="space-y-2 text-gray-400 text-sm">
<li>
<Link href="/terms" className="hover:text-white transition-colors">
Terms
</Link>
</li>
<li>
<Link href="/privacy" className="hover:text-white transition-colors">
Privacy
</Link>
</li>
<li>
<Link href="/license" className="hover:text-white transition-colors">
License
</Link>
</li>
</ul>
</div>
</div>
{/* Bottom bar */}
<div className="text-center pt-8 border-t border-white/10">
<p className="text-gray-400 text-sm">
© 2025 Hanzo AI Inc. All rights reserved.
</p>
</div>
</div>
</footer>
);
}