forked from emre/www_projectmycelium_com
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:
@@ -14,12 +14,12 @@ export function CallToAction() {
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Bring sovereign storage into your stack.
|
||||
Choose How You Want to Start
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Partner with the Mycelium team to design quantum-safe, compliant
|
||||
storage that meets your residency, redundancy, and performance
|
||||
requirements across the globe.
|
||||
Store data in your Mycelium Cloud environment
|
||||
or host your own node for full sovereignty.
|
||||
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
|
||||
<Button
|
||||
@@ -30,7 +30,7 @@ export function CallToAction() {
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Talk to our team
|
||||
Use Storage in Cloud
|
||||
</Button>
|
||||
<Button
|
||||
to="#storage-developer-experience"
|
||||
@@ -38,7 +38,7 @@ export function CallToAction() {
|
||||
variant="outline"
|
||||
color="white"
|
||||
>
|
||||
Explore developer workflow
|
||||
Host a Node
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,48 +3,17 @@ import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
||||
|
||||
const architecture = [
|
||||
{
|
||||
title: 'Quantum-Safe Data Protection',
|
||||
description:
|
||||
'Post-quantum encryption and cryptographic verification protect every storage operation end-to-end.',
|
||||
bullets: [
|
||||
'Algorithms selected to resist quantum computing attacks.',
|
||||
'Protection applied beneath the application layer.',
|
||||
'All writes and reads verified cryptographically.',
|
||||
'Future-proof design for long-lived data sets.',
|
||||
],
|
||||
title: 'Encrypted Storage Substrate',
|
||||
description: 'Keeps data private and verifiable.',
|
||||
},
|
||||
{
|
||||
title: 'Autonomous Self-Healing',
|
||||
description:
|
||||
'Storage monitors itself, heals corruption, and restores replicas without human intervention.',
|
||||
bullets: [
|
||||
'Continuous detection of failures or anomalies.',
|
||||
'Instant recovery without service interruption.',
|
||||
'Integrity checks keep replicas in lockstep.',
|
||||
'24/7 autonomy removes the pager from the loop.',
|
||||
],
|
||||
title: 'Mesh Routing Layer',
|
||||
description: 'Connects clients and workloads securely, anywhere.',
|
||||
},
|
||||
{
|
||||
title: 'Multi-Protocol Fabric',
|
||||
title: 'Protocol Gateway Layer',
|
||||
description:
|
||||
'A single data plane serves every protocol so workloads can mix and migrate freely.',
|
||||
bullets: [
|
||||
'Protocol adapters sit in front of the same storage core.',
|
||||
'Applications choose the protocol that fits their workflow.',
|
||||
'No data duplication needed to support multiple interfaces.',
|
||||
'Consistent governance across all access patterns.',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Geo-Aware Data Governance',
|
||||
description:
|
||||
'Data placement policies enforce sovereignty, redundancy, and compliance requirements.',
|
||||
bullets: [
|
||||
'Pin workloads to specific jurisdictions or providers.',
|
||||
'Define redundancy at the dataset or workload level.',
|
||||
'Automatic zone-to-zone replication hardens resilience.',
|
||||
'Global distribution optimized across the ThreeFold Grid.',
|
||||
],
|
||||
'Serve the same dataset over S3, IPFS, WebDAV, or HTTP.',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -53,41 +22,29 @@ export function StorageArchitecture() {
|
||||
<section className="bg-gray-50 py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow>
|
||||
Technical Architecture
|
||||
</Eyebrow>
|
||||
<Eyebrow>ARCHITECTURE</Eyebrow>
|
||||
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
||||
Autonomous governance for planetary-scale storage.
|
||||
HOW IT WORKS
|
||||
</SectionHeader>
|
||||
<P className="mt-6 text-gray-600">
|
||||
The Mycelium Storage data plane is designed to protect data at the
|
||||
cryptographic layer, operate without manual intervention, and meet
|
||||
jurisdictional requirements anywhere in the world.
|
||||
A layered design that encrypts, routes, and exposes storage through
|
||||
multiple protocols — without duplicating data or compromising
|
||||
sovereignty.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
||||
|
||||
<div className="mx-auto mt-16 max-w-4xl space-y-6">
|
||||
{architecture.map((item) => (
|
||||
<div
|
||||
key={item.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"
|
||||
className="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">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
||||
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
<ul className="mt-6 space-y-3 text-sm text-gray-600">
|
||||
{item.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>
|
||||
|
||||
64
src/pages/storage/StorageCapabilities.tsx
Normal file
64
src/pages/storage/StorageCapabilities.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Container } from '../../components/Container'
|
||||
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
|
||||
import {
|
||||
ServerStackIcon,
|
||||
GlobeAltIcon,
|
||||
FolderOpenIcon,
|
||||
LockClosedIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
|
||||
const capabilities = [
|
||||
{
|
||||
name: 'S3-Compatible Object Storage',
|
||||
description: 'Works with existing SDKs & tooling.',
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
{
|
||||
name: 'IPFS & Content-Addressed Access',
|
||||
description: 'Ideal for distributed and decentralized workloads.',
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
name: 'Filesystem Mounts (WebDAV / POSIX)',
|
||||
description: 'Mount storage directly into workflows and apps.',
|
||||
icon: FolderOpenIcon,
|
||||
},
|
||||
{
|
||||
name: 'Encrypted Replication & Placement Control',
|
||||
description: 'Choose where data physically lives – and who controls it.',
|
||||
icon: LockClosedIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function StorageCapabilities() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow>CAPABILITIES</Eyebrow>
|
||||
<H3 className="mt-4 text-gray-900">
|
||||
What You Can Use Mycelium Storage For
|
||||
</H3>
|
||||
<P className="mt-6 text-gray-600">
|
||||
A decentralized storage layer built for sovereign workloads — secure,
|
||||
flexible, and globally addressable.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 max-w-5xl">
|
||||
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{capabilities.map((item) => (
|
||||
<div key={item.name} className="text-center">
|
||||
<div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
|
||||
<item.icon className="size-6 text-cyan-600" aria-hidden="true" />
|
||||
</div>
|
||||
<CT className="mt-6 text-gray-900">{item.name}</CT>
|
||||
<CP className="mt-2 text-gray-600">{item.description}</CP>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -4,21 +4,21 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
|
||||
const highlights = [
|
||||
{
|
||||
label: 'Overview',
|
||||
title: 'Quantum-safe, sovereign data management',
|
||||
title: 'Encrypted & Verifiable Storage',
|
||||
description:
|
||||
'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
|
||||
'Data is secured with cryptographic identity, not cloud trust.',
|
||||
},
|
||||
{
|
||||
label: 'Core Concept',
|
||||
title: 'Unified data plane across every protocol',
|
||||
title: 'Self-Healing Replication',
|
||||
description:
|
||||
'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
|
||||
'The system repairs corruption and restores replicas automatically.',
|
||||
},
|
||||
{
|
||||
label: 'Outcome',
|
||||
title: 'Ownership without compromise',
|
||||
title: 'Multi-Protocol Access',
|
||||
description:
|
||||
'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
|
||||
'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -31,7 +31,7 @@ export function StorageOverview() {
|
||||
Platform Overview
|
||||
</Eyebrow>
|
||||
<SectionHeader as="h2" color="light" className="mt-6 font-medium">
|
||||
A quantum-safe data plane that heals itself.
|
||||
Core Features
|
||||
</SectionHeader>
|
||||
<P color="lightSecondary" className="mt-6">
|
||||
Built on sovereign infrastructure, Mycelium Storage keeps data
|
||||
|
||||
@@ -7,6 +7,8 @@ import { StorageDeveloperExperience } from './StorageDeveloperExperience'
|
||||
import { StorageUseCases } from './StorageUseCases'
|
||||
import { StorageDifferentiators } from './StorageDifferentiators'
|
||||
import { CallToAction } from './CallToAction'
|
||||
import { StorageCapabilities } from './StorageCapabilities'
|
||||
import { StorageDesign } from './StorageDesign'
|
||||
|
||||
export default function StoragePage() {
|
||||
return (
|
||||
@@ -14,24 +16,27 @@ export default function StoragePage() {
|
||||
<AnimatedSection>
|
||||
<StorageHero />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StorageOverview />
|
||||
<StorageCapabilities />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StorageFeatures />
|
||||
<StorageDesign />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StorageArchitecture />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StorageDeveloperExperience />
|
||||
<StorageOverview />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StorageUseCases />
|
||||
</AnimatedSection>
|
||||
<AnimatedSection>
|
||||
<StorageDifferentiators />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<CallToAction />
|
||||
</AnimatedSection>
|
||||
|
||||
@@ -1,81 +1,19 @@
|
||||
import { Container } from '../../components/Container'
|
||||
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
||||
|
||||
const primaryUseCases = [
|
||||
const storageUseCases = [
|
||||
{
|
||||
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: 'Data Sovereignty & Compliance',
|
||||
description: 'Keep data under your control, choose residency per dataset.',
|
||||
},
|
||||
{
|
||||
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: 'Distributed Application Storage',
|
||||
description: 'Serve data to services, agents, clusters, or edge workloads.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
],
|
||||
description:
|
||||
'Serve public or private assets globally, without centralized hosting.',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -84,71 +22,32 @@ export function StorageUseCases() {
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow>
|
||||
Use Cases
|
||||
</Eyebrow>
|
||||
<Eyebrow>USE CASES</Eyebrow>
|
||||
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
||||
Sovereign storage for every data-intensive workload.
|
||||
Built for Real Data Workloads
|
||||
</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.
|
||||
distributed application workloads, and global asset delivery
|
||||
— without giving up sovereignty.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
||||
{primaryUseCases.map((useCase) => (
|
||||
|
||||
<div className="mx-auto mt-16 max-w-4xl space-y-6">
|
||||
{storageUseCases.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"
|
||||
className="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>
|
||||
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</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