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

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,10 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
   images: {
-    domains: ['localhost', 'res.cloudinary.com'],
+    domains: ['localhost', 'res.cloudinary.com', 'images.unsplash.com'],
   },
   webpack: (config) => {
     config.module.rules.push({

package.json

@@ -33,7 +33,7 @@
     "react-leaflet": "^4.2.1",
     "leaflet": "^1.9.4",
     "@types/leaflet": "^1.9.14",
-    "gpx-parser-builder": "^1.7.2",
+    "gpxparser": "^3.0.8",
     "multer": "^1.4.5-lts.1",
     "@types/multer": "^1.4.12",
     "sharp": "^0.33.5",

src/app/adventures/page.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { MapPin, Clock, Camera, Heart, Share2, Calendar } from 'lucide-react'
+import Header from '@/components/Header'
+import Image from 'next/image'
+
+export default function AdventuresPage() {
+  const adventures = [
+    {
+      id: 1,
+      title: "Pacific Coast Highway Adventure",
+      location: "California, USA",
+      duration: "7 days",
+      distance: "650 miles",
+      difficulty: "Intermediate",
+      likes: 234,
+      date: "2024-06-15",
+      image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+      description: "An epic coastal ride through California's most scenic highways, featuring breathtaking ocean views and winding mountain roads.",
+      tags: ["coastal", "scenic", "mountains"]
+    },
+    {
+      id: 2,
+      title: "Alpine Loop Challenge",
+      location: "Swiss Alps",
+      duration: "5 days",
+      distance: "800 miles",
+      difficulty: "Advanced",
+      likes: 189,
+      date: "2024-07-20",
+      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+      description: "Navigate through stunning Alpine passes with challenging curves and spectacular mountain vistas.",
+      tags: ["mountains", "challenging", "scenic"]
+    },
+    {
+      id: 3,
+      title: "Desert Sunset Expedition",
+      location: "Arizona, USA",
+      duration: "3 days",
+      distance: "450 miles",
+      difficulty: "Beginner",
+      likes: 156,
+      date: "2024-05-10",
+      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+      description: "Experience the magic of desert landscapes with incredible sunset views and star-filled nights.",
+      tags: ["desert", "sunset", "easy"]
+    },
+    {
+      id: 4,
+      title: "Northern Lights Quest",
+      location: "Norway",
+      duration: "10 days",
+      distance: "1200 miles",
+      difficulty: "Advanced",
+      likes: 312,
+      date: "2024-03-01",
+      image: "https://images.unsplash.com/photo-1531366936337-7c912a4589a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+      description: "Chase the Aurora Borealis through Norway's dramatic fjords and Arctic landscapes.",
+      tags: ["arctic", "northern lights", "fjords"]
+    },
+    {
+      id: 5,
+      title: "Tuscany Wine Trail",
+      location: "Tuscany, Italy",
+      duration: "6 days",
+      distance: "520 miles",
+      difficulty: "Intermediate",
+      likes: 278,
+      date: "2024-08-05",
+      image: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+      description: "Ride through rolling hills, vineyards, and medieval towns in Italy's most beautiful region.",
+      tags: ["vineyards", "culture", "hills"]
+    },
+    {
+      id: 6,
+      title: "Great Ocean Road",
+      location: "Victoria, Australia",
+      duration: "4 days",
+      distance: "380 miles",
+      difficulty: "Beginner",
+      likes: 201,
+      date: "2024-04-18",
+      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80",
+      description: "Explore Australia's iconic coastal route with limestone cliffs, beaches, and rainforest sections.",
+      tags: ["coastal", "iconic", "beaches"]
+    }
+  ]
+
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty) {
+      case 'Beginner': return 'bg-green-100 text-green-800'
+      case 'Intermediate': return 'bg-yellow-100 text-yellow-800'
+      case 'Advanced': return 'bg-red-100 text-red-800'
+      default: return 'bg-gray-100 text-gray-800'
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      <Header />
+      
+      {/* Hero Section */}
+      <section className="pt-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <h1 className="text-4xl md:text-5xl font-bold mb-6">
+              Epic Adventures Await
+            </h1>
+            <p className="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
+              Discover incredible motorcycle journeys from riders around the world. 
+              Get inspired, plan your next trip, and share your own adventures.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
+                Share Your Adventure
+              </button>
+              <button className="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition-colors">
+                Browse by Region
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Filters */}
+      <section className="py-8 bg-white border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-wrap gap-4 items-center justify-between">
+            <div className="flex flex-wrap gap-2">
+              <button className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">All</button>
+              <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">Coastal</button>
+              <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">Mountains</button>
+              <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">Desert</button>
+              <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">Urban</button>
+            </div>
+            <select className="px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+              <option>Sort by Date</option>
+              <option>Sort by Popularity</option>
+              <option>Sort by Distance</option>
+              <option>Sort by Difficulty</option>
+            </select>
+          </div>
+        </div>
+      </section>
+
+      {/* Adventures Grid */}
+      <section className="py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {adventures.map((adventure, index) => (
+              <motion.div
+                key={adventure.id}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer"
+              >
+                <div className="relative h-64 overflow-hidden">
+                  <div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500" />
+                  <div className="absolute inset-0 bg-black/20" />
+                  <div className="absolute top-4 left-4">
+                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${getDifficultyColor(adventure.difficulty)}`}>
+                      {adventure.difficulty}
+                    </span>
+                  </div>
+                  <div className="absolute top-4 right-4 flex gap-2">
+                    <button className="p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors">
+                      <Heart className="w-4 h-4" />
+                    </button>
+                    <button className="p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors">
+                      <Share2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+                
+                <div className="p-6">
+                  <div className="flex items-center gap-2 text-gray-500 text-sm mb-2">
+                    <Calendar className="w-4 h-4" />
+                    {new Date(adventure.date).toLocaleDateString()}
+                  </div>
+                  
+                  <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
+                    {adventure.title}
+                  </h3>
+                  
+                  <div className="flex items-center gap-2 text-gray-600 mb-3">
+                    <MapPin className="w-4 h-4" />
+                    <span className="text-sm">{adventure.location}</span>
+                  </div>
+                  
+                  <p className="text-gray-600 text-sm mb-4 line-clamp-2">
+                    {adventure.description}
+                  </p>
+                  
+                  <div className="flex items-center justify-between text-sm text-gray-500 mb-4">
+                    <div className="flex items-center gap-2">
+                      <Clock className="w-4 h-4" />
+                      {adventure.duration}
+                    </div>
+                    <div>{adventure.distance}</div>
+                  </div>
+                  
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-wrap gap-1">
+                      {adventure.tags.slice(0, 2).map((tag) => (
+                        <span key={tag} className="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                    <div className="flex items-center gap-1 text-gray-500">
+                      <Heart className="w-4 h-4" />
+                      <span className="text-sm">{adventure.likes}</span>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Load More */}
+      <section className="py-8 text-center">
+        <button className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">
+          Load More Adventures
+        </button>
+      </section>
+    </div>
+  )
+}

src/app/globals.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles for motorcycle adventure theme */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 98%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Adventure theme colors */
+.adventure-gradient {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.hero-bg {
+  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="a" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="%23111827"/><rect width="100%" height="100%" fill="url(%23a)"/></svg>');
+}
+
+/* Smooth scroll */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}

src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Moto Adventure - Epic Motorcycle Journeys',
+  description: 'Discover epic motorcycle adventures, share your journeys, and connect with fellow riders. Track your routes, share stories, and explore the world on two wheels.',
+  keywords: 'motorcycle, adventure, riding, travel, GPS, routes, touring, bike',
+  authors: [{ name: 'Moto Adventure Team' }],
+  openGraph: {
+    title: 'Moto Adventure - Epic Motorcycle Journeys',
+    description: 'Discover epic motorcycle adventures and share your journeys with fellow riders.',
+    url: 'https://moto-adv.com',
+    siteName: 'Moto Adventure',
+    type: 'website',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="scroll-smooth">
+      <body className={inter.className}>
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+          {children}
+        </div>
+      </body>
+    </html>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,246 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { MapPin, Route, Users, Camera, Award, ArrowRight } from 'lucide-react'
+import Link from 'next/link'
+
+export default function HomePage() {
+  const features = [
+    {
+      icon: <Route className="w-8 h-8" />,
+      title: "Track Your Routes",
+      description: "Upload and share your GPX tracks with the community. Discover new paths and hidden gems."
+    },
+    {
+      icon: <MapPin className="w-8 h-8" />,
+      title: "Interactive Maps",
+      description: "Explore detailed maps with motorcycle-friendly routes, gas stations, and points of interest."
+    },
+    {
+      icon: <Camera className="w-8 h-8" />,
+      title: "Share Adventures",
+      description: "Document your journeys with photos and stories. Inspire others with your epic rides."
+    },
+    {
+      icon: <Users className="w-8 h-8" />,
+      title: "Join Community",
+      description: "Connect with fellow riders, plan group rides, and share local knowledge."
+    },
+    {
+      icon: <Award className="w-8 h-8" />,
+      title: "Earn Achievements",
+      description: "Complete challenges, discover new places, and unlock special badges for your adventures."
+    }
+  ]
+
+  return (
+    <div className="min-h-screen">
+      {/* Navigation */}
+      <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">
+              <h1 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>
+              </h1>
+            </div>
+            <div className="hidden md:block">
+              <div className="ml-10 flex items-baseline space-x-4">
+                <a href="#home" className="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a>
+                <a href="#adventures" className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Adventures</a>
+                <a href="#routes" className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Routes</a>
+                <a href="#community" className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">Community</a>
+                <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>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section id="home" className="pt-16 hero-bg min-h-screen flex items-center">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+          <div className="text-center">
+            <motion.h1 
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8 }}
+              className="text-4xl md:text-6xl font-bold text-white mb-6"
+            >
+              Epic Motorcycle
+              <span className="block bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent">
+                Adventures Await
+              </span>
+            </motion.h1>
+            <motion.p 
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto"
+            >
+              Discover breathtaking routes, share your journeys, and connect with fellow riders. 
+              Your next adventure is just a ride away.
+            </motion.p>
+            <motion.div 
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+            >
+              <button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-lg text-lg font-medium hover:from-blue-700 hover:to-purple-700 transition-all transform hover:scale-105 flex items-center gap-2">
+                Start Your Journey
+                <ArrowRight className="w-5 h-5" />
+              </button>
+              <button className="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-white hover:text-gray-900 transition-all">
+                Explore Routes
+              </button>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+              Everything You Need for Epic Adventures
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              From route planning to community sharing, we've got all the tools to make your motorcycle adventures unforgettable.
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="bg-gradient-to-br from-blue-50 to-purple-50 p-8 rounded-2xl border border-blue-100 hover:shadow-lg transition-all duration-300 group hover:scale-105"
+              >
+                <div className="text-blue-600 mb-4 group-hover:scale-110 transition-transform duration-300">
+                  {feature.icon}
+                </div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6 }}
+              viewport={{ once: true }}
+              className="text-white"
+            >
+              <div className="text-4xl md:text-5xl font-bold mb-2">10K+</div>
+              <div className="text-xl text-blue-100">Routes Shared</div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              viewport={{ once: true }}
+              className="text-white"
+            >
+              <div className="text-4xl md:text-5xl font-bold mb-2">5K+</div>
+              <div className="text-xl text-blue-100">Active Riders</div>
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              viewport={{ once: true }}
+              className="text-white"
+            >
+              <div className="text-4xl md:text-5xl font-bold mb-2">100K+</div>
+              <div className="text-xl text-blue-100">Miles Tracked</div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+          >
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+              Ready to Start Your Adventure?
+            </h2>
+            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+              Join thousands of riders who trust Moto Adventure to plan their journeys and share their stories.
+            </p>
+            <button className="bg-gradient-to-r from-yellow-400 to-orange-500 text-gray-900 px-8 py-4 rounded-lg text-lg font-bold hover:from-yellow-500 hover:to-orange-600 transition-all transform hover:scale-105">
+              Get Started Today
+            </button>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-800 text-white py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <h3 className="text-xl font-bold mb-4">🏍️ Moto Adventure</h3>
+              <p className="text-gray-400">
+                Your ultimate companion for motorcycle adventures and route sharing.
+              </p>
+            </div>
+            <div>
+              <h4 className="text-lg font-semibold mb-4">Features</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white transition-colors">Route Tracking</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Community</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Adventures</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Maps</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-lg font-semibold mb-4">Support</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white transition-colors">Help Center</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Contact Us</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Privacy</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Terms</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="text-lg font-semibold mb-4">Connect</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white transition-colors">Twitter</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Instagram</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Facebook</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">YouTube</a></li>
+              </ul>
+            </div>
+          </div>
+          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+            <p>&copy; 2025 Moto Adventure. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}

src/app/routes/page.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { MapPin, Download, Star, Filter, Search, Upload } from 'lucide-react'
+import Header from '@/components/Header'
+
+export default function RoutesPage() {
+  const routes = [
+    {
+      id: 1,
+      name: "Coastal Highway 1",
+      distance: "145 miles",
+      difficulty: "Intermediate",
+      rating: 4.8,
+      downloads: 2341,
+      startPoint: "San Francisco, CA",
+      endPoint: "Monterey, CA",
+      terrain: "Coastal",
+      description: "Stunning coastal views with challenging curves and breathtaking cliff-side roads.",
+      tags: ["scenic", "coastal", "curves"]
+    },
+    {
+      id: 2,
+      name: "Alpine Adventure Loop",
+      distance: "230 miles",
+      difficulty: "Advanced",
+      rating: 4.9,
+      downloads: 1876,
+      startPoint: "Interlaken, Switzerland",
+      endPoint: "Interlaken, Switzerland",
+      terrain: "Mountain",
+      description: "High-altitude mountain passes with snow-capped peaks and pristine lakes.",
+      tags: ["mountains", "challenging", "scenic"]
+    },
+    {
+      id: 3,
+      name: "Desert Sunrise Route",
+      distance: "89 miles",
+      difficulty: "Beginner",
+      rating: 4.6,
+      downloads: 3102,
+      startPoint: "Phoenix, AZ",
+      endPoint: "Sedona, AZ",
+      terrain: "Desert",
+      description: "Easy desert ride perfect for beginners with amazing sunrise views.",
+      tags: ["desert", "easy", "sunrise"]
+    },
+    {
+      id: 4,
+      name: "Black Forest Trail",
+      distance: "167 miles",
+      difficulty: "Intermediate",
+      rating: 4.7,
+      downloads: 1654,
+      startPoint: "Stuttgart, Germany",
+      endPoint: "Freiburg, Germany",
+      terrain: "Forest",
+      description: "Winding forest roads through Germany's famous Black Forest region.",
+      tags: ["forest", "winding", "cultural"]
+    },
+    {
+      id: 5,
+      name: "Fjord Explorer",
+      distance: "312 miles",
+      difficulty: "Advanced",
+      rating: 4.9,
+      downloads: 987,
+      startPoint: "Bergen, Norway",
+      endPoint: "Geiranger, Norway",
+      terrain: "Fjord",
+      description: "Epic fjord landscapes with waterfalls and dramatic mountain views.",
+      tags: ["fjords", "waterfalls", "dramatic"]
+    },
+    {
+      id: 6,
+      name: "Tuscan Hills Circuit",
+      distance: "124 miles",
+      difficulty: "Intermediate",
+      rating: 4.8,
+      downloads: 2198,
+      startPoint: "Florence, Italy",
+      endPoint: "Siena, Italy",
+      terrain: "Hills",
+      description: "Rolling hills through vineyards and medieval towns in Tuscany.",
+      tags: ["hills", "vineyards", "historic"]
+    }
+  ]
+
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty) {
+      case 'Beginner': return 'bg-green-100 text-green-800 border-green-200'
+      case 'Intermediate': return 'bg-yellow-100 text-yellow-800 border-yellow-200'
+      case 'Advanced': return 'bg-red-100 text-red-800 border-red-200'
+      default: return 'bg-gray-100 text-gray-800 border-gray-200'
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      <Header />
+      
+      {/* Hero Section */}
+      <section className="pt-16 bg-gradient-to-r from-green-600 to-blue-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <h1 className="text-4xl md:text-5xl font-bold mb-6">
+              Discover Epic Routes
+            </h1>
+            <p className="text-xl md:text-2xl text-green-100 mb-8 max-w-3xl mx-auto">
+              Download GPS tracks from fellow riders worldwide. Find your perfect route 
+              based on difficulty, terrain, and scenic beauty.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <button className="bg-white text-green-600 px-6 py-3 rounded-lg font-medium hover:bg-green-50 transition-colors flex items-center gap-2">
+                <Upload className="w-5 h-5" />
+                Upload Your Route
+              </button>
+              <button className="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-green-600 transition-colors">
+                Browse by Country
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Search and Filters */}
+      <section className="py-8 bg-white border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
+            {/* Search */}
+            <div className="relative flex-1 max-w-md">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+              <input
+                type="text"
+                placeholder="Search routes by name or location..."
+                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+              />
+            </div>
+
+            {/* Filters */}
+            <div className="flex flex-wrap gap-4 items-center">
+              <select className="px-4 py-3 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
+                <option>All Difficulties</option>
+                <option>Beginner</option>
+                <option>Intermediate</option>
+                <option>Advanced</option>
+              </select>
+              
+              <select className="px-4 py-3 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
+                <option>All Terrains</option>
+                <option>Coastal</option>
+                <option>Mountain</option>
+                <option>Desert</option>
+                <option>Forest</option>
+                <option>Urban</option>
+              </select>
+              
+              <select className="px-4 py-3 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
+                <option>Sort by Popularity</option>
+                <option>Sort by Distance</option>
+                <option>Sort by Rating</option>
+                <option>Sort by Date Added</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Routes Grid */}
+      <section className="py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {routes.map((route, index) => (
+              <motion.div
+                key={route.id}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group"
+              >
+                <div className="relative h-48 bg-gradient-to-br from-green-400 to-blue-500">
+                  <div className="absolute inset-0 bg-black/20" />
+                  <div className="absolute top-4 left-4">
+                    <span className={`px-3 py-1 rounded-full text-xs font-medium border ${getDifficultyColor(route.difficulty)}`}>
+                      {route.difficulty}
+                    </span>
+                  </div>
+                  <div className="absolute top-4 right-4">
+                    <div className="flex items-center gap-1 bg-white/20 backdrop-blur-sm rounded-full px-2 py-1 text-white text-sm">
+                      <Star className="w-4 h-4 fill-current" />
+                      {route.rating}
+                    </div>
+                  </div>
+                  <div className="absolute bottom-4 left-4 right-4">
+                    <h3 className="text-xl font-bold text-white mb-1 group-hover:text-yellow-300 transition-colors">
+                      {route.name}
+                    </h3>
+                    <div className="flex items-center gap-2 text-white/90 text-sm">
+                      <MapPin className="w-4 h-4" />
+                      <span>{route.startPoint} → {route.endPoint}</span>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="p-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="text-2xl font-bold text-gray-900">{route.distance}</div>
+                    <div className="text-right">
+                      <div className="text-sm text-gray-500">Terrain</div>
+                      <div className="font-semibold text-gray-900">{route.terrain}</div>
+                    </div>
+                  </div>
+                  
+                  <p className="text-gray-600 text-sm mb-4">
+                    {route.description}
+                  </p>
+                  
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    {route.tags.map((tag) => (
+                      <span key={tag} className="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  
+                  <div className="flex items-center justify-between pt-4 border-t border-gray-100">
+                    <div className="flex items-center gap-2 text-gray-500">
+                      <Download className="w-4 h-4" />
+                      <span className="text-sm">{route.downloads.toLocaleString()} downloads</span>
+                    </div>
+                    <button className="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 transition-colors flex items-center gap-2">
+                      <Download className="w-4 h-4" />
+                      Download GPX
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Upload Section */}
+      <section className="py-16 bg-gradient-to-r from-green-600 to-blue-600">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+          >
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+              Share Your Favorite Routes
+            </h2>
+            <p className="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
+              Help fellow riders discover amazing routes by sharing your GPX tracks and experiences.
+            </p>
+            <button className="bg-white text-green-600 px-8 py-4 rounded-lg text-lg font-bold hover:bg-green-50 transition-colors flex items-center gap-2 mx-auto">
+              <Upload className="w-5 h-5" />
+              Upload Your Route
+            </button>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Load More */}
+      <section className="py-8 text-center">
+        <button className="bg-green-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors">
+          Load More Routes
+        </button>
+      </section>
+    </div>
+  )
+}

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>
+  )
+}