2 Commits

Author SHA1 Message Date
cf32cd081c feat: update network CTA with improved messaging and navigation
- Changed heading from "Start" to "Connect" and refined description for clarity
- Replaced two-button layout with three-option navigation (Join Network, Deploy in Cloud, Host a Node)
- Updated button destinations and styling to better guide user journey
2025-11-14 16:16:08 +01:00
1950342b7a feat: simplify network page messaging and update feature descriptions
- Streamlined hero and features sections with clearer, more direct value propositions
- Updated network capabilities to emphasize unified connectivity over technical details
- Replaced technical feature descriptions with user-focused benefits (DNS, VPN, publishing, AI)
2025-11-14 16:16:00 +01:00
6 changed files with 60 additions and 61 deletions

View File

@@ -20,26 +20,31 @@ export function CallToAction() {
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-3xl text-center"> <div className="mx-auto max-w-3xl text-center">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl"> <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
Choose How You Want to Start Choose How You Want to Connect
</h2> </h2>
<p className="mt-6 text-lg text-gray-300"> <p className="mt-6 text-lg text-gray-300">
Use the network to connect workloads or host nodes to deepen mesh resilience and run your environments on your own hardware. Choose How You Want to Connect
Use the network to link environments, deploy workloads, or host nodes to strengthen the mesh and run on your own hardware.
</p> </p>
{/* ✅ Two cards, stacked center with spacing */} {/* ✅ Two cards, stacked center with spacing */}
<div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8"> <div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
<div className="flex flex-col items-center text-center max-w-xs"> <Button to="/network" variant="solid" color="cyan">
<Button to="/download" variant="solid" color="cyan" className="mt-4"> Join the Network
Get Mycelium Network </Button>
</Button>
</div>
<div className="flex flex-col items-center text-center max-w-xs"> <Button
<Button to="https://threefold.info/mycelium_network/docs/" as="a" target="_blank" variant="outline" color="white" className="mt-4"> to="/cloud"
Host a Node variant="outline"
</Button> color="white"
</div> >
Deploy in Cloud
</Button>
<a href="/node" className="text-cyan-400 hover:text-cyan-300 transition-colors">
Host a Node &rarr;
</a>
</div> </div>
</div> </div>
</Container> </Container>

View File

@@ -18,10 +18,10 @@ export function Features() {
<Eyebrow>Core Components</Eyebrow> <Eyebrow>Core Components</Eyebrow>
<H3>Network Capabilities</H3> <H3>Network Capabilities</H3>
<P className="mt-4 max-w-4xl text-lg text-gray-600"> <P className="mt-4 max-w-4xl text-lg text-gray-600">
Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery. Built for resilience, performance, and autonomy.
</P> </P>
<P className="mt-4 max-w-4xl text-lg text-gray-600"> <P className="mt-4 max-w-3xl text-lg text-gray-600">
Each component from message passing to content distribution works in harmony to create a fully self-healing, self-optimizing data mesh. Nodes connect through intelligent routing, peer discovery, and decentralized delivery to create a continuously optimized data mesh.
</P> </P>
<div className="mt-8 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2"> <div className="mt-8 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105"> <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">

View File

@@ -80,22 +80,20 @@ export function Hero() {
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8"> <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6"> <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<H3 className="mb-4"> <H3 className="mb-4">
Mycelium Network MYCELIUM NETWORK
</H3> </H3>
<CT className="mt-8 font-medium text-gray-600 "> <CT className="mt-8 font-medium text-gray-600 ">
Encrypted Peer-to-Peer Connectivity Across the Globe The Network Stack for Private, Autonomous Networking
</CT> </CT>
<P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal"> <P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Mycelium Network provides an unbreakable sovereign IPv6 mesh that connects people, nodes, and applications directly, with no central servers. Connect once. Get private networking, censorship-resistant publishing, and on-network AI in one encrypted fabric.
</P> </P>
<P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal"> <P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Works Alone. Works Together. Your Pod is your personal gateway to the network.
Mycelium Network can be used standalone, or together with Mycelium Cloud
for full-stack sovereignty.
</P> </P>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4"> <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="cyan"> <Button to="/download" variant="solid" color="cyan">
Get Mycelium Connector Get Started
</Button> </Button>
<Button to="/download" variant="outline" color="cyan"> <Button to="/download" variant="outline" color="cyan">
Explore Docs Explore Docs

View File

@@ -23,17 +23,15 @@ export function NetworkCapabilities() {
<Eyebrow>WHAT IT ENABLES</Eyebrow> <Eyebrow>WHAT IT ENABLES</Eyebrow>
<H4 className="mt-6 text-white"> <H4 className="mt-6 text-white">
A Private Networking Layer for Everything You Run One Network. Many Capabilities.
</H4> </H4>
<P className="mt-6 text-gray-200"> <P className="mt-6 text-gray-200">
Mycelium Network is the backbone for secure, autonomous connectivity One network for all your connectivity needs.
across devices, data centers, clusters, and self-hosted environments anywhere in the world.
</P> </P>
<P className="mt-3 text-lg text-gray-200"> <P className="mt-3 text-lg text-gray-200">
Every node gets its own encrypted identity and address space, forming a Mycelium replaces separate layers like VPNs, hosting, and DNS with a single encrypted, peer-to-peer system that links devices, apps, and environments directly.
zero-trust mesh without any centralized controller.
</P> </P>
</div> </div>
@@ -47,7 +45,7 @@ export function NetworkCapabilities() {
End-to-End Encrypted Mesh End-to-End Encrypted Mesh
</h3> </h3>
<p className="mt-2 text-gray-200 max-w-2xl"> <p className="mt-2 text-gray-200 max-w-2xl">
Every packet is encrypted and routed peer-to-peer no intermediaries, no sniffing, no compromise. Every packet is encrypted and routed peer-to-peer. No intermediaries, no data sniffing, no compromise.
</p> </p>
<div className="mt-8 h-px w-full bg-cyan-500/50" /> <div className="mt-8 h-px w-full bg-cyan-500/50" />
</div> </div>
@@ -59,7 +57,7 @@ export function NetworkCapabilities() {
Global IPv6 Address Space Global IPv6 Address Space
</h3> </h3>
<p className="mt-2 text-gray-200 max-w-2xl"> <p className="mt-2 text-gray-200 max-w-2xl">
Every node, app, and microservice gets an address solving discovery, routing, and NAT issues forever. Every node, app, and microservice gets a unique global address. Permanently solves discovery, routing, and NAT issues.
</p> </p>
<div className="mt-8 h-px w-full bg-cyan-500/50" /> <div className="mt-8 h-px w-full bg-cyan-500/50" />
</div> </div>
@@ -68,10 +66,10 @@ export function NetworkCapabilities() {
<div> <div>
<h3 className="text-lg font-semibold text-white flex items-center"> <h3 className="text-lg font-semibold text-white flex items-center">
<ArrowPathRoundedSquareIcon className="h-6 w-6 text-cyan-500 mr-3" /> <ArrowPathRoundedSquareIcon className="h-6 w-6 text-cyan-500 mr-3" />
Self-Healing Routing Dynamic Pathfinding
</h3> </h3>
<p className="mt-2 text-gray-200 max-w-2xl"> <p className="mt-2 text-gray-200 max-w-2xl">
Traffic automatically finds the fastest path, dynamically re-routing around failures or congestion. Traffic automatically finds the fastest route, re-routing around failures or congestion in real time.
</p> </p>
<div className="mt-8 h-px w-full bg-cyan-500/50" /> <div className="mt-8 h-px w-full bg-cyan-500/50" />
</div> </div>
@@ -83,7 +81,7 @@ export function NetworkCapabilities() {
No Central Control No Central Control
</h3> </h3>
<p className="mt-2 text-gray-200 max-w-2xl"> <p className="mt-2 text-gray-200 max-w-2xl">
No servers to trust, no corporate choke points, and no authority that can turn you off. No corporate servers, no authority that can disable or censor the network.
</p> </p>
</div> </div>
</div> </div>

View File

@@ -264,7 +264,7 @@ function FeaturesDesktop() {
{feature.name} {feature.name}
</Tab> </Tab>
</FeatureTitle> </FeatureTitle>
<FeatureDescription color="secondary" className="mt-2"> <FeatureDescription color="white" className="mt-2">
{feature.description} {feature.description}
</FeatureDescription> </FeatureDescription>
</div> </div>
@@ -419,9 +419,7 @@ export function PrimaryFeatures() {
How Mycelium Operates How Mycelium Operates
</SectionHeader> </SectionHeader>
<P color="light" className="mt-6"> <P color="light" className="mt-6">
Mycelium, like its natural namesake, thrives on decentralization, Your device connects to an encrypted peer-to-peer mesh that automatically handles routing, discovery, and communication.
efficiency, and security, making it a truly powerful force in the world
of decentralized networks.
</P> </P>
</div> </div>
</Container> </Container>

View File

@@ -4,41 +4,41 @@ import { CP } from '@/components/Texts'
const features = [ const features = [
{ {
name: 'Quantum Safe Storage Functionality', name: 'Sovereign DNS',
description: description:
"Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.", 'Human-readable names secured by your keypair, not a registrar. Unblockable discovery, private namespaces, and instant resolution across PODs.',
icon: DeviceArrowIcon,
},
{
name: 'Entry and Exit Points for AI Workloads',
description:
'Seamlessly connect AI applications to Mycelium, providing optimized and secured data pipelines for training, inference, and real-time processing.',
icon: DeviceCardsIcon,
},
{
name: 'Data Storage and Retrieval Mechanisms',
description:
'Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.',
icon: DeviceClockIcon,
},
{
name: 'Integrated Name Services (DNS)',
description:
'The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.',
icon: DeviceListIcon, icon: DeviceListIcon,
}, },
{ {
name: 'Frontend/Backend Integration', name: 'Integrated VPN (Desktop)',
description: description:
'Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.', 'Connect securely from anywhere. No setup and no servers needed. Peer-to-peer routing delivers local speed and global reach.',
icon: DeviceLockIcon, icon: DeviceLockIcon,
}, },
{ {
name: 'CDN (Content Delivery Network)', name: 'Unstoppable Publishing',
description: description:
'Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.', 'Host sites or services directly from your POD. Signed content, geo-aware delivery, and built-in resistance to takedowns.',
icon: DeviceChartIcon, icon: DeviceChartIcon,
}, },
{
name: 'AI-Driven Search',
description:
'Private, semantic search across your own data and sites. Indexes locally, shares results securely, and retrieves instantly on-edge.',
icon: DeviceArrowIcon,
},
{
name: 'Private Chat',
description:
'Peer-to-peer messaging with zero metadata and zero servers. Works offline through nearby peers and is encrypted end-to-end.',
icon: DeviceCardsIcon,
},
{
name: 'On-Network AI',
description:
'Run LLMs and AI tools directly inside the network. Keep data local, distribute workloads, and build your own autonomous agents.',
icon: DeviceClockIcon,
},
] ]
function DeviceArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) { function DeviceArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {