107 lines
4.4 KiB
TypeScript
107 lines
4.4 KiB
TypeScript
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>
|
|
)
|
|
}
|