From ff1f29b652f23f56ee17aa7a5a5608a3e22b40c4 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 27 Oct 2025 17:16:14 +0100
Subject: [PATCH] feat: add GPU overview section with key features

- Created new GpuOverview component showcasing 4 core features of GPU service
- Added responsive grid layout with feature cards displaying icons and descriptions
- Integrated overview section into GpuPage between hero and call-to-action
- Implemented dark theme styling with cyan accents for feature icons
- Added descriptive text explaining unified GPU acceleration across ThreeFold Grid
---
 src/pages/gpu/GpuOverview.tsx | 56 +++++++++++++++++++++++++++++++++++
 src/pages/gpu/GpuPage.tsx     |  4 +++
 2 files changed, 60 insertions(+)
 create mode 100644 src/pages/gpu/GpuOverview.tsx

diff --git a/src/pages/gpu/GpuOverview.tsx b/src/pages/gpu/GpuOverview.tsx
new file mode 100644
index 0000000..35ea95c
--- /dev/null
+++ b/src/pages/gpu/GpuOverview.tsx
@@ -0,0 +1,56 @@
+import { CodeBracketSquareIcon, CubeTransparentIcon, LockClosedIcon, Squares2X2Icon } from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'No Silos',
+    description: 'All GPU resources accessible through a single interface.',
+    icon: Squares2X2Icon,
+  },
+  {
+    name: 'No Intermediaries',
+    description: 'Direct access to GPU resources without centralized control.',
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: 'Verifiable Power',
+    description: 'Every GPU cycle cryptographically verified.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Code-Orchestrated',
+    description: 'Managed entirely through APIs and smart contracts.',
+    icon: CodeBracketSquareIcon,
+  },
+]
+
+export function GpuOverview() {
+  return (
+    <div className="bg-[#171717] py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="lg:col-span-2">
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
+              Unified GPU Acceleration Across the Grid
+            </h2>
+            <p className="mt-4 text-base/7 text-gray-300">
+              Mycelium GPU provides unified access to distributed GPU acceleration across the ThreeFold Grid. It transforms fragmented GPU resources into a single adaptive intelligence layer — enabling you to run AI, ML, and rendering workloads anywhere, anytime, with verifiable performance and transparent costs.
+            </p>
+          </div>
+          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
+            {features.map((feature) => (
+              <div key={feature.name}>
+                <dt className="text-base/7 font-semibold text-white">
+                  <div className="mb-6 flex size-10 items-center justify-center rounded-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-cyan-500" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 text-base/7 text-gray-400">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/gpu/GpuPage.tsx b/src/pages/gpu/GpuPage.tsx
index bbf209b..4662245 100644
--- a/src/pages/gpu/GpuPage.tsx
+++ b/src/pages/gpu/GpuPage.tsx
@@ -1,6 +1,7 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
 import { CallToAction } from './CallToAction'
+import { GpuOverview } from './GpuOverview'
 
 export default function GpuPage() {
   return (
@@ -8,6 +9,9 @@ export default function GpuPage() {
       <AnimatedSection>
         <GpuHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <GpuOverview />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>