Files
www_mycelium_cloud2/src/components/WorldMap.tsx
2025-09-17 14:55:37 +02:00

86 lines
3.7 KiB
TypeScript

'use client'
import { Globe } from "@/components/ui/globe"
import { motion } from "framer-motion"
import { H2, P, CT, CP } from "./Texts"
export function WorldMap() {
return (
<div className="relative min-h-screen w-full overflow-hidden -top-20 flex flex-col">
{/* 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/20" />
{/* Content */}
<div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
{/* Title + Subtitle */}
<div className="max-w-xl">
<H2 color="light">Mycelium Network is Live.</H2>
<P className="mt-4 text-base leading-relaxed font-light" color="light">
Mycelium Cloud's advancement technology enables anyone to deploy
their own Internet infrastructure, anywhere.
</P>
</div>
{/* Bottom Layout: Globe + Cards */}
<div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-8">
{/* Globe Left Column */}
<div className="flex-1 flex items-center justify-center">
<div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
<Globe className="absolute inset-0 w-full h-full -left-24" />
</div>
</div>
{/* Cards Right Column */}
<div className="relative flex-1">
<motion.div className="absolute top-12 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<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 className="absolute -top-10 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<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 className="absolute bottom-28 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<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 className="absolute top-44 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<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>
</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>
)
}