ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

feat: update network page messaging and structure

Browse Source 
- Revised call-to-action copy to emphasize dual paths: using the network vs hosting nodes
- Reorganized page sections to introduce new NetworkCapabilities and NetworkUsecases components
- Updated roadmap section to reflect active evolution rather than future-focused messaging
This commit is contained in:
sasha-astiadi
2025-11-05 12:52:40 +01:00
parent b767bdbcb4
commit aaf02d0a7c
4 changed files with 84 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/network/CallToAction.tsx
View File

@@ -14,14 +14,14 @@ 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">
Get Started Today
Choose How You Want to Start
</h2>
<p className="mt-6 text-lg text-gray-300">
Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
Use the network to connect workloads or host nodes to deepen mesh resilience and run your environments on your own hardware.
</p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="white">
Get Mycelium Connector
Get Mycelium Network
</Button>
<Button
to="https://threefold.info/mycelium_network/docs/"
@@ -30,7 +30,7 @@ export function CallToAction() {
variant="outline"
color="white"
>
Read Docs
Host a Node
</Button>
</div>
</div>

15
src/pages/network/NetworkPage.tsx
View File

@@ -5,6 +5,8 @@ import { Features } from './Features'
import { PrimaryFeatures } from './PrimaryFeatures'
import { SecondaryFeatures } from './SecondaryFeatures'
import { CallToAction } from './CallToAction'
import { NetworkCapabilities } from './NetworkCapabilities'
import { NetworkUsecases } from './NetworkUsecases'
export default function NetworkPage() {
return (
@@ -12,19 +14,28 @@ export default function NetworkPage() {
<AnimatedSection>
<Hero />
</AnimatedSection>
<AnimatedSection>
<About />
<NetworkCapabilities />
</AnimatedSection>
<AnimatedSection>
<Features />
</AnimatedSection>
<AnimatedSection>
<PrimaryFeatures />
</AnimatedSection>
<AnimatedSection>
<NetworkUsecases />
</AnimatedSection>
<AnimatedSection>
<SecondaryFeatures />
</AnimatedSection>
<AnimatedSection>
ß <AnimatedSection>
<CallToAction />
</AnimatedSection>
</>

64
src/pages/network/NetworkUsecases.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
const networkUseCases = [
{
title: 'Secure Access to Self-Hosted Services',
description:
'Access your services, VMs, and clusters remotely without VPNs, public IPs, or port forwarding.',
ideal:
'Ideal for: homelabs, personal clouds, long-running self-hosted stacks',
},
{
title: 'Service-to-Service Networking Across Environments',
description:
'Connect applications running across home labs, cloud regions, edge nodes, and data centers all on one address space.',
ideal:
'Ideal for: dev teams, distributed apps, container + K3s workloads',
},
{
title: 'Resilient Connectivity Across Regions & Outages',
description:
'Connect systems across countries, datacenters, edge locations, and remote deployments — with routing that automatically heals around ISP failures, censorship, and regional outages.',
ideal:
'Ideal for: research networks, cross-border orgs, distributed compute, off-grid / rural deployments',
},
]
export function NetworkUseCases() {
return (
<section className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>USE CASES</Eyebrow>
<SectionHeader as="h2" className="mt-6 text-gray-900">
Private Connectivity for People, Services, and Infrastructures
</SectionHeader>
<P className="mt-6 text-gray-600">
Mycelium Network provides a secure, autonomous communication layer
that works across homes, clouds, edge workloads, and global deployments.
</P>
</div>
<div className="mx-auto mt-16 max-w-5xl grid gap-8 lg:grid-cols-3">
{networkUseCases.map((useCase) => (
<div
key={useCase.title}
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>
<p className="mt-4 text-sm leading-relaxed text-gray-600">
{useCase.description}
</p>
<p className="mt-4 text-xs font-medium text-cyan-700">
{useCase.ideal}
</p>
</div>
))}
</div>
</Container>
</section>
)
}

6
src/pages/network/SecondaryFeatures.tsx
View File

@@ -194,12 +194,12 @@ export function SecondaryFeatures() {
>
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
<h2 className="text-base/7 font-semibold text-cyan-500">IN ACTIVE EVOLUTION</h2>
<p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
Coming Soon: The Future of Mycelium
Expanding the Network Layer
</p>
<p className="mt-6 text-lg text-gray-600">
Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh. These enhancements deepen autonomy and improve real-world usability.
</p>
</div>
<ul