ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-15 18:01:50 +02:00
parent 6f2f7318bc
commit d8da5325de
8 changed files with 175 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/GridStats.tsx
View File

@@ -6,59 +6,51 @@ import { Button } from "./Button";
export function GridStats() {
return (
<div id="grid-stats" className="py-24 bg-transparent relative">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Column 1: Title & NODES */}
<div
id="grid-stats"
className="py-24 relative -top-20 "
style={{
backgroundImage: "url(/images/benefits.webp)",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-4">
<div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
{/* Column 1: Title & Description */}
<div className="flex flex-col space-y-10">
{/* Title + Description */}
<div>
<h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
Powered by a Global Community
<h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
Robust Infrastructure for your Intellegence Needs
</h2>
<p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
<p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
</p>
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
</div>
</div>
{/* Column 2: CORES (staggered) + SSD */}
{/* Column 2: StatCards */}
<div className="flex flex-col space-y-10">
<StatCard
label="CORES"
description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
value={<CountUp end={54_958} duration={2.5} separator="," />}
note="Total Central Processing Unit Cores available on the grid."
label="Dedicated Hosting"
description="Run LLMs, VLMs, and diffusion models on single-tenant GPUs with private endpoints. Bring your own weights or deploy from a curated library of open models. Enjoy full control with flexible hourly pricing. Perfect for always-on inference or workloads exceeding 100K tokens per minute."
/>
<StatCard
label="SSD CAPACITY"
description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
value={<CountUp end={7_364_506} duration={2.5} separator="," />}
unit="GB"
note="The total amount of storage (SSD, HDD, & RAM) on the grid."
label="Data Sovereignty"
description="Keep your sensitive data fully under your control. Mycelium nodes run on trusted infrastructure you own or choose, ensuring that no third party can access, train on, or monetize your data. This makes Mycelium ideal for enterprises in regulated industries that demand compliance and privacy."
/>
</div>
{/* Column 3: nodes countries */}
{/* Column 3: StatCards */}
<div className="flex flex-col space-y-10 justify-start">
<StatCard
label="NODES"
description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
value={<CountUp end={1778} duration={2.5} separator="," />}
note="The total number of nodes on the grid."
label="Seamless Scalability"
description="Scale from a single agent to hundreds without re-architecting. Mycelium’s decentralized infrastructure dynamically allocates compute, storage, and bandwidth across the network, so your AI workloads remain fast and resilient even under heavy demand."
/>
<StatCard
label="COUNTRIES"
description="The number of countries where at least one node is connected and operational on the grid."
value={<CountUp end={51} duration={2.5} separator="," />}
note="The total number of countries with active nodes."
label="Composable Agent Ecosystem"
description="Mix and match agents for every part of your workflow: data ingestion, cleaning, orchestration, analysis, and reporting. Build an intelligent automation stack that evolves with your business needs, integrating easily with existing tools and APIs."
/>
</div>
</div>
@@ -85,7 +77,7 @@ function StatCard({
}) {
return (
<div
className={`relative flex flex-col overflow-hidden rounded-3xl bg-white shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
className={`relative flex flex-col overflow-hidden rounded-3xl bg-gray-900/75 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
style={{
filter: 'brightness(1)',
}}
@@ -96,22 +88,10 @@ function StatCard({
e.currentTarget.style.filter = 'brightness(1)';
}}
>
<h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
<p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
<h3 className="text-lg font-semibold text-white" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
<p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
{description}
</p>
<div className="mt-8 flex items-center space-x-3">
<span className="text-gradient-neutral-vertical text-3xl">•</span>
<div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
{value}
{unit && (
<span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
)}
</div>
</div>
<p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
{note}
</p>
</div>
);
}