feat(platform): Add image cards to devdocs getting started page (#12110)

* Added awarness section to top level pages

* Updated startpage

* Added dev infra to start page

* Update to new top level section 'backend'

* Added some icons (probably the wrong way, but it kind of works)

* add cardgrid

* Apply suggestions from code review

Co-authored-by: Ivana Kellyer <ivana.kellyer@sentry.io>

---------

Co-authored-by: Charly Gomez <charly.gomez@sentry.io>
Co-authored-by: Ivana Kellyer <ivana.kellyer@sentry.io>

develop-docs/getting-started/index.mdx

@@ -4,15 +4,10 @@ description: This documentation serves as reference points for developing agains
 sidebar_order: 1
 ---
 
-## Getting Started
+We recommend going through the [engineering practices](/engineering-practices) and our [development philsophy](/getting-started/philosophy/) before contributing a change to Sentry.
 
-We recommend going through the general documentation before contributing a change to Sentry.
 
-- <Link to="/getting-started/philosophy/">Development Philosophy</Link> (and <Link to="/sdk/philosophy/">SDK Development Philosophy</Link>)
-- <Link to="/development/commit-messages/">Commit Messages</Link>
-- <Link to="/development/code-review/">Code Review</Link>
-- <Link to="/development/environment/">Environment</Link>
-- <Link to="/development/workflow/">Workflow</Link>
-- <Link to="/application/architecture/">Application Architecture</Link>
+<DevDocsCardGrid />
+
 
 You can also take a glance at the [Sentry Dockerfile](https://github.com/getsentry/sentry/blob/master/self-hosted/Dockerfile) for more information on how the Sentry server is configured, including its system dependencies.

src/components/card.tsx

@@ -19,11 +19,16 @@ export function Card({
 }) {
   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 md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full text-[var(--foreground)]">
+        <Image
+          src={image}
+          height={64}
+          alt={imageAlt}
+          className="object-contain !border-none !shadow-none"
+        />
         <div className="flex flex-col justify-center space-y-2">
           <h3 className="text-xl font-medium">{title}</h3>
-          <p>{description}</p>
+          <p className="text-[length:--font-size-3]">{description}</p>
         </div>
       </div>
     </Link>

src/components/devDocsCardGrid.tsx

@@ -0,0 +1,82 @@
+import BackendImg from 'sentry-docs/imgs/back-end.png';
+import InfraImg from 'sentry-docs/imgs/dev-infra.png';
+import FrontendImg from 'sentry-docs/imgs/front-end.png';
+import IngestImg from 'sentry-docs/imgs/ingest.png';
+import IntegrationsImg from 'sentry-docs/imgs/integrate.png';
+import SkdsImg from 'sentry-docs/imgs/sdks.png';
+import ServicesImg from 'sentry-docs/imgs/services.png';
+import SelfHostedImg from 'sentry-docs/imgs/support.png';
+
+import {Card} from './card';
+
+export function DevDocsCardGrid() {
+  return (
+    <div className="flex flex-wrap gap-6 not-prose">
+      <Card
+        className="w-full"
+        href="/development-infrastructure/"
+        title="Development Infrastructure"
+        description="How to get your local dev environment up and running."
+        image={InfraImg}
+        imageAlt="Development Infrastructure"
+      />
+
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/backend/"
+        title="Backend"
+        description="The monolith that is powering Sentry."
+        image={BackendImg}
+        imageAlt="Backend"
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/frontend/"
+        title="Frontend"
+        description="How we write frontend code."
+        image={FrontendImg}
+        imageAlt="Frontend"
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/services/"
+        title="Services"
+        description="Running alongside the monolith."
+        image={ServicesImg}
+        imageAlt="Services"
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/integrations/"
+        title="Integrations"
+        imageAlt="Integrations"
+        description="Connecting Sentry to other products."
+        image={IntegrationsImg}
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/ingestion/"
+        title="Ingestion"
+        imageAlt="Ingestion"
+        description="Receiving and processing data."
+        image={IngestImg}
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/sdk/"
+        title="SDKs"
+        imageAlt="SDKs"
+        description="Instrumenting user code."
+        image={SkdsImg}
+      />
+      <Card
+        className="w-full"
+        href="/self-hosted/"
+        title="Self-Hosted Sentry"
+        imageAlt="Self-Hosted Sentry"
+        description="How you can run all of Sentry on your own server, without paying anything."
+        image={SelfHostedImg}
+      />
+    </div>
+  );
+}

src/components/docPage/type.scss

@@ -78,7 +78,7 @@
     margin-bottom: 1.75rem;
   }
 
-  h3 {
+  h3 :not(.not-prose) {
     font-size: 1.125rem;
   }
 

src/mdxComponents.ts

@@ -1,6 +1,7 @@
 import {Alert} from './components/alert';
 import {Arcade} from './components/arcade';
 import {Break} from './components/break';
+import {Card} from './components/card';
 import {CliChecksumTable} from './components/cliChecksumTable';
 import {CodeBlock} from './components/codeBlock';
 import {CodeTabs} from './components/codeTabs';
@@ -9,6 +10,7 @@ import {ConfigKey} from './components/configKey';
 import {ConfigValue} from './components/configValue';
 import {CreateGitHubAppForm} from './components/createGitHubAppForm';
 import {DefinitionList} from './components/definitionList';
+import {DevDocsCardGrid} from './components/devDocsCardGrid';
 import DocImage from './components/docImage';
 import {Expandable} from './components/expandable';
 import {GuideGrid} from './components/guideGrid';
@@ -43,8 +45,10 @@ export function mdxComponents(
     Alert,
     Arcade,
     Break,
+    Card,
     CliChecksumTable,
     CommunitySupportedPlatforms,
+    DevDocsCardGrid,
     PlatformFilter,
     CodeBlock,
     CodeTabs,