diff --git a/src/content/config.ts b/src/content/config.ts index 50653df..0607b98 100644 --- a/src/content/config.ts +++ b/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(), + }), + }), }; diff --git a/src/content/partners/_images/justice-tech-association.png b/src/content/partners/_images/justice-tech-association.png new file mode 100644 index 0000000..9143443 Binary files /dev/null and b/src/content/partners/_images/justice-tech-association.png differ diff --git a/src/content/partners/_images/malgbtcc.png b/src/content/partners/_images/malgbtcc.png new file mode 100644 index 0000000..3d60b7f Binary files /dev/null and b/src/content/partners/_images/malgbtcc.png differ diff --git a/src/content/partners/_images/name-coalition.png b/src/content/partners/_images/name-coalition.png new file mode 100644 index 0000000..0370977 Binary files /dev/null and b/src/content/partners/_images/name-coalition.png differ diff --git a/src/content/partners/_images/nglcc.png b/src/content/partners/_images/nglcc.png new file mode 100644 index 0000000..b0e6eba Binary files /dev/null and b/src/content/partners/_images/nglcc.png differ diff --git a/src/content/partners/justice-tech.yml b/src/content/partners/justice-tech.yml new file mode 100644 index 0000000..282a04f --- /dev/null +++ b/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 diff --git a/src/content/partners/malgbtcc.yml b/src/content/partners/malgbtcc.yml new file mode 100644 index 0000000..7aad80f --- /dev/null +++ b/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 diff --git a/src/content/partners/name-coalition.yml b/src/content/partners/name-coalition.yml new file mode 100644 index 0000000..756f517 --- /dev/null +++ b/src/content/partners/name-coalition.yml @@ -0,0 +1,4 @@ +name: NAME Coalition +logo: ./_images/name-coalition.png +url: https://namecoalition.org/ +height: 60 diff --git a/src/content/partners/nglcc.yml b/src/content/partners/nglcc.yml new file mode 100644 index 0000000..5b890ae --- /dev/null +++ b/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 diff --git a/src/pages/index.astro b/src/pages/index.astro index 6b09fd7..445cc7b 100644 --- a/src/pages/index.astro +++ b/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"); --- +
+

In partnership with

+ +
@@ -95,10 +121,17 @@ 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; @@ -106,12 +139,47 @@ import formIllustration from "./_images/form-snail.png"; } } - 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;