sasha-astiadi
a7dd803da2
- Replaced inconsistent gray-900 and #171717 background colors with unified #121212 across all pages - Removed unused imports from multiple component files - Cleaned up trailing spaces in className attributes
82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Container } from "@/components/Container";
|
|
import { Eyebrow, P, H3, H5, CP } from "@/components/Texts";
|
|
|
|
const architecture = [
|
|
{
|
|
title: "Encrypted Storage Substrate",
|
|
description: "Keeps data private and verifiable.",
|
|
},
|
|
{
|
|
title: "Mesh Routing Layer",
|
|
description: "Connects clients and workloads securely, anywhere.",
|
|
},
|
|
{
|
|
title: "Protocol Gateway Layer",
|
|
description:
|
|
"Serve the same dataset over S3, IPFS, WebDAV, or HTTP.",
|
|
},
|
|
];
|
|
|
|
export function StorageArchitecture() {
|
|
const [active, setActive] = useState(0);
|
|
|
|
return (
|
|
<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>
|
|
<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>
|
|
|
|
{/* ✅ 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-[#121212] 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-[#121212] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
|
|
<div
|
|
key={active} // ✅ force smooth transition
|
|
className="transition-opacity duration-300 opacity-100 animate-fade"
|
|
>
|
|
<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>
|
|
);
|
|
}
|