feat(winner):card-added

gtech-mulearn · Sep 14, 2023 · 79ec734 · 79ec734
1 parent 325f0b6
commit 79ec734
Show file tree

Hide file tree

Showing 5 changed files with 365 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Pages/Events/KKEMEventTemplate/Components/Card.jsx b/src/Pages/Events/KKEMEventTemplate/Components/Card.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import styles from "./Card.module.css";
+
+import { Link } from "react-router-dom";
+
+const Card = ({ name, image, link, description }) => {
+  return (
+    <>
+      <Link to={link}>
+        <div className={styles.card}>
+          <div className={styles.card_image}>
+            <img src={image} alt="domain images" className={styles.card_img} />
+          </div>
+          <p className={styles.card_heading}>{name}</p>
+          <p className={styles.card_description}>{description}</p>
+          {link !== "#" && (
+            <Link to={link}>
+              <span className={styles.explore_more}>Explore More </span>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.1711 3.983L2.12965 14.0245L0.47998 12.3748L10.5203 2.33333H1.67115V0H14.5045V12.8333H12.1711V3.983Z"
+                  fill="#000738"
+                />
+              </svg>
+            </Link>
+          )}
+          {link === "#" && (
+            <span className={styles.explore_more}>Coming Soon!</span>
+          )}
+        </div>
+      </Link>
+    </>
+  );
+};
+
+export default Card;
diff --git a/src/Pages/Events/KKEMEventTemplate/Components/Card.module.css b/src/Pages/Events/KKEMEventTemplate/Components/Card.module.css
@@ -0,0 +1,90 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 16px;
+
+  width: 310px;
+  height: 475px;
+
+  background: #ffffff;
+  box-shadow: 8px 8px 28px rgba(0, 0, 0, 0.12);
+  border-radius: 17px;
+  margin: 1rem 0;
+  transition: 0.3s ease-in-out;
+}
+
+.card span {
+  text-transform: uppercase;
+}
+.card:hover {
+  transform: translateY(-7px);
+
+  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+/* .card:hover::after {
+    transform: translateY(0px);
+    transform: translateX(30px);
+  } */
+
+.card:hover span,
+.card:hover svg path {
+  color: royalblue;
+  fill: royalblue;
+}
+
+.card_image {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  width: 278px;
+  height: 214px;
+
+  background: #f3f3f3;
+  border-radius: 17px;
+}
+
+.card_img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 17px;
+}
+
+.card_heading {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 28px;
+  line-height: 40px;
+}
+
+.card_description {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.explore_more {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.readmore {
+  display: flex;
+}
+
+@media only screen and (min-width: 1000px) {
+  .card {
+    margin: 1rem;
+  }
+}
diff --git a/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./KKEMEventTemplate.module.css";
+import Card from "./Components/Card";
 
 const KKEMEventTemplate = () => {
   return (
@@ -65,6 +66,53 @@ const KKEMEventTemplate = () => {
 
       <div className={styles.winnerDetails}>
         <p className={styles.winnerDetailsHeading}>Winners Leaderboard</p>
+
+        <div className={styles.winnerDetailsListing}>
+          <div className={styles.winnerCards}>
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+            <Card
+              name="Learning Fest"
+              description="µLearn in association with KKEM brings you Learning Fest a series of bootcamps to improve your skills in various domains and the chance to earn Karma points and various other opportunities."
+              image="/assets/events/kkem/aboutImage.svg"
+              link="#"
+            />
+          </div>
+        </div>
       </div>
     </>
   );