fix: uniform community card height and add sui certificates

Author: serapieTuyishime

public/img/communities/sui.svg

@@ -74,7 +74,7 @@ export default function CommunityCard({ showRewards = true, community }: Communi
             </div>
             <div className="flex flex-col items-start justify-start max-w-xs -mt-4 md:flex-row lg:flex-col md:-mt-7 md:max-w-lg">
               {showRewards && reward && (
-                <div className="text-sm">
+                <div className="text-sm flex">
                   <RewardBadge reward={{ token: reward.token }} styles={rewardBadgeStyle} />
                 </div>
               )}

src/components/cards/community/index.tsx

@@ -27,8 +27,8 @@ export default function CommunitySection(): ReactElement {
             <p className="mt-2 text-xl tracking-tight md:text-.5xl leading-tight max-w-text-sm lg:hidden">{community?.summary}</p>
             <p className="hidden mt-4 tracking-tight text-lg xl:text-.5xl max-w-text-md font-extralight lg:block">{community?.summary}</p>
           </div>
-          <div className="self-end w-36 md:w-1/2 max-w-lg">
-            {community?.icon && <Image src={`${community?.icon}`} alt={community?.name || ""} className="relative w-full" width={300} height={300} />}
+          <div className="self-end w-36 h-128 md:w-1/2 max-w-lg">
+            {community?.icon && <Image src={`${community?.icon}`} alt={community?.name || ""} className="relative w-full h-full" width={300} height={300} />}
           </div>
         </div>
         <div className="flex flex-col max-w-xs mt-0 sm:-mt-15 lg:-mt-8 md:max-w-xl lg:flex-row lg:items-center">

src/components/sections/communities/overview/MainHeader.tsx

@@ -7,6 +7,7 @@ import NearIcon from "@/icons/certificates/Near.svg";
 import IcpIcon from "@/icons/certificates/Icp.svg";
 import AiIcon from "@/icons/certificates/Ai.svg";
 import Solidity from "@/icons/certificates/Solidity.svg";
+import SuiIcon from "@/icons/certificates/Sui.svg";
 
 /**
  * Interface for the coin props
@@ -61,6 +62,10 @@ const certificates = [
     name: "ai",
     icon: <AiIcon />,
   },
+  {
+    name: "sui",
+    icon: <SuiIcon />,
+  },
 ];
 
 /**

src/components/ui/Certificate.tsx

@@ -9,6 +9,7 @@ import NEARIcon from "@/icons/tokens/NEAR.svg";
 import USDCIcon from "@/icons/tokens/USDC.svg";
 import NFTIcon from "@/icons/tokens/NFT.svg";
 import ICPcon from "@/icons/tokens/ICP.svg";
+import SuiIcon from "@/icons/tokens/Sui.svg";
 
 /**
  * Interface for the coin props
@@ -109,6 +110,12 @@ const coins = [
     bgColor: "#2775ca",
     textColor: "#FFFFFF",
   },
+  {
+    token: "SUI",
+    icon: <SuiIcon />,
+    bgColor: "#4DA2FF",
+    textColor: "#FFFFFF",
+  },
 ];
 
 /**

src/components/ui/Coin.tsx

@@ -48,6 +48,7 @@ module.exports = {
         62: "15.5rem",
         96.5: "25.5rem",
         98: "28rem",
+        128: "32rem",
         99: "45.625rem",
         "10.5/12": "90%",
         "1/100": "1%",