platform pillars architecture components salesforce enterprise saas agentforce four-pillar platform pillars components architecture four-pillar CRM AI agents data collaboration Salesforce enterprise platform components overview section four-pillar product architecture explanation Salesforce-style platform breakdown
Platform Pillars Base
Fetch pattern JSON:
curl https://webspire.de/patterns/platform-pillars/base.json base.html
<section class="ws-platform-pillars bg-[var(--ws-platform-pillars-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<!-- Header -->
<div class="mb-14 text-center">
<p class="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--ws-color-primary)]">One Platform</p>
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-platform-pillars-text)] sm:text-4xl">
Every team. Every workflow. One foundation.
</h2>
<p class="mx-auto mt-4 max-w-2xl text-pretty leading-relaxed text-[var(--ws-platform-pillars-text-soft)]">
Four integrated products — unified data, AI agents, and collaboration — that move together so your business never has to.
</p>
</div>
<!-- 2×2 Pillar grid -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
<!-- Pillar 1 -->
<div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-platform-pillars-card-border)] bg-[var(--ws-platform-pillars-card-bg)] p-8 transition hover:border-[var(--ws-color-primary)]/40 hover:shadow-lg">
<!-- Icon -->
<div class="mb-5 inline-flex size-12 items-center justify-center rounded-xl bg-[var(--ws-platform-pillars-icon-bg-1)]">
<svg class="size-6 text-[var(--ws-platform-pillars-icon-color-1)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
</svg>
</div>
<!-- Product name + badge -->
<div class="mb-3 flex items-center gap-3">
<h3 class="text-xl font-bold text-[var(--ws-platform-pillars-text)]">Collaboration</h3>
<span class="rounded-full bg-[var(--ws-platform-pillars-icon-bg-1)] px-2.5 py-0.5 text-xs font-semibold text-[var(--ws-platform-pillars-icon-color-1)]">Real-time</span>
</div>
<p class="mb-5 leading-relaxed text-[var(--ws-platform-pillars-text-soft)]">
The communication layer where humans and AI agents work side by side — channels, threads, and automated workflows in one shared workspace.
</p>
<!-- Key points -->
<ul class="mb-6 space-y-1.5">
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-1)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Channels, huddles, and canvas docs
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-1)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
AI agents work directly in channels
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-1)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Connects to every app in your stack
</li>
</ul>
<a href="#" class="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ws-platform-pillars-icon-color-1)] hover:underline underline-offset-2">
Learn more
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
<!-- Pillar 2 -->
<div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-platform-pillars-card-border)] bg-[var(--ws-platform-pillars-card-bg)] p-8 transition hover:border-[var(--ws-color-primary)]/40 hover:shadow-lg">
<div class="mb-5 inline-flex size-12 items-center justify-center rounded-xl bg-[var(--ws-platform-pillars-icon-bg-2)]">
<svg class="size-6 text-[var(--ws-platform-pillars-icon-color-2)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<div class="mb-3 flex items-center gap-3">
<h3 class="text-xl font-bold text-[var(--ws-platform-pillars-text)]">AI Agents</h3>
<span class="rounded-full bg-[var(--ws-platform-pillars-icon-bg-2)] px-2.5 py-0.5 text-xs font-semibold text-[var(--ws-platform-pillars-icon-color-2)]">24/7</span>
</div>
<p class="mb-5 leading-relaxed text-[var(--ws-platform-pillars-text-soft)]">
Autonomous digital workers that handle service, sales, and operations at scale — resolving cases, booking meetings, and updating records without interrupting your team.
</p>
<ul class="mb-6 space-y-1.5">
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-2)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Pre-built agents for 16+ use cases
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-2)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
No-code agent builder
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-2)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Grounded in your live business data
</li>
</ul>
<a href="#" class="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ws-platform-pillars-icon-color-2)] hover:underline underline-offset-2">
Learn more
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
<!-- Pillar 3 -->
<div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-platform-pillars-card-border)] bg-[var(--ws-platform-pillars-card-bg)] p-8 transition hover:border-[var(--ws-color-primary)]/40 hover:shadow-lg">
<div class="mb-5 inline-flex size-12 items-center justify-center rounded-xl bg-[var(--ws-platform-pillars-icon-bg-3)]">
<svg class="size-6 text-[var(--ws-platform-pillars-icon-color-3)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<div class="mb-3 flex items-center gap-3">
<h3 class="text-xl font-bold text-[var(--ws-platform-pillars-text)]">CRM & Apps</h3>
<span class="rounded-full bg-[var(--ws-platform-pillars-icon-bg-3)] px-2.5 py-0.5 text-xs font-semibold text-[var(--ws-platform-pillars-icon-color-3)]">All teams</span>
</div>
<p class="mb-5 leading-relaxed text-[var(--ws-platform-pillars-text-soft)]">
Unified customer record across sales, service, marketing, and commerce — one source of truth that every team and every agent can act on.
</p>
<ul class="mb-6 space-y-1.5">
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-3)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Sales, service, marketing, commerce
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-3)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Shared 360° customer profile
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-3)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
8,000+ AppExchange integrations
</li>
</ul>
<a href="#" class="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ws-platform-pillars-icon-color-3)] hover:underline underline-offset-2">
Learn more
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
<!-- Pillar 4 -->
<div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-platform-pillars-card-border)] bg-[var(--ws-platform-pillars-card-bg)] p-8 transition hover:border-[var(--ws-color-primary)]/40 hover:shadow-lg">
<div class="mb-5 inline-flex size-12 items-center justify-center rounded-xl bg-[var(--ws-platform-pillars-icon-bg-4)]">
<svg class="size-6 text-[var(--ws-platform-pillars-icon-color-4)]" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
</svg>
</div>
<div class="mb-3 flex items-center gap-3">
<h3 class="text-xl font-bold text-[var(--ws-platform-pillars-text)]">Data & Analytics</h3>
<span class="rounded-full bg-[var(--ws-platform-pillars-icon-bg-4)] px-2.5 py-0.5 text-xs font-semibold text-[var(--ws-platform-pillars-icon-color-4)]">Real-time</span>
</div>
<p class="mb-5 leading-relaxed text-[var(--ws-platform-pillars-text-soft)]">
Unified data layer that connects every source, harmonizes customer profiles in real time, and gives agents the context to act — not just report.
</p>
<ul class="mb-6 space-y-1.5">
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-4)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Real-time customer data platform
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-4)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
100+ out-of-the-box connectors
</li>
<li class="flex items-center gap-2 text-sm text-[var(--ws-platform-pillars-text-soft)]">
<svg class="size-4 shrink-0 text-[var(--ws-platform-pillars-icon-color-4)]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Built-in data governance & privacy
</li>
</ul>
<a href="#" class="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ws-platform-pillars-icon-color-4)] hover:underline underline-offset-2">
Learn more
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</div>
<!-- Bottom CTA bar -->
<div class="mt-10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[var(--ws-platform-pillars-card-border)] bg-[var(--ws-platform-pillars-card-bg)] px-8 py-6">
<div>
<p class="font-semibold text-[var(--ws-platform-pillars-text)]">Ready to see it in action?</p>
<p class="mt-0.5 text-sm text-[var(--ws-platform-pillars-text-soft)]">Get a personalized walkthrough of the full platform.</p>
</div>
<div class="flex gap-3">
<a href="#" class="rounded-xl bg-[var(--ws-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-color-primary-text)] transition hover:bg-[var(--ws-color-primary-hover)]">Request Demo</a>
<a href="#" class="rounded-xl border border-[var(--ws-platform-pillars-card-border)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-platform-pillars-text)] transition hover:bg-[var(--ws-color-surface-alt)]">See Pricing</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
platformpillarsarchitecturecomponentssalesforceenterprisesaasagentforcefour-pillar
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Eyebrow, headline, and optional subline explaining the platform concept. |
| pillars | Yes | Four pillar cards — icon, name, badge, description, feature bullets, link. |
| cta-bar | No | Bottom bar with demo/pricing CTAs. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | 2 | 2 | Fixed 2-column grid on desktop, single-column on mobile. |
| iconColors | string | blue, violet, emerald, amber | Icon background/color per pillar — customize via ws-platform-pillars-icon-bg-{1-4} tokens. |
Four-pillar platform architecture section. Explains the top-level structural components of a multi-product platform — not features/benefits (that’s features), but architectural building blocks.
Inspired by Salesforce’s “Slack + Agentforce + Customer 360 + Data 360” homepage section. Works for any platform with 4 foundational pillars.