92 lines
3.8 KiB
TypeScript
92 lines
3.8 KiB
TypeScript
"use client";
|
||
|
||
import CountUp from "react-countup";
|
||
import React from "react";
|
||
import { Button } from "@/components/Button";
|
||
|
||
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="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">
|
||
<div>
|
||
<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-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: 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. Enjoy full control with flexible hourly pricing. Perfect for always-on inference or workloads exceeding 100K tokens per minute."
|
||
/>
|
||
<StatCard
|
||
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: StatCards */}
|
||
<div className="flex flex-col space-y-10 justify-start">
|
||
<StatCard
|
||
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="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>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 🧱 Stat Card Component
|
||
function StatCard({
|
||
label,
|
||
description,
|
||
className = "",
|
||
}: {
|
||
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>
|
||
);
|
||
}
|