Merge pull request #1218 from dacadeorg/fix/mobile-community-card

fix: community card in the home page

Author: musayann

src/components/cards/community/index.tsx

@@ -59,9 +59,9 @@ export default function CommunityCard({ showRewards = true, community }: Communi
   }, [colors]);
 
   return (
-    <ThemeWrapper colors={community.colors}>
+    <ThemeWrapper colors={community.colors} className="mt-2 md:mt-0">
       <div onClick={() => router.push(path)} className="block h-full hover:cursor-pointer">
-        <div className="flex flex-col h-full p-6 pb-3 space-y-5 divide-y-2 group bg-theme-primary text-theme-text divide-dotted divide-theme-accent">
+        <div className="flex flex-col h-full p-6 space-y-5 divide-y-2 group bg-theme-primary text-theme-text divide-dotted divide-theme-accent">
           <div className="flex-grow">
             <div className="flex flex-col justify-between space-y-5 sm:flex-row lg:flex-col 2xl:flex-row">
               <div className="text-.5xl md:text-2xl max-w-sm min-h-2xs md:min-h-3xs lg:min-h-2xs xl:min-h-2xs font-medium pb-5">

src/components/sections/homepage/Communities.tsx

@@ -31,7 +31,7 @@ export default function CommunitiesSection({ communities }: { communities: Commu
           <div className="message-bubble">{t("page.index.communities.subtitle")}</div>
         </div>
       </div>
-      <div className="mt-7 grid grid-cols-1 lg:grid-cols-2 gap-x-5 gap-y-0.5 lg:gap-y-5 md:gap-y-5 justify-stretch-items">
+      <div className="mt-5 md:mt-7 grid grid-cols-1 lg:grid-cols-2 gap-x-5 gap-y-0.5 lg:gap-y-5 md:gap-y-5 justify-stretch-items">
         {communities?.map((community) => (
           <CommunityCard key={community.id} community={community} />
         ))}