Merge pull request #576 from namespacecomm/new_branch_6

animation to card on achievements page
namespacecomm · Aug 29, 2024 · 11ef203 · 11ef203
2 parents e175ecd + c13d2b6
commit 11ef203
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 24 deletions.
diff --git a/src/components/AnimatedCard/AnimatedCard.css b/src/components/AnimatedCard/AnimatedCard.css
@@ -0,0 +1,111 @@
+.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);
+  }
+
diff --git a/src/components/AnimatedCard/AnimatedCard.jsx b/src/components/AnimatedCard/AnimatedCard.jsx
@@ -1,41 +1,53 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import './AnimatedCard.css'; // Import custom CSS file
 
 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: '500px', height: '500px' }} // Fixed height
+      className="card-container"
       initial={{ opacity: 0, y: -50 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.9 }}
+      transition={{ duration: 0 }}
+      whileHover={{ rotate: 0, scale: 1.1, y: -5 }}
     >
-      {/* 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 className="card-inner">
+        {/* Front Side of the Card */}
+        <div className="card-front">
+          {/* Image with Glow Effect */}
+          <div className="image-container">
+            {img ? (
+              <img src={img} alt={`${title} - achiever image`} className="card-image" />
+            ) : (
+              <div className="no-image">
+                <span>No Image</span>
+              </div>
+            )}
+            <div className="image-overlay"></div>
           </div>
-        )}
-      </div>
 
-      {/* Name */}
-      <h3 className="text-center text-3xl font-bold mt-2 text-white">{title}</h3>
+          {/* Name with Enhanced Typography */}
+          <h3 className="card-title">{title}</h3>
 
-      {/* Batch */}
-      <p className="text-center text-lg text-gray-300 mb-4">{date}</p>
+          {/* Batch */}
+          <p className="card-batch">{date}</p>
+        </div>
 
-      {/* 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>
-        ))}
+        {/* Back Side of the Card */}
+        <div className="card-back">
+          {/* Achievements with Styling */}
+          <div className="achievements">
+            {description.split('|').map((achievement, index) => (
+              <p key={index} className="achievement">
+                {achievement.trim()}
+              </p>
+            ))}
+          </div>
+        </div>
       </div>
+
+      {/* Decorative Element */}
+      <div className="decorative-element"></div>
     </motion.div>
   );
 };