From b987f1a07220761ee6bc90b32ab498801e585cfd Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 31 Oct 2025 03:09:07 +0100
Subject: [PATCH] feat: enhance card component styling and responsiveness

- Added subtle border to cards with 30% opacity gray color for improved visual definition
- Increased description text size from sm to base on mobile and lg on desktop for better readability
- Maintained hover and transition effects while improving visual hierarchy
- Ensured consistent spacing and alignment across card elements
---
 src/components/ui/apple-cards-carousel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/apple-cards-carousel.tsx b/src/components/ui/apple-cards-carousel.tsx
index bebfbb7..57f8bf6 100644
--- a/src/components/ui/apple-cards-carousel.tsx
+++ b/src/components/ui/apple-cards-carousel.tsx
@@ -132,7 +132,7 @@ export const Card = ({
     <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 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
+        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',
@@ -154,7 +154,7 @@ export const Card = ({
             {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 text-sm text-neutral-300">
+            <motion.p className="max-w-xs text-left font-sans lg:text-lg text-base  text-neutral-300">
               {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">