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
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { Small } from '@/components/Texts'
|
|
|
|
const highlights = [
|
|
{
|
|
label: 'Overview',
|
|
title: 'Encrypted & Verifiable Storage',
|
|
description:
|
|
'Data is secured with cryptographic identity, not cloud trust.',
|
|
},
|
|
{
|
|
label: 'Core Concept',
|
|
title: 'Self-Healing Replication',
|
|
description:
|
|
'The system repairs corruption and restores replicas automatically.',
|
|
},
|
|
{
|
|
label: 'Outcome',
|
|
title: 'Multi-Protocol Access',
|
|
description:
|
|
'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
|
|
},
|
|
]
|
|
|
|
export function StorageOverview() {
|
|
return (
|
|
<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 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">
|
|
<Small className="text-xs uppercase tracking-[0.16em] text-cyan-200">
|
|
{item.label}
|
|
</Small>
|
|
<h3 className="mt-4 text-lg font-semibold text-white">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</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>
|
|
)
|
|
}
|