feat: redesign storage page with interactive components and dark theme

- Added interactive architecture section with tabbed navigation and smooth transitions
- Implemented horizontal scrolling capabilities carousel with image backgrounds
- Updated call-to-action section with bordered container layout and improved button styling
- Replaced core value section with animated self-healing storage features
- Applied consistent dark theme (#111111, #121212) with cyan accents across all storage components

src/pages/storage/StorageCapabilitiesNew.tsx

@@ -0,0 +1,110 @@
+"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: "Flexible, Resilient, and Controllable Storage",
+    description:
+      "Mycelium Storage is designed for modern data workloads, providing a range of access methods and control over data placement.",
+  },
+  {
+    title: "S3-Compatible Object Storage",
+    description: "Works with existing SDKs & tooling.",
+    imageUrl: "/images/s3.png",
+  },
+  {
+    title: "IPFS & Content-Addressed Access",
+    description: "Ideal for distributed and decentralized workloads.",
+    imageUrl: "/images/ipfs.png",
+  },
+  {
+    title: "Filesystem Mounts (WebDAV / POSIX)",
+    description: "Mount storage directly into workflows and apps.",
+    imageUrl: "/images/filesystem.png",
+  },
+  {
+    title: "Encrypted Replication & Placement Control",
+    description: "Choose data's ownership and locations.",
+    imageUrl: "/images/encrypted.png",
+  },
+];
+
+export function StorageCapabilitiesNew() {
+  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" 
+        >
+          {capabilities.map((item, idx) => (
+            <li
+              key={idx}
+              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 relative ${item.isIntro ? ' p-10' : 'bg-cover bg-center'}`}
+              style={item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : {}}
+            >
+                            <div className={`relative z-10 flex flex-col h-full ${item.isIntro ? 'justify-between' : 'justify-end'}`}>
+                {/* 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>
+                ) : (
+                  <div className="bg-[#111111] p-6 h-20 flex flex-col justify-center border-t border-b-0  border-gray-800">
+                    <p className="text-base font-semibold text-white">{item.title}</p>
+                    <p className="mt-2 text-gray-400 leading-snug">{item.description}</p>
+                  </div>
+                )}
+              </div>
+            </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>
+  );
+}