Merge pull request #162 from Asymtode712/CardFeat

Enhanced UI for the shareable Card Component

src/components/shared/Card.jsx

@@ -1,17 +1,32 @@
-import React from 'react'
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import '../../css/Card.css';
 
 const Card = ({ imgSrc, title, description, path, btnName }) => {
   return (
-    <div className="card" style={{ width: '18rem' }}>
-      <img src={imgSrc} alt="image" className='card-img-top' />
-      <div className="card-body">
-        <h5 className="card-title">{title}</h5>
-        <p className='card-text'>{description}</p>
-        <Link to={path} className='btn btn-dark'>{btnName}</Link>
+    <div className="glass-card">
+      <div className="glass-card-image-container">
+        <h5 className="glass-card-title">{title}</h5>
+        <hr class="solid"></hr>
+        <img src={imgSrc} alt={title} className="glass-card-image" />
       </div>
+      <div className="glass-card-content">
+        <p className="glass-card-description">{description}</p>
+        <Link to={path} className="glass-card-button">
+          {btnName}
+        </Link>
+      </div>    
     </div>
-  )
-}
+  );
+};
 
-export default Card;
+Card.propTypes = {
+  imgSrc: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  btnName: PropTypes.string.isRequired,
+};
+
+export default Card;

src/css/Card.css

@@ -0,0 +1,78 @@
+.glass-card {
+  width: 300px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  background: rgba(10, 10, 10, 0.55);
+  border: 1px solid rgba(85, 85, 85, 0.18);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.glass-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 30px rgba(31, 38, 135, 0.5);
+}
+
+hr.solid {
+  border-top: 3px solid #bbb;
+  width: 100%;
+}
+
+
+.glass-card-image-container {
+  position: relative;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.glass-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.glass-card:hover .glass-card-image {
+  transform: scale(1.1);
+}
+
+.glass-card-title {
+  color: #f5f5f5;
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-align: center;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.glass-card-content {
+  padding: 20px;
+}
+
+.glass-card-description {
+  font-size: 1rem;
+  margin-bottom: 20px;
+  line-height: 1.5;
+  color: #f5f5f5;
+}
+
+.glass-card-button {
+  display: inline-block;
+  padding: 5px 10px;
+  background-color: rgba(135, 67, 67, 0.9);
+  color: #fff;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 600;
+  transition: all 0.5s ease;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.glass-card-button:hover {
+  background: none;
+  border: 1px solid rgb(135,67,67);  
+  transform: translateX(10px);
+}