Implements mock up discussed in astrolicious#45

Author: gingerchew

apps/site/src/components/FriendsCard.astro

@@ -12,20 +12,20 @@ const { name, logo, url, slogan } = friend.data;
 
 <div
   class:list={[
-    "bg-white p-4 rounded-2xl border border-gray-200 shadow-sm",
+    "bg-white p-4 rounded-2xl border border-gray-200 shadow-sm relative",
     className,
   ]}
 >
-  <a href={url}>
+  <a href={url} class="grid grid-cols-[1fr_2fr] items-center gap-[1ch]">
     <div class="flex justify-center items-center">
-      <img class="w-12" src={logo} alt={name + "logo"} />
+      <img class="w-20 h-20 object-contain" src={logo} alt={name + "logo"} />
     </div>
     <h2
-      class="font-extrabold uppercase text-2xl text-primary-950 max-w-2xl font-heading"
+      class="font-extrabold uppercase text-2xl text-primary-950 max-w-2xl font-heading text-balance"
     >
       {name}
     </h2>
-    <div class="mt-2 text-gray-700">
+    <div class="mt-2 text-gray-700 col-[span_2] text-pretty">
       {slogan ?? ""}
     </div>
   </a>

apps/site/src/pages/index.astro

@@ -48,7 +48,7 @@ const friends = await getCollection('friends');
       >
         Friends
       </h1>
-      <div class="mt-12 inline-flex items-center gap-4">
+      <div class="mt-12 grid sm:grid-cols-[repeat(2,1fr)] lg:grid-cols-[repeat(3,1fr)] items-center gap-4 items-stretch">
         {friends.map((friend) => <FriendsCard {friend} />)}
       </div>
     </div>