feat: simplify storage page messaging and structure

- Streamlined call-to-action to focus on cloud vs. self-hosted options
- Condensed architecture and use cases sections to remove excessive detail
- Reorganized page component order and added new capability/design sections
This commit is contained in:
2025-11-04 16:23:57 +01:00
parent f3456eb470
commit 7f9023c631
7 changed files with 181 additions and 196 deletions

View File

@@ -0,0 +1,60 @@
import { Container } from '../../components/Container'
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
import {
LockClosedIcon,
ArrowPathIcon,
GlobeAsiaAustraliaIcon,
} from '@heroicons/react/24/solid'
const benefits = [
{
name: 'Encrypted and verifiable at rest and in motion',
icon: LockClosedIcon,
},
{
name: 'Self-healing replication and integrity checks',
icon: ArrowPathIcon,
},
{
name: 'Residency + governance policies you actually control',
icon: GlobeAsiaAustraliaIcon,
},
]
export function StorageDesign() {
return (
<section className="bg-white py-24 sm:py-32">
<Container>
{/* Header */}
<div className="mx-auto max-w-3xl sm:text-center">
<Eyebrow>CORE VALUE</Eyebrow>
<H3 className="mt-4 text-gray-900">
Sovereign Storage That Heals Itself
</H3>
<P className="mt-6 text-gray-600">
Mycelium Storage continuously verifies integrity and restores
replicas automatically, so data stays available without operational
overhead.
</P>
</div>
{/* Benefits */}
<div className="mx-auto mt-16 max-w-5xl">
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
{benefits.map((benefit) => (
<div key={benefit.name} className="relative pl-12">
<benefit.icon
aria-hidden="true"
className="absolute left-0 top-1 size-6 text-cyan-600"
/>
<CT className="font-semibold text-gray-900">
{benefit.name}
</CT>
</div>
))}
</dl>
</div>
</Container>
</section>
)
}