forked from sashaastiadi/www_mycelium_net
refactor: extract feature cards data and add overflow styles to animations
This commit is contained in:
@@ -5,114 +5,92 @@ 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">
|
||||
<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">Core Components</Eyebrow>
|
||||
<Eyebrow color="accent">{eyebrow}</Eyebrow>
|
||||
<SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
|
||||
Network Capabilities
|
||||
{sectionHeader}
|
||||
</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 color="secondary" className="mt-4 max-w-4xl text-black">
|
||||
{description1}
|
||||
</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>
|
||||
{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">
|
||||
<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="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">
|
||||
<CardEyebrow color="accent">Routing</CardEyebrow>
|
||||
<CardTitle color="dark" className="mt-2">
|
||||
Automatic pathfinding
|
||||
</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>
|
||||
{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 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" />
|
||||
</div>
|
||||
<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 lg:rounded-tr-4xl" />
|
||||
<div className="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">
|
||||
<CardEyebrow color="accent">Communication</CardEyebrow>
|
||||
<CardTitle color="dark" className="mt-2">
|
||||
Distributed message bus
|
||||
</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" />
|
||||
</div>
|
||||
<div className="group 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="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">
|
||||
<CardEyebrow color="accent">Discovery</CardEyebrow>
|
||||
<CardTitle color="dark" className="mt-2">
|
||||
Automatic proxy detection
|
||||
</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" />
|
||||
</div>
|
||||
<div className="group 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="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
<ProxyForwarding className="h-80" />
|
||||
<div className="p-10 pt-4">
|
||||
<CardEyebrow color="accent">Connectivity</CardEyebrow>
|
||||
<CardTitle color="dark" className="mt-2">
|
||||
Seamless proxy forwarding
|
||||
</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" />
|
||||
</div>
|
||||
<div className="group 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="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">
|
||||
<CardEyebrow color="accent">Delivery</CardEyebrow>
|
||||
<CardTitle color="dark" className="mt-2">
|
||||
Decentralized content distribution
|
||||
</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" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user