From 533ed7646df2655dfa16f6f28f52d5281f5e0b64 Mon Sep 17 00:00:00 2001 From: SinachPat Date: Sun, 26 Apr 2026 09:14:45 +0100 Subject: [PATCH] improved a lot of things --- marketing/index.html | 429 ++++++++++++++++++++++++++--- packages/app/public/marketing.html | 429 ++++++++++++++++++++++++++--- 2 files changed, 794 insertions(+), 64 deletions(-) diff --git a/marketing/index.html b/marketing/index.html index 0aa767f..7a0312c 100644 --- a/marketing/index.html +++ b/marketing/index.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.
+
+
+ Version Control + Live +
+
+ + +
+
+ + + + + + + +
+
+
Figma Import
+
Design tokens, components & layouts synced live into the graph.
+
+
+ Design + Live +
+
+ + +
+
+ + + + +
+
+
Linear
+
Issue tracking & milestone sync tied to every component change.
+
+
+ Project Mgmt + Live +
+
+ + +
+
+ + + + + + +
+
+
Slack
+
Deploy alerts, review pings & diff summaries in your channels.
+
+
+ Communication + Live +
+
+ + +
+
+ + + +
+
+
Cursor
+
Origin diffs surface inline as Cursor suggestions. Accept or reject component changes without leaving your editor — zero context-switching.
+
+
+ AI IDE + Live +
+
+ + +
+
+ + + +
+
+
VS Code
+
Extension & workspace sync, inline diff annotations.
+
+
+ IDE + Live +
+
+ + +
+
+ + + +
+
+
Claude Code
+
AI pair programming with full graph context.
+
+
+ AI + Live +
+
+ + +
+
+ + + + +
+
+
TypeScript
+
Type-safe component contracts and prop inference.
+
+
+ Language + Live +
+
+ + +
+
+ + + + +
+
+
Next.js
+
App Router, RSC, and server actions — fully understood.
+
+
+ Framework + Live +
+
+ + +
+
+ + + + + + +
+
+
React
+
Component tree, hooks, and context — mapped to the graph.
+
+
+ Library + Live +
+
+ + +
+
+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.
+
+
+ Version Control + Live +
+
+ + +
+
+ + + + + + + +
+
+
Figma Import
+
Design tokens, components & layouts synced live into the graph.
+
+
+ Design + Live +
+
+ + +
+
+ + + + +
+
+
Linear
+
Issue tracking & milestone sync tied to every component change.
+
+
+ Project Mgmt + Live +
+
+ + +
+
+ + + + + + +
+
+
Slack
+
Deploy alerts, review pings & diff summaries in your channels.
+
+
+ Communication + Live +
+
+ + +
+
+ + + +
+
+
Cursor
+
Origin diffs surface inline as Cursor suggestions. Accept or reject component changes without leaving your editor — zero context-switching.
+
+
+ AI IDE + Live +
+
+ + +
+
+ + + +
+
+
VS Code
+
Extension & workspace sync, inline diff annotations.
+
+
+ IDE + Live +
+
+ + +
+
+ + + +
+
+
Claude Code
+
AI pair programming with full graph context.
+
+
+ AI + Live +
+
+ + +
+
+ + + + +
+
+
TypeScript
+
Type-safe component contracts and prop inference.
+
+
+ Language + Live +
+
+ + +
+
+ + + + +
+
+
Next.js
+
App Router, RSC, and server actions — fully understood.
+
+
+ Framework + Live +
+
+ + +
+
+ + + + + + +
+
+
React
+
Component tree, hooks, and context — mapped to the graph.
+
+
+ Library + Live +
+
+ + +
+
+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');