made tiny updates
This commit is contained in:
SinachPat
@@ -90,15 +90,12 @@
|
||||
--sh-product: 0 48px 96px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #mkt-nav.scrolled {
|
||||
background: rgba(10,10,10,0.88);
|
||||
}
|
||||
[data-theme="dark"] .mkt-nav-mobile {
|
||||
background: rgba(10,10,10,0.97);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
||||
}
|
||||
[data-theme="dark"] .mkt-nav-dropdown-menu {
|
||||
background: rgba(15,15,17,0.98);
|
||||
/* ── Dark-mode comparison card hero fix ────────────────────────
|
||||
The hero card has a hardcoded #06060E bg. In dark mode (--bg = #0A0A0A)
|
||||
it vanishes against the page. Lift it to the elevated surface token. */
|
||||
[data-theme="dark"] .mkt-cmp-card-hero {
|
||||
background: var(--bg-strong);
|
||||
box-shadow: 0 0 0 1px rgba(51,133,255,0.28), var(--sh-xl);
|
||||
}
|
||||
|
||||
/* ── Dark-mode button corrections ──────────────────────────────
|
||||
@@ -287,7 +284,8 @@
|
||||
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
#mkt-nav.scrolled {
|
||||
background: rgba(255,255,255,0.85);
|
||||
/* color-mix collapses the light/dark hardcoded rgba pairs into one token-aware rule */
|
||||
background: color-mix(in srgb, var(--bg) 88%, transparent);
|
||||
backdrop-filter: blur(20px) saturate(1.6);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.6);
|
||||
border-bottom: 1px solid var(--border);
|
||||
@@ -388,11 +386,11 @@
|
||||
position: fixed;
|
||||
top: 60px; left: 0; right: 0;
|
||||
z-index: 199;
|
||||
background: rgba(255,255,255,0.97);
|
||||
background: color-mix(in srgb, var(--bg) 97%, transparent);
|
||||
backdrop-filter: blur(20px) saturate(1.6);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.6);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.07);
|
||||
box-shadow: var(--sh-lg);
|
||||
padding: 12px 24px 24px;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
@@ -435,7 +433,8 @@
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: rgba(255,255,255,0.98);
|
||||
/* --bg-subtle gives the dropdown a slight surface lift vs the page bg */
|
||||
background: color-mix(in srgb, var(--bg-subtle) 98%, transparent);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-3);
|
||||
@@ -472,7 +471,7 @@
|
||||
width: 30px; height: 30px;
|
||||
background: var(--blue-soft);
|
||||
border: 1px solid var(--blue-mid);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--r-2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--blue);
|
||||
@@ -516,10 +515,10 @@
|
||||
.mkt-product-shell {
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-radius: var(--r-4) var(--r-4) 0 0;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--sh-product);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border: 1px solid var(--border-inv);
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
}
|
||||
@@ -605,7 +604,7 @@
|
||||
.mkt-p-dash-card { padding: 18px; }
|
||||
.mkt-p-dc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.mkt-p-dc-title { font-size: 0.6875rem; font-weight: 600; color: #111; letter-spacing: -0.01em; }
|
||||
.mkt-p-dc-badge { font-size: 0.5625rem; background: #ECFDF5; color: #059669; padding: 2px 7px; border-radius: 99px; font-weight: 600; font-family: monospace; }
|
||||
.mkt-p-dc-badge { font-size: 0.5625rem; background: #ECFDF5; color: #059669; padding: 2px 7px; border-radius: 99px; font-weight: 600; font-family: var(--mono); }
|
||||
.mkt-p-dc-val { font-size: 1.375rem; font-weight: 800; color: #0A0A0A; letter-spacing: -0.045em; line-height: 1; margin-bottom: 5px; }
|
||||
.mkt-p-dc-delta { font-size: 0.625rem; color: #059669; font-weight: 600; margin-bottom: 14px; }
|
||||
.mkt-p-dc-bar { height: 3px; background: #F0F0F0; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
|
||||
@@ -660,7 +659,7 @@
|
||||
.mkt-feat-visual-dark { background: #0D0D11; border-color: rgba(255,255,255,0.07); }
|
||||
.mkt-fv-artboard-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.mkt-fv-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px; }
|
||||
.mkt-fv-ab { width: 200px; background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.55); position: relative; z-index: 1; outline: 2px solid #3385FF; outline-offset: 2px; }
|
||||
.mkt-fv-ab { width: 200px; background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.55); position: relative; z-index: 1; outline: 2px solid var(--blue-light); outline-offset: 2px; }
|
||||
.mkt-fv-ab-lbl { position: absolute; top: -20px; left: 0; font-family: var(--mono); font-size: 0.5rem; color: #3385FF; white-space: nowrap; }
|
||||
.mkt-fv-mini-title { font-size: 0.625rem; font-weight: 700; color: #111; margin-bottom: 8px; }
|
||||
.mkt-fv-mini-val { font-size: 1rem; font-weight: 800; color: #0A0A0A; letter-spacing: -0.04em; margin-bottom: 6px; }
|
||||
@@ -718,8 +717,8 @@
|
||||
.mkt-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; }
|
||||
.mkt-int-desc { font-size: .8rem; color: rgba(255,255,255,.36); line-height: 1.6; flex: 1; position: relative; z-index: 1; }
|
||||
.mkt-int-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05); position: relative; z-index: 1; margin-top: auto; }
|
||||
.mkt-int-tag { font-family: 'JetBrains Mono',ui-monospace,monospace; font-size: .5rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.2); }
|
||||
.mkt-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); }
|
||||
.mkt-int-tag { font-family: var(--mono); font-size: .5rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.2); }
|
||||
.mkt-int-status { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .5rem; font-weight: 500; letter-spacing: .05em; color: rgba(255,255,255,.28); }
|
||||
.mkt-int-dot { width: 5px; height: 5px; border-radius: 50%; background: #10B981; box-shadow: 0 0 6px rgba(16,185,129,.7); animation: mkt-int-pulse 2.4s ease-in-out infinite; }
|
||||
@keyframes mkt-int-pulse {
|
||||
0%,100% { opacity:1; box-shadow:0 0 6px rgba(16,185,129,.7); }
|
||||
|
||||
@@ -138,7 +138,7 @@ export default function MarketingPage() {
|
||||
{/* ── Navigation ─────────────────────────────────────────────────── */}
|
||||
<nav id="mkt-nav" className={navScrolled ? 'scrolled' : ''}>
|
||||
<div className="mkt-nav-inner">
|
||||
<a href="#" className="mkt-nav-logo">Origin<span>main</span></a>
|
||||
<Link href="/" className="mkt-nav-logo">Origin<span>main</span></Link>
|
||||
|
||||
<ul className="mkt-nav-links">
|
||||
<li
|
||||
@@ -154,49 +154,49 @@ export default function MarketingPage() {
|
||||
onMouseEnter={openDd}
|
||||
onMouseLeave={schedDd}
|
||||
>
|
||||
<a className="mkt-nav-dd-item" href="/features/live-artboard">
|
||||
<Link className="mkt-nav-dd-item" href="/features/live-artboard">
|
||||
<div className="mkt-nav-dd-icon"><IconArtboard /></div>
|
||||
<div className="mkt-nav-dd-text">
|
||||
<span className="mkt-nav-dd-name">Live Artboard</span>
|
||||
<span className="mkt-nav-dd-desc">Your app rendered live in the canvas</span>
|
||||
</div>
|
||||
</a>
|
||||
<a className="mkt-nav-dd-item" href="/features/origin-graph">
|
||||
</Link>
|
||||
<Link className="mkt-nav-dd-item" href="/features/origin-graph">
|
||||
<div className="mkt-nav-dd-icon"><IconGraph /></div>
|
||||
<div className="mkt-nav-dd-text">
|
||||
<span className="mkt-nav-dd-name">Origin Graph</span>
|
||||
<span className="mkt-nav-dd-desc">Every component, indexed and queryable</span>
|
||||
</div>
|
||||
</a>
|
||||
<a className="mkt-nav-dd-item" href="/features/intent-diff">
|
||||
</Link>
|
||||
<Link className="mkt-nav-dd-item" href="/features/intent-diff">
|
||||
<div className="mkt-nav-dd-icon"><IconDiff /></div>
|
||||
<div className="mkt-nav-dd-text">
|
||||
<span className="mkt-nav-dd-name">Intent Diff</span>
|
||||
<span className="mkt-nav-dd-desc">Ship component-level diffs, not redlines</span>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="mkt-nav-dd-sep" />
|
||||
<a className="mkt-nav-dd-item" href="/features/completion-zone">
|
||||
<Link className="mkt-nav-dd-item" href="/features/completion-zone">
|
||||
<div className="mkt-nav-dd-icon"><IconStar /></div>
|
||||
<div className="mkt-nav-dd-text">
|
||||
<span className="mkt-nav-dd-name">Completion Zone</span>
|
||||
<span className="mkt-nav-dd-desc">AI-filled design, constrained to your system</span>
|
||||
</div>
|
||||
</a>
|
||||
<a className="mkt-nav-dd-item" href="/features/agent-bridge">
|
||||
</Link>
|
||||
<Link className="mkt-nav-dd-item" href="/features/agent-bridge">
|
||||
<div className="mkt-nav-dd-icon"><IconBridge /></div>
|
||||
<div className="mkt-nav-dd-text">
|
||||
<span className="mkt-nav-dd-name">Agent Bridge</span>
|
||||
<span className="mkt-nav-dd-desc">MCP channel to Cursor, Claude Code & more</span>
|
||||
</div>
|
||||
</a>
|
||||
<a className="mkt-nav-dd-item" href="/features/integrations">
|
||||
</Link>
|
||||
<Link className="mkt-nav-dd-item" href="/features/integrations">
|
||||
<div className="mkt-nav-dd-icon"><IconLink /></div>
|
||||
<div className="mkt-nav-dd-text">
|
||||
<span className="mkt-nav-dd-name">Integrations</span>
|
||||
<span className="mkt-nav-dd-desc">Linear, Slack, GitHub, Figma & more</span>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#mkt-integrations">Integrations</a></li>
|
||||
@@ -236,12 +236,12 @@ export default function MarketingPage() {
|
||||
</svg>
|
||||
</a>
|
||||
<div className={`mkt-nav-mobile-sub${mobileSubOpen ? ' open' : ''}`}>
|
||||
<a href="/features/live-artboard" onClick={() => setMobileOpen(false)}>Live Artboard</a>
|
||||
<a href="/features/origin-graph" onClick={() => setMobileOpen(false)}>Origin Graph</a>
|
||||
<a href="/features/intent-diff" onClick={() => setMobileOpen(false)}>Intent Diff</a>
|
||||
<a href="/features/completion-zone" onClick={() => setMobileOpen(false)}>Completion Zone</a>
|
||||
<a href="/features/agent-bridge" onClick={() => setMobileOpen(false)}>Agent Bridge</a>
|
||||
<a href="/features/integrations" onClick={() => setMobileOpen(false)}>Integrations</a>
|
||||
<Link href="/features/live-artboard" onClick={() => setMobileOpen(false)}>Live Artboard</Link>
|
||||
<Link href="/features/origin-graph" onClick={() => setMobileOpen(false)}>Origin Graph</Link>
|
||||
<Link href="/features/intent-diff" onClick={() => setMobileOpen(false)}>Intent Diff</Link>
|
||||
<Link href="/features/completion-zone" onClick={() => setMobileOpen(false)}>Completion Zone</Link>
|
||||
<Link href="/features/agent-bridge" onClick={() => setMobileOpen(false)}>Agent Bridge</Link>
|
||||
<Link href="/features/integrations" onClick={() => setMobileOpen(false)}>Integrations</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#mkt-integrations" onClick={() => setMobileOpen(false)}>Integrations</a></li>
|
||||
@@ -467,7 +467,7 @@ export default function MarketingPage() {
|
||||
<li><span className="mkt-feat-point-icon"><IconGraph /></span>Changes in the canvas write back to your component props — no round trips.</li>
|
||||
<li><span className="mkt-feat-point-icon">⚡</span>Hot reload and real-time data. The canvas reflects your app state at all times.</li>
|
||||
</ul>
|
||||
<a href="/features/live-artboard" className="mkt-btn mkt-btn-primary">See it in action →</a>
|
||||
<Link href="/features/live-artboard" className="mkt-btn mkt-btn-primary">See it in action →</Link>
|
||||
</div>
|
||||
<div className="mkt-feat-visual mkt-feat-visual-dark mkt-reveal">
|
||||
<div className="mkt-fv-artboard-scene">
|
||||
@@ -498,7 +498,7 @@ export default function MarketingPage() {
|
||||
<li><span className="mkt-feat-point-icon">🤖</span>Agents receive the diff and apply it precisely — no interpretation required.</li>
|
||||
<li><span className="mkt-feat-point-icon">✓</span>Parity is verified automatically. The canvas confirms the result.</li>
|
||||
</ul>
|
||||
<a href="/features/intent-diff" className="mkt-btn mkt-btn-primary">Explore Intent Diff →</a>
|
||||
<Link href="/features/intent-diff" className="mkt-btn mkt-btn-primary">Explore Intent Diff →</Link>
|
||||
</div>
|
||||
<div className="mkt-feat-visual mkt-feat-visual-dark mkt-reveal">
|
||||
<div className="mkt-fv-diff-scene">
|
||||
@@ -530,7 +530,7 @@ export default function MarketingPage() {
|
||||
<li><span className="mkt-feat-point-icon"><IconLink /></span>Completion Zone uses the graph to constrain AI suggestions to your design language.</li>
|
||||
<li><span className="mkt-feat-point-icon"><IconBridge /></span>Agent Bridge exposes the graph to external AI tools via MCP protocol.</li>
|
||||
</ul>
|
||||
<a href="/features/origin-graph" className="mkt-btn mkt-btn-primary">Explore the Graph →</a>
|
||||
<Link href="/features/origin-graph" className="mkt-btn mkt-btn-primary">Explore the Graph →</Link>
|
||||
</div>
|
||||
<div className="mkt-feat-visual mkt-feat-visual-dark mkt-reveal" style={{ position: 'relative' }}>
|
||||
<div className="mkt-fv-graph-scene">
|
||||
@@ -964,12 +964,12 @@ export default function MarketingPage() {
|
||||
<div className="mkt-ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge">Agent Bridge</a></li>
|
||||
<li><a href="/features/integrations">Integrations</a></li>
|
||||
<li><Link href="/features/live-artboard">Live Artboard</Link></li>
|
||||
<li><Link href="/features/origin-graph">Origin Graph</Link></li>
|
||||
<li><Link href="/features/intent-diff">Intent Diff</Link></li>
|
||||
<li><Link href="/features/completion-zone">Completion Zone</Link></li>
|
||||
<li><Link href="/features/agent-bridge">Agent Bridge</Link></li>
|
||||
<li><Link href="/features/integrations">Integrations</Link></li>
|
||||
<li><a href="#mkt-pricing">Pricing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user