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 15:14:51 +02:00
parent 9faaf7dee9
commit 8d83f44a07
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/StackSection.tsx
View File

@@ -11,7 +11,7 @@ export function StackSectionPreview() {
const isInView = useInView(ref);
return (
<section ref={ref} className="w-full h-screen bg-transparent lg:px-0 pt-12 px-6 relative">
<section ref={ref} className="w-full bg-transparent lg:px-0 py-24 px-6 relative">
{/* Gradient Blob Component */}
<motion.div
initial={{ opacity: 0 }}

36
src/components/WorldMap.tsx
View File

@@ -20,33 +20,45 @@ export function WorldMap() {
</video>
{/* Dark overlay */}
<div className="absolute inset-0 bg-black/20" />
<div className="absolute inset-0 bg-black/10" />
{/* 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">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
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>
</motion.div>
{/* Bottom Layout: Globe + Cards */}
<div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
{/* Globe Left Column */}
<div className="flex-1 flex items-center justify-center">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
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>
</motion.div>
{/* Cards Right Column */}
<div className="relative flex-1">
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
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>
@@ -57,8 +69,10 @@ export function WorldMap() {
</motion.div>
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.5 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
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>
@@ -69,8 +83,10 @@ export function WorldMap() {
</motion.div>
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
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>
@@ -81,8 +97,10 @@ export function WorldMap() {
</motion.div>
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.7 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
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>