feat: Add roadmap navigation to homepage with back button

Changes:
- Homepage: Added roadmap card with indigo/violet gradient
- Changed grid from 3 to 4 columns (responsive: 2 on mobile, 4 on desktop)
- Roadmap page: Added back button to header for easy navigation
- Visual consistency: Matches existing card design patterns

Navigation Flow:
- Homepage → Roadmap card → /roadmap page
- Roadmap page → Back button → Homepage

Files Modified:
- app/page.tsx (navigation grid + roadmap card)
- app/roadmap/page.tsx (back button in header)

app/page.tsx

@@ -43,7 +43,7 @@ export default function HomePage() {
         </div>
 
         {/* Navigation Cards */}
-        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
           {/* Analytics Card */}
           <a
             href="/analytics"
@@ -151,6 +151,33 @@ export default function HomePage() {
               </div>
             </div>
           </a>
+
+          {/* Roadmap Card */}
+          <a
+            href="/roadmap"
+            className="group relative bg-gradient-to-br from-indigo-900/50 to-violet-900/50 backdrop-blur-sm rounded-2xl p-8 border border-indigo-500/20 hover:border-indigo-500/40 transition-all duration-300 hover:scale-105"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-violet-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+            
+            <div className="relative">
+              <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                <span className="text-4xl">🗺️</span>
+              </div>
+              
+              <h3 className="text-2xl font-bold text-white mb-3">Roadmap</h3>
+              
+              <p className="text-gray-300 mb-6">
+                Track development progress and upcoming features
+              </p>
+              
+              <div className="flex items-center text-indigo-400 group-hover:text-indigo-300">
+                <span className="font-medium">View Roadmap</span>
+                <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </div>
+            </div>
+          </a>
         </div>
 
         {/* Quick Stats */}