forked from emre/www_projectmycelium_com
feat: redesign network page with improved layout and typography
- Replaced hardcoded text elements with reusable typography components (H2, H3, P, Eyebrow, CT, CP) - Updated NetworkCapabilities section with dark theme, two-column layout, and visual separators - Added consistent border styling and spacing across Features and Hero sections
This commit is contained in:
@@ -3,27 +3,31 @@ import MessageBus from './animations/MessageBus'
|
||||
import ProxyDetection from './animations/ProxyDetection'
|
||||
import ProxyForwarding from './animations/ProxyForwarding'
|
||||
import ContentDistribution from './animations/ContentDistribution'
|
||||
import { H2, P, H3, CT, CP, Eyebrow } from '@/components/Texts'
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section id="features" className="py-24">
|
||||
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
|
||||
<p className="mt-2 max-w-2xl text-3xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950">
|
||||
Network Capabilities
|
||||
</p>
|
||||
<p className="mt-4 max-w-4xl text-lg text-gray-600">
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Top spacer + full-width line */}
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
|
||||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||
|
||||
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl bg-white py-12 lg:px-10 border border-t-0 border-b-0 border-gray-100">
|
||||
<Eyebrow>Core Components</Eyebrow>
|
||||
<H3>Network Capabilities</H3>
|
||||
<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.
|
||||
</p>
|
||||
<p className="mt-2 max-w-4xl text-lg text-gray-600">
|
||||
</P>
|
||||
<P className="mt-4 max-w-4xl 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.
|
||||
</p>
|
||||
<div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
|
||||
</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="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
|
||||
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
|
||||
<Pathfinding />
|
||||
<div className="p-10 pt-4">
|
||||
<div className="p-6 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Routing</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Automatic pathfinding
|
||||
@@ -40,7 +44,7 @@ export function Features() {
|
||||
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
|
||||
<MessageBus />
|
||||
<div className="p-10 pt-4">
|
||||
<div className="p-6 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Communication</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Distributed message bus
|
||||
@@ -57,7 +61,7 @@ export function Features() {
|
||||
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
|
||||
<ProxyDetection className="h-80" />
|
||||
<div className="p-10 pt-4">
|
||||
<div className="p-6 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Discovery</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Automatic proxy detection
|
||||
@@ -74,7 +78,7 @@ export function Features() {
|
||||
<div className="absolute inset-0 rounded-lg bg-white" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
<ProxyForwarding className="h-80" />
|
||||
<div className="p-10 pt-4">
|
||||
<div className="p-6 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Connectivity</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Seamless proxy forwarding
|
||||
@@ -91,7 +95,7 @@ export function Features() {
|
||||
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
|
||||
<ContentDistribution className="h-80" />
|
||||
<div className="p-10 pt-4">
|
||||
<div className="p-6 pt-4">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Delivery</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
|
||||
Decentralized content distribution
|
||||
@@ -106,6 +110,9 @@ export function Features() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* ✅ Bottom full-width line + spacer */}
|
||||
<div className="w-full border-b border-gray-100" />
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useId } from 'react'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Button } from '@/components/Button'
|
||||
import phoneFrame from '../../images/phoneframe.png'
|
||||
import { H3, Eyebrow, P, CT, CP } from "@/components/Texts";
|
||||
|
||||
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
let id = useId()
|
||||
@@ -74,24 +75,24 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
|
||||
<div className="overflow-hidden pb-24 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
|
||||
<Container>
|
||||
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
|
||||
<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">
|
||||
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
|
||||
<H3 className="mb-4">
|
||||
Mycelium Network
|
||||
</h1>
|
||||
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
|
||||
</H3>
|
||||
<CT className="mt-8 font-medium text-gray-600 ">
|
||||
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">
|
||||
</CT>
|
||||
<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.
|
||||
</p>
|
||||
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
|
||||
</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>
|
||||
</P>
|
||||
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Get Mycelium Connector
|
||||
|
||||
@@ -4,62 +4,94 @@ import {
|
||||
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,
|
||||
},
|
||||
]
|
||||
import { Eyebrow, H3, P } from '@/components/Texts'
|
||||
|
||||
export function NetworkCapabilities() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<section className="w-full max-w-8xl mx-auto bg-[#121212]">
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
{/* ✅ Main content */}
|
||||
<div className="mx-auto max-w-7xl px-6 bg-[#111111] lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-800">
|
||||
|
||||
{/* ✅ LEFT SIDE — Title + Intro */}
|
||||
<div className="max-w-xl ">
|
||||
<Eyebrow>WHAT IT ENABLES</Eyebrow>
|
||||
<H3 className="mt-4 text-gray-900">
|
||||
|
||||
<H3 className="mt-6 text-white">
|
||||
A Private Networking Layer for Everything You Run
|
||||
</H3>
|
||||
<P className="mt-6 text-gray-600">
|
||||
|
||||
<P className="mt-6 text-lg text-gray-200">
|
||||
Mycelium Network is the backbone for secure, autonomous connectivity
|
||||
across devices, data centers, clusters, and self-hosted environments,
|
||||
anywhere in the world.
|
||||
across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
|
||||
</P>
|
||||
|
||||
<P className="mt-3 text-lg text-gray-200">
|
||||
Every node gets its own encrypted identity and address space, forming a
|
||||
zero-trust mesh without any centralized controller.
|
||||
</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>
|
||||
{/* ✅ RIGHT SIDE — 4 stacked features */}
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* 1 — Encrypted Mesh */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||||
<LockClosedIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
End-to-End Encrypted Mesh
|
||||
</h3>
|
||||
<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.
|
||||
</p>
|
||||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||||
</div>
|
||||
|
||||
{/* 2 — IPv6 Space */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||||
<GlobeAltIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
Global IPv6 Address Space
|
||||
</h3>
|
||||
<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.
|
||||
</p>
|
||||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||||
</div>
|
||||
|
||||
{/* 3 — Self-Healing Routing */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||||
<ArrowPathRoundedSquareIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
Self-Healing Routing
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-200 max-w-2xl">
|
||||
Traffic automatically finds the fastest path, dynamically re-routing around failures or congestion.
|
||||
</p>
|
||||
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
||||
</div>
|
||||
|
||||
{/* 4 — No Central Control */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white flex items-center">
|
||||
<NoSymbolIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
||||
No Central Control
|
||||
</h3>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-800" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user