ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

improvements

Browse Source
This commit is contained in:
Emre
2025-10-24 02:17:33 +03:00
parent 644bb34419
commit 3a7aa82ff7
34 changed files with 740 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/home/HomeGlobe.tsx
View File

@@ -27,14 +27,15 @@ export function WorldMap() {
{/* Title + Subtitle */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, ease: "easeOut" }}
className="max-w-xl"
>
<Eyebrow color="accent">Network</Eyebrow>
<SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
<Eyebrow color="accent">Decentralized Network</Eyebrow>
<SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
<P className=" mt-4 text-base leading-relaxed" color="light">
Mycelium Cloud's advancement technology enables anyone to deploy
Project Mycelium's technology enables anyone to deploy
their own Internet infrastructure, anywhere.
</P>
</motion.div>
@@ -44,8 +45,9 @@ export function WorldMap() {
{/* Globe Left Column */}
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
className="flex-1 flex items-center justify-center"
>
<div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
@@ -57,8 +59,9 @@ export function WorldMap() {
<div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
>
<div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
@@ -70,8 +73,9 @@ export function WorldMap() {
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.5 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
>
<div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
@@ -83,8 +87,9 @@ export function WorldMap() {
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
>
<div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
@@ -96,8 +101,9 @@ export function WorldMap() {
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.7 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
>
<div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>