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

19
src/components/ui/apple-cards-carousel.tsx
View File

@@ -11,6 +11,7 @@ import {
import { cn } from "@/lib/utils";
import { Link } from "react-router-dom";
import { motion } from "motion/react";
import { DarkCard } from "./cards";
interface CarouselProps {
items: JSX.Element[];
@@ -129,11 +130,12 @@ export const Card = ({
}) => {
return (
<Link to={card.link}>
<motion.div
layoutId={layout ? `card-${card.title}` : undefined}
className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl border border-gray-500/30 bg-[#1C1C1C] transition-transform duration-200 hover:scale-105 md:h-120 md:w-96"
>
<div className="flex h-2/5 flex-col justify-center py-6 px-8">
<DarkCard className="p-0 rounded-3xl">
<motion.div
layoutId={layout ? `card-${card.title}` : undefined}
className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96"
>
<div className="flex h-2/5 flex-col justify-center py-6 px-4">
<motion.p
layoutId={layout ? `category-${card.category}` : undefined}
className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs md:text-sm"
@@ -150,8 +152,8 @@ export const Card = ({
<motion.p className="max-w-xs text-left font-sans lg:text-xl text-lg text-neutral-300 lg:leading-normal leading-tight">
{card.description}
</motion.p>
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
<IconChevronRight className="h-4 w-4 md:h-6 md:w-6" />
<div className="flex h-6 w-6 ml-2 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
<IconChevronRight className="h-4 w-4 md:h-6 md:w-6 " />
</div>
</div>
</div>
@@ -162,7 +164,8 @@ export const Card = ({
className="h-full w-full origin-bottom-right scale-75 object-contain mb-10"
/>
</div>
</motion.div>
</motion.div>
</DarkCard>
</Link>
);
};

19
src/components/ui/cards.tsx Normal file
View File

@@ -0,0 +1,19 @@
import * as React from "react";
import { cn } from "@/lib/utils";
const DarkCard = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
className
)}
{...props}
/>
));
DarkCard.displayName = "DarkCard";
export { DarkCard };

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>