d1337b4b77
- Create responsive homepage with hero section, features, and animations - Add adventures page with filterable adventure grid - Add routes page with downloadable GPX route library - Implement Header component with responsive navigation - Set up Tailwind CSS with custom adventure theme - Fix Next.js configuration and add Unsplash image support - Add Framer Motion animations throughout - Install and configure all dependencies successfully Features added: - Modern UI with gradient backgrounds and glass morphism - Mobile-responsive design - Interactive animations and hover effects - Adventure browsing and filtering - Route discovery and download system - Professional motorcycle adventure branding
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { Menu, X } from 'lucide-react'
|
||
import Link from 'next/link'
|
||
|
||
export default function Header() {
|
||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||
|
||
const navigation = [
|
||
{ name: 'Home', href: '/' },
|
||
{ name: 'Adventures', href: '/adventures' },
|
||
{ name: 'Routes', href: '/routes' },
|
||
{ name: 'Community', href: '/community' },
|
||
{ name: 'Blog', href: '/blog' },
|
||
]
|
||
|
||
return (
|
||
<nav className="fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-gray-200 z-50">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex justify-between items-center h-16">
|
||
<div className="flex items-center">
|
||
<Link href="/" className="text-2xl font-bold text-gray-900">
|
||
🏍️ <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Moto Adventure</span>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Desktop Navigation */}
|
||
<div className="hidden md:block">
|
||
<div className="ml-10 flex items-baseline space-x-4">
|
||
{navigation.map((item) => (
|
||
<Link
|
||
key={item.name}
|
||
href={item.href}
|
||
className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"
|
||
>
|
||
{item.name}
|
||
</Link>
|
||
))}
|
||
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
|
||
Get Started
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mobile menu button */}
|
||
<div className="md:hidden">
|
||
<button
|
||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||
className="text-gray-600 hover:text-gray-900 p-2"
|
||
>
|
||
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mobile Navigation */}
|
||
{isMenuOpen && (
|
||
<div className="md:hidden">
|
||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
|
||
{navigation.map((item) => (
|
||
<Link
|
||
key={item.name}
|
||
href={item.href}
|
||
className="text-gray-600 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium transition-colors"
|
||
onClick={() => setIsMenuOpen(false)}
|
||
>
|
||
{item.name}
|
||
</Link>
|
||
))}
|
||
<button className="w-full text-left bg-blue-600 text-white px-3 py-2 rounded-lg text-base font-medium hover:bg-blue-700 transition-colors mt-4">
|
||
Get Started
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|