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:
60
src/pages/storage/StorageDesign.tsx
Normal file
60
src/pages/storage/StorageDesign.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user