ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-17 14:21:34 +02:00
parent 34bd6522e3
commit eb2ad2be3f
6 changed files with 531 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/WorldMap.tsx
View File

@@ -1,11 +1,13 @@
'use client'
import { Globe } from "@/components/ui/globe"
import { motion } from "framer-motion"
import { H2, H3, H4, P } from "./Texts"
import { H2, P, CT } from "./Texts"
export function WorldMap() {
return (
<div className="relative h-screen max-w-full overflow-hidden -top-20">
<div className="relative h-screen w-full overflow-hidden -top-20 flex flex-col">
{/* Background video */}
<video
autoPlay
loop
@@ -15,19 +17,69 @@ export function WorldMap() {
>
<source src="/videos/benefits.mp4" type="video/mp4" />
</video>
{/* Dark overlay */}
<div className="absolute inset-0 bg-black/60" />
<div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
<H4 className="" color="light">
Mycelium Network is Live.
</H4>
<P className="mt-6 text-base text-pretty leading-relaxed font-light" color="light">
Mycelium Cloud's advancement technology enables anyone to deploy their own Internet infrastructure, anywhere.
</P>
</div>
<div className="absolute inset-0 flex items-center justify-center">
<Globe className="top-28" />
{/* Content */}
<div className="relative z-10 flex flex-col h-full px-6 md:px-16 py-12">
{/* Title + Subtitle */}
<div className="max-w-2xl">
<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-12">
{/* Globe Left Column */}
<div className="flex-1 flex items-center justify-center top-32 -left-24">
<div className="relative w-[450px] h-[450px] md:w-[550px] md:h-[550px]">
<Globe className="absolute inset-0 w-full h-full" />
</div>
</div>
{/* Cards Right Column */}
<div className="flex flex-col justify-center gap-6 max-w-xs w-full">
<motion.div 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>
<P color="light" className="mt-2 text-sm">
Total Central Processing Unit Cores available on the grid.
</P>
</motion.div>
<motion.div 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>
<P color="light" className="mt-2 text-sm">
Total number of nodes on the grid.
</P>
</motion.div>
<motion.div 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>
<P color="light" className="mt-2 text-sm">
Total amount of storage (SSD, HDD, & RAM) on the grid.
</P>
</motion.div>
<motion.div 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>
<P color="light" className="mt-2 text-sm">
Total number of countries with active nodes.
</P>
</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>
);
}
)
}