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

@@ -1,4 +1,3 @@
-import { Container } from '@/components/Container'
 import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
 
 const highlights = [
@@ -24,27 +23,17 @@ const highlights = [
 
 export function StorageOverview() {
   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">
-            Platform Overview
-          </Eyebrow>
-          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            Core Features
-          </SectionHeader>
-          <P color="lightSecondary" className="mt-6">
-            Built on sovereign infrastructure, Mycelium Storage keeps data
-            resilient, verifiable, and instantly accessible. Encryption,
-            replication, and governance are woven directly into the substrate.
-          </P>
-        </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+       {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl mx-auto 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="bg-[#121212] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800">
+        <div className="grid lg:grid-cols-3">
           {highlights.map((item) => (
             <div
               key={item.title}
-              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8"
+              className="group relative overflow-hidden border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:border-cyan-300/50 hover:bg-white/8"
             >
               <div className="absolute inset-0 bg-linear-to-br from-cyan-500/0 via-white/5 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
               <div className="relative">
@@ -61,7 +50,9 @@ export function StorageOverview() {
             </div>
           ))}
         </div>
-      </Container>
+      </div>
+      <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>
   )
 }