forked from sashaastiadi/www_mycelium_net
99 lines
4.8 KiB
TypeScript
99 lines
4.8 KiB
TypeScript
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'
|
|
import ProxyForwarding from '@/components/ProxyForwarding'
|
|
import ContentDistribution from '@/components/ContentDistribution'
|
|
|
|
const eyebrow = 'Core Components'
|
|
const sectionHeader = 'Network Capabilities'
|
|
const description1 = 'Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.'
|
|
const description2 = 'Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.'
|
|
|
|
const cards = [
|
|
{
|
|
eyebrow: 'Routing',
|
|
title: 'Automatic pathfinding',
|
|
description: 'The Mycelium Network automatically discovers the shortest and fastest routes between nodes, ensuring optimal data flow and network efficiency without manual configuration.',
|
|
component: <Pathfinding />,
|
|
className: 'lg:col-span-3',
|
|
roundedClassName: 'max-lg:rounded-t-4xl lg:rounded-tl-4xl',
|
|
roundedInnerClassName: 'max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]'
|
|
},
|
|
{
|
|
eyebrow: 'Communication',
|
|
title: 'Distributed message bus',
|
|
description: 'Acts as a global message layer that lets nodes exchange information seamlessly. Enables resilient, asynchronous communication across the entire decentralized mesh.',
|
|
component: <MessageBus />,
|
|
className: 'lg:col-span-3',
|
|
roundedClassName: 'lg:rounded-tr-4xl',
|
|
roundedInnerClassName: 'lg:rounded-tr-[calc(2rem+1px)]'
|
|
},
|
|
{
|
|
eyebrow: 'Discovery',
|
|
title: 'Automatic proxy detection',
|
|
description: 'The system continuously scans for open SOCKS5 proxies within the network, making it effortless to find available connection points without manual setup.',
|
|
component: <ProxyDetection className="h-80" />,
|
|
className: 'lg:col-span-2',
|
|
roundedClassName: 'lg:rounded-bl-4xl',
|
|
roundedInnerClassName: 'lg:rounded-bl-[calc(2rem+1px)]'
|
|
},
|
|
{
|
|
eyebrow: 'Connectivity',
|
|
title: 'Seamless proxy forwarding',
|
|
description: '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.',
|
|
component: <ProxyForwarding className="h-80" />,
|
|
className: 'lg:col-span-2',
|
|
roundedClassName: '',
|
|
roundedInnerClassName: ''
|
|
},
|
|
{
|
|
eyebrow: 'Delivery',
|
|
title: 'Decentralized content distribution',
|
|
description: '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.',
|
|
component: <ContentDistribution className="h-80" />,
|
|
className: 'lg:col-span-2',
|
|
roundedClassName: 'max-lg:rounded-b-4xl lg:rounded-br-4xl',
|
|
roundedInnerClassName: 'max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]'
|
|
}
|
|
]
|
|
|
|
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">
|
|
<Eyebrow color="accent">{eyebrow}</Eyebrow>
|
|
<SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
|
|
{sectionHeader}
|
|
</SectionHeader>
|
|
<P color="secondary" className="mt-4 max-w-4xl text-black">
|
|
{description1}
|
|
</P>
|
|
<P color="secondary" className="mt-2 max-w-4xl">
|
|
{description2}
|
|
</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">
|
|
{cards.map((card, index) => (
|
|
<div key={index} className={`group relative ${card.className} transition-all duration-300 ease-in-out hover:scale-105`}>
|
|
<div className={`absolute inset-0 rounded-lg bg-transparent ${card.roundedClassName}`} />
|
|
<div className={`flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.roundedInnerClassName}`}>
|
|
{card.component}
|
|
<div className="p-10 pt-4">
|
|
<CardEyebrow color="accent">{card.eyebrow}</CardEyebrow>
|
|
<CardTitle color="dark" className="mt-2">
|
|
{card.title}
|
|
</CardTitle>
|
|
<CardDescription color="secondary" className="mt-2 max-w-lg">
|
|
{card.description}
|
|
</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 ${card.roundedClassName}`} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|