From 8a3141e7930c63f5e9616b6f546a42c824d44316 Mon Sep 17 00:00:00 2001
From: mindesbunister <github_service@egonetix.de>
Date: Sun, 30 Nov 2025 13:18:03 +0100
Subject: [PATCH] feat: Add cluster page navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add EPYC Cluster card to landing page (first position, purple/pink gradient)
- Add back button to cluster page (animated left arrow, links to dashboard)
- Update landing page grid layout (lg:grid-cols-3 xl:grid-cols-4 for 7 cards)
- Complete bidirectional navigation: dashboard ↔ cluster monitoring

Navigation features:
- Cluster card: 🖥️ icon, "Monitor distributed parameter exploration" description
- Back button: Animated hover effect (arrow slides left, color transitions)
- Responsive grid: 2 cols (mobile), 3 cols (tablet), 4 cols (desktop)
- Consistent styling with existing navigation cards
---
 app/cluster/page.tsx | 11 +++++++++++
 app/page.tsx         | 29 ++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/cluster/page.tsx b/app/cluster/page.tsx
index 5f1a5ac..b18fac0 100644
--- a/app/cluster/page.tsx
+++ b/app/cluster/page.tsx
@@ -113,6 +113,17 @@ export default function ClusterPage() {
   return (
     <div className="min-h-screen bg-gray-900 text-white p-8">
       <div className="max-w-7xl mx-auto">
+        {/* Back Button */}
+        <a
+          href="/"
+          className="inline-flex items-center text-blue-400 hover:text-blue-300 mb-6 transition-colors group"
+        >
+          <svg className="w-5 h-5 mr-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="M15 19l-7-7 7-7" />
+          </svg>
+          <span className="font-medium">Back to Dashboard</span>
+        </a>
+
         <div className="flex justify-between items-center mb-8">
           <h1 className="text-3xl font-bold">🖥️ EPYC Cluster Status</h1>
           <button
diff --git a/app/page.tsx b/app/page.tsx
index af9b1da..383d43a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -84,7 +84,34 @@ export default function HomePage() {
         </div>
 
         {/* Navigation Cards */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8 max-w-7xl mx-auto">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
+          {/* EPYC Cluster Card */}
+          <a
+            href="/cluster"
+            className="group relative bg-gradient-to-br from-purple-900/50 to-pink-900/50 backdrop-blur-sm rounded-2xl p-8 border border-purple-500/20 hover:border-purple-500/40 transition-all duration-300 hover:scale-105"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-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-purple-500 to-pink-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">EPYC Cluster</h3>
+              
+              <p className="text-gray-300 mb-6">
+                Monitor distributed parameter exploration across 2x AMD EPYC servers with AI recommendations
+              </p>
+              
+              <div className="flex items-center text-purple-400 group-hover:text-purple-300">
+                <span className="font-medium">View Status</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>
+
           {/* Analytics Card */}
           <a
             href="/analytics"