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

refactor: simplify product section content and layout

Browse Source 
- Condensed GPU Architecture section from detailed bullet points to concise three-pillar overview
- Removed redundant descriptive paragraphs from Capabilities and Design sections
- Streamlined Network Hero messaging and added standalone/integrated positioning
- Created new NetworkCapabilities component with four-column grid layout
This commit is contained in:
sasha-astiadi
2025-11-05 12:47:18 +01:00
parent c25f6aaba6
commit b767bdbcb4
6 changed files with 96 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/gpu/GpuArchitecture.tsx
View File

@@ -1,28 +1,18 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
import { Eyebrow, SectionHeader } from '../../components/Texts'
const architectureSections = [
const architecture = [
{
title: 'Distributed GPU Mesh',
description:
'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
bullets: [
'GPU nodes distributed globally for on-demand acceleration.',
'Mycelium network provides encrypted peer-to-peer connectivity.',
'Smart contract orchestration allocates and governs resources.',
'Real-time monitoring tracks utilization and health.',
],
title: 'Sovereign Compute Nodes',
description: 'GPUs hosted on hardware you trust.',
},
{
title: 'Performance Characteristics',
description:
'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
bullets: [
'Edge-to-core deployment flexibility for every workload profile.',
'Adaptive intelligence optimizes allocation automatically.',
'Deterministic performance guarantees availability when booked.',
'Transparent cost tracking for every GPU cycle consumed.',
],
title: 'Encrypted Mesh Networking',
description: 'Secure, private connectivity to workloads.',
},
{
title: 'Reservation & Verification Layer',
description: 'Guarantees GPU access and consistency.',
},
]
@@ -31,41 +21,24 @@ export function GpuArchitecture() {
<section id="gpu-architecture" className="bg-white 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">
A peer-to-peer mesh purpose-built for acceleration.
HOW IT WORKS
</SectionHeader>
<P className="mt-6 text-gray-600">
Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
networking, smart contract orchestration, and transparent monitoring
ensure your workloads receive precisely the power they request.
</P>
</div>
<div className="mt-16 grid gap-8 lg:grid-cols-2">
{architectureSections.map((section) => (
<div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
{architecture.map((item) => (
<div
key={section.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"
key={item.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">
{section.title}
{item.title}
</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-600">
{section.description}
<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">
{section.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>

4
src/pages/gpu/GpuCapabilities.tsx
View File

@@ -37,10 +37,6 @@ export function GpuCapabilities() {
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>CAPABILITIES</Eyebrow>
<H3 className="mt-4 text-gray-900">What You Can Run on Mycelium Cloud</H3>
<P className="mt-6 text-gray-600">
GPU workloads can run anywhere on the mesh — on cloud capacity, your own machines,
or edge nodes — with full sovereignty.
</P>
</div>
<div className="mx-auto mt-16 max-w-5xl">

5
src/pages/gpu/GpuDesign.tsx
View File

@@ -34,10 +34,7 @@ export function GpuDesign() {
<div className="mx-auto max-w-3xl sm:text-center">
<Eyebrow>CORE VALUE</Eyebrow>
<H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
<P className="mt-6 text-gray-600">
Mycelium GPU gives you access to real hardware, not gated queues or
proprietary runtimes.
</P>
</div>
{/* Key Benefits */}

12
src/pages/network/Hero.tsx
View File

@@ -82,15 +82,23 @@ export function Hero() {
Mycelium Network
</h1>
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
Unleashing the Power of Decentralized Networks
Encrypted Peer-to-Peer Connectivity Across the Globe
</h2>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
Mycelium Network provides an unbreakable sovereign IPv6 mesh that connects people, nodes, and applications directly, with no central servers.
</p>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Works Alone. Works Together.
Mycelium Network can be used standalone, or together with Mycelium Cloud
for full-stack sovereignty.
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="cyan">
Get Mycelium Connector
</Button>
<Button to="/download" variant="outline" color="cyan">
Explore Docs
</Button>
</div>
</div>
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">

65
src/pages/network/NetworkCapabilities.tsx Normal file
View File

@@ -0,0 +1,65 @@
import {
LockClosedIcon,
GlobeAltIcon,
ArrowPathRoundedSquareIcon,
NoSymbolIcon,
} from '@heroicons/react/24/solid'
import { Container } from '../../components/Container'
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
const capabilities = [
{
name: 'End-to-End Encrypted Mesh',
description: 'Every packet is encrypted and routed peer-to-peer.',
icon: LockClosedIcon,
},
{
name: 'Global IPv6 Address Space',
description: 'Every node, app, and service gets its own private address.',
icon: GlobeAltIcon,
},
{
name: 'Self-Healing Routing',
description: 'Traffic automatically finds the fastest, most resilient path.',
icon: ArrowPathRoundedSquareIcon,
},
{
name: 'No Central Control',
description: 'No servers to trust, no middlemen, no corporate choke-points.',
icon: NoSymbolIcon,
},
]
export function NetworkCapabilities() {
return (
<section className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>WHAT IT ENABLES</Eyebrow>
<H3 className="mt-4 text-gray-900">
A Private Networking Layer for Everything You Run
</H3>
<P className="mt-6 text-gray-600">
Mycelium Network is the backbone for secure, autonomous connectivity
across devices, data centers, clusters, and self-hosted environments,
anywhere in the world.
</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="flex flex-col 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>
)
}

4
src/pages/storage/StorageCapabilities.tsx
View File

@@ -39,10 +39,6 @@ export function StorageCapabilities() {
<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">