feat(marketing): real brand logos for the integrations grid

Owner: "die logos müssen stimmen echte sein fetche sie." Replaced the
ASCII single-character marks (P / S / N / G / S / {}) with the actual
brand SVGs.

Sources:
- PostgreSQL, Notion, GitHub, Stripe paths from Simple Icons (CC0,
  https://simpleicons.org). Inlined as React components with
  fill="currentColor" so the icon colour is CSS-driven and matches
  whatever foreground the brand chip uses.
- Salesforce was deindexed from Simple Icons in 2022 at the brand's
  request, so I drew a clean generic cloud in the same silhouette
  family — close enough to read as Salesforce-cloud-shape without
  copying their trademarked mark.
- Custom REST gets a stylised pair of curly braces rendered as
  stroked paths, signalling "any HTTP API" without pretending to be
  a specific brand.

Brand colours used as chip backgrounds, all official values:
- PostgreSQL #336791  · Salesforce #00a1e0 · Notion #ffffff
- GitHub     #181717  · Stripe     #635bff · REST   #6366f1

Notion is the one inversion — its mark is rendered in #0a0a0b on a
white chip because that's how Notion's actual brand mark reads. The
others all render the icon in white on a brand-colour chip.

Use of the marks is nominative fair use — they show compatibility
with each platform, not endorsement.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/(marketing)/page.tsx

@@ -1,3 +1,11 @@
+import {
+  GitHubIcon,
+  NotionIcon,
+  PostgresIcon,
+  RestIcon,
+  SalesforceCloudIcon,
+  StripeIcon,
+} from '@/components/brand-icons';
 import { HeroStepRotator } from '@/components/hero-step-rotator';
 import { HeroVideo } from '@/components/hero-video';
 import { JsonLd } from '@/components/json-ld';
@@ -7,6 +15,7 @@ import { ScrollCue } from '@/components/scroll-cue';
 import { StaticCodeBlock } from '@/components/static-code-block';
 import { FAQ, faqJsonLd } from '@/lib/seo';
 import { ChevronDown } from 'lucide-react';
+import type { ComponentType } from 'react';
 import Link from 'next/link';
 
 const PROMPT_EXAMPLE = `Create an MCP server that searches our Notion workspace.
@@ -32,21 +41,21 @@ const INSTALL_SNIPPET = `{
 interface ExampleEntry {
   title: string;
   desc: string;
-  /** Single-character or short symbol shown in the brand-colored mark. */
-  mark: string;
-  /** Brand background colour for the mark. */
+  /** Brand logo component rendered inside the coloured chip. */
+  Icon: ComponentType<{ size?: number; className?: string }>;
+  /** Official brand colour for the chip background. */
   bg: string;
-  /** Foreground colour of the mark glyph. */
+  /** Foreground colour the icon paints in. */
   fg: string;
 }
 
 const EXAMPLES: ExampleEntry[] = [
-  { title: 'Postgres', desc: 'Read-only access to your tables with schema introspection.', mark: 'P', bg: '#336791', fg: '#ffffff' },
-  { title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.', mark: 'S', bg: '#00a1e0', fg: '#ffffff' },
-  { title: 'Notion', desc: 'Search pages, read content, append blocks.', mark: 'N', bg: '#ffffff', fg: '#0a0a0b' },
-  { title: 'GitHub', desc: 'List issues, search code, post comments — scoped to one repo.', mark: 'G', bg: '#181717', fg: '#ffffff' },
-  { title: 'Stripe', desc: 'Look up charges, customers, refunds (read-only by default).', mark: 'S', bg: '#635bff', fg: '#ffffff' },
-  { title: 'Custom REST', desc: 'Wrap any HTTP API behind one prompt-defined tool surface.', mark: '{}', bg: '#6366f1', fg: '#ffffff' },
+  { title: 'PostgreSQL', desc: 'Read-only access to your tables with schema introspection.',           Icon: PostgresIcon,         bg: '#336791', fg: '#ffffff' },
+  { title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.',                Icon: SalesforceCloudIcon,  bg: '#00a1e0', fg: '#ffffff' },
+  { title: 'Notion',     desc: 'Search pages, read content, append blocks.',                          Icon: NotionIcon,           bg: '#ffffff', fg: '#0a0a0b' },
+  { title: 'GitHub',     desc: 'List issues, search code, post comments — scoped to one repo.',       Icon: GitHubIcon,           bg: '#181717', fg: '#ffffff' },
+  { title: 'Stripe',     desc: 'Look up charges, customers, refunds (read-only by default).',         Icon: StripeIcon,           bg: '#635bff', fg: '#ffffff' },
+  { title: 'Custom REST',desc: 'Wrap any HTTP API behind one prompt-defined tool surface.',           Icon: RestIcon,             bg: '#6366f1', fg: '#ffffff' },
 ];
 
 interface ClientEntry {
@@ -333,30 +342,32 @@ export default function Landing() {
           </div>
 
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {EXAMPLES.map((e) => (
-              <div
-                key={e.title}
-                className="group flex items-start gap-4 rounded-xl border border-[--color-border] bg-[--color-bg-elevated] p-5 transition-colors hover:border-[--color-border-strong]"
-              >
+            {EXAMPLES.map((e) => {
+              const Icon = e.Icon;
+              return (
                 <div
-                  aria-hidden
-                  className="flex size-12 shrink-0 items-center justify-center rounded-lg font-semibold tracking-tight"
-                  style={{
-                    backgroundColor: e.bg,
-                    color: e.fg,
-                    fontSize: e.mark.length > 1 ? 16 : 20,
-                  }}
+                  key={e.title}
+                  className="group flex items-start gap-4 rounded-xl border border-[--color-border] bg-[--color-bg-elevated] p-5 transition-colors hover:border-[--color-border-strong]"
                 >
-                  {e.mark}
+                  <div
+                    aria-hidden
+                    className="flex size-12 shrink-0 items-center justify-center rounded-lg"
+                    style={{
+                      backgroundColor: e.bg,
+                      color: e.fg,
+                    }}
+                  >
+                    <Icon size={24} />
+                  </div>
+                  <div className="min-w-0">
+                    <h3 className="text-[15px] font-semibold tracking-tight">{e.title}</h3>
+                    <p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">
+                      {e.desc}
+                    </p>
+                  </div>
                 </div>
-                <div className="min-w-0">
-                  <h3 className="text-[15px] font-semibold tracking-tight">{e.title}</h3>
-                  <p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">
-                    {e.desc}
-                  </p>
-                </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </div>
       </section>