Merge branch 'main' into Nayan-Desai

src/components/private/cards/club/ClubCard.css

@@ -3,8 +3,6 @@
   border: 1px solid #6b2615;
   border-radius: 10px;
   padding: 18px;
-  /* max-height: 236px;
-  min-height: 236px; */
   height: 250px;
   transition: all 0.3s ease-in-out;
   display: flex;

src/components/shared/buttons/globalbutton/Button.module.css

@@ -1,22 +1,5 @@
-.btn {
-  border-radius: 6px;
-  padding: 0.6rem;
-  font-family: "Poppins", sans-serif;
-  font-size: 17px;
-  font-style: normal;
-  width: 140px;
-  font-weight: 500;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  border: none;
-  gap: 10px;
-  transition: all 0.2s ease-in-out;
-}
-
 .solid {
-  background: #ff5b31;
-  border: 1px solid #ff5b31;
+  background-color: #ff5b31;
   transition: all 0.2s ease-in-out;
   color: white;
 }
@@ -49,6 +32,6 @@
   opacity: 0.3;
 }
 
-.btn.bold {
-  font-weight: 600;
+.btn {
+  cursor: pointer;
 }

src/components/shared/cards/club/ClubCard.jsx

@@ -0,0 +1,66 @@
+import { Link } from "react-router-dom";
+import clubBanner from "../../../../assets/pictures/Banner/clubbanner.jpg";
+import Button from "../../buttons/globalbutton/Button";
+import "./ClubCard.scss";
+
+const ClubCard = ({ club }) => {
+  return (
+    <div className="clubcard_parent">
+      <div className="clubcard_top">
+        <img src={clubBanner} alt="" />
+        <div className="clubcard_text">
+          <h1>{club?.name}</h1>
+          <p>{club?.tagLine}</p>
+        </div>
+      </div>
+
+      <div className="clubcard_ctadiv">
+        <div className="cta_membersdiv">
+          <div className="cta_members">
+            <img
+              src="https://avatars.githubusercontent.com/u/72851613?v=4"
+              alt=""
+            />
+            <img
+              src="https://avatars.githubusercontent.com/u/72851613?v=4"
+              alt=""
+            />
+            <img
+              src="https://avatars.githubusercontent.com/u/72851613?v=4"
+              alt=""
+            />
+          </div>
+          <p>200+ Members</p>
+        </div>
+
+        {window.innerWidth > 500 ? (
+          <Button
+            variant="solid"
+            to={`/club/${club?.username}`}
+            className="clubcard_readmore"
+          >
+            Read More
+          </Button>
+        ) : (
+          <Link to={`/club/${club?.username}`}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="21"
+              height="21"
+              viewBox="0 0 29 29"
+              fill="none"
+              className="clubcard_cta_arrow"
+            >
+              <path
+                d="M22.6379 1.68188C23.2552 1.68226 23.8472 1.92766 24.2837 2.36418C24.7202 2.80069 24.9656 3.39262 24.966 4.00994L24.966 22.6784C24.9656 23.2957 24.7202 23.8877 24.2837 24.3242C23.8472 24.7607 23.2552 25.0061 22.6379 25.0065L3.96944 25.0065C3.36618 24.9848 2.7948 24.7302 2.3754 24.296C1.956 23.8619 1.72123 23.2821 1.72043 22.6784C1.72123 22.0748 1.956 21.4949 2.3754 21.0608C2.79481 20.6266 3.36618 20.372 3.96943 20.3503L17.0154 20.3503L0.675002 4.00994C0.238132 3.57307 -0.00729571 2.98055 -0.00729703 2.36273C-0.00729566 1.7449 0.238133 1.15238 0.675002 0.715508C1.11187 0.278639 1.7044 0.0332108 2.32222 0.0332088C2.94005 0.0332095 3.53257 0.278639 3.96944 0.715508L20.3098 17.0559L20.3098 4.00994C20.3102 3.39262 20.5556 2.80069 20.9921 2.36418C21.4286 1.92766 22.0206 1.68226 22.6379 1.68188Z"
+                fill="white"
+              />
+            </svg>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ClubCard;

src/components/shared/cards/club/ClubCard.scss

@@ -0,0 +1,181 @@
+.clubcard_parent {
+  display: inline-flex;
+  padding: 25px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  border-radius: 16px;
+  border: 1px solid var(--Neutral-G30, #f0efef);
+  background: #fff;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+  width: 380px;
+  transition: all 0.3s ease-in-out;
+
+  @media screen and (max-width: 500px) {
+    padding: 12px;
+    max-width: 100vw;
+  }
+
+  &:hover {
+    border: 1px solid #ff5a318a;
+    -webkit-box-shadow: 0px 0px 20px 7px rgba(226, 105, 89, 0.32);
+    -moz-box-shadow: 0px 0px 20px 7px rgba(226, 105, 89, 0.32);
+    box-shadow: 0px 0px 20px 7px rgba(226, 105, 89, 0.32);
+    transition: all 0.3s ease-in-out;
+    cursor: default;
+  }
+
+  .clubcard_top {
+    display: flex;
+    gap: 10px;
+
+    flex-direction: column;
+
+    @media screen and (max-width: 500px) {
+      flex-direction: row;
+      gap: 15px;
+    }
+
+    img {
+      align-self: stretch;
+      border-radius: 16px;
+      object-fit: cover;
+      max-width: 100%;
+      @media screen and (max-width: 500px) {
+        width: 110px;
+        height: 110px;
+      }
+    }
+
+    .clubcard_text {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      @media screen and (max-width: 500px) {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        align-self: stretch;
+        justify-content: space-between;
+      }
+
+      h1 {
+        align-self: stretch;
+        color: var(--Neutral-G900, #3f3836);
+        text-align: center;
+        font-family: var(--poppins);
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        letter-spacing: 0.4px;
+
+        @media screen and (max-width: 500px) {
+          text-align: left;
+          // truncate to 2 lines
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      p {
+        align-self: stretch;
+        color: var(--Neutral-G600, #625c5a);
+        text-align: center;
+        font-family: var(--outfit);
+        font-size: 17px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        letter-spacing: 0.32px;
+
+        @media screen and (max-width: 500px) {
+          text-align: left;
+          // truncate to 2 lines
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  .clubcard_ctadiv {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 10px;
+
+    .cta_membersdiv {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      // @media screen and (max-width: 500px) {
+      //   display: none;
+      // }
+
+      img {
+        width: 34px;
+        height: 34px;
+        max-width: 34px;
+        max-height: 34px;
+        outline: none;
+        background: none;
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        overflow: hidden;
+        border: 3px solid rgb(255, 255, 255);
+        margin-left: -16px;
+      }
+      p {
+        margin: 0;
+        font-family: var(--outfit);
+        font-size: 15px;
+        font-weight: 500;
+      }
+    }
+
+    .clubcard_readmore {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+
+      border-radius: 6px;
+
+      white-space: nowrap;
+      font-family: var(--outfit) !important;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: normal;
+      letter-spacing: 0.32px;
+    }
+
+    .clubcard_cta_arrow {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      background-color: var(--primary);
+      font-size: 15px;
+      font-weight: 400;
+      line-height: normal;
+      letter-spacing: 0.4px;
+      rotate: -90deg;
+      width: 33px;
+      height: 33px;
+      padding: 7px;
+      border-radius: 50%;
+      object-fit: contain;
+    }
+  }
+}

src/components/shared/index.js

@@ -1,6 +1,7 @@
 export { default as AuthButton } from "./buttons/authbutton/AuthButton";
 export { default as BacktoTop } from "./buttons/backtotopbutton/BacktoTop";
 export { default as Button } from "./buttons/globalbutton/Button";
+export { default as ClubCard } from "./cards/club/ClubCard";
 export { default as ComingSoon } from "./comingSoon/ComingSoon";
 export { default as Footer } from "./footer/Footer";
 export { default as Header } from "./header/Header";

src/pages/clubs/Clubs.css

@@ -1,24 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap");
 
 .clubspage_main_parent {
-  margin-top: 3rem;
+  margin-top: 8rem;
   margin-bottom: 3rem;
 }
 
 .clubspage_cardsdiv {
-  margin-top: 5rem;
-  margin-bottom: 0;
-  padding-left: 0;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
   gap: 2rem;
+  justify-content: center;
+  margin-top: 5rem;
+  margin-bottom: 0;
 }
 
 @media screen and (max-width: 500px) {
   .clubspage_main_parent {
     margin-top: 2rem;
     margin-bottom: 3rem;
+    padding: 0px 10px;
   }
 
   .clubspage_cardsdiv {

src/pages/clubs/Clubs.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import useSWR from "swr";
-import { DetailedClub } from "../../components/private";
-import { Footer, Header, Navbar } from "../../components/shared";
+import { Footer, Navbar } from "../../components/shared";
+import ClubCard from "../../components/shared/cards/club/ClubCard";
 import { clubEndpoints } from "../../static/ApiEndpoints";
 import ComponentHelmet from "../../utils/ComponentHelmet";
 import fetcher from "../../utils/Fetcher";
@@ -21,13 +21,11 @@ const Clubs = () => {
 
       <main className="container">
         <div className="clubspage_main_parent">
-          <Header type="clubs" />
-
-          <ul className="clubspage_cardsdiv">
-            {clubs?.map((club) => (
-              <DetailedClub key={club?._id} club={club} />
+          <div className="clubspage_cardsdiv">
+            {clubs?.map((club, id) => (
+              <ClubCard club={club} key={id} />
             ))}
-          </ul>
+          </div>
         </div>
       </main>