From 35cb7a861101fd3b0096b116f2e8c18983edeee0 Mon Sep 17 00:00:00 2001
From: Kunal1522 <kunalkashyap8024@gmail.com>
Date: Thu, 13 Nov 2025 15:12:37 +0530
Subject: [PATCH 1/5] refactor: add responsive grid layouts to Try and Stats
 sections

---
 src/components/Stats.tsx   | 105 ++++++++++++++++++++++++++-----------
 src/components/Try.tsx     |   7 ++-
 src/components/TryCard.tsx |  20 +++----
 3 files changed, 89 insertions(+), 43 deletions(-)

diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index 84eb3876..fe10bbd3 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -99,48 +99,91 @@ const Stats = () => {
 
       {/* Stats Grid */}
       <motion.div
-        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8"
+        className="flex flex-col items-center gap-6 sm:gap-8 md:gap-10"
         variants={container}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.1 }}
       >
-        {statisticsData.slice(1).map((stat, index) => (
-          <motion.div
-            key={index}
-            className={`rounded-lg sm:rounded-xl overflow-hidden shadow-md sm:shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgColor} border ${stat.borderColor}`}
-            variants={item}
-            whileHover={{ y: -5, transition: { duration: 0.2 } }}
-          >
+        {/* Top Row - 2 Items */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 w-full justify-items-center max-w-3xl">
+          {statisticsData.slice(1, 3).map((stat, index) => (
             <motion.div
-              className="h-36 sm:h-40 md:h-48 relative overflow-hidden"
-              variants={imageReveal}
+              key={index}
+              className={`rounded-lg sm:rounded-xl overflow-hidden shadow-md sm:shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgColor} border ${stat.borderColor} w-full max-w-sm`}
+              variants={item}
+              whileHover={{ y: -5, transition: { duration: 0.2 } }}
             >
-              <img
-                src={stat.imageSrc}
-                alt={stat.imageAlt}
-                className="w-full h-full object-cover object-center"
-              />
-              <div
-                className={`absolute inset-0 opacity-10 bg-gradient-to-br ${stat.gradient}`}
-              ></div>
+              <motion.div
+                className="h-32 sm:h-36 md:h-44 relative overflow-hidden"
+                variants={imageReveal}
+              >
+                <img
+                  src={stat.imageSrc}
+                  alt={stat.imageAlt}
+                  className="w-full h-full object-cover object-center"
+                />
+                <div
+                  className={`absolute inset-0 opacity-10 bg-gradient-to-br ${stat.gradient}`}
+                ></div>
+              </motion.div>
+              <div className="p-4 sm:p-5 md:p-6">
+                <h3 className="text-gray-700 dark:text-gray-200 text-sm sm:text-base md:text-lg font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-10 sm:h-12">
+                  {stat.title}
+                </h3>
+                <motion.div
+                  className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-3 sm:mb-4 bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent font-Caveat`}
+                  variants={numberCounter}
+                >
+                  {stat.value}
+                </motion.div>
+                <div
+                  className={`w-12 sm:w-16 md:w-20 h-0.5 sm:h-1 bg-gradient-to-r ${stat.gradient} opacity-50 rounded-full mt-1 sm:mt-2`}
+                ></div>
+              </div>
             </motion.div>
-            <div className="p-4 sm:p-5 md:p-6">
-              <h3 className="text-gray-700 dark:text-gray-200 text-lg sm:text-xl font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-12 sm:h-14">
-                {stat.title}
-              </h3>
+          ))}
+        </div>
+
+        {/* Bottom Row - 3 Items */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 w-full justify-items-center max-w-5xl">
+          {statisticsData.slice(3).map((stat, index) => (
+            <motion.div
+              key={index}
+              className={`rounded-lg sm:rounded-xl overflow-hidden shadow-md sm:shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgColor} border ${stat.borderColor} w-full max-w-sm`}
+              variants={item}
+              whileHover={{ y: -5, transition: { duration: 0.2 } }}
+            >
               <motion.div
-                className={`text-4xl sm:text-5xl md:text-6xl font-bold mb-3 sm:mb-4 bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent font-Caveat`}
-                variants={numberCounter}
+                className="h-32 sm:h-36 md:h-44 relative overflow-hidden"
+                variants={imageReveal}
               >
-                {stat.value}
+                <img
+                  src={stat.imageSrc}
+                  alt={stat.imageAlt}
+                  className="w-full h-full object-cover object-center"
+                />
+                <div
+                  className={`absolute inset-0 opacity-10 bg-gradient-to-br ${stat.gradient}`}
+                ></div>
               </motion.div>
-              <div
-                className={`w-16 sm:w-20 md:w-24 h-0.5 sm:h-1 bg-gradient-to-r ${stat.gradient} opacity-50 rounded-full mt-1 sm:mt-2`}
-              ></div>
-            </div>
-          </motion.div>
-        ))}
+              <div className="p-4 sm:p-5 md:p-6">
+                <h3 className="text-gray-700 dark:text-gray-200 text-sm sm:text-base md:text-lg font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-10 sm:h-12">
+                  {stat.title}
+                </h3>
+                <motion.div
+                  className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-3 sm:mb-4 bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent font-Caveat`}
+                  variants={numberCounter}
+                >
+                  {stat.value}
+                </motion.div>
+                <div
+                  className={`w-12 sm:w-16 md:w-20 h-0.5 sm:h-1 bg-gradient-to-r ${stat.gradient} opacity-50 rounded-full mt-1 sm:mt-2`}
+                ></div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
       </motion.div>
 
       {/* Closing Section with Interactive Element */}
diff --git a/src/components/Try.tsx b/src/components/Try.tsx
index 77323366..fd2bc1a9 100644
--- a/src/components/Try.tsx
+++ b/src/components/Try.tsx
@@ -112,8 +112,11 @@ const Try: React.FC = () => {
             </motion.div>
           </motion.header>
 
-          {/* Desktop Grid */}
-          <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
+          {/* Desktop Grid - Dynamic Columns */}
+          <div className="hidden md:grid gap-6 md:gap-8 w-full max-w-6xl mx-auto"
+            style={{
+              gridTemplateColumns: `repeat(${TryCardData.length % 3 === 0 ? 3 : 2}, 1fr)`
+            }}>
             {TryCardData.map((card, index) => (
               <TryCard key={index} {...card} />
             ))}
diff --git a/src/components/TryCard.tsx b/src/components/TryCard.tsx
index 5400326c..8ed2a138 100644
--- a/src/components/TryCard.tsx
+++ b/src/components/TryCard.tsx
@@ -78,22 +78,22 @@ export const TryCard: React.FC<TryCardProps> = ({
   <div className="bg-white dark:bg-gray-800 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 border border-transparent dark:border-gray-700">
     <div className="p-4 sm:p-5 md:p-6 flex flex-col h-full">
       {/* Content Section */}
-      <div className="flex-1 flex flex-col space-y-3 sm:space-y-4">
+      <div className="flex-1 flex flex-col space-y-2 sm:space-y-3">
         {/* Header */}
-        <div className="space-y-2 flex-1/4 sm:space-y-3 text-center w-full">
-          <h2 className="text-lg sm:text-xl font-black text-gray-800 dark:text-transparent leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
+        <div className="space-y-1 sm:space-y-2 text-center w-full h-20 sm:h-24 flex flex-col justify-center">
+          <h2 className="text-sm sm:text-base md:text-lg font-black text-gray-800 dark:text-transparent leading-snug bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500 line-clamp-3">
             {title}
           </h2>
-          <p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-relaxed mx-auto font-medium tracking-wide">
+          <p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-snug mx-auto font-medium tracking-wide line-clamp-2">
             {description}
           </p>
         </div>
 
         {/* Buttons */}
-        <div className="space-y-2 sm:space-y-2.5 flex flex-col items-center pt-1 sm:pt-3">
+        <div className="space-y-1.5 sm:space-y-2 flex flex-col items-center pt-1 sm:pt-2">
           <a
             href={tryNowHref}
-            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 
+            className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-lg sm:rounded-xl 
                        transition-all duration-500 hover:scale-[1.02] hover:shadow-lg 
                        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'}
@@ -105,7 +105,7 @@ export const TryCard: React.FC<TryCardProps> = ({
           </a>
           <Link
             to={learnMoreHref}
-            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3
+            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-lg sm:rounded-xl px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5
                      font-bold transition-all duration-500 hover:scale-[1.02] 
                      hover:bg-gray-100/80 hover:border-gray-200 dark:hover:bg-gray-600/80 dark:hover:border-gray-500 text-gray-700 dark:text-gray-200 text-xs sm:text-sm
                      active:scale-95 relative overflow-hidden
@@ -118,12 +118,12 @@ export const TryCard: React.FC<TryCardProps> = ({
       </div>
 
       {/* Image Section */}
-      <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 dark:from-gray-800 dark:via-gray-800/50 h-8 sm:h-10 md:h-12 z-10" />
+      <div className="-mx-4 sm:-mx-5 md:-mx-6 -mb-4 sm:-mb-5 md:-mb-6 mt-2 sm:mt-3 md:mt-4 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent dark:from-gray-800 dark:via-gray-800/50 h-6 sm:h-8 md:h-10 z-10" />
         <img
           src={imagePath}
           alt={title}
-          className="w-full h-36 sm:h-40 md:h-48 object-cover transform transition-all duration-700 
+          className="w-full h-28 sm:h-32 md:h-40 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" />

From c47a3aa1e85e5cd52f8b0ae6ddc79f7f83b56312 Mon Sep 17 00:00:00 2001
From: Kunal1522 <kunalkashyap8024@gmail.com>
Date: Thu, 13 Nov 2025 17:50:28 +0530
Subject: [PATCH 2/5] fix: enhance button layout with flexbox for better
 alignment

---
 src/components/TryCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TryCard.tsx b/src/components/TryCard.tsx
index 8ed2a138..0efac34a 100644
--- a/src/components/TryCard.tsx
+++ b/src/components/TryCard.tsx
@@ -95,7 +95,7 @@ export const TryCard: React.FC<TryCardProps> = ({
             href={tryNowHref}
             className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-lg sm:rounded-xl 
                        transition-all duration-500 hover:scale-[1.02] hover:shadow-lg 
-                       active:scale-95 text-xs sm:text-sm backdrop-blur-sm relative overflow-hidden
+                       active:scale-95 text-xs sm:text-sm backdrop-blur-sm relative overflow-hidden flex items-center justify-center
                        ${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
@@ -108,7 +108,7 @@ export const TryCard: React.FC<TryCardProps> = ({
             className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-lg sm:rounded-xl px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5
                      font-bold transition-all duration-500 hover:scale-[1.02] 
                      hover:bg-gray-100/80 hover:border-gray-200 dark:hover:bg-gray-600/80 dark:hover:border-gray-500 text-gray-700 dark:text-gray-200 text-xs sm:text-sm
-                     active:scale-95 relative overflow-hidden
+                     active:scale-95 relative overflow-hidden flex items-center justify-center
                      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"
           >

From 1841398368782467af277ad7e2548a20338f6ca7 Mon Sep 17 00:00:00 2001
From: Kunal1522 <kunalkashyap8024@gmail.com>
Date: Thu, 13 Nov 2025 17:54:45 +0530
Subject: [PATCH 3/5] refactor: update desktop grid to use fixed 2 columns
 layout

---
 src/components/Try.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Try.tsx b/src/components/Try.tsx
index fd2bc1a9..f3554844 100644
--- a/src/components/Try.tsx
+++ b/src/components/Try.tsx
@@ -112,11 +112,8 @@ const Try: React.FC = () => {
             </motion.div>
           </motion.header>
 
-          {/* Desktop Grid - Dynamic Columns */}
-          <div className="hidden md:grid gap-6 md:gap-8 w-full max-w-6xl mx-auto"
-            style={{
-              gridTemplateColumns: `repeat(${TryCardData.length % 3 === 0 ? 3 : 2}, 1fr)`
-            }}>
+          {/* Desktop Grid - 2 Columns */}
+          <div className="hidden md:grid md:grid-cols-2 gap-6 md:gap-8 w-full max-w-6xl mx-auto">
             {TryCardData.map((card, index) => (
               <TryCard key={index} {...card} />
             ))}

From 9b638cb1e074ace0ee967b9c108865a2540b2166 Mon Sep 17 00:00:00 2001
From: Kunal1522 <kunalkashyap8024@gmail.com>
Date: Fri, 14 Nov 2025 21:45:26 +0530
Subject: [PATCH 4/5] refactor: restore Try and TryCard components for previous
 layout and styling

---
 src/components/Try.tsx     | 4 ++--
 src/components/TryCard.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Try.tsx b/src/components/Try.tsx
index f3554844..77323366 100644
--- a/src/components/Try.tsx
+++ b/src/components/Try.tsx
@@ -112,8 +112,8 @@ const Try: React.FC = () => {
             </motion.div>
           </motion.header>
 
-          {/* Desktop Grid - 2 Columns */}
-          <div className="hidden md:grid md:grid-cols-2 gap-6 md:gap-8 w-full max-w-6xl mx-auto">
+          {/* Desktop Grid */}
+          <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} />
             ))}
diff --git a/src/components/TryCard.tsx b/src/components/TryCard.tsx
index 0efac34a..ef21050e 100644
--- a/src/components/TryCard.tsx
+++ b/src/components/TryCard.tsx
@@ -93,9 +93,9 @@ export const TryCard: React.FC<TryCardProps> = ({
         <div className="space-y-1.5 sm:space-y-2 flex flex-col items-center pt-1 sm:pt-2">
           <a
             href={tryNowHref}
-            className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-lg sm:rounded-xl 
+            className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-xl sm:rounded-2xl 
                        transition-all duration-500 hover:scale-[1.02] hover:shadow-lg 
-                       active:scale-95 text-xs sm:text-sm backdrop-blur-sm relative overflow-hidden flex items-center justify-center
+                       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
@@ -105,10 +105,10 @@ export const TryCard: React.FC<TryCardProps> = ({
           </a>
           <Link
             to={learnMoreHref}
-            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-lg sm:rounded-xl px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5
+            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5
                      font-bold transition-all duration-500 hover:scale-[1.02] 
                      hover:bg-gray-100/80 hover:border-gray-200 dark:hover:bg-gray-600/80 dark:hover:border-gray-500 text-gray-700 dark:text-gray-200 text-xs sm:text-sm
-                     active:scale-95 relative overflow-hidden flex items-center justify-center
+                     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"
           >

From f0a2a8338e49a3e707505061522d384acc0285a1 Mon Sep 17 00:00:00 2001
From: Kunal1522 <kunalkashyap8024@gmail.com>
Date: Sat, 15 Nov 2025 21:48:14 +0530
Subject: [PATCH 5/5] Remove changes to TryCard.tsx

---
 src/components/TryCard.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/TryCard.tsx b/src/components/TryCard.tsx
index ef21050e..5400326c 100644
--- a/src/components/TryCard.tsx
+++ b/src/components/TryCard.tsx
@@ -78,22 +78,22 @@ export const TryCard: React.FC<TryCardProps> = ({
   <div className="bg-white dark:bg-gray-800 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 border border-transparent dark:border-gray-700">
     <div className="p-4 sm:p-5 md:p-6 flex flex-col h-full">
       {/* Content Section */}
-      <div className="flex-1 flex flex-col space-y-2 sm:space-y-3">
+      <div className="flex-1 flex flex-col space-y-3 sm:space-y-4">
         {/* Header */}
-        <div className="space-y-1 sm:space-y-2 text-center w-full h-20 sm:h-24 flex flex-col justify-center">
-          <h2 className="text-sm sm:text-base md:text-lg font-black text-gray-800 dark:text-transparent leading-snug bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500 line-clamp-3">
+        <div className="space-y-2 flex-1/4 sm:space-y-3 text-center w-full">
+          <h2 className="text-lg sm:text-xl font-black text-gray-800 dark:text-transparent leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
             {title}
           </h2>
-          <p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-snug mx-auto font-medium tracking-wide line-clamp-2">
+          <p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-relaxed mx-auto font-medium tracking-wide">
             {description}
           </p>
         </div>
 
         {/* Buttons */}
-        <div className="space-y-1.5 sm:space-y-2 flex flex-col items-center pt-1 sm:pt-2">
+        <div className="space-y-2 sm:space-y-2.5 flex flex-col items-center pt-1 sm:pt-3">
           <a
             href={tryNowHref}
-            className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-xl sm: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-xs sm:text-sm backdrop-blur-sm relative overflow-hidden
                        ${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'}
@@ -105,7 +105,7 @@ export const TryCard: React.FC<TryCardProps> = ({
           </a>
           <Link
             to={learnMoreHref}
-            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5
+            className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 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 dark:hover:bg-gray-600/80 dark:hover:border-gray-500 text-gray-700 dark:text-gray-200 text-xs sm:text-sm
                      active:scale-95 relative overflow-hidden
@@ -118,12 +118,12 @@ export const TryCard: React.FC<TryCardProps> = ({
       </div>
 
       {/* Image Section */}
-      <div className="-mx-4 sm:-mx-5 md:-mx-6 -mb-4 sm:-mb-5 md:-mb-6 mt-2 sm:mt-3 md:mt-4 relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent dark:from-gray-800 dark:via-gray-800/50 h-6 sm:h-8 md:h-10 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 dark:from-gray-800 dark:via-gray-800/50 h-8 sm:h-10 md:h-12 z-10" />
         <img
           src={imagePath}
           alt={title}
-          className="w-full h-28 sm:h-32 md:h-40 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" />