112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
import { Globe } from "@/components/ui/globe"
|
|
import { motion } from "framer-motion"
|
|
import { H2, H4, CP, CT } from "@/components/Texts"
|
|
|
|
export function WorldMap() {
|
|
return (
|
|
<div className="relative h-screen max-w-full overflow-hidden -top-20">
|
|
{/* Background video */}
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
>
|
|
<source src="/videos/benefits.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
{/* Dark overlay */}
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
|
|
{/* Top Left Intro Text */}
|
|
<div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
|
|
<H4 color="light">Mycelium Network is Live.</H4>
|
|
<CP className="hidden mt-6 text-base leading-relaxed font-light" color="light">
|
|
Mycelium Cloud's advancement technology enables anyone to deploy
|
|
their own Internet infrastructure, anywhere.
|
|
</CP>
|
|
</div>
|
|
|
|
{/* Globe Centered */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Globe className="top-28" />
|
|
</div>
|
|
|
|
{/* Right Side Stats Column */}
|
|
<div className="absolute right-0 top-0 bottom-0 flex flex-col justify-center gap-6 px-6 py-12 max-w-xs z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
|
|
>
|
|
<CT color="light" className="uppercase tracking-wide">
|
|
CORES
|
|
</CT>
|
|
<H2 color="light" className="mt-2 text-3xl font-bold">
|
|
54,958
|
|
</H2>
|
|
<CP color="light" className="mt-2 text-sm">
|
|
Total Central Processing Unit Cores available on the grid.
|
|
</CP>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
|
|
>
|
|
<CT color="light" className="uppercase tracking-wide">
|
|
NODES
|
|
</CT>
|
|
<H2 color="light" className="mt-2 text-3xl font-bold">
|
|
54,958
|
|
</H2>
|
|
<CP color="light" className="mt-2 text-sm">
|
|
Total number of nodes on the grid.
|
|
</CP>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
|
|
>
|
|
<CT color="light" className="uppercase tracking-wide">
|
|
SSD CAPACITY
|
|
</CT>
|
|
<H2 color="light" className="mt-2 text-3xl font-bold">
|
|
54,958
|
|
</H2>
|
|
<CP color="light" className="mt-2 text-sm">
|
|
Total amount of storage (SSD, HDD, & RAM) on the grid.
|
|
</CP>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
|
|
>
|
|
<CT color="light" className="uppercase tracking-wide">
|
|
COUNTRIES
|
|
</CT>
|
|
<H2 color="light" className="mt-2 text-3xl font-bold">
|
|
51
|
|
</H2>
|
|
<CP color="light" className="mt-2 text-sm">
|
|
Total number of countries with active nodes.
|
|
</CP>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Radial fade overlay */}
|
|
<div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
|
|
</div>
|
|
)
|
|
}
|