From cdd6e3104bb2c14c78efefe18b5639cffe43f905 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 13:19:13 +0100
Subject: [PATCH] feat: add horizontal scrolling capabilities section for
 compute page

- Created new ComputeCapabilitiesNew component with card-based slider showcasing containers, VMs, and native Linux workloads
- Implemented smooth horizontal scroll navigation with arrow controls and snap-to-card behavior
- Added intro card with overview text and navigation controls, followed by capability cards with icons and descriptions
---
 src/pages/compute/ComputeCapabilitiesNew.tsx | 118 +++++++++++++++++++
 src/pages/compute/ComputePage.tsx            |   3 +-
 2 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/compute/ComputeCapabilitiesNew.tsx

diff --git a/src/pages/compute/ComputeCapabilitiesNew.tsx b/src/pages/compute/ComputeCapabilitiesNew.tsx
new file mode 100644
index 0000000..918d5ef
--- /dev/null
+++ b/src/pages/compute/ComputeCapabilitiesNew.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useRef } from "react";
+import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
+import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
+
+const capabilities = [
+  {
+    isIntro: true,
+    eyebrow: "CAPABILITIES",
+    title: "What You Can Run",
+    description:
+      "Mycelium Compute supports multiple workload types on a single execution fabric, from legacy VMs to modern Kubernetes clusters.",
+  },
+  {
+    title: "Containers & K3s",
+    description:
+      "Deploy services, web apps, and APIs with full Kubernetes compatibility.",
+    icon: (
+      <div className="flex items-center justify-center">
+        <img src="/images/kubernetes.webp" alt="Kubernetes" className="h-full w-full object-cover mb-2" />
+      </div>
+    ),
+  },
+  {
+    title: "Virtual Machines",
+    description:
+      "Run legacy apps and specialized stacks with secure boot and attestation.",
+    icon: (
+      <div className="flex items-center justify-center">
+        <img src="/images/vm.webp" alt="Virtual Machines" className="h-full w-full object-cover mb-2" />
+      </div>
+    ),
+  },
+  {
+    title: "Native Linux Workloads",
+    description:
+      "Execute agents, batch jobs, and custom tooling statelessly across the grid.",
+    icon: (
+      <div className="flex items-center justify-center">
+        <img src="/images/linux.png" alt="Linux" className="h-full w-full object-cover mb-2" />
+      </div>
+    ),
+  },
+];
+
+export function ComputeCapabilitiesNew() {
+  const sliderRef = useRef<HTMLUListElement>(null);
+
+  const scrollLeft = () => sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
+  const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
+
+  return (
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
+
+        {/* Horizontal Slider — shows part of next card */}
+        <ul
+          ref={sliderRef}
+          className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar pr-[10%]" 
+        >
+          {capabilities.map((item, idx) => (
+            <li
+              key={idx}
+              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 p-10 relative ${item.isIntro ? 'bg-[#1b1b1b]' : 'bg-[#111]/60'}`}
+            >
+              {/* First card with arrows */}
+              {item.isIntro ? (
+                <div className="flex flex-col justify-between h-full ">
+                  <div>
+                    <Eyebrow className="">{item.eyebrow}</Eyebrow>
+                    <H5 className="text-white mt-4 lg:text-2xl text-xl">{item.title}</H5>
+                    <p className="mt-4 text-gray-400 lg:text-lg text-sm leading-relaxed">{item.description}</p>
+                  </div>
+
+                  {/* Arrows inside first card */}
+                  <div className="flex items-center gap-x-4 mt-2">
+                    <a
+                      href="#"
+                      className="inline-flex items-center gap-1 text-cyan-400 hover:text-cyan-300 text-sm font-medium mr-auto"
+                    >
+                      Learn more →
+                    </a>
+                    <button
+                      onClick={scrollLeft}
+                      className="h-8 w-8 flex items-center justify-center border border-gray-700 rounded-md hover:border-cyan-500 transition-colors"
+                    >
+                      <IoArrowBackOutline className="text-gray-300" size={16} />
+                    </button>
+
+                    <button
+                      onClick={scrollRight}
+                      className="h-8 w-8 flex items-center justify-center border border-gray-700 rounded-md hover:border-cyan-500 transition-colors"
+                    >
+                      <IoArrowForwardOutline className="text-gray-300" size={16} />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {item.icon}
+                  <CT className="text-lg font-semibold text-white mt-4">{item.title}</CT>
+                  <CP className="mt-2 text-gray-400 leading-snug">{item.description}</CP>
+                </>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+    </section>
+  );
+}
diff --git a/src/pages/compute/ComputePage.tsx b/src/pages/compute/ComputePage.tsx
index 6bb2e45..414202c 100644
--- a/src/pages/compute/ComputePage.tsx
+++ b/src/pages/compute/ComputePage.tsx
@@ -7,6 +7,7 @@ import { CallToAction } from './CallToAction'
 import { ComputeCapabilities } from './ComputeCapabilities'
 import { ComputeDesign } from './ComputeDesign'
 import { ComputeOverview } from './ComputeOverview'
+import { ComputeCapabilitiesNew } from './ComputeCapabilitiesNew'
 
 
 export default function ComputePage() {
@@ -17,7 +18,7 @@ export default function ComputePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <ComputeCapabilities />
+        <ComputeCapabilitiesNew />
       </AnimatedSection>
 
       <AnimatedSection>