Implement core website structure and pages

- 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

src/components/Header.tsx

@@ -0,0 +1,80 @@
+'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>
+  )
+}