ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Pull Requests 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>
);
};