diff --git a/site/src/components/IntegrationsMock.astro b/site/src/components/IntegrationsMock.astro new file mode 100644 index 00000000..53ee3c4b --- /dev/null +++ b/site/src/components/IntegrationsMock.astro @@ -0,0 +1,246 @@ +--- +/** + * Static, desktop-locked mock of the Warmbly /app/integrations screen. + * + * Faithful to the real source: + * - web/src/app/app/integrations/page.tsx marketplace page (CatalogCard) + * - web/src/components/layout/Page.tsx PageTopbar / StatStrip / Stat / SectionBar + * - web/src/app/app/integrations/_components/ProviderGlyph.tsx per-brand tinted glyph tile (BRAND map) + * - web/src/app/app/integrations/_components/StatusPill.tsx connected / configured pills (TONES map) + * - web/src/app/app/integrations/_components/ConnectDrawer.tsx trust copy + primary button styling + * - web/src/components/ui/field.tsx SearchInput + * - internal/app/integration/catalog.go provider names + taglines + auth methods + * + * Authored at a 900px design width and scaled by the page. DESKTOP-LOCKED: + * no responsive variants anywhere. Renders only the in-app content (no global + * sidebar / app header), since the marketing page wraps it in its own frame. + */ + +// Per-brand glyph tints, mirroring ProviderGlyph.tsx BRAND (with mail-provider +// + webhook + sheets tints that match the real theme tokens). +const brand: Record = { + gmail: { bg: 'bg-red-50', ring: 'ring-red-200', text: 'text-red-600' }, + outlook: { bg: 'bg-sky-50', ring: 'ring-sky-200', text: 'text-sky-600' }, + slack: { bg: 'bg-fuchsia-50', ring: 'ring-fuchsia-200', text: 'text-fuchsia-600' }, + hubspot: { bg: 'bg-orange-50', ring: 'ring-orange-200', text: 'text-orange-600' }, + salesforce: { bg: 'bg-sky-50', ring: 'ring-sky-200', text: 'text-sky-600' }, + zapier: { bg: 'bg-orange-50', ring: 'ring-orange-200', text: 'text-orange-600' }, + webhooks: { bg: 'bg-slate-100', ring: 'ring-slate-300', text: 'text-slate-700' }, + sheets: { bg: 'bg-emerald-50', ring: 'ring-emerald-200', text: 'text-emerald-600' }, +}; + +type Tile = { + key: string; + name: string; + initial: string; + tagline: string; + auth: string; // mono caption: one-click / api_key / webhook + state: 'connected' | 'configured' | 'connect'; +}; + +const tiles: Tile[] = [ + { + key: 'gmail', name: 'Gmail', initial: 'G', + tagline: 'Send and sync through your Google Workspace mailboxes.', + auth: 'one-click', state: 'connected', + }, + { + key: 'outlook', name: 'Microsoft 365', initial: 'M', + tagline: 'Send and sync through Outlook and Exchange Online mailboxes.', + auth: 'one-click', state: 'connected', + }, + { + key: 'slack', name: 'Slack', initial: 'S', + tagline: 'Real-time alerts for positive replies, bounces, and deliverability.', + auth: 'one-click', state: 'connect', + }, + { + key: 'hubspot', name: 'HubSpot', initial: 'H', + tagline: 'Push positive replies and new leads straight into your CRM.', + auth: 'one-click', state: 'connect', + }, + { + key: 'salesforce', name: 'Salesforce', initial: 'S', + tagline: 'Sync leads, contacts, and email activity to Salesforce.', + auth: 'one-click', state: 'connect', + }, + { + key: 'zapier', name: 'Zapier', initial: 'Z', + tagline: 'Triggers and actions across 8,000+ apps.', + auth: 'api_key', state: 'connect', + }, + { + key: 'webhooks', name: 'Webhooks', initial: 'W', + tagline: 'HMAC-signed event delivery to your own endpoint.', + auth: 'webhook', state: 'configured', + }, + { + key: 'sheets', name: 'Google Sheets', initial: 'G', + tagline: 'On-demand lead sync from a spreadsheet into your contacts.', + auth: 'one-click', state: 'connect', + }, +]; + +// StatStrip cells (mirror page.tsx: Available / Connected / Needs attention / Meetings). +const stats = [ + { label: 'Available', value: '8', sub: 'providers', accent: false, last: false }, + { label: 'Connected', value: '3', sub: '3 total', accent: true, last: false }, + { label: 'Needs attention', value: '0', sub: 'all healthy', accent: false, last: false }, + { label: 'Meetings', value: '14', sub: 'booked via integrations', accent: false, last: true }, +]; +--- +
+ + +
+ Integrations +
+ + Connect your stack: CRMs, alerts, automation, meetings, and data + +
+ +
+ + Search integrations +
+ + +
+
+ + +
+ {stats.map((s) => ( +
+
+ {s.label} + {s.accent && } +
+
{s.value}
+
{s.sub}
+
+ ))} +
+ + +
+ App directory + 8 +
+ + OAuth tokens encrypted at rest. Webhooks HMAC-signed. +
+
+ + +
+ {tiles.map((t) => { + const b = brand[t.key] ?? { bg: 'bg-sky-50', ring: 'ring-sky-100', text: 'text-sky-700' }; + const isSlack = t.key === 'slack'; + return ( +
+ +
+
+
{t.initial}
+
+
{t.name}
+
{t.auth}
+
+
+ {t.state === 'connected' && ( + + + connected + + )} + {t.state === 'configured' && ( + + + configured + + )} +
+ + +

{t.tagline}

+ + +
+ + + Docs + + + {t.state === 'connect' && !isSlack && ( + + Connect + + )} + {t.state === 'configured' && ( + + + Manage + + )} + {isSlack && ( + + + + Connect + + + + + connected + + + )} +
+
+ ); + })} +
+ + + + + + + + + + +