refactor: redesign ComputeDesign component layout

- Converted feature list to stats-style cards with centered content and icon-first layout
- Replaced vertical Container layout with full-width bordered grid design
- Simplified text content to value/name pairs and updated icons

src/pages/compute/ComputeDesign.tsx

@@ -1,56 +1,54 @@
+import { Eyebrow, H3, P, CP, CT } from '@/components/Texts'
 import {
-  ShieldCheckIcon,
   ArrowPathIcon,
-  RocketLaunchIcon,
+  GlobeAltIcon,
+  ShieldCheckIcon,
 } from '@heroicons/react/24/solid'
-import { Container } from '@/components/Container'
-import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
 
-const features = [
+const stats = [
   {
+    id: 1,
     name: 'Cryptographically verified deployments',
-    description: 'Every cluster state is signed and checksummed to guarantee truth.',
+    value: 'Signed & Checksummed',
     icon: ShieldCheckIcon,
   },
   {
+    id: 2,
     name: 'Stateless execution that scales anywhere',
-    description: 'Run workloads on any node, region, or edge without manual orchestration.',
+    value: 'Global Scaling',
-    icon: RocketLaunchIcon,
+    icon: GlobeAltIcon,
   },
   {
+    id: 3,
     name: 'Automatic healing and recovery',
-    description: 'Self-repairing processes ensure workloads stay available and consistent.',
+    value: 'Self-Repairing',
     icon: ArrowPathIcon,
   },
 ]
 
 export function ComputeDesign() {
   return (
-    <section className="bg-white py-24 sm:py-32">
+    <div className="">
-      <Container>
-        <div className="mx-auto max-w-3xl sm:text-center">
-          <Eyebrow>CORE VALUE</Eyebrow>
-          <H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
-          <P className="mt-6 text-gray-600">
-            Every workload runs exactly as declared: no drift, no hidden state, no surprises.
-          </P>
-        </div>
 
-        <div className="mx-auto mt-16 max-w-5xl">
+      {/* ✅ Top horizontal line with spacing */}
-          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-            {features.map((feature) => (
+      <div className="w-full border-t border-l border-r border-gray-200" />
-              <div key={feature.name} className="relative pl-12">
+
-                <feature.icon
+       {/* ✅ Top horizontal line with spacing */}
-                  aria-hidden="true"
+      <div className="mx-auto max-w-7xl border-gray-200">
-                  className="absolute left-0 top-1 size-6 text-cyan-600"
+          <dl className="grid grid-cols-1 gap-4 lg:gap-14  overflow-hidden  text-center  lg:grid-cols-3">
-                />
+            {stats.map((stat) => (
-                <CT className="font-semibold text-gray-900">{feature.name}</CT>
+              <div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-200 lg:border-t-0 lg:border-b-0">
-                <CP className="mt-1 text-gray-600">{feature.description}</CP>
+                <stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
+                <CT className="">{stat.value}</CT>
+                <CP className="mt-1">{stat.name}</CP>
               </div>
             ))}
           </dl>
-        </div>
+      </div>
-      </Container>
+      {/* ✅ Bottom horizontal line + spacing */}
-    </section>
+      <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>
+    </div>
   )
 }

src/pages/compute/ComputePage.tsx

@@ -4,7 +4,6 @@ import { ComputeFeatures } from './ComputeFeatures'
 import { ComputeArchitecture } from './ComputeArchitecture'
 import { ComputeUseCases } from './ComputeUseCases'
 import { CallToAction } from './CallToAction'
-import { ComputeCapabilities } from './ComputeCapabilities'
 import { ComputeDesign } from './ComputeDesign'
 import { ComputeOverview } from './ComputeOverview'
 import { ComputeCapabilitiesNew } from './ComputeCapabilitiesNew'