Files
www_mycelium_cloud2/src/components/GridStats.tsx
2025-09-15 18:14:25 +02:00

92 lines
3.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"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. Myceliums 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>
);
}