ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

refactor: replace Benefits component with Features and remove featured section from Hero

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-13 16:49:00 +02:00
parent 5e34e6826f
commit 8b7f5f7286
4 changed files with 363 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/Features.tsx Normal file
View File

@@ -0,0 +1,126 @@
import Pathfinding from '@/components/Pathfinding'
export function Features() {
return (
<section id="features" className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<p className="mt-2 max-w-lg text-4xl font-semibold tracking-tight text-pretty text-gray-950 sm:text-5xl">
Network Capabilities
</p>
<p className="mt-2 max-w-lg text-lg text-gray-600">
If you have anything else you want to ask,{' '}
<a
href="mailto:info@example.com"
className="text-gray-900 underline"
>
reach out to us
</a>
.
</p>
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="relative lg:col-span-3">
<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">
<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)]">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
className="h-80 object-cover object-left lg:object-right"
/>
<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">
<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)]">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png"
className="h-80 object-cover object-left"
/>
<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">
<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)]">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png"
className="h-80 object-cover"
/>
<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">
<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)]">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png"
className="h-80 object-cover"
/>
<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>
)
}