Improve platforms page

docs/platforms/index.mdx

@@ -20,32 +20,27 @@ We also <Link to="https://sentry.zendesk.com/hc/en-us/articles/23961784367387">d
 
 </Note>
 
-## Platforms
-
-<PlatformGrid />
-
-## Community Supported
+<PlatformFilter />
+
+{/* dirty hack to avoid having a dedicated component for this illustration*/}
+<style jsx>{`
+  .community-image-container img {
+    max-width: 450px;
+    height: auto;
+    border: none !important;
+    box-shadow: none !important;
+    margin-top: 3rem;
+  }
+`}</style>
+<div className="community-image-container">
+  ![Community Supported](./community.png)
+</div>
+
+## SDKs Supported by Our Community
 
 These SDKs are maintained and supported by [the Sentry community](https://open.sentry.io/). While generally our community does a great job at responding to issues, it's important to understand that Sentry staff cannot help you with issues using a community-supported SDK.
 
-- Clojure
-  - [_sentry-clj_](https://github.com/getsentry/sentry-clj)
-  - [_raven-clj_](https://github.com/sethtrain/raven-clj#alternatives)
-- [_Cloudflare Workers_](https://github.com/robertcepa/toucan-js)
-- [_ColdFusion_](https://github.com/coldbox-modules/sentry)
-- [_Crystal_](https://github.com/Sija/raven.cr)
-- [_Defold_](https://github.com/indiesoftby/defold-sentinel)
-- [_Grails_](https://github.com/agorapulse/grails-sentry)
-- [_Hono_](https://github.com/honojs/middleware/tree/main/packages/sentry)
-- [_Kubernetes_](https://github.com/alekitto/sentry-kubernetes)
-- [_Lua_](https://github.com/cloudflare/raven-lua)
-- [_Nuxt 2_](https://github.com/nuxt-community/sentry-module)
-- [_OCaml_](https://github.com/brendanlong/sentry-ocaml)
-- [_Scrapy_](https://github.com/llonchj/scrapy-sentry)
-- [_Serverless Framework Node_](https://github.com/arabold/serverless-sentry-plugin)
-- [_Strapi_](https://github.com/strapi/strapi/tree/master/packages/plugins/sentry)
-- [_Terraform_](https://github.com/jianyuan/terraform-provider-sentry)
-- [_WordPress_](https://github.com/stayallive/wp-sentry)
+<CommunitySupportedPlatforms />
 
 ## Other Platforms
 

src/components/communitySupportedPlatforms/index.tsx

@@ -0,0 +1,140 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import {ExternalLink} from '../externalLink';
+
+import clojure from './icons/clojure.png';
+import cloudflare from './icons/cloudflare.png';
+import coldfusion from './icons/coldfusion.png';
+import crystal from './icons/crystal.png';
+import defold from './icons/defold.png';
+import grails from './icons/grails.png';
+import hono from './icons/hono.png';
+import kubernetes from './icons/kubernetes.png';
+import lua from './icons/lua.png';
+import nuxt from './icons/nuxt.png';
+import ocaml from './icons/ocaml.png';
+import scrapy from './icons/scrapy.png';
+import serverless from './icons/serverless.png';
+import strapi from './icons/strapi.png';
+import terraform from './icons/terraform.png';
+import wordpress from './icons/wordpress.png';
+
+const CommunityPlatforms = [
+  {
+    name: 'Clojure (Sentry Clj)',
+    url: 'https://github.com/getsentry/sentry-clj',
+    icon: clojure,
+  },
+  {
+    name: 'Clojure (Raven Clj)',
+    url: 'https://github.com/sethtrain/raven-clj#alternatives',
+    icon: clojure,
+  },
+  {
+    name: 'Cloudflare Workers',
+    url: 'https://github.com/robertcepa/toucan-js',
+    icon: cloudflare,
+  },
+  {
+    name: 'ColdFusion',
+    url: 'https://github.com/coldbox-modules/sentry',
+    icon: coldfusion,
+  },
+  {
+    name: 'Crystal',
+    url: 'https://github.com/Sija/raven.cr',
+    icon: crystal,
+  },
+  {
+    name: 'Defold',
+    url: 'https://github.com/indiesoftby/defold-sentinel',
+    icon: defold,
+  },
+  {
+    name: 'Grails',
+    url: 'https://github.com/agorapulse/grails-sentry',
+    icon: grails,
+  },
+  {
+    name: 'Hono',
+    url: 'https://github.com/honojs/middleware/tree/main/packages/sentry',
+    icon: hono,
+  },
+  {
+    name: 'Kubernetes',
+    url: 'https://github.com/alekitto/sentry-kubernetes',
+    icon: kubernetes,
+  },
+  {
+    name: 'Lua',
+    url: 'https://github.com/cloudflare/raven-lua',
+    icon: lua,
+  },
+  {
+    name: 'Nuxt 2',
+    url: 'https://github.com/nuxt-community/sentry-module',
+    icon: nuxt,
+  },
+  {
+    name: 'OCaml',
+    url: 'https://github.com/brendanlong/sentry-ocaml',
+    icon: ocaml,
+  },
+  {
+    name: 'Scrapy',
+    url: 'https://github.com/llonchj/scrapy-sentry',
+    icon: scrapy,
+  },
+  {
+    name: 'Serverless Framework',
+    url: 'https://github.com/arabold/serverless-sentry-plugin',
+    icon: serverless,
+  },
+  {
+    name: 'Strapi',
+    url: 'https://github.com/strapi/strapi/tree/master/packages/plugins/sentry',
+    icon: strapi,
+  },
+  {
+    name: 'Terraform',
+    url: 'https://github.com/jianyuan/terraform-provider-sentry',
+    icon: terraform,
+  },
+  {
+    name: 'WordPress',
+    url: 'https://github.com/stayallive/wp-sentry',
+    icon: wordpress,
+  },
+];
+
+export function CommunitySupportedPlatforms() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {CommunityPlatforms.map(platform => (
+        <Link
+          href={platform.url}
+          key={platform.name}
+          style={{
+            textDecoration: 'none',
+            color: 'var(--foreground) !important',
+          }}
+        >
+          <div className="flex gap-2 items-center">
+            <Image
+              src={platform.icon.src}
+              width={20}
+              height={20}
+              alt={platform.name}
+              className="!border-none !shadow-none"
+            />
+            <div className="flex space-x-1">
+              <span className="text-[var(--accent)]">{platform.name}</span>
+              <ExternalLink href={platform.url} />
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}

src/components/home.tsx

@@ -2,7 +2,6 @@ import Image from 'next/image';
 
 import {Banner} from 'sentry-docs/components/banner';
 import {SentryWordmarkLogo} from 'sentry-docs/components/wordmarkLogo';
-import {extractPlatforms, getDocsRootNode} from 'sentry-docs/docTree';
 import PlugImage from 'sentry-docs/imgs/api.png';
 import ChatBubble from 'sentry-docs/imgs/chat-bubble.png';
 import TerminalImage from 'sentry-docs/imgs/cli.png';
@@ -19,17 +18,7 @@ import {Header} from './header';
 import {NavLink, NavLinkProps} from './navlink';
 import {PlatformFilter} from './platformFilter';
 
-export async function Home() {
-  const rootNode = await getDocsRootNode();
-  // this regex deals with names like .NET that would otherwise be sorted at the top
-  const leadingNonAlphaRegex = /^[^\w]/;
-  // sort the platforms alphabetically
-  const sortedPlatforms = extractPlatforms(rootNode).sort((a, b) =>
-    (a.title ?? a.name)
-      .replace(leadingNonAlphaRegex, '')
-      .localeCompare((b.title ?? b.name).replace(leadingNonAlphaRegex, ''))
-  );
-
+export function Home() {
   return (
     <div className="tw-app">
       <Header pathname="/" searchPlatforms={[]} />
@@ -57,7 +46,7 @@ export async function Home() {
           </div>
         </div>
 
-        <PlatformFilter platforms={sortedPlatforms} />
+        <PlatformFilter />
         <h2 className="text-2xl mt-16 mb-6 font-medium">Get to know us</h2>
         <div className="flex flex-wrap gap-6">
           <Card