From ff4211503530540556d53e606c4b21273f7ea8cb Mon Sep 17 00:00:00 2001
From: mindesbunister <github_service@egonetix.de>
Date: Mon, 24 Nov 2025 13:08:31 +0100
Subject: [PATCH] feat: Add roadmap navigation to homepage with back button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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         | 29 ++++++++++++++++++++++++++++-
 app/roadmap/page.tsx | 13 ++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 49e1cc9..abbba90 100644
--- a/app/page.tsx
+++ b/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 */}
diff --git a/app/roadmap/page.tsx b/app/roadmap/page.tsx
index 19caf6b..6383993 100644
--- a/app/roadmap/page.tsx
+++ b/app/roadmap/page.tsx
@@ -82,7 +82,18 @@ export default function RoadmapPage() {
       <div className="max-w-6xl mx-auto space-y-8">
         {/* Header */}
         <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6">
-          <h1 className="text-3xl font-bold text-white mb-2">🗺️ Trading Bot Roadmap</h1>
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-3xl font-bold text-white">🗺️ Trading Bot Roadmap</h1>
+            <a
+              href="/"
+              className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors flex items-center gap-2"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+              Back to Home
+            </a>
+          </div>
           <p className="text-gray-400">Track development progress and upcoming features</p>
         </div>