Add namespace as corporate sponsor

Author: mitchellh

docs/sponsor.mdx

@@ -144,3 +144,16 @@ for several reasons:
   all the overhead of a nonprofit. With Hack Club, we pay a similar fee (7%),
   but that fee goes towards another non-profit with a mission we support.
   As Zach Latta, Hack Club's founder, put it: "it is a good-for-good trade."
+
+## Corporate Sponsors
+
+We're grateful for the companies that support Ghostty's development through
+infrastructure, services, or financial contributions.
+
+<SponsorCard
+  name="Namespace"
+  logo="/images/sponsors/namespace.svg"
+  href="https://namespace.so"
+  description="Namespace sponsors all of Ghostty's continuous integration infrastructure, enabling fast and reliable builds across all supported platforms."
+  since="2023"
+/>

public/images/sponsors/namespace.svg

@@ -5,6 +5,7 @@ import ButtonLinks from "../button-links";
 import Callout, { Caution, Important, Note, Tip, Warning } from "../callout";
 import CardLinks from "../card-links";
 import DonateCard from "../donate-card";
+import SponsorCard from "../sponsor-card";
 import CodeBlock from "../codeblock";
 import GitHub from "../github";
 import { processGitHubLinks } from "../github/mdx";
@@ -95,6 +96,7 @@ export default function CustomMDX({ content }: CustomMDXProps) {
           CardLinks,
           ButtonLinks,
           DonateCard,
+          SponsorCard,
           GitHub,
           Video,
           /* Callout Variants */

src/components/custom-mdx/index.tsx

@@ -0,0 +1,50 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px solid var(--gray-3);
+  background: var(--gray-1);
+  text-decoration: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--gray-4);
+      background: hsl(var(--brand-color-hsl) / 0.03);
+    }
+  }
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 48px;
+}
+
+.logo {
+  height: 40px;
+  width: auto;
+  object-fit: contain;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.description {
+  margin: 0;
+  color: var(--gray-6);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.since {
+  font-size: 12px;
+  color: var(--gray-5);
+  font-weight: 500;
+}

src/components/sponsor-card/SponsorCard.module.css

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+import { P } from "../text";
+import s from "./SponsorCard.module.css";
+
+interface SponsorCardProps {
+  name: string;
+  logo: string;
+  href: string;
+  description: string;
+  since?: string;
+}
+
+export default function SponsorCard({
+  name,
+  logo,
+  href,
+  description,
+  since,
+}: SponsorCardProps) {
+  return (
+    <Link href={href} className={s.card} target="_blank" rel="noopener noreferrer">
+      <div className={s.logoContainer}>
+        <Image
+          src={logo}
+          alt={`${name} logo`}
+          width={180}
+          height={48}
+          className={s.logo}
+        />
+      </div>
+      <div className={s.content}>
+        <P className={s.description}>{description}</P>
+        {since && <span className={s.since}>Supporter since {since}</span>}
+      </div>
+    </Link>
+  );
+}