new dropdown content from Mik

src/pages/gpu/GpuIntegration.tsx

@@ -0,0 +1,81 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const integrationPoints = [
+  'Unified Mycelium networking provides secure access to GPU nodes.',
+  'Zero-trust security model extends to GPU operations automatically.',
+  'Quantum-safe storage available directly to GPU workloads.',
+  'Native Kubernetes support exposes GPUs through familiar resources.',
+]
+
+const yamlExample = `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: gpu-workload
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: gpu-compute
+  template:
+    metadata:
+      labels:
+        app: gpu-compute
+    spec:
+      containers:
+        - name: gpu-compute
+          image: tensorflow/tensorflow:latest-gpu
+          resources:
+            limits:
+              nvidia.com/gpu: 1
+          env:
+            - name: MYCELIUM_GPU_REGION
+              value: "auto"`
+
+export function GpuIntegration() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Cloud Integration
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Seamless with Mycelium Cloud infrastructure.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            GPU workloads plug directly into the same mesh that powers Mycelium
+            Cloud. Networking, security, and storage policies flow with every
+            deployment.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-2">
+          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm">
+            <h3 className="text-lg font-semibold text-white">
+              Platform alignment
+            </h3>
+            <ul className="space-y-3 text-sm text-gray-300">
+              {integrationPoints.map((point) => (
+                <li
+                  key={point}
+                  className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                >
+                  <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                  <span>{point}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm">
+            <h3 className="text-lg font-semibold text-white">
+              Kubernetes deployment example
+            </h3>
+            <pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
+              <code>{yamlExample}</code>
+            </pre>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}