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

refactor: replace hardcoded text styles with reusable Text components

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 13:07:51 +02:00
parent bca730681e
commit d03b67df7d
10 changed files with 223 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/Features.tsx
View File

@@ -1,3 +1,4 @@
import { CardDescription, CardEyebrow, CardTitle, Eyebrow, P, SectionHeader } from '@/components/Texts'
import Pathfinding from '@/components/Pathfinding'
import MessageBus from '@/components/MessageBus'
import ProxyDetection from '@/components/ProxyDetection'
@@ -8,30 +9,34 @@ 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">
<Eyebrow color="accent">Core Components</Eyebrow>
<SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
Network Capabilities
</p>
<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">
Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
</p>
</SectionHeader>
<P color="secondary" className="mt-4 max-w-4xl">
Built for resilience and autonomy, the Mycelium Network dynamically
connects nodes through intelligent routing, proxy discovery, and
decentralized delivery.
</P>
<P color="secondary" className="mt-2 max-w-4xl">
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="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">
<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">
<CardEyebrow color="accent">Routing</CardEyebrow>
<CardTitle color="dark" className="mt-2">
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>
</CardTitle>
<CardDescription color="secondary" className="mt-2 max-w-lg">
The Mycelium Network automatically discovers the shortest and
fastest routes between nodes, ensuring optimal data flow and
network efficiency without manual configuration.
</CardDescription>
</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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -41,14 +46,15 @@ Each component — from message passing to content distribution — works in har
<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">
<CardEyebrow color="accent">Communication</CardEyebrow>
<CardTitle color="dark" className="mt-2">
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>
</CardTitle>
<CardDescription color="secondary" className="mt-2 max-w-lg">
Acts as a global message layer that lets nodes exchange
information seamlessly. Enables resilient, asynchronous
communication across the entire decentralized mesh.
</CardDescription>
</div>
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -58,14 +64,15 @@ Each component — from message passing to content distribution — works in har
<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">
<CardEyebrow color="accent">Discovery</CardEyebrow>
<CardTitle color="dark" className="mt-2">
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>
</CardTitle>
<CardDescription color="secondary" className="mt-2 max-w-lg">
The system continuously scans for open SOCKS5 proxies within the
network, making it effortless to find available connection points
without manual setup.
</CardDescription>
</div>
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -75,14 +82,15 @@ Each component — from message passing to content distribution — works in har
<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">
<CardEyebrow color="accent">Connectivity</CardEyebrow>
<CardTitle color="dark" className="mt-2">
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>
</CardTitle>
<CardDescription color="secondary" className="mt-2 max-w-lg">
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.
</CardDescription>
</div>
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -92,14 +100,15 @@ Each component — from message passing to content distribution — works in har
<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">
<CardEyebrow color="accent">Delivery</CardEyebrow>
<CardTitle color="dark" className="mt-2">
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>
</CardTitle>
<CardDescription color="secondary" className="mt-2 max-w-lg">
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.
</CardDescription>
</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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />