fix: changes made to cards

ngoworldcommunity · Feb 11, 2024 · f090904 · f090904
1 parent d4c8418
commit f090904
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 141 deletions.
diff --git a/src/components/private/cards/ProductsCard.jsx b/src/components/private/cards/ProductsCard.jsx
diff --git a/src/components/private/cards/SingleClubEvent/SingleClubEvent.jsx b/src/components/private/cards/SingleClubEvent/SingleClubEvent.jsx
diff --git a/src/components/private/cards/club/ClubCard.jsx b/src/components/private/cards/club/ClubCard.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Button } from "../../../shared";
+import "./style.css";
+
+const DetailedClub = ({ club }) => {
+  return (
+    <>
+      <div className="detailedclub_parent">
+        <div className="detailedclub_header">
+          <h1>{club?.name || club?.Eventname}</h1>
+          <img
+            src="https://api.freelogodesign.org/assets/thumb/logo/bdd55f703a074abb8bf50c0d3891c0a9_400.png?t=638314396148720000"
+            alt=""
+          />
+        </div>
+
+        <p className="detailedclub_body">{club?.tagLine}</p>
+
+        <div className="detailedclub_cta">
+          <Button variant="solid" className="detailedclub_ctabutton">
+            Donate
+          </Button>
+          <Button
+            variant="outline"
+            to={`/club/${club?.username}`}
+            className="detailedclub_ctabutton"
+          >
+            Read More
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DetailedClub;
diff --git a/...cards/SingleClubEvent/SingleClubEvent.css → src/components/private/cards/club/style.css b/...cards/SingleClubEvent/SingleClubEvent.css → src/components/private/cards/club/style.css
@@ -1,91 +1,104 @@
-.sc_parent {
+.detailedclub_parent {
   width: 400px;
-  border: 1px solid #e26959;
+  border: 1px solid #6b2615;
   border-radius: 10px;
   padding: 18px;
-  max-height: 236px;
-  min-height: 236px;
+  /* max-height: 236px;
+  min-height: 236px; */
+  height: 250px;
   transition: all 0.3s ease-in-out;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  row-gap: 1rem;
+}
+
+.detailedclub_parent:hover {
+  border: 1px solid #ff5b31;
 }
 
-.sc_parent:hover {
+.detailedclub_parent:hover {
   -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);
   cursor: default;
 }
 
-.sc_header {
+.detailedclub_header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.sc_header h2 {
-  font-size: 25px;
-  color: #28183b;
+.detailedclub_header h1 {
+  font-size: 23px;
+  color: #6b2615;
   font-weight: 800;
-  font-family: "Inter", sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
 
-.sc_header img {
+.detailedclub_header img {
   width: 50px;
   height: 50px;
-  border-radius: 50%;
+  border-radius: 5px;
+  object-fit: cover;
 }
 
-.sc_cta {
+.detailedclub_cta {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 2rem;
 }
 
-.sc_ctabutton {
-  margin-top: 1rem;
+.detailedclub_ctabutton {
   width: 100%;
   padding: 15px 5px !important;
   height: 45px;
+  border-radius: 5px;
+}
+
+.detailedclub_body {
+  font-family: "Poppins", sans-serif;
+  max-height: calc(2 * 1.5em);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #6b2615;
+  font-size: 16px;
 }
 
 @media screen and (max-width: 430px) {
-  .sc_parent {
+  .detailedclub_parent {
     width: 100%;
     padding: 12px;
     min-height: 236px;
     max-height: none;
   }
 
-  .sc_header {
+  .detailedclub_header {
     margin-bottom: 1rem;
   }
 
-  .sc_header h2 {
+  .detailedclub_header h1 {
     font-size: 21px;
     text-align: left;
   }
 
-  .sc_header img {
+  .detailedclub_header img {
     width: 45px;
     height: 45px;
   }
 
-  .sc_body {
+  .detailedclub_body {
     width: 100%;
   }
-  .sc_cta {
+  .detailedclub_cta {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: 1rem;
   }
-
-  .sc_cta button {
-    margin-top: 1rem;
-    height: 45px;
-  }
 }
diff --git a/src/components/private/index.js b/src/components/private/index.js
@@ -1,3 +1,3 @@
-export { default as SingleClubEvent } from "./cards/SingleClubEvent/SingleClubEvent";
-export { default as Landing } from "./landing/Landing";
+export { default as DetailedClub } from "./cards/club/ClubCard";
 export { default as MilanInfoBanner } from "./infoBanner/Milaninfobanner";
+export { default as Landing } from "./landing/Landing";
diff --git a/src/components/private/infoBanner/Landing.css b/src/components/private/infoBanner/Landing.css
@@ -47,7 +47,7 @@
   color: var(--Brand-brand-900, #6b2615);
   text-align: center;
   font-family: "Montserrat", sans-serif;
-  font-size: 4.2rem;
+  font-size: 6rem;
   margin-top: 6rem;
   font-style: normal;
   font-weight: 800;

diff --git a/src/components/private/landing/Landing.css b/src/components/private/landing/Landing.css
@@ -47,11 +47,10 @@
   color: var(--Brand-brand-900, #6b2615);
   text-align: center;
   font-family: "Montserrat", sans-serif;
-  font-size: 4.2rem;
+  font-size: 4rem;
   margin-top: 6rem;
   font-style: normal;
   font-weight: 800;
-
   text-transform: capitalize;
   z-index: 3;
 }
@@ -63,7 +62,7 @@
 .landing_parent > h2 {
   color: var(--Brand-brand-900, #6b2615);
   font-family: "Poppins", sans-serif;
-  font-size: 20px;
+  font-size: 19px;
   font-style: normal;
   font-weight: 400;
   line-height: 24.18px; /* 100.75% */
@@ -80,13 +79,21 @@
 }
 
 .landing_signup {
+  border-radius: 50px;
+  padding: 0.7rem 1.5rem;
+  font-family: "Poppins", sans-serif;
+  font-size: 17px;
+  font-style: normal;
+  width: 180px;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  border: none;
+  gap: 10px;
+  margin-top: 4rem;
   margin: auto;
   z-index: 3;
-  margin-top: 4rem;
-  /* width: 170px !important; */
-  width: auto;
-  padding: 1rem 2rem;
-  gap: 20px;
 }
 
 .landing_signup:hover {
@@ -99,7 +106,7 @@
 }
 
 .landing_signup > span {
-  font-size: 20px;
+  font-size: 18px;
 }
 
 .landing_marque {

diff --git a/src/components/shared/header/Header.css b/src/components/shared/header/Header.css
@@ -12,27 +12,36 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  gap: 2rem;
+  gap: 1rem;
 }
 
 .pageheader_header1 {
-  font-size: 60px;
-  color: #28183b;
-  line-height: 80px;
-  font-weight: 900;
-  font-family: "Inter", sans-serif;
+  color: var(--Brand-brand-900, #6b2615);
+  text-align: center;
+  font-family: "Montserrat", sans-serif;
+  font-size: 3.5rem;
   margin-top: 2rem;
+  font-style: normal;
+  font-weight: 900;
+  text-transform: capitalize;
+  z-index: 3;
   text-align: center;
+  line-height: 1;
 }
 
 .pageheader_header2 {
+  color: var(--Brand-brand-900, #6b2615);
   font-family: "Poppins", sans-serif;
-  color: black;
   font-size: 18px;
-  margin-top: 0px;
-  letter-spacing: 1px;
-  width: 60%;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24.18px; /* 100.75% */
+  letter-spacing: 1.2px;
   text-align: center;
+  width: 70%;
+  margin: auto;
+  margin-top: 1rem;
+  z-index: 3;
 }
 
 @media screen and (max-width: 500px) {
@@ -47,8 +56,9 @@
   }
 
   .pageheader_header1 {
-    font-size: 40px;
+    font-size: 45px;
     line-height: 43px;
+    text-align: left;
   }
 
   .pageheader_header2 {
@@ -58,6 +68,7 @@
     margin-top: 0px;
     letter-spacing: 1px;
     width: 95%;
-    text-align: center;
+    text-align: left;
+    word-break: break-all;
   }
 }