Integrations
Connects to your entire stack.
Slots into the tools you already use. No migration required.
-
-
🔗 Linear
-
💬 Slack
-
🐙 GitHub
-
🖱 Cursor
-
🤖 Claude Code
-
◆ Figma Import
-
▲ Next.js
-
⚛ React
-
🟦 VS Code
-
🔷 TypeScript
+
+
+
+
+
+
+
+
GitHub
+
PR reviews, branch tracking, and automatic code sync on every push. Full origin-graph diff computed on every merge.
+
+
+
+
+
+
+
+
+
Figma Import
+
Design tokens, components & layouts synced live into the graph.
+
+
+
+
+
+
+
+
+
Linear
+
Issue tracking & milestone sync tied to every component change.
+
+
+
+
+
+
+
+
+
Slack
+
Deploy alerts, review pings & diff summaries in your channels.
+
+
+
+
+
+
+
+
+
Cursor
+
Origin diffs surface inline as Cursor suggestions. Accept or reject component changes without leaving your editor — zero context-switching.
+
+
+
+
+
+
+
+
+
VS Code
+
Extension & workspace sync, inline diff annotations.
+
+
+
+
+
+
+
+
+
Claude Code
+
AI pair programming with full graph context.
+
+
+
+
+
+
+
+
+
TypeScript
+
Type-safe component contracts and prop inference.
+
+
+
+
+
+
+
+
+
Next.js
+
App Router, RSC, and server actions — fully understood.
+
+
+
+
+
+
+
+
+
+
+
React
+
Component tree, hooks, and context — mapped to the graph.
+
+
+
+
+
+
+
+8
+
More integrations
shipping soon
+
+
@@ -2023,6 +2379,15 @@ window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 20);
}, { passive: true });
+// ── Integration card — Fluent Reveal Effect ───────────────
+document.querySelectorAll('.int-card:not(.int-more)').forEach(card => {
+ card.addEventListener('mousemove', e => {
+ const r = card.getBoundingClientRect();
+ card.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
+ card.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
+ });
+});
+
// ── Mobile hamburger ──────────────────────────────────────
const burger = document.getElementById('nav-burger');
const mobileMenu = document.getElementById('nav-mobile');
diff --git a/packages/app/public/marketing.html b/packages/app/public/marketing.html
index 0aa767f..7a0312c 100644
--- a/packages/app/public/marketing.html
+++ b/packages/app/public/marketing.html
@@ -1000,32 +1000,187 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
/* ════════════════════════════════════════════════════════════
INTEGRATIONS
════════════════════════════════════════════════════════════ */
-#integrations { padding: 128px 0; background: var(--bg-subtle); }
-.int-grid {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- justify-content: center;
- margin-top: 56px;
+/* ════════════════════════════════════════════════════════════
+ INTEGRATIONS — Dark bento grid with per-brand glows
+ ════════════════════════════════════════════════════════════ */
+#integrations {
+ background: #08080C;
+ padding: 140px 0;
+ position: relative;
+ overflow: hidden;
}
-.int-pill {
+/* Dot-grid atmosphere */
+#integrations::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: radial-gradient(circle, rgba(255,255,255,0.032) 1px, transparent 1px);
+ background-size: 28px 28px;
+ pointer-events: none;
+}
+/* Section header dark overrides */
+#integrations .section-head .label { color: rgba(255,255,255,0.28); }
+#integrations .section-head h2.d2 { color: #fff; }
+#integrations .section-head .subtitle { color: rgba(255,255,255,0.42); }
+
+/* Ambient glow orbs */
+.int-orb {
+ position: absolute;
+ border-radius: 50%;
+ pointer-events: none;
+ filter: blur(80px);
+ opacity: 0.55;
+}
+.int-orb-1 { width:500px;height:300px;top:0;left:50%;transform:translateX(-50%);
+ background:radial-gradient(ellipse,rgba(51,133,255,.15),transparent 70%); }
+.int-orb-2 { width:320px;height:320px;bottom:10%;left:5%;
+ background:radial-gradient(ellipse,rgba(162,89,255,.1),transparent 70%); }
+.int-orb-3 { width:260px;height:260px;bottom:15%;right:8%;
+ background:radial-gradient(ellipse,rgba(97,218,251,.08),transparent 70%); }
+
+/* ── Bento grid ── */
+.int-bento {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 10px;
+ margin-top: 64px;
+ position: relative;
+ z-index: 1;
+}
+.int-card {
+ background: #111115;
+ border: 1px solid rgba(255,255,255,0.07);
+ border-radius: 16px;
+ padding: 26px 28px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ min-height: 168px;
+ transition: border-color .2s, box-shadow .25s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1);
+ cursor: default;
+}
+/* Coloured top accent line */
+.int-card::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--glow,rgba(255,255,255,.3)) 40%, transparent);
+ opacity: .65;
+}
+/* Fluent reveal radial highlight */
+.int-card::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ background: radial-gradient(
+ ellipse 70% 60% at var(--mx,50%) var(--my,50%),
+ var(--glow-soft,rgba(255,255,255,.04)),
+ transparent
+ );
+ transition: opacity .3s;
+ pointer-events: none;
+}
+.int-card:hover::after { opacity: 1; }
+.int-card:hover {
+ border-color: rgba(255,255,255,.13);
+ box-shadow:
+ 0 0 0 1px var(--glow-dim,rgba(255,255,255,.06)),
+ 0 20px 48px rgba(0,0,0,.5),
+ 0 0 56px var(--glow-ambient,rgba(255,255,255,.02));
+ transform: translateY(-3px);
+}
+/* Wide cards */
+.int-card.w2 { grid-column: span 2; }
+
+/* Icon badge */
+.int-ico {
+ width: 42px; height: 42px;
+ border-radius: 11px;
+ background: var(--ico-bg,rgba(255,255,255,.07));
+ border: 1px solid var(--ico-bd,rgba(255,255,255,.1));
+ display: flex; align-items: center; justify-content: center;
+ flex-shrink: 0;
+ position: relative; z-index: 1;
+}
+.int-ico svg { display: block; }
+
+/* Text */
+.int-name {
+ font-size: .9375rem;
+ font-weight: 700;
+ color: rgba(255,255,255,.9);
+ letter-spacing: -.025em;
+ line-height: 1.25;
+ position: relative; z-index: 1;
+}
+.int-desc {
+ font-size: .8rem;
+ color: rgba(255,255,255,.36);
+ line-height: 1.6;
+ flex: 1;
+ position: relative; z-index: 1;
+}
+
+/* Footer row */
+.int-footer {
display: flex;
align-items: center;
- gap: 10px;
- padding: 10px 20px;
- border-radius: var(--r-full);
- background: var(--bg);
- border: 1px solid var(--border-2);
- font-size: 0.9375rem;
+ justify-content: space-between;
+ padding-top: 12px;
+ border-top: 1px solid rgba(255,255,255,.05);
+ position: relative; z-index: 1;
+ margin-top: auto;
+}
+.int-tag {
+ font-family: 'JetBrains Mono',ui-monospace,monospace;
+ font-size: .5rem;
font-weight: 500;
- color: var(--fg);
- box-shadow: var(--sh-xs);
- transition: transform 0.14s cubic-bezier(.16,1,.3,1), box-shadow 0.14s;
- cursor: default;
- letter-spacing: -0.01em;
+ letter-spacing: .09em;
+ text-transform: uppercase;
+ color: rgba(255,255,255,.2);
+}
+.int-status {
+ display: flex; align-items: center; gap: 5px;
+ font-family: 'JetBrains Mono',ui-monospace,monospace;
+ font-size: .5rem; font-weight: 500;
+ letter-spacing: .05em;
+ color: rgba(255,255,255,.28);
+}
+.int-dot {
+ width: 5px; height: 5px; border-radius: 50%;
+ background: #10B981;
+ box-shadow: 0 0 6px rgba(16,185,129,.7);
+ animation: int-pulse 2.4s ease-in-out infinite;
+}
+@keyframes int-pulse {
+ 0%,100% { opacity:1; box-shadow:0 0 6px rgba(16,185,129,.7); }
+ 50% { opacity:.4; box-shadow:0 0 2px rgba(16,185,129,.3); }
+}
+/* "More" card */
+.int-more {
+ background: transparent !important;
+ border-style: dashed !important;
+ border-color: rgba(255,255,255,.08) !important;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ gap: 6px !important;
+ min-height: 168px;
+}
+.int-more::before, .int-more::after { display: none; }
+.int-more-n {
+ font-size: 2rem; font-weight: 900;
+ color: rgba(255,255,255,.1);
+ letter-spacing: -.05em; line-height: 1;
+}
+.int-more-l {
+ font-size: .75rem; color: rgba(255,255,255,.22);
+ font-weight: 500; letter-spacing: -.01em;
}
-.int-pill:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
-.int-icon { font-size: 1rem; }
/* ════════════════════════════════════════════════════════════
COMPARISON
@@ -1321,7 +1476,12 @@ footer {
.cmp-grid, .px-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
.px-card.featured { margin: 8px 0; }
}
+@media (max-width: 1024px) {
+ .int-bento { grid-template-columns: repeat(3, 1fr); }
+}
@media (max-width: 768px) {
+ .int-bento { grid-template-columns: repeat(2, 1fr); }
+ .int-card.w2 { grid-column: span 2; }
.wrap, .wrap-wide { padding: 0 24px; }
#nav { padding: 0 24px; }
.nav-inner {
@@ -1351,6 +1511,8 @@ footer {
.ft-top { grid-template-columns: 1fr; }
.p-app { grid-template-columns: 1fr; height: 320px; }
.p-nav { display: none; }
+ .int-bento { grid-template-columns: 1fr; }
+ .int-card.w2 { grid-column: span 1; }
}
@@ -1799,23 +1961,217 @@ footer {
+
+
+
Integrations
Connects to your entire stack.
Slots into the tools you already use. No migration required.
-
-
🔗 Linear
-
💬 Slack
-
🐙 GitHub
-
🖱 Cursor
-
🤖 Claude Code
-
◆ Figma Import
-
▲ Next.js
-
⚛ React
-
🟦 VS Code
-
🔷 TypeScript
+
+
+
+
+
+
+
+
GitHub
+
PR reviews, branch tracking, and automatic code sync on every push. Full origin-graph diff computed on every merge.
+
+
+
+
+
+
+
+
+
Figma Import
+
Design tokens, components & layouts synced live into the graph.
+
+
+
+
+
+
+
+
+
Linear
+
Issue tracking & milestone sync tied to every component change.
+
+
+
+
+
+
+
+
+
Slack
+
Deploy alerts, review pings & diff summaries in your channels.
+
+
+
+
+
+
+
+
+
Cursor
+
Origin diffs surface inline as Cursor suggestions. Accept or reject component changes without leaving your editor — zero context-switching.
+
+
+
+
+
+
+
+
+
VS Code
+
Extension & workspace sync, inline diff annotations.
+
+
+
+
+
+
+
+
+
Claude Code
+
AI pair programming with full graph context.
+
+
+
+
+
+
+
+
+
TypeScript
+
Type-safe component contracts and prop inference.
+
+
+
+
+
+
+
+
+
Next.js
+
App Router, RSC, and server actions — fully understood.
+
+
+
+
+
+
+
+
+
+
+
React
+
Component tree, hooks, and context — mapped to the graph.
+
+
+
+
+
+
+
+8
+
More integrations
shipping soon
+
+
@@ -2023,6 +2379,15 @@ window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 20);
}, { passive: true });
+// ── Integration card — Fluent Reveal Effect ───────────────
+document.querySelectorAll('.int-card:not(.int-more)').forEach(card => {
+ card.addEventListener('mousemove', e => {
+ const r = card.getBoundingClientRect();
+ card.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
+ card.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
+ });
+});
+
// ── Mobile hamburger ──────────────────────────────────────
const burger = document.getElementById('nav-burger');
const mobileMenu = document.getElementById('nav-mobile');