diff --git a/src/components/card.tsx b/src/components/card.tsx
new file mode 100644
index 0000000000000..db5687f275f35
--- /dev/null
+++ b/src/components/card.tsx
@@ -0,0 +1,31 @@
+import {StaticImageData} from 'next/dist/shared/lib/get-img-props';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export function Card({
+  href,
+  image,
+  imageAlt,
+  title,
+  description,
+  className = '',
+}: {
+  description: string;
+  href: string;
+  image: string | StaticImageData;
+  imageAlt: string;
+  title: string;
+  className?: string;
+}) {
+  return (
+    <Link href={href} className={className}>
+      <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
+        <Image src={image} height={64} alt={imageAlt} className="object-contain" />
+        <div className="flex flex-col justify-center space-y-2">
+          <h3 className="text-xl font-medium">{title}</h3>
+          <p>{description}</p>
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/components/home.tsx b/src/components/home.tsx
index b8d3c7d507535..43efab32057de 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import Link from 'next/link';
 
 import {Banner} from 'sentry-docs/components/banner';
 import {SentryWordmarkLogo} from 'sentry-docs/components/wordmarkLogo';
@@ -15,6 +14,7 @@ import RocketImage from 'sentry-docs/imgs/rocket.png';
 import SecurityImage from 'sentry-docs/imgs/security.png';
 import SupportImage from 'sentry-docs/imgs/support.png';
 
+import {Card} from './card';
 import {Header} from './header';
 import {NavLink, NavLinkProps} from './navlink';
 import {PlatformFilter} from './platformFilter';
@@ -60,123 +60,88 @@ export async function Home() {
         <PlatformFilter platforms={sortedPlatforms} />
         <h2 className="text-2xl mt-16 mb-6 font-medium">Get to know us</h2>
         <div className="flex flex-wrap gap-6">
-          <Link href="/product/" className="w-full">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4">
-              <Image src={RocketImage} height={64} alt="Rocket image" />
-              <div className="space-y-2">
-                <h3 className="text-xl font-medium">What is Sentry?</h3>
-                <p>
-                  Application monitoring and debugging software considered “not bad” by 4
-                  million developers.
-                </p>
-              </div>
-            </div>
-          </Link>
-          <Link href="/organization" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image
-                src={OrganizationImage}
-                height={64}
-                alt="Organization image"
-                className="object-contain"
-              />
-              <div className="flex flex-col justify-center space-y-2">
-                <h3 className="text-xl font-medium">Organization settings</h3>
-                <p>Information for setting up your organization’s Sentry account.</p>
-              </div>
-            </div>
-          </Link>
-          <Link href="/pricing" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image
-                src={CalculatorImage}
-                height={64}
-                alt="Calculator image"
-                className="object-contain"
-              />
-              <div className="flex flex-col justify-center space-y-2">
-                <h3 className="text-xl font-medium">Pricing & Billing</h3>
-                <p>All about our pricing and billing structure.</p>
-              </div>
-            </div>
-          </Link>
-          <Link href="/api" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image
-                src={PlugImage}
-                height={64}
-                alt="Plug image"
-                className="object-contain"
-              />
-              <div className="flex flex-col justify-center space-y-2">
-                <h3 className="text-xl font-medium">API</h3>
-                <p>APIs for accessing Sentry programmatically.</p>
-              </div>
-            </div>
-          </Link>
-          <Link href="/cli" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image
-                src={TerminalImage}
-                height={64}
-                alt="Terminal image"
-                className="object-contain"
-              />
-              <div className="flex flex-col justify-center space-y-2">
-                <h3 className="text-xl font-medium">CLI</h3>
-                <p>How to use ‘sentry-cli’ on the command line.</p>
-              </div>
-            </div>
-          </Link>
-          <Link href="/security-legal-pii" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image
-                src={SecurityImage}
-                height={64}
-                alt="Stamped paper image"
-                className="object-contain"
-              />
-              <div className="flex flex-col justify-center space-y-2">
-                <h3 className="text-xl font-medium">Security, Legal & PII</h3>
-                <p>Security, compliance, and data-scrubbing processes.</p>
-              </div>
-            </div>
-          </Link>
-          <Link href="/concepts" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image
-                src={ConceptsImage}
-                height={64}
-                alt="Concept and references image"
-                className="object-contain"
-              />
-              <div className="flex flex-col justify-center space-y-2">
-                <h3 className="text-xl font-medium">Concepts & Reference</h3>
-                <p>Core concepts that make Sentry, Sentry.</p>
-              </div>
-            </div>
-          </Link>
+          <Card
+            className="w-full"
+            href="/product/"
+            image={RocketImage}
+            imageAlt="Rocket image"
+            title="What is Sentry?"
+            description="Application monitoring and debugging software considered “not bad” by 4 million developers."
+          />
+
+          <Card
+            className="w-full md:w-[calc(50%-12px)]"
+            href="/organization"
+            image={OrganizationImage}
+            imageAlt="Organization image"
+            title="Organization settings"
+            description="Information for setting up your organization's Sentry account."
+          />
+
+          <Card
+            className="w-full md:w-[calc(50%-12px)]"
+            href="/pricing"
+            image={CalculatorImage}
+            imageAlt="Calculator image"
+            title="Pricing & Billing"
+            description="All about our pricing and billing structure."
+          />
+
+          <Card
+            className="w-full md:w-[calc(50%-12px)]"
+            href="/api"
+            image={PlugImage}
+            imageAlt="Plug image"
+            title="API"
+            description="APIs for accessing Sentry programmatically."
+          />
+
+          <Card
+            className="w-full md:w-[calc(50%-12px)]"
+            href="/cli"
+            image={TerminalImage}
+            imageAlt="Terminal image"
+            title="CLI"
+            description="How to use ‘sentry-cli’ on the command line."
+          />
+
+          <Card
+            className="w-full md:w-[calc(50%-12px)]"
+            href="/security-legal-pii"
+            image={SecurityImage}
+            imageAlt="Stamped paper image"
+            title="Security, Legal & PII"
+            description="Security, compliance, and data-scrubbing processes."
+          />
+
+          <Card
+            className="w-full md:w-[calc(50%-12px)]"
+            href="/concepts"
+            image={ConceptsImage}
+            imageAlt="Concept and references image"
+            title="Concepts & Reference"
+            description="Core concepts that make Sentry, Sentry."
+          />
         </div>
         <h2 className="text-2xl mt-10 mb-6 font-medium">Talk to us</h2>
         <div className="flex flex-col md:flex-row gap-6">
-          <Link href="https://discord.com/invite/sentry" className="w-full">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image src={ChatBubble} height={64} alt="Chat bubble image" />
-              <div className="space-y-2">
-                <h3 className="text-xl font-medium">Sentry Discord</h3>
-                <p>Real talk in real time. Get in it.</p>
-              </div>
-            </div>
-          </Link>
-          <Link href="https://sentry.zendesk.com/hc/en-us/" className="w-full">
-            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-              <Image src={SupportImage} height={64} alt="Support image" />
-              <div className="space-y-2">
-                <h3 className="text-xl font-medium">Support</h3>
-                <p>See how we can help.</p>
-              </div>
-            </div>
-          </Link>
+          <Card
+            className="w-full"
+            href="https://discord.com/invite/sentry"
+            image={ChatBubble}
+            imageAlt="Chat bubble image"
+            title="Sentry Discord"
+            description="Real talk in real time. Get in it."
+          />
+
+          <Card
+            className="w-full"
+            href="https://sentry.zendesk.com/hc/en-us/"
+            image={SupportImage}
+            imageAlt="Support image"
+            title="Support"
+            description="See how we can help."
+          />
         </div>
       </div>
       <footer className="mt-12 pb-10 w-full z-50 max-w-7xl mx-auto md:px-6 space-y-4 px-6 lg:px-8">