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

feat: redesign card carousel with modern layout and improved visuals

Browse Source 
- Updated card component design from image background to structured layout with separate content and image sections
- Added dedicated image container with proper scaling and positioning for product images
- Refined typography with new styling for category, title and description text
- Increased gap between carousel cards from 4 to 6 units for better spacing
- Adjusted card dimensions and padding for better responsive behavior
- Update
This commit is contained in:
sasha-astiadi
2025-10-31 14:35:45 +01:00
parent 57fa97cc70
commit 0f93199aa4
3 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,7 +73,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
<div
className={cn(
"flex flex-row justify-start gap-4 pl-4",
"flex flex-row justify-start gap-6 pl-4",
"mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
)}
>
@@ -127,41 +127,41 @@ export const Card = ({
card: Card;
layout?: boolean;
}) => {
return (
<Link to={card.link}>
<motion.div
layoutId={layout ? `card-${card.title}` : undefined}
className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl border border-gray-500/30 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
style={{
backgroundImage: `url(${card.bg})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
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="pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" />
<div className="relative z-40 p-8 w-full">
<div className="flex h-2/5 flex-col justify-center py-6 px-8">
<motion.p
layoutId={layout ? `category-${card.category}` : undefined}
className="text-left font-sans text-sm font-medium text-white md:text-base"
className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs md:text-sm"
>
{card.category}
</motion.p>
<motion.p
layoutId={layout ? `title-${card.title}` : undefined}
className="mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl"
className="mt-1 max-w-xs text-left font-sans text-xl font-semibold text-white [text-wrap:balance] lg:text-2xl"
>
{card.title}
</motion.p>
<div className="flex flex-row justify-between items-center w-full mt-4">
<motion.p className="max-w-xs text-left font-sans lg:text-lg text-base text-neutral-300">
<div className="mt-2 flex w-full flex-row items-center justify-between md:mt-4">
<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="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
<IconChevronRight className="h-6 w-6" />
<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>
</div>
</div>
<div className="relative flex h-3/5 w-full items-end justify-end bg-transparent">
<img
src={card.src}
alt={card.title}
className="h-full w-full origin-bottom-right scale-75 object-contain mb-10"
/>
</div>
</motion.div>
</Link>
);