ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 11 Pull Requests Projects Releases Activity

feat: redesign network page with improved layout and typography

Browse Source 
- Replaced hardcoded text elements with reusable typography components (H2, H3, P, Eyebrow, CT, CP)
- Updated NetworkCapabilities section with dark theme, two-column layout, and visual separators
- Added consistent border styling and spacing across Features and Hero sections
This commit is contained in:
sasha-astiadi
2025-11-07 23:13:40 +01:00
parent de89539de1
commit f04a7eb3cf
3 changed files with 110 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/network/Features.tsx
View File

@@ -3,27 +3,31 @@ import MessageBus from './animations/MessageBus'
import ProxyDetection from './animations/ProxyDetection'
import ProxyForwarding from './animations/ProxyForwarding'
import ContentDistribution from './animations/ContentDistribution'
import { H2, P, H3, CT, CP, Eyebrow } from '@/components/Texts'
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">
Network Capabilities
</p>
<p className="mt-4 max-w-4xl text-lg text-gray-600">
<section className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ Top spacer + full-width line */}
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
<div className="w-full border-t border-l border-r border-gray-100" />
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl bg-white py-12 lg:px-10 border border-t-0 border-b-0 border-gray-100">
<Eyebrow>Core Components</Eyebrow>
<H3>Network Capabilities</H3>
<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">
</P>
<P className="mt-4 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>
<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">
</P>
<div className="mt-8 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">
<div className="p-6 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
@@ -40,7 +44,7 @@ export function Features() {
<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">
<div className="p-6 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
@@ -57,7 +61,7 @@ export function Features() {
<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">
<div className="p-6 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
@@ -74,7 +78,7 @@ export function Features() {
<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">
<div className="p-6 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
@@ -91,7 +95,7 @@ export function Features() {
<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">
<div className="p-6 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
@@ -106,6 +110,9 @@ export function Features() {
</div>
</div>
</div>
{/* ✅ Bottom full-width line + spacer */}
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
</section>
)
}