From 852d9bfc3e4450d3194c66c7f5e4d158b8ef1a68 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 16:58:50 +0100
Subject: [PATCH] feat: convert ComputeOverview section to light mode theme

- Updated background colors from dark (gray-950) to white with subtle accents
- Modified text colors from light/white to dark gray for improved readability
- Added horizontal border lines and adjusted card styling with light shadows and hover effects
---
 src/pages/compute/ComputeOverview.tsx | 46 +++++++++++++++++++--------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/pages/compute/ComputeOverview.tsx b/src/pages/compute/ComputeOverview.tsx
index 47ec356..31917c4 100644
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/src/pages/compute/ComputeOverview.tsx
@@ -17,51 +17,68 @@ const overviewCards = [
 
 export function ComputeOverview() {
   return (
-    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-t border-l border-r border-gray-200" />
+      
+      {/* ✅ subtle light-mode background accents */}
       <div className="pointer-events-none absolute inset-0">
         <CircleBackground
           color="#06b6d4"
-          className="absolute -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30 blur-3xl sm:opacity-40"
+          className="absolute -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-20 blur-3xl"
         />
         <CircleBackground
           color="#22d3ee"
-          className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
+          className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
         />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.1),_transparent_55%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
       </div>
-      <Container className="relative">
+
+      <Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-200">
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow color="accent" className="tracking-[0.35em] uppercase">
             Mycelium Compute
           </Eyebrow>
-          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
+
+          <SectionHeader
+            as="h2"
+            color="dark"
+            className="mt-6 font-medium text-gray-900"
+          >
             Deterministic compute fabric for autonomous workloads.
           </SectionHeader>
-          <P color="lightSecondary" className="mt-6">
+
+          <P color="darkSecondary" className="mt-6 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
             on your behalf.
           </P>
-          <P color="lightSecondary" className="mt-4">
+
+          <P color="darkSecondary" className="mt-4 text-gray-600">
             Deterministic. Self-managing. Stateless by design.
           </P>
         </div>
+
+        {/* ✅ Light Mode Cards */}
         <div className="mt-16 grid gap-6 lg:grid-cols-2">
           {overviewCards.map((card) => (
             <div
               key={card.title}
-              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/40 hover:bg-white/[0.06]"
+              className="group relative overflow-hidden rounded-3xl border border-gray-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/10 opacity-0 transition group-hover:opacity-100" />
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
+
               <div className="relative">
-                <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-300">
+                <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">
                   {card.label}
                 </p>
-                <h3 className="mt-4 text-xl font-semibold text-white">
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
                   {card.title}
                 </h3>
-                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
                   {card.copy}
                 </p>
               </div>
@@ -69,6 +86,9 @@ export function ComputeOverview() {
           ))}
         </div>
       </Container>
+       {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
     </section>
   )
 }