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

refactor: replace MagicCard with DarkCard component

Browse Source 
- Replaced MagicCard with new DarkCard component across apple-cards-carousel and HomeGlobe
- Updated card styling and layout in apple-cards-carousel to work with DarkCard
- Removed gradient and border styling from globe stats cards
- Adjusted padding and margin values to maintain consistent appearance
- Fixed spacing and alignment of chevron icon in cards
This commit is contained in:
sasha-astiadi
2025-10-31 15:35:45 +01:00
parent 0f93199aa4
commit 9d8f1a6919
3 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { Globe } from "@/components/ui/Globe"
import { motion } from "framer-motion"
import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
import { CountUpNumber } from '@/components/CountUpNumber'
import { MagicCard } from '@/components/magicui/magic-card'
import { DarkCard } from "@/components/ui/cards";
export function WorldMap() {
return (
@@ -65,16 +65,13 @@ export function WorldMap() {
transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
className="lg:absolute lg:top-12 lg:-left-12 w-80"
>
<MagicCard
gradientColor="#334155"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<DarkCard>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
<div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
<CP color="light" className="mt-2 text-sm">
Total Central Processing Unit Cores available on the grid.
</CP>
</MagicCard>
</DarkCard>
</motion.div>
<motion.div
@@ -84,16 +81,13 @@ export function WorldMap() {
transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
className="lg:absolute lg:-top-10 lg:right-0 w-80"
>
<MagicCard
gradientColor="#334155"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<DarkCard>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
<div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
<CP color="light" className="mt-2 text-sm">
Total number of nodes on the grid.
</CP>
</MagicCard>
</DarkCard>
</motion.div>
<motion.div
@@ -103,16 +97,13 @@ export function WorldMap() {
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
>
<MagicCard
gradientColor="#334155"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<DarkCard>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
<div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
<CP color="light" className="mt-2 text-sm">
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
</CP>
</MagicCard>
</DarkCard>
</motion.div>
<motion.div
@@ -122,16 +113,13 @@ export function WorldMap() {
transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
className="lg:absolute lg:top-47 lg:right-0 w-80"
>
<MagicCard
gradientColor="#334155"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<DarkCard>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
<div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
<CP color="light" className="mt-2 text-sm">
Total number of countries with active nodes.
</CP>
</MagicCard>
</DarkCard>
</motion.div>
</div>
</div>