diff --git a/src/assets/pictures/Banner/clubbanner.jpg b/src/assets/pictures/Banner/clubbanner.jpg new file mode 100644 index 00000000..6f2c969f Binary files /dev/null and b/src/assets/pictures/Banner/clubbanner.jpg differ diff --git a/src/components/private/cards/club/ClubCard.css b/src/components/private/cards/club/ClubCard.css index fbc82024..2a2a7f6d 100644 --- a/src/components/private/cards/club/ClubCard.css +++ b/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; diff --git a/src/components/shared/buttons/globalbutton/Button.module.css b/src/components/shared/buttons/globalbutton/Button.module.css index 44c804bd..11160a98 100644 --- a/src/components/shared/buttons/globalbutton/Button.module.css +++ b/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; } diff --git a/src/components/shared/cards/club/ClubCard.jsx b/src/components/shared/cards/club/ClubCard.jsx new file mode 100644 index 00000000..1b1a3344 --- /dev/null +++ b/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 ( +
+
+ +
+

{club?.name}

+

{club?.tagLine}

+
+
+ +
+
+
+ + + +
+

200+ Members

+
+ + {window.innerWidth > 500 ? ( + + ) : ( + + + + + + )} +
+
+ ); +}; + +export default ClubCard; diff --git a/src/components/shared/cards/club/ClubCard.scss b/src/components/shared/cards/club/ClubCard.scss new file mode 100644 index 00000000..220bfa3e --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/shared/index.js b/src/components/shared/index.js index 85204c03..668310a6 100644 --- a/src/components/shared/index.js +++ b/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"; diff --git a/src/pages/clubs/Clubs.css b/src/pages/clubs/Clubs.css index b390c234..4ea2a71f 100644 --- a/src/pages/clubs/Clubs.css +++ b/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 { diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx index c8a64de0..1739ee5c 100644 --- a/src/pages/clubs/Clubs.jsx +++ b/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 = () => {
-
- -
    - {clubs?.map((club) => ( - +
    + {clubs?.map((club, id) => ( + ))} -
+