From de89539de106933c65be1e9f1172655353114353 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 23:13:27 +0100
Subject: [PATCH] feat: redesign storage use cases section with tabbed layout

- Replaced StorageUseCases with StorageUseCasesNew component featuring interactive tabs
- Implemented two-column layout with tab content on left and image on right
- Added three use case categories: distributed storage, data sovereignty, and content distribution
---
 src/pages/storage/StoragePage.tsx        |   5 +-
 src/pages/storage/StorageUseCasesNew.tsx | 108 +++++++++++++++++++++++
 2 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/storage/StorageUseCasesNew.tsx

diff --git a/src/pages/storage/StoragePage.tsx b/src/pages/storage/StoragePage.tsx
index fa4a3d3..75113f1 100644
--- a/src/pages/storage/StoragePage.tsx
+++ b/src/pages/storage/StoragePage.tsx
@@ -2,10 +2,10 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { StorageHero } from './StorageHero'
 import { StorageOverview } from './StorageOverview'
 import { StorageArchitecture } from './StorageArchitecture'
-import { StorageUseCases } from './StorageUseCases'
 import { CallToAction } from './CallToAction'
 import { StorageCapabilitiesNew } from './StorageCapabilitiesNew'
 import { StorageCoreValue } from './StorageCoreValue'
+import { StorageUseCasesNew } from './StorageUseCasesNew'
 
 export default function StoragePage() {
   return (
@@ -31,9 +31,10 @@ export default function StoragePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <StorageUseCases />
+        <StorageUseCasesNew />
       </AnimatedSection>
 
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>
diff --git a/src/pages/storage/StorageUseCasesNew.tsx b/src/pages/storage/StorageUseCasesNew.tsx
new file mode 100644
index 0000000..05d9527
--- /dev/null
+++ b/src/pages/storage/StorageUseCasesNew.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const tabs = [
+  {
+    id: "distributed",
+    label: "Distributed Application Storage",
+    content: [
+      {
+        item: "Application-native storage",
+        desc: "Serve data to services, agents, clusters, or edge workloads.",
+      },
+    ],
+  },
+  {
+    id: "sovereignty",
+    label: "Data Sovereignty & Compliance",
+    content: [
+      {
+        item: "Residency-aware storage",
+        desc: "Keep data under your control, choose residency per dataset.",
+      },
+    ],
+  },
+  {
+    id: "distribution",
+    label: "Content Distribution",
+    content: [
+      {
+        item: "Decentralized delivery",
+        desc: "Serve public or private assets globally, without centralized hosting.",
+      },
+    ],
+  },
+];
+
+export function StorageUseCasesNew() {
+  const [active, setActive] = useState("distributed");
+  const current = tabs.find((t) => t.id === active)!;
+
+  return (
+    <section className="relative w-full overflow-hidden">
+      
+      {/* Top lines */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden">
+
+        {/* ✅ Two columns: ALL TEXT LEFT, IMAGE RIGHT */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+
+          {/* LEFT COLUMN: Full tab + content */}
+          <div className="w-full text-gray-900">
+            <Eyebrow color="accent">Use Cases</Eyebrow>
+            <H3>Built for Real Data Workloads</H3>
+            <P className="max-w-3xl text-gray-600 mt-4">
+              Mycelium Storage adapts to compliance-driven enterprise data, distributed application workloads,
+              and global asset delivery — without giving up sovereignty.
+            </P>
+            
+            {/* Tabs */}
+            <div className="flex gap-6 border-b border-gray-200 pb-2 overflow-x-auto mt-12">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActive(tab.id)}
+                  className={`text-sm font-medium tracking-wide pb-2 whitespace-nowrap ${
+                    active === tab.id
+                      ? "border-b-2 border-cyan-500 text-gray-900"
+                      : "text-gray-500 hover:text-gray-900"
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Content always stacked in a single column */}
+            <div className="mt-6 space-y-6">
+              {current.content.map((c, i) => (
+                <div key={i}>
+                  <p className="text-base font-medium text-gray-900">{c.item}</p>
+                  <p className="text-sm text-gray-600 leading-relaxed">{c.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* RIGHT COLUMN: Image */}
+          <div className="w-full">
+            <img
+              src="/images/testpic.png"
+              alt="Storage Illustration"
+              className="w-full h-auto rounded-xl border border-gray-200 object-cover"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom lines */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-b border-gray-200" />
+    </section>
+  );
+}