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/StorageArchitecture.tsx

@@ -1,54 +1,81 @@
-import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P } from '@/components/Texts'
+"use client";
+
+import { useState } from "react";
+import { Container } from "@/components/Container";
+import { Eyebrow, SectionHeader, P, H3, H4, H5, CT, CP } from "@/components/Texts";
 
 const architecture = [
   {
-    title: 'Encrypted Storage Substrate',
-    description: 'Keeps data private and verifiable.',
+    title: "Encrypted Storage Substrate",
+    description: "Keeps data private and verifiable.",
   },
   {
-    title: 'Mesh Routing Layer',
-    description: 'Connects clients and workloads securely, anywhere.',
+    title: "Mesh Routing Layer",
+    description: "Connects clients and workloads securely, anywhere.",
   },
   {
-    title: 'Protocol Gateway Layer',
+    title: "Protocol Gateway Layer",
     description:
-      'Serve the same dataset over S3, IPFS, WebDAV, or HTTP.',
+      "Serve the same dataset over S3, IPFS, WebDAV, or HTTP.",
   },
-]
+];
 
 export function StorageArchitecture() {
+  const [active, setActive] = useState(0);
+
   return (
-    <section className="bg-gray-50 py-24 sm:py-32">
-      <Container>
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      {/* ✅ Top horizontal line with spacing */}
+      <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" />
+      {/* ✅ Boxed container */}
+      <Container className="bg-[#111111] w-full max-w-7xl mx-auto py-12 border border-t-0 border-b-0 border-gray-800">
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow>ARCHITECTURE</Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            HOW IT WORKS
-          </SectionHeader>
-          <P className="mt-6 text-gray-600">
+          <H3 className="mt-4 text-white">
+            How it Works
+          </H3>
+          <P className="mt-6 text-gray-400">
             A layered design that encrypts, routes, and exposes storage through
             multiple protocols — without duplicating data or compromising
             sovereignty.
           </P>
         </div>
 
-        <div className="mx-auto mt-16 max-w-4xl space-y-6">
-          {architecture.map((item) => (
+        {/* ✅ New 2-column layout */}
+        <div className="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-2 lg:grid-cols-3 bg-[#121212] ">
+          {/* LEFT — 1 column (3 rows) */}
+          <div className="space-y-2">
+            {architecture.map((item, index) => (
+              <button
+                key={item.title}
+                className={`w-full border bg-[#171717] text-left border-white/10 p-4 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8 
+                  ${active === index
+                    ? "border-cyan-400 shadow-md"
+                    : "border-gray-800 hover:border-cyan-200 hover:shadow-sm"}`}
+                onClick={() => setActive(index)}
+              >
+                <CP className="text-white font-semibold">{item.title}</CP>
+              </button>
+            ))}
+          </div>
+
+          {/* RIGHT — 2 columns */}
+          <div className="lg:col-span-2 flex items-center justify-center border border-gray-800 bg-[#171717] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
             <div
-              key={item.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              key={active} // ✅ force smooth transition
+              className="transition-opacity duration-300 opacity-100 animate-fade"
             >
-              <h3 className="text-xl font-semibold text-gray-900">
-                {item.title}
-              </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-                {item.description}
-              </p>
+              <H5 className="text-white">{architecture[active].title}</H5>
+              <P className="mt-2 text-gray-400 max-w-xl">
+                {architecture[active].description}
+              </P>
             </div>
-          ))}
+          </div>
         </div>
       </Container>
+      <div className="w-full border-b border-gray-800 bg-[#121212]" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
     </section>
-  )
+  );
 }