forked from emre/www_projectmycelium_com
improvements
This commit is contained in:
Emre
@@ -14,14 +14,17 @@ export function CallToAction() {
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Build the Future, Today
|
||||
Activate Your Sovereign <br />Mycelium Stack
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Ready to reclaim your digital freedom? Start building on a cloud that’s autonomous, efficient, and truly yours. Explore the documentation or join our community to get started.
|
||||
Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
|
||||
<Button to="/cloud" variant="solid" color="white">
|
||||
Start Building
|
||||
<Button to="/cloud" variant="solid" color="white">
|
||||
Start Deployment
|
||||
</Button>
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
<Button
|
||||
to="https://threefold.info/mycelium_network/docs/"
|
||||
|
||||
@@ -26,7 +26,7 @@ export function HomeAgent() {
|
||||
</H2>
|
||||
|
||||
<P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
|
||||
Mycelium delivers enterprise-grade AI agents with unmatched customizability and the fastest time to production — all in the agent platform designed for real business use cases.
|
||||
Mycelium delivers enterprise-grade AI experiences that run on sovereign compute and the Mycelium Network, so production agents can reason over private data, collaborate across sites, and stay fully under your governance.
|
||||
</P>
|
||||
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
|
||||
@@ -1,35 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { H1, H2, H3, H4, H5 } from "@/components/Texts";
|
||||
import { H1, H5 } from "@/components/Texts";
|
||||
import { ScrollDownArrow } from '@/components/ScrollDownArrow';
|
||||
|
||||
export function HomeAurora() {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0.0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.5,
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: "url(/images/mchip2.webp)",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
|
||||
>
|
||||
<div className="text-center text-gray-800">
|
||||
<H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
|
||||
</div>
|
||||
<div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
|
||||
<H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
|
||||
</div>
|
||||
<div className="pt-8">
|
||||
<ScrollDownArrow />
|
||||
</div>
|
||||
</motion.div>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "url(/images/mchip2.webp)",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
className="relative mx-auto flex min-h-screen flex-col items-center justify-center gap-6 px-4 pb-24 pt-24 text-gray-800 lg:pb-0"
|
||||
>
|
||||
<div className="text-center">
|
||||
<H1>
|
||||
<span className="text-bold lg:text-8xl">
|
||||
Project Mycelium.
|
||||
<br className="hidden lg:block" />
|
||||
Full Sovereignty for Cloud, Network & AI.
|
||||
</span>
|
||||
</H1>
|
||||
</div>
|
||||
<div className="max-w-4xl text-center font-light text-gray-500">
|
||||
<H5>
|
||||
Build and run mission-critical workloads on distributed compute,
|
||||
encrypted networking, and sovereign AI orchestration — all under your
|
||||
control, without centralized gatekeepers.
|
||||
</H5>
|
||||
</div>
|
||||
<div className="pt-6">
|
||||
<ScrollDownArrow />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,36 +9,30 @@ import { H2, P } from '@/components/Texts'
|
||||
|
||||
|
||||
export function HomeBenefits() {
|
||||
const features = [
|
||||
const features = [
|
||||
{
|
||||
title: "Sovereign",
|
||||
description:
|
||||
"Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
|
||||
icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className:
|
||||
"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
|
||||
icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
{
|
||||
title: "Autonomous",
|
||||
description:
|
||||
"The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
|
||||
icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
||||
icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
{
|
||||
title: "Energy Efficient",
|
||||
description:
|
||||
"Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
|
||||
icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className:
|
||||
"col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
|
||||
icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
{
|
||||
title: "Cost Efficient",
|
||||
description:
|
||||
"No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
|
||||
icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className: "col-span-1 lg:col-span-3 border-b lg:border-none",
|
||||
icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
@@ -49,18 +43,20 @@ export function HomeBenefits() {
|
||||
</H2>
|
||||
|
||||
<P className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
|
||||
Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
|
||||
Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<div className="relative ">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard key={feature.title} className={feature.className}>
|
||||
<FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
|
||||
<FeatureDescription>{feature.description}</FeatureDescription>
|
||||
</FeatureCard>
|
||||
))}
|
||||
<div className="mt-12 rounded-2xl border border-neutral-200/70 bg-white/40 dark:bg-black/40 dark:border-neutral-800/60 backdrop-blur">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-neutral-200/70 dark:divide-neutral-800/60">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard key={feature.title}>
|
||||
<FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
|
||||
<FeatureDescription>{feature.description}</FeatureDescription>
|
||||
</FeatureCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,7 +71,7 @@ const FeatureCard = ({
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
|
||||
<div className={cn(`p-6 lg:p-8 relative overflow-hidden`, className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@@ -85,7 +81,7 @@ const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: R
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
|
||||
<p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
@@ -96,8 +92,8 @@ const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
|
||||
return (
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm md:text-base max-w-4xl text-left mx-auto",
|
||||
"text-neutral-500 text-center font-normal dark:text-neutral-300",
|
||||
"text-sm md:text-base max-w-4xl",
|
||||
"text-neutral-500 font-normal dark:text-neutral-300",
|
||||
"text-left max-w-sm mx-0 md:text-sm my-2"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -27,14 +27,15 @@ export function WorldMap() {
|
||||
{/* Title + Subtitle */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className="max-w-xl"
|
||||
>
|
||||
<Eyebrow color="accent">Network</Eyebrow>
|
||||
<SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
|
||||
<Eyebrow color="accent">Decentralized Network</Eyebrow>
|
||||
<SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
|
||||
<P className=" mt-4 text-base leading-relaxed" color="light">
|
||||
Mycelium Cloud's advancement technology enables anyone to deploy
|
||||
Project Mycelium's technology enables anyone to deploy
|
||||
their own Internet infrastructure, anywhere.
|
||||
</P>
|
||||
</motion.div>
|
||||
@@ -44,8 +45,9 @@ export function WorldMap() {
|
||||
{/* Globe Left Column */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
|
||||
className="flex-1 flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
|
||||
@@ -57,8 +59,9 @@ export function WorldMap() {
|
||||
<div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
|
||||
className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
|
||||
@@ -70,8 +73,9 @@ export function WorldMap() {
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
|
||||
className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
|
||||
@@ -83,8 +87,9 @@ export function WorldMap() {
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
|
||||
className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
|
||||
@@ -96,8 +101,9 @@ export function WorldMap() {
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.7 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
|
||||
className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { H1, P } from '@/components/Texts'
|
||||
import { Button } from '@/components/Button'
|
||||
|
||||
export function HomeHero() {
|
||||
return (
|
||||
<div
|
||||
className="relative isolate overflow-hidden bg-white h-screen -z-10 flex items-center justify-center"
|
||||
style={{
|
||||
backgroundImage: 'url(/images/cloud.png)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="-mt-32 mx-auto max-w-2xl text-center">
|
||||
<H1 color="primary" className="text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
|
||||
Decentralized Autonomous Agentic Cloud.
|
||||
</H1>
|
||||
<P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
|
||||
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
|
||||
</P>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<Button variant="solid" color="cyan" href="#">
|
||||
Get started
|
||||
</Button>
|
||||
<a href="#" className="text-sm/6 font-semibold text-gray-50">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { LampContainer } from "@/components/ui/lamp";
|
||||
|
||||
export function HomeHeroDark() {
|
||||
return (
|
||||
<LampContainer>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0.5, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl max-w-4xl"
|
||||
>
|
||||
Decentralized Autonomous Agentic Cloud.
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0.5, y: 60 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.5,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-lg font-medium tracking-tight text-transparent md:text-xl max-w-3xl"
|
||||
>
|
||||
Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
|
||||
</motion.p>
|
||||
</LampContainer>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useRef, useEffect } from 'react'
|
||||
import { H1, H5 } from '@/components/Texts'
|
||||
|
||||
export function HomeHeroLight2() {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
video.playbackRate = 0.4;
|
||||
const playPromise = video.play();
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(error => {
|
||||
console.error("Video autoplay was prevented:", error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative h-screen overflow-hidden">
|
||||
{/* Background video */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
src="/videos/cloud.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute inset-0 h-full w-full object-cover z-[-10]"
|
||||
/>
|
||||
|
||||
{/* Global soft wash + blur (Temporarily commented out for debugging) */}
|
||||
{/* <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" /> */}
|
||||
|
||||
{/* Center “halo” for text legibility (Temporarily commented out for debugging) */}
|
||||
{/* <div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
|
||||
}}
|
||||
/> */}
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 h-full flex items-center justify-center">
|
||||
<div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
|
||||
|
||||
<H1
|
||||
className="pt-6"
|
||||
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
|
||||
>
|
||||
Decentralized Autonomous Agentic Cloud.
|
||||
</H1>
|
||||
|
||||
<H5
|
||||
className="mt-8"
|
||||
style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
|
||||
>
|
||||
Mycelium's advancements in Agentic infrastructure support private, secure, and
|
||||
autonomous Agents that connect, learn, and grow with you.
|
||||
</H5>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -38,9 +38,9 @@ export function StackSectionLight() {
|
||||
|
||||
<FadeIn>
|
||||
<P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
|
||||
Built with Mycelium technology, our AI infrastructure ensures
|
||||
unbreakable networks, complete data sovereignty, ultra-secure
|
||||
agent-human communication, and unhackable data storage systems.
|
||||
Project Mycelium unifies compute, storage, networking, and AI into a resilient
|
||||
ecosystem that preserves data sovereignty, powers seamless collaboration,
|
||||
and keeps every layer of your infrastructure secure end to end.
|
||||
</P>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Globe } from '../../components/ui/Globe2'
|
||||
import { CountUpNumber } from '../../components/CountUpNumber'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function WorldMapSection() {
|
||||
return (
|
||||
<section className="relative bg-gray-50 py-20 lg:py-32">
|
||||
<Container>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-12"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Mycelium Network is Live.
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Globe */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-full max-w-[500px] aspect-square">
|
||||
<Globe className="w-full h-full" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">CORES</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={54958} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total Central Processing Unit Cores available on the grid.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">NODES</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={1493} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total number of nodes on the grid.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">SSD CAPACITY</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={5388956} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">COUNTRIES</p>
|
||||
<div className="mt-2 text-3xl font-bold text-gray-900">
|
||||
<CountUpNumber end={44} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Total number of countries with active nodes.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user