Fix card responsiveness

Author: sa-fw-an

src/components/Try.tsx

@@ -19,6 +19,7 @@ const Try: React.FC = () => {
   const [isDragging, setIsDragging] = useState(false);
   const [currentActivity, setCurrentActivity] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
+  const activityCarouselRef = useRef<HTMLDivElement>(null);
 
   const handleSwipe = (
     direction: 'next' | 'prev',
@@ -65,11 +66,14 @@ const Try: React.FC = () => {
       animate="visible"
       variants={fadeIn}
     >
-      <motion.main className="flex-grow bg-[#F6DEC9] p-4 md:p-16">
-        <div className="max-w-6xl mx-auto space-y-8">
-          <motion.header className="space-y-6" variants={staggerContainer}>
+      <motion.main className="flex-grow bg-[#F6DEC9] px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
+        <div className="max-w-6xl mx-auto space-y-6 sm:space-y-8">
+          <motion.header
+            className="space-y-3 sm:space-y-4 md:space-y-6"
+            variants={staggerContainer}
+          >
             <motion.h1
-              className="text-5xl md:text-7xl font-bold flex flex-col sm:flex-row items-start sm:items-center"
+              className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold flex flex-col sm:flex-row items-start sm:items-center"
               variants={headerReveal}
             >
               <motion.span
@@ -79,21 +83,27 @@ const Try: React.FC = () => {
                 EXPERIENCE
               </motion.span>
               <motion.span
-                className="text-black sm:ml-2 mt-2 sm:mt-0"
+                className="text-black sm:ml-2 mt-1 sm:mt-0"
                 variants={slideInRight}
               >
                 SUGAR
               </motion.span>
             </motion.h1>
-            <motion.div className="space-y-4" variants={subtleRise}>
+            <motion.div
+              className="space-y-2 sm:space-y-3 md:space-y-4"
+              variants={subtleRise}
+            >
               <motion.p
-                className="text-[#975555] text-2xl md:text-4xl font-bold leading-tight"
+                className="text-[#975555] text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
                 variants={fadeIn}
               >
                 "Our educational tools can be experienced in a number of ways.
                 Try the ones that are best for you!"
               </motion.p>
-              <motion.i className="text-xs text-gray-700" variants={fadeIn}>
+              <motion.i
+                className="text-xs md:text-sm text-gray-700 block"
+                variants={fadeIn}
+              >
                 Whether you enjoy hands-on activities, visual learning, or
                 interactive coding, there's something for everyone. Explore
                 creative tools, enhance your problem-solving skills, and make
@@ -103,15 +113,15 @@ const Try: React.FC = () => {
           </motion.header>
 
           {/* Desktop Grid */}
-          <div className="hidden md:grid md:grid-cols-3 gap-8">
+          <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
             {TryCardData.map((card, index) => (
               <TryCard key={index} {...card} />
             ))}
           </div>
 
           {/* Mobile Carousel */}
-          <div className="md:hidden ml-[-1rem] mr-[-1rem]">
-            <div className="relative px-4">
+          <div className="md:hidden -mx-3 sm:-mx-2">
+            <div className="relative px-3 sm:px-4">
               <div
                 ref={carouselRef}
                 className="overflow-hidden touch-pan-x"
@@ -147,17 +157,17 @@ const Try: React.FC = () => {
                 </div>
               </div>
 
-              {/* Navigation Buttons */}
-              <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex justify-between pointer-events-none">
+              {/* Navigation Buttons - Positioned to avoid overlap with content */}
+              <div className="absolute top-1/2 -translate-y-1/2 left-1 right-1 flex justify-between pointer-events-none">
                 <button
                   onClick={() =>
                     handleSwipe('prev', setCurrentCard, TryCardData.length)
                   }
-                  className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
                   aria-label="Previous"
                 >
                   <svg
-                    className="w-6 h-6"
+                    className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -174,11 +184,11 @@ const Try: React.FC = () => {
                   onClick={() =>
                     handleSwipe('next', setCurrentCard, TryCardData.length)
                   }
-                  className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
                   aria-label="Next"
                 >
                   <svg
-                    className="w-6 h-6"
+                    className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -195,14 +205,14 @@ const Try: React.FC = () => {
             </div>
 
             {/* Dots Indicator */}
-            <div className="flex justify-center space-x-2 mt-6">
+            <div className="flex justify-center space-x-1 sm:space-x-2 mt-4 sm:mt-6">
               {TryCardData.map((_, index) => (
                 <button
                   key={index}
                   onClick={() => setCurrentCard(index)}
-                  className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
+                  className={`w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full transition-all duration-300 ${
                     currentCard === index
-                      ? 'bg-[#975555] w-6'
+                      ? 'bg-[#975555] w-4 sm:w-6'
                       : 'bg-[#975555]/30'
                   }`}
                   aria-label={`Go to slide ${index + 1}`}
@@ -213,15 +223,18 @@ const Try: React.FC = () => {
         </div>
 
         <motion.div
-          className="max-w-6xl mx-auto space-y-8 mt-16"
+          className="max-w-6xl mx-auto space-y-6 sm:space-y-8 mt-12 sm:mt-14 md:mt-16"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, amount: 0.1 }}
           variants={slideInBottom}
         >
-          <motion.header className="space-y-6" variants={staggerContainer}>
+          <motion.header
+            className="space-y-3 sm:space-y-4 md:space-y-6"
+            variants={staggerContainer}
+          >
             <motion.h1
-              className="text-5xl md:text-7xl font-bold flex flex-col sm:flex-row items-start sm:items-center"
+              className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold flex flex-col sm:flex-row items-start sm:items-center"
               variants={headerReveal}
             >
               <motion.span
@@ -231,20 +244,26 @@ const Try: React.FC = () => {
                 ALREADY USING
               </motion.span>
               <motion.span
-                className="text-black sm:ml-2 mt-2 sm:mt-0"
+                className="text-black sm:ml-2 mt-1 sm:mt-0"
                 variants={slideInRight}
               >
                 SUGAR?
               </motion.span>
             </motion.h1>
-            <motion.div className="space-y-4" variants={subtleRise}>
+            <motion.div
+              className="space-y-2 sm:space-y-3 md:space-y-4"
+              variants={subtleRise}
+            >
               <motion.p
-                className="text-[#975555] text-2xl md:text-4xl font-bold leading-tight"
+                className="text-[#975555] text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
                 variants={fadeIn}
               >
                 "We have many activities for you!"
               </motion.p>
-              <motion.i className="text-xs text-gray-700" variants={fadeIn}>
+              <motion.i
+                className="text-xs md:text-sm text-gray-700 block"
+                variants={fadeIn}
+              >
                 The Sugar Learning platform is a complete environment for
                 teaching and learning, which includes individual activities. If
                 you're already using the Sugar Desktop Environment, then you can
@@ -255,17 +274,17 @@ const Try: React.FC = () => {
           </motion.header>
 
           {/* Desktop Grid */}
-          <div className="hidden md:grid md:grid-cols-3 gap-8">
+          <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
             {Activities.map((activity, index) => (
               <ActivityCard key={index} {...activity} />
             ))}
           </div>
 
           {/* Mobile Carousel */}
-          <div className="md:hidden ml-[-1rem] mr-[-1rem]">
-            <div className="relative px-4">
+          <div className="md:hidden -mx-3 sm:-mx-2">
+            <div className="relative px-3 sm:px-4">
               <div
-                ref={carouselRef}
+                ref={activityCarouselRef}
                 className="overflow-hidden touch-pan-x"
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}
@@ -300,16 +319,16 @@ const Try: React.FC = () => {
               </div>
 
               {/* Navigation Buttons */}
-              <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex justify-between pointer-events-none">
+              <div className="absolute top-1/2 -translate-y-1/2 left-1 right-1 flex justify-between pointer-events-none">
                 <button
                   onClick={() =>
                     handleSwipe('prev', setCurrentActivity, Activities.length)
                   }
-                  className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
                   aria-label="Previous"
                 >
                   <svg
-                    className="w-6 h-6"
+                    className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -326,11 +345,11 @@ const Try: React.FC = () => {
                   onClick={() =>
                     handleSwipe('next', setCurrentActivity, Activities.length)
                   }
-                  className="pointer-events-auto p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
+                  className="pointer-events-auto p-2 sm:p-3 bg-white/80 text-[#975555] rounded-full shadow-lg hover:bg-white transition-all"
                   aria-label="Next"
                 >
                   <svg
-                    className="w-6 h-6"
+                    className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -347,14 +366,14 @@ const Try: React.FC = () => {
             </div>
 
             {/* Dots Indicator */}
-            <div className="flex justify-center space-x-2 mt-6">
+            <div className="flex justify-center space-x-1 sm:space-x-2 mt-4 sm:mt-6">
               {Activities.map((_, index) => (
                 <button
                   key={index}
                   onClick={() => setCurrentActivity(index)}
-                  className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
+                  className={`w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full transition-all duration-300 ${
                     currentActivity === index
-                      ? 'bg-[#975555] w-6'
+                      ? 'bg-[#975555] w-4 sm:w-6'
                       : 'bg-[#975555]/30'
                   }`}
                   aria-label={`Go to slide ${index + 1}`}

src/components/TryCard.tsx

@@ -26,12 +26,20 @@ export const ActivityCard: React.FC<ActivityCardProps> = ({
   buttonText,
   href,
 }) => (
-  <div className="bg-white rounded-3xl p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105">
-    <img src={icon} alt={title} className="w-24 h-24 mb-4" />
-    <h3 className="text-3xl font-bold mb-2">{title}</h3>
-    <p className="text-gray-600 mb-6">{description}</p>
+  <div className="bg-white rounded-xl sm:rounded-3xl p-4 sm:p-6 md:p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105">
+    <img
+      src={icon}
+      alt={title}
+      className="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 mb-3 sm:mb-4"
+    />
+    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold mb-1 sm:mb-2">
+      {title}
+    </h3>
+    <p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6">
+      {description}
+    </p>
     <a href={href} className="w-full">
-      <button className="w-full py-3 px-6 border-2 border-gray-900 rounded-full text-lg font-semibold hover:bg-gray-900 hover:text-white transition-colors">
+      <button className="w-full py-2 sm:py-3 px-4 sm:px-6 border-2 border-gray-900 rounded-full text-sm sm:text-base md:text-lg font-semibold hover:bg-gray-900 hover:text-white transition-colors">
         {buttonText}
       </button>
     </a>
@@ -48,27 +56,27 @@ export const TryCard: React.FC<TryCardProps> = ({
   imagePath,
   gradientClass,
 }) => (
-  <div className="bg-white rounded-3xl shadow-[rgba(13,_38,_76,_0.19)_0px_9px_20px] hover:shadow-[rgba(13,_38,_76,_0.25)_0px_12px_28px] transition-all duration-500 overflow-hidden mx-auto w-85 group h-full">
-    <div className="p-6 flex flex-col h-full">
+  <div className="bg-white rounded-xl sm:rounded-2xl md:rounded-3xl shadow-[rgba(13,_38,_76,_0.19)_0px_9px_20px] hover:shadow-[rgba(13,_38,_76,_0.25)_0px_12px_28px] transition-all duration-500 overflow-hidden mx-auto w-full group h-full">
+    <div className="p-4 sm:p-5 md:p-6 flex flex-col h-full">
       {/* Content Section */}
-      <div className="flex-1 space-y-4">
+      <div className="flex-1 space-y-3 sm:space-y-4">
         {/* Header */}
-        <div className="space-y-3 text-center w-full">
-          <h2 className="text-xl font-black text-gray-800 leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
+        <div className="space-y-2 sm:space-y-3 text-center w-full">
+          <h2 className="text-lg sm:text-xl font-black text-gray-800 leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
             {title}
           </h2>
-          <p className="text-gray-500 text-sm leading-relaxed mx-auto font-medium tracking-wide">
+          <p className="text-gray-500 text-xs sm:text-sm leading-relaxed mx-auto font-medium tracking-wide">
             {description}
           </p>
         </div>
 
         {/* Buttons */}
-        <div className="space-y-2.5 flex flex-col items-center pt-3">
+        <div className="space-y-2 sm:space-y-2.5 flex flex-col items-center pt-2 sm:pt-3">
           <a
             href={tryNowHref}
-            className={`w-full text-white font-bold px-5 py-3 rounded-2xl 
+            className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3 rounded-xl sm:rounded-2xl 
                        transition-all duration-500 hover:scale-[1.02] hover:shadow-lg 
-                       active:scale-95 text-sm backdrop-blur-sm relative overflow-hidden
+                       active:scale-95 text-xs sm:text-sm backdrop-blur-sm relative overflow-hidden
                        ${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'}
                        before:absolute before:inset-0 before:bg-white/20 before:translate-x-[-150%] before:skew-x-[45deg]
                        hover:before:translate-x-[150%] before:transition-transform before:duration-700
@@ -78,9 +86,9 @@ export const TryCard: React.FC<TryCardProps> = ({
           </a>
           <a
             href={learnMoreHref}
-            className="w-full bg-gray-50/80 backdrop-blur-sm border-[1.5px] border-gray-100 rounded-2xl px-5 py-3 
+            className="w-full bg-gray-50/80 backdrop-blur-sm border-[1.5px] border-gray-100 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3
                      font-bold transition-all duration-500 hover:scale-[1.02] 
-                     hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-sm
+                     hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-xs sm:text-sm
                      active:scale-95 relative overflow-hidden
                      before:absolute before:inset-0 before:bg-gray-400/20 before:translate-x-[-150%] before:skew-x-[45deg]
                      hover:before:translate-x-[150%] before:transition-transform before:duration-700"
@@ -91,12 +99,12 @@ export const TryCard: React.FC<TryCardProps> = ({
       </div>
 
       {/* Image Section */}
-      <div className="-mx-6 -mb-6 mt-6 relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent h-12 z-10" />
+      <div className="-mx-4 sm:-mx-5 md:-mx-6 -mb-4 sm:-mb-5 md:-mb-6 mt-4 sm:mt-5 md:mt-6 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent h-8 sm:h-10 md:h-12 z-10" />
         <img
           src={imagePath}
           alt={title}
-          className="w-full h-48 object-cover transform transition-all duration-700 
+          className="w-full h-36 sm:h-40 md:h-48 object-cover transform transition-all duration-700 
                      group-hover:scale-110 group-hover:rotate-1"
         />
         <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />