From a3caa188af427cb2b63a0c3449383d4162b077f0 Mon Sep 17 00:00:00 2001
From: pradeeptosarkar <psrcofficial10@gmail.com>
Date: Sun, 1 Sep 2024 17:54:02 +0530
Subject: [PATCH] achievements page responsiveness issues

---
 src/Pages/Achievements/Achievements.jsx      |   9 +-
 src/components/AnimatedCard/AnimatedCard.css | 218 +++++++++----------
 src/components/AnimatedCard/AnimatedCard.jsx |  22 +-
 src/constants/achievementConstants.js        |   2 +-
 4 files changed, 123 insertions(+), 128 deletions(-)

diff --git a/src/Pages/Achievements/Achievements.jsx b/src/Pages/Achievements/Achievements.jsx
index bd16d8f2..ebb4c7b5 100644
--- a/src/Pages/Achievements/Achievements.jsx
+++ b/src/Pages/Achievements/Achievements.jsx
@@ -14,13 +14,10 @@ const Achievements = () => {
         At nameSpace, we take pride in the remarkable accomplishments of our members, who consistently push the boundaries of innovation and excellence. This section celebrates the dedication, hard work, and success of those who have made significant contributions both within our society and beyond. From pioneering projects to winning prestigious awards, our achievers exemplify the true spirit of nameSpace. Explore the milestones and achievements that define our journey and inspire future generations.
       </p>
 
-      <div className="flex flex-wrap justify-center">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         {achievements.map((event, index) => (
-          <div
-            key={index}
-            className="w-full md:w-1/2 lg:w-1/3 p-4 flex justify-center"
-          >
-            <div className="w-full max-w-2xl">
+          <div key={index} className="p-4 flex justify-center">
+            <div className="w-full max-w-xs"> {/* Adjusting width to make the photo square */}
               <AnimatedCard
                 img={event.img}
                 title={event.name}
diff --git a/src/components/AnimatedCard/AnimatedCard.css b/src/components/AnimatedCard/AnimatedCard.css
index aefba10f..74937ac3 100644
--- a/src/components/AnimatedCard/AnimatedCard.css
+++ b/src/components/AnimatedCard/AnimatedCard.css
@@ -1,111 +1,109 @@
 .card-container {
-    perspective: 1000px; /* Enable 3D space for flip effect */
-    position: relative;
-    width: 100%;
-    max-width: 600px;
-    height: 500px; /* Ensure consistent height */
-  }
-  
-  .card-inner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.6s;
-    transform-style: preserve-3d;
-  }
-  
-  .card-container:hover .card-inner {
-    transform: rotateY(180deg);
-  }
-  
-  .card-front,
-  .card-back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-    border-radius: 1rem;
-  }
-  
-  .card-front {
-    background: rgba(0, 0, 0, 0.5); /* Darker background for the front */
-  }
-  
-  .card-back {
-    background: rgba(255, 255, 255, 0.1); /* Darker background for the back */
-    transform: rotateY(180deg);
-  }
-  
-  .image-container {
-    position: relative;
-    width: 100%;
-    height: 80%; /* Fixed height for the image container */
-    overflow: hidden;
-  }
-  
-  .card-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .no-image {
-    width: 100%;
-    height: 100%;
-    background-color: #4a4a4a; /* Placeholder color */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #ffffff;
-    font-size: 1.25rem;
-  }
-  
-  .image-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to right, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3));
-    opacity: 0.5;
-    /* blur: 10px; */
-    border-radius: 50%;
-    z-index: -1;
-  }
-  
-  .card-title {
-    font-size: 1.5rem;
-    color: white;
-    margin-top: 1rem;
-  }
-  
-  .card-batch {
-    font-size: 1rem;
-    color: #d1d1d1;
-    margin-bottom: 1rem;
-  }
-  
-  .achievements {
-    overflow-y: auto;
-    max-height: 100%;
-    padding: 1rem;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 0.5rem;
-  }
-  
-  .achievement {
-    margin-bottom: 0.5rem;
-  }
-  
-  .decorative-element {
-    position: absolute;
-    bottom: -1px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 75%;
-    height: 4px;
-    background-color: #4f46e5;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  }
-  
\ No newline at end of file
+  perspective: 1000px; /* Enable 3D space for flip effect */
+  position: relative;
+  width: 100%;
+  max-width: 350px; /* Reduced max width */
+  height: 300px; /* Reduced height */
+}
+
+.card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.card-container:hover .card-inner {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 1rem;
+}
+
+.card-front {
+  background: rgba(0, 0, 0, 0.5); /* Darker background for the front */
+}
+
+.card-back {
+  background: rgba(0, 0, 0, 0.5); /* Consistent background for the back */
+  transform: rotateY(180deg);
+}
+
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 66%; /* Adjusted height for image container */
+  overflow: hidden;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.no-image {
+  width: 100%;
+  height: 100%;
+  background-color: #4a4a4a; /* Placeholder color */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 1rem; /* Adjusted font size */
+}
+
+.image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3));
+  opacity: 0.5;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.card-title {
+  font-size: 1.25rem; /* Adjusted font size */
+  color: white;
+  margin-top: 0.5rem; /* Adjusted margin */
+}
+
+.card-batch {
+  font-size: 0.875rem; /* Adjusted font size */
+  color: #d1d1d1;
+  margin-bottom: 0.5rem; /* Adjusted margin */
+}
+
+.achievements {
+  overflow-y: auto;
+  max-height: 100%; /* Adjusted height */
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.5); /* Consistent background color */
+  border-radius: 0.5rem;
+}
+
+.achievement {
+  margin-bottom: 0.5rem;
+}
+
+.decorative-element {
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 75%;
+  height: 4px;
+  background-color: #4f46e5;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
diff --git a/src/components/AnimatedCard/AnimatedCard.jsx b/src/components/AnimatedCard/AnimatedCard.jsx
index 0444a661..aec62bd5 100644
--- a/src/components/AnimatedCard/AnimatedCard.jsx
+++ b/src/components/AnimatedCard/AnimatedCard.jsx
@@ -5,38 +5,38 @@ import './AnimatedCard.css'; // Import custom CSS file
 const AnimatedCard = ({ img, title, date, description }) => {
   return (
     <motion.div
-      className="card-container"
+      className="card-container bg-blue-1000 rounded-lg shadow-lg overflow-hidden"
       initial={{ opacity: 0, y: -50 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0 }}
-      whileHover={{ rotate: 0, scale: 1.1, y: -5 }}
+      whileHover={{ rotate: 0, scale: 1.05, y: -5 }} 
     >
-      <div className="card-inner">
+      <div className="card-inner relative">
         {/* Front Side of the Card */}
         <div className="card-front">
           {/* Image with Glow Effect */}
-          <div className="image-container">
+          <div className="image-container relative w-full">
             {img ? (
-              <img src={img} alt={`${title} - achiever image`} className="card-image" />
+              <img src={img} alt={`${title} - achiever image`} className="card-image w-full h-auto object-cover" />
             ) : (
-              <div className="no-image">
+              <div className="no-image bg-gray-300 flex justify-center items-center h-40">
                 <span>No Image</span>
               </div>
             )}
-            <div className="image-overlay"></div>
+            <div className="image-overlay absolute top-0 left-0 right-0 bottom-0"></div>
           </div>
 
           {/* Name with Enhanced Typography */}
-          <h3 className="card-title">{title}</h3>
+          <h3 className="card-title text-white text-center mt-2">{title}</h3>
 
           {/* Batch */}
-          <p className="card-batch">{date}</p>
+          <p className="card-batch text-white text-center mb-2">{date}</p>
         </div>
 
         {/* Back Side of the Card */}
-        <div className="card-back">
+        <div className="card-back absolute top-0 left-0 w-full h-full bg-blue-1000 p-4 flex items-center justify-center">
           {/* Achievements with Styling */}
-          <div className="achievements">
+          <div className="achievements text-white">
             {description.split('|').map((achievement, index) => (
               <p key={index} className="achievement">
                 {achievement.trim()}
diff --git a/src/constants/achievementConstants.js b/src/constants/achievementConstants.js
index 2e15e33b..f669fdff 100644
--- a/src/constants/achievementConstants.js
+++ b/src/constants/achievementConstants.js
@@ -9,7 +9,7 @@ export const achievements = [
     img: "https://media.licdn.com/dms/image/v2/C4D03AQEatv7P9Aso-w/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1651746196592?e=1730332800&v=beta&t=_WKkn9_qse81Uauxp3pOBvWAxKF0rfVO-ZWGSaEFHXA",
     name: "Deepti Mittal",
     batch: "2020-24",
-    achievements: "SDE @Xeno",
+    achievements: "SDE @Xeno | Offered Juspay, Josh Technologies",
   },
   {
     img: "https://media.licdn.com/dms/image/v2/D5635AQGjh-QoZIKR5w/profile-framedphoto-shrink_400_400/profile-framedphoto-shrink_400_400/0/1703348681758?e=1725631200&v=beta&t=HK7AQEFGQboS-uldiGiWWlpYRevHr8lM4REJ53jUm3s",