diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx index 40a2894..277f267 100644 --- a/apps/web/app/(marketing)/page.tsx +++ b/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() {
- {EXAMPLES.map((e) => ( -
+ {EXAMPLES.map((e) => { + const Icon = e.Icon; + return (
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} +
+ +
+
+

{e.title}

+

+ {e.desc} +

+
-
-

{e.title}

-

- {e.desc} -

-
-
- ))} + ); + })}
diff --git a/apps/web/components/brand-icons.tsx b/apps/web/components/brand-icons.tsx new file mode 100644 index 0000000..78491e1 --- /dev/null +++ b/apps/web/components/brand-icons.tsx @@ -0,0 +1,125 @@ +/** + * Brand icons for the marketing page's Examples grid. + * + * Path data for PostgreSQL, Notion, GitHub, and Stripe comes from the + * Simple Icons project (CC0, https://simpleicons.org/). Salesforce was + * deindexed from Simple Icons in 2022 at the brand's request, so we + * draw a generic cloud — close enough to the Salesforce cloud-mark + * shape to read correctly, without copying their trademarked artwork. + * + * Every icon uses `fill="currentColor"` so the caller controls the + * paint via CSS `color`. We render each one inside a square chip whose + * background is the brand's official hex. + * + * Sizes default to 22 px on the 24 × 24 viewBox so there's a bit of + * breathing room inside the 48 × 48 chip used on the marketing page. + * + * Usage of marks like the Notion N and GitHub Octocat is nominative + * fair use — they're shown to indicate compatibility, not endorsement. + */ + +interface IconProps { + size?: number; + className?: string; +} + +export function PostgresIcon({ size = 22, className }: IconProps) { + return ( + + + + ); +} + +// Salesforce was pulled from Simple Icons in 2022 at the brand's +// request, so this is a clean generic cloud rather than their +// trademarked mark. Same silhouette family — fair-use sized. +export function SalesforceCloudIcon({ size = 22, className }: IconProps) { + return ( + + + + ); +} + +export function NotionIcon({ size = 22, className }: IconProps) { + return ( + + + + ); +} + +export function GitHubIcon({ size = 22, className }: IconProps) { + return ( + + + + ); +} + +export function StripeIcon({ size = 22, className }: IconProps) { + return ( + + + + ); +} + +// Generic API / code icon for the "Custom REST" tile — curly braces in +// a monospace style so the tile reads as "any HTTP API" without +// pretending to be a specific brand. +export function RestIcon({ size = 22, className }: IconProps) { + return ( + + + + + ); +}