new dropdown content from Mik
This commit is contained in:
Emre
155
src/pages/storage/StorageUseCases.tsx
Normal file
155
src/pages/storage/StorageUseCases.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import { Container } from '../../components/Container'
|
||||
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
||||
|
||||
const primaryUseCases = [
|
||||
{
|
||||
title: 'Data Sovereignty Applications',
|
||||
bullets: [
|
||||
'Privacy-first products with full control over data location.',
|
||||
'Regulatory compliance for regional or industry mandates.',
|
||||
'Enterprise workloads that demand audit-ready governance.',
|
||||
'DigitalMe applications hosted with complete data ownership.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Multi-Protocol Applications',
|
||||
bullets: [
|
||||
'Support legacy S3, WebDAV, and HTTP workloads simultaneously.',
|
||||
'Enable hybrid architectures that mix centralized and decentralized access.',
|
||||
'Give developers freedom to choose best-fit protocols per service.',
|
||||
'Simplify migrations by keeping data accessible through multiple APIs.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Backup and Recovery',
|
||||
bullets: [
|
||||
'Autonomous backups with continuous verification.',
|
||||
'Cross-zone replication that survives regional outages.',
|
||||
'Integrity monitoring that spots corruption immediately.',
|
||||
'Instant recovery from failures without manual restore steps.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Content Distribution',
|
||||
bullets: [
|
||||
'Global CDN leveraging the breadth of the ThreeFold Grid.',
|
||||
'IPFS integration for decentralized content addressing.',
|
||||
'Serve the same assets over HTTP, S3, or WebDAV.',
|
||||
'Geo-optimized placement keeps content close to users.',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const storageSpecificUseCases = [
|
||||
{
|
||||
title: 'Data Sovereignty & Compliance',
|
||||
bullets: [
|
||||
'Guarantee residency in specific jurisdictions.',
|
||||
'Protect personal or regulated data with audit trails.',
|
||||
'Empower enterprises with region-specific governance.',
|
||||
'Handle cross-border rules without duplicating datasets.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Multi-Protocol Data Solutions',
|
||||
bullets: [
|
||||
'Bridge legacy S3 tooling with decentralized IPFS access.',
|
||||
'Offer WebDAV and HTTP endpoints for collaboration suites.',
|
||||
'Blend centralized and decentralized patterns as needed.',
|
||||
'Let developers change protocols without rewriting storage.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Autonomous Backup & Recovery',
|
||||
bullets: [
|
||||
'Self-healing backups that maintain integrity automatically.',
|
||||
'Zone-aware replication delivers geographic redundancy.',
|
||||
'Instant recovery with continuous verification.',
|
||||
'Keeps backups up-to-date without operator intervention.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Content Distribution & CDN',
|
||||
bullets: [
|
||||
'Distribute media and assets across a planetary mesh.',
|
||||
'Use IPFS for decentralized caching and retrieval.',
|
||||
'Serve identical content across multiple access protocols.',
|
||||
'Geo-optimize placement for latency-sensitive workloads.',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export function StorageUseCases() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
|
||||
Use Cases
|
||||
</Eyebrow>
|
||||
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
||||
Sovereign storage for every data-intensive workload.
|
||||
</SectionHeader>
|
||||
<P className="mt-6 text-gray-600">
|
||||
Mycelium Storage adapts to compliance-driven enterprise data,
|
||||
decentralized content distribution, and everything in between.
|
||||
Choose the pattern that fits your strategy without sacrificing
|
||||
ownership.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
||||
{primaryUseCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.title}
|
||||
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<ul className="mt-6 space-y-3 text-sm text-gray-600">
|
||||
{useCase.bullets.map((bullet) => (
|
||||
<li
|
||||
key={bullet}
|
||||
className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
|
||||
>
|
||||
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-16 rounded-3xl border border-slate-200 bg-slate-50 p-10 shadow-sm">
|
||||
<h3 className="text-2xl font-semibold text-gray-900">
|
||||
Storage-Specific Scenarios
|
||||
</h3>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
||||
These patterns highlight how Mycelium Storage keeps sovereignty,
|
||||
protocol flexibility, and resilience at the center of data strategy.
|
||||
</p>
|
||||
<div className="mt-10 grid gap-8 lg:grid-cols-2">
|
||||
{storageSpecificUseCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.title}
|
||||
className="rounded-3xl border border-cyan-100 bg-white p-6 leading-relaxed text-gray-600"
|
||||
>
|
||||
<h4 className="text-lg font-semibold text-gray-900">
|
||||
{useCase.title}
|
||||
</h4>
|
||||
<ul className="mt-4 space-y-3 text-sm">
|
||||
{useCase.bullets.map((bullet) => (
|
||||
<li key={bullet} className="flex gap-3">
|
||||
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user