From d2d8ff242cf7021759f1416acc7153db197bf761 Mon Sep 17 00:00:00 2001
From: Rajatsinghal02 <singhalrajat354@gmail.com>
Date: Sun, 6 Oct 2024 13:03:13 +0530
Subject: [PATCH] Card Styling Updated

---
 .../Homepage/GetInvolvedSection.tsx           | 137 ++++++++++--------
 .../Homepage/PopularAlgorithmsSection.tsx     |  35 +++--
 2 files changed, 97 insertions(+), 75 deletions(-)

diff --git a/src/components/Homepage/GetInvolvedSection.tsx b/src/components/Homepage/GetInvolvedSection.tsx
index c958f7564..913e8d83f 100644
--- a/src/components/Homepage/GetInvolvedSection.tsx
+++ b/src/components/Homepage/GetInvolvedSection.tsx
@@ -17,24 +17,29 @@ const GetInvolvedSection: React.FC = () => {
         </p>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-              Hackathons
-            </h3>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Participate in our hackathons to showcase your skills and win
-              exciting prizes!
-            </p>
-            <Link
-              to="#"
-              className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
-            >
-              Learn More
-            </Link>
-            <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
-          </div>
+          
+          
+        <div className=" flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
+  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+    Hackathons
+  </h3>
+  <p className="text-gray-600 dark:text-gray-300 mb-4">
+    Participate in our hackathons to showcase your skills and win exciting prizes!
+  </p>
+  {/* Center the button */}
+  <div className="flex justify-center">
+    <Link
+      to="#"
+      className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
+    >
+      Learn More
+    </Link>
+  </div>
+  <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
+</div>
 
-          <div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
+
+          <div className=" flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
             <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
               Workshops
             </h3>
@@ -42,17 +47,19 @@ const GetInvolvedSection: React.FC = () => {
               Join our workshops to learn about the latest technologies and best
               practices in software development.
             </p>
-            <Link
-              to="#"
-              className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
-            >
-              Learn More
-            </Link>
+            <div className="flex justify-center">
+    <Link
+      to="#"
+      className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
+    >
+      Learn More
+    </Link>
+  </div>
             <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
           </div>
 
           {/* Event 3 */}
-          <div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
+          <div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
             <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
               Community Meetups
             </h3>
@@ -60,17 +67,19 @@ const GetInvolvedSection: React.FC = () => {
               Connect with fellow contributors and share ideas at our regular
               community meetups.
             </p>
-            <Link
-              to="#"
-              className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
-            >
-              Learn More
-            </Link>
+            <div className="flex justify-center">
+    <Link
+      to="#"
+      className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
+    >
+      Learn More
+    </Link>
+  </div>
             <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
           </div>
 
           {/* Event 4 */}
-          <div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
+          <div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
             <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
               Mentorship Programs
             </h3>
@@ -78,34 +87,40 @@ const GetInvolvedSection: React.FC = () => {
               Sign up for our mentorship programs to get guidance from
               experienced developers in the industry.
             </p>
-            <Link
-              to="#"
-              className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
-            >
-              Learn More
-            </Link>
+            <div className="flex justify-center">
+    <Link
+      to="#"
+      className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
+    >
+      Learn More
+    </Link>
+  </div>
             <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
           </div>
 
           {/* Event 5 */}
-          <div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-              Online Courses
-            </h3>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Enroll in our online courses to gain valuable skills and
-              certifications.
-            </p>
-            <Link
-              to="#"
-              className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
-            >
-              Learn More
-            </Link>
-            <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
-          </div>
+          {/* Event 5 */}
+<div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
+  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+    Online Courses
+  </h3>
+  <p className="text-gray-600 dark:text-gray-300 mb-4">
+    Enroll in our online courses to gain valuable skills and certifications.
+  </p>
+  {/* Center the button */}
+  <div className="flex justify-center">
+    <Link
+      to="#"
+      className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
+    >
+      Learn More
+    </Link>
+  </div>
+  <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
+</div>
+
 
-          <div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
+          <div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
             <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
               Open Source Contributions
             </h3>
@@ -113,12 +128,14 @@ const GetInvolvedSection: React.FC = () => {
               Contribute to our project and enhance your coding skills while
               making a positive impact!
             </p>
-            <Link
-              to="#"
-              className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
-            >
-              Learn More
-            </Link>
+            <div className="flex justify-center">
+    <Link
+      to="#"
+      className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
+    >
+      Learn More
+    </Link>
+  </div>
             <div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
           </div>
         </div>
diff --git a/src/components/Homepage/PopularAlgorithmsSection.tsx b/src/components/Homepage/PopularAlgorithmsSection.tsx
index 2a343803b..b4a1f22ea 100644
--- a/src/components/Homepage/PopularAlgorithmsSection.tsx
+++ b/src/components/Homepage/PopularAlgorithmsSection.tsx
@@ -47,25 +47,28 @@ const PopularAlgorithmsSection: React.FC = () => {
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
           {algorithms.map((algorithm, index) => (
             <motion.div
-              key={index}
-              className="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 ease-in-out hover:shadow-2xl hover:bg-[#3b82f6] cursor-pointer group" // Added cursor-pointer
-              initial={{ scale: 1 }}
-              whileHover={{ scale: 1.05 }} // Scale on hover
-              whileTap={{ scale: 0.95 }} // Scale down on tap
-            >
-              <motion.div
-                className="absolute inset-0 border-2 border-transparent rounded-lg "
-                initial={{ borderColor: "transparent" }}
-                whileHover={{ borderColor: "#3b82f6" }} // Add blue background on hover
-                transition={{ duration: 0.3 }}
-              />
-              <div className="relative z-10 ">
+            key={index}
+            className="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 ease-in-out hover:shadow-2xl hover:bg-[#3b82f6] cursor-pointer group flex flex-col justify-between h-full"
+            initial={{ scale: 1 }}
+            whileHover={{ scale: 1.05 }} // Scale on hover
+            whileTap={{ scale: 0.95 }} // Scale down on tap
+          >
+            <motion.div
+              className="absolute inset-0 border-2 border-transparent rounded-lg"
+              initial={{ borderColor: "transparent" }}
+              whileHover={{ borderColor: "#3b82f6" }} // Add blue border on hover
+              transition={{ duration: 0.3 }}
+            />
+            <div className="relative z-10 flex flex-col justify-between h-full">
+              <div>
                 <h3 className="text-2xl font-semibold text-gray-800 dark:text-white group-hover:text-white mb-4">
                   {algorithm.title}
                 </h3>
-                <p className="text-gray-600 dark:text-gray-300 group-hover:text-slate-50 ">
+                <p className="text-gray-600 dark:text-gray-300 group-hover:text-slate-50">
                   {algorithm.description}
                 </p>
+              </div>
+              <div className="flex justify-center mt-auto">
                 <Link
                   to={algorithm.link}
                   className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition-colors duration-300 group-hover:bg-white group-hover:text-blue-700"
@@ -73,7 +76,9 @@ const PopularAlgorithmsSection: React.FC = () => {
                   Learn More
                 </Link>
               </div>
-            </motion.div>
+            </div>
+          </motion.div>
+          
           ))}
         </div>
       </div>