ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

refactor: simplify benefits section layout and styling

Browse Source 
- Replaced complex grid layout with centered 4-column design
- Switched from images to Heroicons for consistent iconography
- Removed unused animation components and dependencies (cobe, motion)
This commit is contained in:
sasha-astiadi
2025-11-07 16:25:43 +01:00
parent a61267944d
commit 4b6c8d8327
4 changed files with 155 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/compute/ComputeDesign.tsx
View File

@@ -1,4 +1,4 @@
import { Eyebrow, H3, P, CP, CT } from '@/components/Texts'
import { CP, CT } from '@/components/Texts'
import {
ArrowPathIcon,
GlobeAltIcon,

146
src/pages/compute/ComputeFeatures.tsx
View File

@@ -1,68 +1,102 @@
import { Container } from '@/components/Container'
import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
const featureGroups = [
{
title: 'Self-Managing Infrastructure',
description:
'Scaling, healing, and failover happen automatically, no manual intervention.',
},
{
title: 'Secure, Stateless Execution',
description:
'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
},
{
title: 'Zero-Image Delivery',
description:
'Deploy workloads using metadata instead of large container images for instant launches.',
},
{
title: 'Global Placement Control',
description:
'Choose where workloads run, on your hardware or across the decentralized grid.',
},
]
import { Container } from '@/components/Container'
import { Eyebrow, SectionHeader, H3, P, Small, CT, CP } from '@/components/Texts'
import {
ArrowTrendingUpIcon,
ChatBubbleLeftRightIcon,
MagnifyingGlassIcon,
ServerStackIcon,
} from '@heroicons/react/24/solid'
export function ComputeFeatures() {
return (
<section className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
Core Features
<section className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
<div className="w-full border-t border-l border-r border-gray-200" />
<div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-200">
{/* ✅ LEFT SIDE — Title + Intro */}
<div className="max-w-xl">
<Eyebrow className="">
Core Components
</Eyebrow>
<SectionHeader as="h2" className="mt-6 text-gray-900">
Precision infrastructure that verifies itself.
</SectionHeader>
<P className="mt-6 text-gray-600">
Every layer is designed for determinism, from how workloads are
declared to the way they scale, protect, and govern themselves on
the grid.
<H3 className="mt-6 ">
Network Capabilities
</H3>
<P className="mt-6 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-3 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>
<div className="mt-16 grid gap-8 md:grid-cols-2">
{featureGroups.map((feature) => (
<div
key={feature.title}
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
>
<div>
<Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
Feature
</Small>
<h3 className="mt-4 text-2xl font-semibold text-gray-900">
{feature.title}
</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-600">
{feature.description}
</p>
</div>
</div>
))}
{/* ✅ RIGHT SIDE — 4 items stacked with dividers */}
<div className="space-y-8">
{/* 1 — Routing */}
<div>
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
<ArrowTrendingUpIcon className="h-6 w-6 text-cyan-500 mr-3" />
Automatic routing & pathfinding
</h3>
<p className="mt-2 text-gray-600 max-w-2xl">
The Mycelium Network automatically discovers the shortest and fastest
routes between nodes, ensuring optimal data flow and network efficiency.
</p>
<div className="mt-8 h-px w-full bg-cyan-500/50" />
</div>
{/* 2 — Distributed bus */}
<div>
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
<ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-500 mr-3" />
Distributed message bus
</h3>
<p className="mt-2 text-gray-600 max-w-2xl">
Nodes exchange information seamlessly through a resilient global
message layer, enabling asynchronous decentralized communication.
</p>
<div className="mt-8 h-px w-full bg-cyan-500/50" />
</div>
{/* 3 — Proxy detection */}
<div>
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
<MagnifyingGlassIcon className="h-6 w-6 text-cyan-500 mr-3" />
Automatic proxy discovery
</h3>
<p className="mt-2 text-gray-600 max-w-2xl">
The network scans for open SOCKS5 proxies so devices can join and
connect without manual setup or configuration.
</p>
<div className="mt-8 h-px w-full bg-cyan-500/50" />
</div>
{/* 4 — Delivery / CDN */}
<div>
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
<ServerStackIcon className="h-6 w-6 text-cyan-500 mr-3" />
Decentralized content distribution
</h3>
<p className="mt-2 text-gray-600 max-w-2xl">
Data can be served from distributed 0-DBs, forming a CDN-like delivery
layer that is faster and more resilient than centralized servers.
</p>
</div>
</div>
</Container>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-200" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
</section>
)
}