Add partners

src/content/config.ts

@@ -24,4 +24,15 @@ export const collections = {
       image: z.string().optional(),
     }),
   }),
+
+  partners: defineCollection({
+    type: "data",
+    schema: ({ image }) =>
+      z.object({
+        name: z.string(),
+        logo: image(),
+        url: z.string(),
+        height: z.number(),
+      }),
+  }),
 };

src/content/partners/justice-tech.yml

@@ -0,0 +1,4 @@
+name: Justice Tech Association
+logo: ./_images/justice-tech-association.png
+url: https://justicetechassociation.org/
+height: 46

src/content/partners/malgbtcc.yml

@@ -0,0 +1,4 @@
+name: Massachusetts LGBT Chamber of Commerce
+logo: ./_images/malgbtcc.png
+url: https://malgbtcc.org/
+height: 44

src/content/partners/name-coalition.yml

@@ -0,0 +1,4 @@
+name: NAME Coalition
+logo: ./_images/name-coalition.png
+url: https://namecoalition.org/
+height: 60

src/content/partners/nglcc.yml

@@ -0,0 +1,4 @@
+name: National LGBT Chamber of Commerce
+logo: ./_images/nglcc.png
+url: https://nglcc.org/
+height: 50

src/pages/index.astro

@@ -4,6 +4,9 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import { RiArrowRightLine } from "react-icons/ri";
 import illustration from "./_images/namesake-form.png";
 import formIllustration from "./_images/form-snail.png";
+import { getCollection } from "astro:content";
+
+const partners = await getCollection("partners");
 ---
 
 <BaseLayout
@@ -62,6 +65,29 @@ import formIllustration from "./_images/form-snail.png";
         </div>
       </form>
     </div>
+    <div class="partners">
+      <h2>In partnership with</h2>
+      <ul>
+        {
+          partners.map((partner) => (
+            <li>
+              <a
+                href={partner.data.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`Visit ${partner.data.name}`}
+              >
+                <Image
+                  src={partner.data.logo}
+                  alt={partner.data.name}
+                  height={partner.data.height}
+                />
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
   </div>
 </BaseLayout>
 
@@ -95,23 +121,65 @@ import formIllustration from "./_images/form-snail.png";
   .home {
     display: grid;
     grid-template-columns: minmax(460px, 1fr) minmax(0, 1fr);
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+      "content illustration"
+      "partners partners";
     gap: var(--space-2xl);
 
     @media (width < 800px) {
-      display: block;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "content"
+        "partners";
 
       .illustration {
         display: none;
       }
     }
   }
 
-  img {
+  .illustration {
+    grid-area: illustration;
     width: 600px;
     max-width: 100%;
     order: 1;
   }
 
+  .content {
+    grid-area: content;
+  }
+
+  .partners {
+    grid-area: partners;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding-block-start: var(--space-l);
+    margin-inline: calc(var(--space-l) * -1);
+    min-width: 0;
+
+    h2 {
+      font-size: var(--step-1);
+    }
+
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      overflow-x: scroll;
+      max-width: 100%;
+      align-items: center;
+      padding: var(--space-l);
+      gap: var(--space-xl) var(--space-2xl);
+    }
+
+    img {
+      max-width: 300px;
+    }
+  }
+
   h1 {
     margin-block-end: var(--space-xl);
     margin-inline-start: -0.03em;