From 1851c2d6fb1019e12d4f9410a6c5bfd5ff1d2354 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 23:13:18 +0100
Subject: [PATCH] refactor: adjust spacing and styling in compute pages

- Reduced vertical spacing between header and content sections for tighter layout
- Changed border radius from rounded-3xl to rounded-md for consistent styling
- Added hover effect with gradient background to architecture cards
---
 src/pages/compute/ComputeArchitecture.tsx | 4 ++--
 src/pages/compute/ComputeCodeTabs.tsx     | 2 +-
 src/pages/compute/ComputeOverview.tsx     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/compute/ComputeArchitecture.tsx b/src/pages/compute/ComputeArchitecture.tsx
index ab1caac..ae2975e 100644
--- a/src/pages/compute/ComputeArchitecture.tsx
+++ b/src/pages/compute/ComputeArchitecture.tsx
@@ -65,12 +65,12 @@ export function ComputeArchitecture() {
           {deterministicCards.map((card) => (
             <div
               key={card.id}
-              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102`}
+              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
             >
               {/* ✅ Disable wrapper on first card */}
               {!card.noBorder && (
                 <div
-                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded}`}
+                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
                 />
               )}
 
diff --git a/src/pages/compute/ComputeCodeTabs.tsx b/src/pages/compute/ComputeCodeTabs.tsx
index 9afd910..e190372 100644
--- a/src/pages/compute/ComputeCodeTabs.tsx
+++ b/src/pages/compute/ComputeCodeTabs.tsx
@@ -64,7 +64,7 @@ export function ComputeCodeTabs() {
 
   return (
     <div className="sm:px-6 lg:px-0">
-      <div className="relative isolate overflow-hidden bg-cyan-600 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pt-16 sm:pr-0 sm:pl-16 lg:mx-0 lg:max-w-none">
+      <div className="relative isolate overflow-hidden bg-cyan-600 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-md sm:pt-16 sm:pr-0 sm:pl-16 lg:mx-0 lg:max-w-none">
 
         <div
           aria-hidden="true"
diff --git a/src/pages/compute/ComputeOverview.tsx b/src/pages/compute/ComputeOverview.tsx
index 9e6931e..12f3b8b 100644
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/src/pages/compute/ComputeOverview.tsx
@@ -50,7 +50,7 @@ export function ComputeOverview() {
             Deterministic compute fabric for autonomous workloads.
           </SectionHeader>
 
-          <P color="secondary" className="mt-6 text-gray-600">
+          <P color="secondary" className="mt-4 text-gray-600">
             Mycelium Compute delivers predictable, sovereign performance—free
             from lock-in and drift. Deploy any workload with cryptographic
             precision, knowing the platform verifies, scales, and heals itself
@@ -63,7 +63,7 @@ export function ComputeOverview() {
         </div>
 
         {/* ✅ Light Mode Cards */}
-        <div className="mt-16 grid gap-6 lg:grid-cols-2">
+        <div className="mt-12 grid gap-6 lg:grid-cols-2">
           {overviewCards.map((card) => (
             <div
               key={card.title}