93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import CountUp from "react-countup";
|
||
import React from "react";
|
||
import { Button } from "@/components/Button";
|
||
import { SectionHeader, P } from "@/components/Texts";
|
||
|
||
export function GridStats() {
|
||
return (
|
||
<div
|
||
id="grid-stats"
|
||
className="py-24 relative -top-20 "
|
||
style={{
|
||
backgroundImage: "url(/images/benefits.webp)",
|
||
backgroundSize: "cover",
|
||
backgroundPosition: "center",
|
||
}}
|
||
>
|
||
<div className="max-w-2xl px-6 lg:max-w-7xl lg:px-6">
|
||
<div className="grid grid-cols-1 gap-16 lg:grid-cols-3">
|
||
{/* Column 1: Title & Description */}
|
||
<div className="flex flex-col space-y-10">
|
||
<div>
|
||
<SectionHeader color="light">
|
||
Robust Infrastructure for your Intellegence Needs
|
||
</SectionHeader>
|
||
<P color="light" className="mt-6">
|
||
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" color="white">Explore TFGrid →</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Column 2: StatCards */}
|
||
<div className="flex flex-col space-y-10">
|
||
<StatCard
|
||
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."
|
||
/>
|
||
<StatCard
|
||
label="Data Sovereignty"
|
||
description="Mycelium nodes run on trusted infrastructure you own or choose, ensuring that no third party can access, train on, or monetize your data."
|
||
/>
|
||
</div>
|
||
|
||
{/* Column 3: StatCards */}
|
||
<div className="flex flex-col space-y-10 justify-start mt-20">
|
||
<StatCard
|
||
label="Seamless Scalability"
|
||
description="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="Composable Agent Ecosystem"
|
||
description="Mix and match agents for every part of your workflow: data ingestion, cleaning, orchestration, analysis, and reporting."
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 🧱 Stat Card Component
|
||
function StatCard({
|
||
label,
|
||
description,
|
||
className = "border border-white/10 hover:border-white/40 hover:bg-black/40",
|
||
}: {
|
||
label: string;
|
||
description: string;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<div
|
||
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)',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.filter = 'brightness(0.8)';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.filter = 'brightness(1)';
|
||
}}
|
||
>
|
||
<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>
|
||
);
|
||
}
|