forked from sashaastiadi/www_mycelium_net
112 lines
6.9 KiB
TypeScript
112 lines
6.9 KiB
TypeScript
import Pathfinding from '@/components/Pathfinding'
|
|
import MessageBus from '@/components/MessageBus'
|
|
import ProxyDetection from '@/components/ProxyDetection'
|
|
import ProxyForwarding from '@/components/ProxyForwarding'
|
|
import ContentDistribution from '@/components/ContentDistribution'
|
|
|
|
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-4xl text-3xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950">
|
|
Network Capabilities
|
|
</p>
|
|
<p className="mt-4 max-w-xl 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-xl 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">
|
|
<div className="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">
|
|
<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
|
|
</p>
|
|
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
|
The Mycelium Network automatically discovers the shortest and fastest routes between nodes,
|
|
ensuring optimal data flow and network efficiency without manual configuration.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
|
|
</div>
|
|
<div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
|
|
<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">
|
|
<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
|
|
</p>
|
|
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
|
Acts as a global message layer that lets nodes exchange information seamlessly.
|
|
Enables resilient, asynchronous communication across the entire decentralized mesh.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
|
|
</div>
|
|
<div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
|
|
<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">
|
|
<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
|
|
</p>
|
|
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
|
The system continuously scans for open SOCKS5 proxies within the network,
|
|
making it effortless to find available connection points without manual setup.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
|
|
</div>
|
|
<div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
|
|
<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">
|
|
<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
|
|
</p>
|
|
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
|
Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies.
|
|
When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
|
|
</div>
|
|
<div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
|
|
<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">
|
|
<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
|
|
</p>
|
|
<p className="mt-2 max-w-lg text-sm/6 text-gray-600">
|
|
Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers
|
|
content faster and more reliably—without relying on centralized servers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|