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

feat: add responsive layout for WorldMap component on mobile devices

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-19 00:43:42 +02:00
parent 0479b7330a
commit 3a240177c4
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/WorldMap.tsx
View File

@@ -48,18 +48,18 @@ export function WorldMap() {
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" />
<Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
</div>
</motion.div>
{/* Cards Right Column */}
<div className="relative flex-1">
<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 }}
whileHover={{ scale: 1.05 }}
className="absolute top-12 -left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
className="lg:absolute lg:top-12 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
>
<CT color="light" className="uppercase tracking-wide">CORES</CT>
<CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
@@ -73,7 +73,7 @@ export function WorldMap() {
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.5 }}
whileHover={{ scale: 1.05 }}
className="absolute -top-10 right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
className="lg:absolute lg:-top-10 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
>
<CT color="light" className="uppercase tracking-wide">NODES</CT>
<CountUpNumber end={1493} color="light" className="mt-2 text-3xl font-bold" />
@@ -87,7 +87,7 @@ export function WorldMap() {
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.05 }}
className="absolute bottom-28 -left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
className="lg:absolute lg:bottom-28 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
>
<CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
<CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" />
@@ -101,7 +101,7 @@ export function WorldMap() {
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.7 }}
whileHover={{ scale: 1.05 }}
className="absolute top-44 right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
className="lg:absolute lg:top-44 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
>
<CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
<CountUpNumber end={44} color="light" className="mt-2 text-3xl font-bold" />