feat: restructure GPU page layout and simplify content presentation

- Reordered sections to improve information flow (Capabilities → Design → Architecture → Overview)
- Simplified use cases and overview sections by removing redundant bullet points
- Added new GpuCapabilities and GpuDesign components with cleaner, more focused messaging

src/pages/gpu/GpuOverview.tsx

@@ -1,48 +1,30 @@
 import {
-  CodeBracketSquareIcon,
-  CubeTransparentIcon,
-  LockClosedIcon,
-  Squares2X2Icon,
+  AdjustmentsHorizontalIcon,
+  GlobeAltIcon,
+  BanknotesIcon,
 } from '@heroicons/react/24/outline'
 
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const overviewCards = [
+const coreFeatures = [
   {
-    label: 'Overview',
-    title: 'Unified GPU acceleration across the ThreeFold Grid',
+    name: 'Deterministic GPU Allocation',
     description:
-      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
+      'Reserve the GPU type you need and get exactly that, every time.',
+    icon: AdjustmentsHorizontalIcon,
   },
   {
-    label: 'Core Concept',
-    title: 'Sovereign intelligence layer',
+    name: 'Multi-Topology Deployment',
     description:
-      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
-  },
-]
-
-const principles = [
-  {
-    name: 'No Silos',
-    description: 'Every GPU resource is accessible through a single interface.',
-    icon: Squares2X2Icon,
+      'Run workloads in data centers, at the edge, or on self-hosted nodes.',
+    icon: GlobeAltIcon,
   },
   {
-    name: 'No Intermediaries',
-    description: 'Direct access to hardware without centralized brokers.',
-    icon: CubeTransparentIcon,
-  },
-  {
-    name: 'Verifiable Power',
-    description: 'Every GPU cycle is attested and cryptographically verified.',
-    icon: LockClosedIcon,
-  },
-  {
-    name: 'Code-Orchestrated',
-    description: 'Smart contracts and APIs automate allocation and policy.',
-    icon: CodeBracketSquareIcon,
+    name: 'Transparent Cost Structure',
+    description:
+      'No inflated pricing, no hidden fees, no marketplace brokerage.',
+    icon: BanknotesIcon,
   },
 ]
 
@@ -52,52 +34,31 @@ export function GpuOverview() {
       <Container>
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
-            Platform Overview
+            PLATFORM OVERVIEW
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            The sovereign acceleration layer for intelligent workloads.
+            Core Features
           </SectionHeader>
           <P color="lightSecondary" className="mt-6">
-            Mycelium GPU makes distributed acceleration feel like one machine.
-            Harness global GPUs with deterministic performance, transparent
-            costs, and end-to-end verification.
+            The Mycelium GPU layer provides predictable, sovereign acceleration
+            — without arbitrary limits or hidden economics.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
-          {overviewCards.map((card) => (
+
+        <div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {coreFeatures.map((feature) => (
             <div
-              key={card.title}
-              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
-            >
-              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
-              <div className="relative">
-                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
-                  {card.label}
-                </Small>
-                <h3 className="mt-4 text-lg font-semibold text-white">
-                  {card.title}
-                </h3>
-                <p className="mt-4 text-sm leading-relaxed text-gray-300">
-                  {card.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
-          {principles.map((principle) => (
-            <div
-              key={principle.name}
-              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              key={feature.name}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
             >
               <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
-                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
+                <feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
               </div>
-              <h3 className="text-base font-semibold text-white">
-                {principle.name}
+              <h3 className="text-lg font-semibold text-white">
+                {feature.name}
               </h3>
               <p className="mt-3 text-sm leading-relaxed text-gray-300">
-                {principle.description}
+                {feature.description}
               </p>
             </div>
           ))}