New branch 6

src/Pages/Achievements/Achievements.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from 'react'; 
 import AnimatedCard from '../../components/AnimatedCard/AnimatedCard';
-import { achievements } from "../../constants/constants";
+import { achievements } from "../../constants/achievementConstants";
 
 const Achievements = () => {
   return (
@@ -11,21 +11,16 @@ const Achievements = () => {
       </h2>
 
       <p className="max-w-2xl px-3 mx-auto my-10 text-center flex justify-center items-center text-xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-pink-500">
-  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>
+        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">
         {achievements.map((event, index) => (
           <div
             key={index}
-            className="w-full md:w-1/2 p-4 flex justify-center"  
+            className="w-full md:w-1/2 lg:w-1/3 p-4 flex justify-center"
           >
-            <div
-              className={`w-full max-w-2xl ${
-                index % 2 === 0 ? 'text-left' : 'text-right'
-              }`}
-            >
+            <div className="w-full max-w-2xl">
               <AnimatedCard
                 img={event.img}
                 title={event.name}

src/components/AnimatedCard/AnimatedCard.jsx

@@ -1,34 +1,43 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 
-const AnimatedCard = ({ img, title, date, description, imageAlignment }) => {
+const AnimatedCard = ({ img, title, date, description }) => {
   return (
     <motion.div
       className="bg-gradient-to-r from-indigo-800 via-purple-800 to-blue-900 shadow-lg rounded-xl p-8 my-4 w-full flex flex-col items-center text-center transition-transform duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl"
-      style={{ maxWidth: '600px', minHeight: '450px' }}  
+      style={{ maxWidth: '600px', minHeight: '500px', height: '500px' }} // Fixed height
       initial={{ opacity: 0, y: -50 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.9 }}
     >
-      {/* Image */}
-      {img && (
-        <div className="rounded-full overflow-hidden w-32 h-32 mb-6 border-4 border-indigo-400">
-          <img src={img} alt={title} className="w-full h-full object-cover" />
-        </div>
-      )}
-
-      {/* Content */}
-      <div className="flex-grow flex flex-col justify-between">
-        <h3 className="text-center text-3xl font-bold mt-2 text-white">{title}</h3>
-        <p className="text-center text-lg text-gray-300 mb-4">{date}</p>
-        <div
-          className="text-center text-white mt-4 text-xl"
-          dangerouslySetInnerHTML={{ __html: description }}
-        />
+      {/* Image or Placeholder */}
+      <div className="rounded-full overflow-hidden w-32 h-32 mb-6 border-4 border-indigo-400">
+        {img ? (
+          <img src={img} alt={`${title} - achiever image`} className="w-full h-full object-cover" />
+        ) : (
+          <div className="w-full h-full bg-gray-700 flex items-center justify-center">
+            <span className="text-white text-xl">No Image</span>
+          </div>
+        )}
+      </div>
+
+      {/* Name */}
+      <h3 className="text-center text-3xl font-bold mt-2 text-white">{title}</h3>
+
+      {/* Batch */}
+      <p className="text-center text-lg text-gray-300 mb-4">{date}</p>
+
+      {/* Achievements */}
+      <div
+        className="text-center text-white mt-4 text-xl overflow-auto"
+        style={{ maxHeight: '100px' }} // Set a max height and overflow-auto for scrollbar
+      >
+        {description.split('|').map((achievement, index) => (
+          <p key={index}>{achievement.trim()}</p>
+        ))}
       </div>
     </motion.div>
   );
 };
 
 export default AnimatedCard;
-