Merge pull request #107 from goteo/feature/community-cards-vertical-layout

Refactor component layout and styles

src/components/project/ProjectCommunityAnonymous.svelte

@@ -23,13 +23,15 @@
 </script>
 
 <div
-    class="flex cursor-pointer overflow-hidden rounded-4xl bg-white transition-shadow duration-200 ease-in-out hover:shadow-lg"
+    class="flex cursor-pointer overflow-hidden rounded-4xl bg-white transition-shadow duration-200 ease-in-out hover:shadow-lg flex-col md:flex-row"
 >
-    <div class="flex w-1/3 items-center justify-center bg-blue-500">😀</div>
-    <div class="flex w-2/3 flex-col gap-4 p-6">
-        <div class="text-secondary flex flex-col items-end gap-2 font-bold">
+    <div class="flex w-full md:w-1/3 items-center justify-center h-32 md:h-auto overflow-hidden">
+        <img src="/imgs/card-comunidad.png" alt="Community donation" class="w-full h-full object-cover" />
+    </div>
+    <div class="flex w-full md:w-2/3 flex-col gap-4 p-6">
+        <div class="text-secondary flex flex-col items-start md:items-end gap-2 font-bold">
             <span>{$t("project.tabs.community.matchfunding.contribution")}</span>
-            <div class="flex flex-col items-end text-2xl">
+            <div class="flex flex-col items-start md:items-end text-2xl">
                 <div class="flex items-center gap-2 text-sm">
                     <span>
                         {length}
@@ -43,10 +45,10 @@
                 </div>
             </div>
         </div>
-        <div class="text-secondary line-clamp-2 text-2xl font-bold">
+        <div class="text-secondary line-clamp-2 text-2xl font-bold text-left md:text-right">
             {$t("project.tabs.community.anonymous.title")}
         </div>
-        <p class="line-clamp-2 text-sm text-[#575757]">
+        <p class="line-clamp-2 text-sm text-[#575757] text-left md:text-right">
             {$t("project.tabs.community.anonymous.description")}
         </p>
     </div>