improved a lot of things
This commit is contained in:
SinachPat
@@ -0,0 +1,869 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Agent Bridge — Originmain</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-muted:#F4F4F5;--bg-strong:#EBEBEB;--bg-inv:#0A0A0A;--bg-inv-2:#141414;--bg-inv-3:#1C1C1C;--fg:#0A0A0A;--fg-2:#52525B;--fg-3:#A1A1AA;--fg-4:#D4D4D8;--fg-inv:rgba(255,255,255,0.92);--fg-inv-2:rgba(255,255,255,0.52);--fg-inv-3:rgba(255,255,255,0.28);--blue:#0066FF;--blue-dark:#0050CC;--blue-light:#3385FF;--blue-soft:rgba(0,102,255,0.07);--blue-mid:rgba(0,102,255,0.15);--purple:#7C3AED;--teal:#0891B2;--amber:#F59E0B;--amber-dark:#D97706;--amber-soft:rgba(245,158,11,0.07);--amber-mid:rgba(245,158,11,0.18);--border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.12);--border-inv:rgba(255,255,255,0.08);--border-inv-2:rgba(255,255,255,0.14);--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:20px;--r-6:24px;--r-full:9999px;--sh-xs:0 1px 2px rgba(0,0,0,0.05);--sh-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05);--sh-md:0 4px 8px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);--sh-lg:0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.05);--sh-xl:0 20px 40px rgba(0,0,0,0.09),0 8px 16px rgba(0,0,0,0.05);--sh-2xl:0 32px 64px rgba(0,0,0,0.11),0 16px 32px rgba(0,0,0,0.06);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
|
||||
img,svg{display:block;max-width:100%;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
|
||||
.section{padding:112px 0;}
|
||||
.section-muted{background:var(--bg-subtle);}
|
||||
.section-dark{background:var(--bg-inv);}
|
||||
.d1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;color:var(--fg);}
|
||||
.d2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.038em;color:var(--fg);}
|
||||
.d3{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-0.028em;color:var(--fg);}
|
||||
.subtitle{font-size:clamp(1rem,1.8vw,1.125rem);font-weight:400;line-height:1.75;color:var(--fg-2);}
|
||||
.label{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);}
|
||||
.label-amber{color:var(--amber);}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:0.9375rem;font-weight:600;padding:11px 22px;border-radius:var(--r-2);transition:transform 0.12s cubic-bezier(.16,1,.3,1),opacity 0.12s,box-shadow 0.12s;white-space:nowrap;letter-spacing:-0.01em;position:relative;overflow:hidden;}
|
||||
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}
|
||||
.btn:hover::after{background:rgba(255,255,255,0.06);}
|
||||
.btn:active{transform:scale(0.98)!important;}
|
||||
.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--sh-sm);}
|
||||
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border-2);}
|
||||
.btn-secondary:hover{background:var(--bg-muted);transform:translateY(-1px);}
|
||||
.btn-amber{background:var(--amber);color:#fff;box-shadow:0 4px 12px rgba(245,158,11,0.35);}
|
||||
.btn-amber:hover{background:var(--amber-dark);transform:translateY(-1px);}
|
||||
.btn-lg{font-size:1rem;padding:13px 28px;}
|
||||
.btn-white{background:#fff;color:#0A0A0A;box-shadow:0 4px 12px rgba(255,255,255,0.15);}
|
||||
.btn-white:hover{background:#F5F5F5;transform:translateY(-1px);}
|
||||
.btn-outline-white{background:transparent;color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.18);}
|
||||
.btn-outline-white:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
|
||||
.divider{height:1px;background:var(--border);}
|
||||
.section-head{text-align:center;max-width:640px;margin:0 auto 72px;}
|
||||
.section-head .label{display:block;margin-bottom:16px;}
|
||||
.section-head .d2{margin-bottom:18px;}
|
||||
|
||||
/* NAV */
|
||||
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;padding:0 40px;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;}
|
||||
#nav.scrolled{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border);box-shadow:var(--sh-xs);}
|
||||
.nav-inner{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
|
||||
.nav-logo{justify-self:start;font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:var(--fg);display:flex;align-items:center;gap:2px;}
|
||||
.nav-logo span{color:var(--blue);}
|
||||
.nav-links{justify-self:center;display:flex;align-items:center;gap:0;list-style:none;}
|
||||
.nav-links a{font-size:0.9375rem;font-weight:500;color:var(--fg-2);padding:6px 14px;border-radius:var(--r-1);transition:color 0.12s,background 0.12s;letter-spacing:-0.01em;}
|
||||
.nav-links a:hover{color:var(--fg);}
|
||||
.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
|
||||
|
||||
/* Dropdown */
|
||||
.nav-dropdown{position:relative;}
|
||||
.nav-dropdown>a{display:flex;align-items:center;gap:4px;}
|
||||
.nav-dd-caret{transition:transform 0.15s;}
|
||||
/* caret rotation handled via JS .open class */
|
||||
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--sh-xl);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:opacity 0.15s,transform 0.15s,visibility 0.15s;pointer-events:none;}
|
||||
.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;}
|
||||
.nav-dropdown.open .nav-dd-caret{transform:rotate(180deg);}
|
||||
/* Mobile sub-nav */
|
||||
.nav-mobile-sub{display:none;padding:2px 0 6px 14px;flex-direction:column;}
|
||||
.nav-mobile-sub.open{display:flex;}
|
||||
.nav-mobile-sub a{font-size:0.875rem;color:rgba(255,255,255,0.4);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);letter-spacing:-0.01em;transition:color 0.1s;}
|
||||
.nav-mobile-sub a:last-child{border-bottom:none;}
|
||||
.nav-mobile-sub a:hover{color:rgba(255,255,255,0.8);}
|
||||
/* Dark hero: white nav before scrolling */
|
||||
#nav:not(.scrolled) .nav-logo{color:rgba(255,255,255,0.92);}
|
||||
#nav:not(.scrolled) .nav-logo span{color:#3385FF;}
|
||||
#nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.5);}
|
||||
#nav:not(.scrolled) .nav-links a:hover{color:rgba(255,255,255,0.9);}
|
||||
#nav:not(.scrolled) .nav-actions .btn-secondary{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.2);background:transparent;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
|
||||
.nav-dd-item:hover{background:var(--bg-muted);}
|
||||
.nav-dd-item.active{background:var(--amber-soft);}
|
||||
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
|
||||
.nav-dd-icon.amber{background:var(--amber-soft);border-color:var(--amber-mid);}
|
||||
.nav-dd-text{display:flex;flex-direction:column;}
|
||||
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
|
||||
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
|
||||
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0;}
|
||||
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-2);}
|
||||
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),opacity 0.18s;transform-origin:center;}
|
||||
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||||
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
|
||||
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||||
.nav-mobile{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.07);padding:12px 24px 24px;flex-direction:column;gap:2px;}
|
||||
.nav-mobile.open{display:flex;}
|
||||
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;}
|
||||
.nav-mobile ul li a{display:block;font-size:1rem;font-weight:500;color:var(--fg-2);padding:11px 4px;border-bottom:1px solid var(--border);letter-spacing:-0.01em;}
|
||||
.nav-mobile ul li:last-child a{border-bottom:none;}
|
||||
.nav-mobile-ctas{display:flex;gap:8px;margin-top:16px;}
|
||||
.nav-mobile-ctas .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.875rem;}
|
||||
|
||||
/* PAGE HERO */
|
||||
#page-hero{padding:140px 40px 100px;background:var(--bg-inv);position:relative;overflow:hidden;text-align:center;}
|
||||
#page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(245,158,11,0.1),transparent 60%),radial-gradient(ellipse 40% 40% at 80% 70%,rgba(124,58,237,0.07),transparent 50%);pointer-events:none;}
|
||||
.page-hero-inner{position:relative;max-width:800px;margin:0 auto;}
|
||||
.page-hero-inner .label{color:rgba(255,255,255,0.3);margin-bottom:20px;display:block;}
|
||||
.page-hero-inner .d1{color:var(--fg-inv);margin-bottom:22px;}
|
||||
.page-hero-inner .subtitle{color:var(--fg-inv-2);max-width:620px;margin:0 auto 44px;}
|
||||
.page-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* PRODUCT VISUAL */
|
||||
.pv-shell{width:100%;max-width:960px;margin:72px auto 0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 48px 96px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06);border-bottom:none;position:relative;}
|
||||
.pv-chrome{background:#1C1C22;height:40px;display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid rgba(255,255,255,0.05);}
|
||||
.pv-dot{width:11px;height:11px;border-radius:50%;}
|
||||
.pv-dot.r{background:#FF5F57;}
|
||||
.pv-dot.y{background:#FFBD2E;}
|
||||
.pv-dot.g{background:#28C840;}
|
||||
.pv-url{flex:1;margin:0 12px;background:rgba(255,255,255,0.06);border-radius:5px;height:25px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.3);max-width:360px;}
|
||||
.pv-canvas{background:#0D0D11;height:400px;position:relative;display:flex;align-items:stretch;}
|
||||
.pv-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;}
|
||||
|
||||
/* Bridge split panels */
|
||||
.bridge-panel-left{flex:1;border-right:1px solid rgba(255,255,255,0.07);display:flex;flex-direction:column;overflow:hidden;position:relative;}
|
||||
.bridge-panel-right{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
|
||||
.bridge-panel-header{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.02);}
|
||||
.bridge-panel-title{font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.28);letter-spacing:0.08em;text-transform:uppercase;}
|
||||
.bridge-panel-badge{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.06em;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-full);}
|
||||
.bridge-panel-badge.cursor{background:rgba(124,58,237,0.18);color:#C4A1FF;border:1px solid rgba(124,58,237,0.25);}
|
||||
.bridge-panel-badge.canvas{background:rgba(245,158,11,0.14);color:#FCD34D;border:1px solid rgba(245,158,11,0.22);}
|
||||
.bridge-panel-body{flex:1;padding:16px;overflow:hidden;}
|
||||
|
||||
/* Bridge center connector */
|
||||
.bridge-connector{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:0;}
|
||||
.bridge-icon{width:40px;height:40px;border-radius:50%;background:#0A0A0A;border:1px solid rgba(245,158,11,0.4);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 0 4px rgba(245,158,11,0.08),0 0 20px rgba(245,158,11,0.15);position:relative;z-index:2;}
|
||||
.bridge-rings{position:absolute;width:40px;height:40px;top:28px;}
|
||||
.bridge-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(245,158,11,0.3);animation:bridge-ring 2s ease-out infinite;}
|
||||
.bridge-pulse-2{animation-delay:0.7s;}
|
||||
@keyframes bridge-ring{0%{transform:scale(1);opacity:0.6;}100%{transform:scale(2.4);opacity:0;}}
|
||||
.bridge-line-top{width:1px;height:22px;background:linear-gradient(to top,rgba(245,158,11,0.55),transparent);position:relative;margin-bottom:2px;}
|
||||
.bridge-line-top::before{content:'';position:absolute;top:-1px;left:-3px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:5px solid rgba(245,158,11,0.55);}
|
||||
.bridge-line-bottom{width:1px;height:22px;background:linear-gradient(to bottom,rgba(245,158,11,0.55),transparent);position:relative;margin-top:2px;}
|
||||
.bridge-line-bottom::after{content:'';position:absolute;bottom:-1px;left:-3px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid rgba(245,158,11,0.55);}
|
||||
|
||||
/* Editor simulation */
|
||||
.editor-line{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:0.5875rem;line-height:1.9;white-space:nowrap;}
|
||||
.editor-ln{color:rgba(255,255,255,0.15);min-width:18px;text-align:right;user-select:none;flex-shrink:0;}
|
||||
.editor-code .kw{color:#C4A1FF;}
|
||||
.editor-code .str{color:#7DDBA0;}
|
||||
.editor-code .cm{color:rgba(255,255,255,0.28);}
|
||||
.editor-code .fn{color:#7EB8FF;}
|
||||
.editor-code .prop{color:#FFBA7B;}
|
||||
.editor-code .num{color:#F9A875;}
|
||||
.editor-suggestion{margin:5px 0 5px 28px;background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.22);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;}
|
||||
.editor-suggestion-label{font-family:var(--mono);font-size:0.4375rem;color:#C4A1FF;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2px;}
|
||||
.editor-suggestion-diff{font-family:var(--mono);font-size:0.5625rem;display:flex;flex-direction:column;gap:2px;}
|
||||
.editor-diff-del{color:#F87171;background:rgba(248,113,113,0.07);padding:1px 4px;border-radius:2px;}
|
||||
.editor-diff-add{color:#34D399;background:rgba(52,211,153,0.07);padding:1px 4px;border-radius:2px;}
|
||||
.editor-suggestion-actions{display:flex;gap:6px;margin-top:4px;}
|
||||
.editor-action-btn{font-family:var(--mono);font-size:0.4375rem;letter-spacing:0.05em;padding:3px 8px;border-radius:3px;cursor:pointer;}
|
||||
.editor-action-btn.accept{background:rgba(52,211,153,0.18);color:#34D399;border:1px solid rgba(52,211,153,0.25);}
|
||||
.editor-action-btn.reject{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.35);border:1px solid rgba(255,255,255,0.1);}
|
||||
|
||||
/* Diff cards */
|
||||
.diff-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
|
||||
.diff-card-header{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
|
||||
.diff-card-icon{width:22px;height:22px;border-radius:4px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;}
|
||||
.diff-card-title{font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.7);font-weight:600;}
|
||||
.diff-card-agent{margin-left:auto;font-family:var(--mono);font-size:0.4rem;letter-spacing:0.06em;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-full);background:rgba(245,158,11,0.1);color:#FCD34D;border:1px solid rgba(245,158,11,0.2);white-space:nowrap;}
|
||||
.diff-row{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:4px;background:rgba(255,255,255,0.02);margin-bottom:3px;}
|
||||
.diff-row-prop{font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.3);}
|
||||
.diff-row-vals{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.5rem;}
|
||||
.diff-val-old{color:#F87171;text-decoration:line-through;opacity:0.7;}
|
||||
.diff-val-arrow{color:rgba(255,255,255,0.2);}
|
||||
.diff-val-new{color:#34D399;}
|
||||
.diff-actions{display:flex;gap:6px;margin-top:7px;}
|
||||
.diff-btn{font-family:var(--mono);font-size:0.4375rem;letter-spacing:0.05em;padding:4px 10px;border-radius:4px;cursor:pointer;}
|
||||
.diff-btn.accept{background:rgba(52,211,153,0.15);color:#34D399;border:1px solid rgba(52,211,153,0.22);}
|
||||
.diff-btn.reject{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.32);border:1px solid rgba(255,255,255,0.09);}
|
||||
|
||||
/* HOW IT WORKS */
|
||||
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative;}
|
||||
.hiw-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);}
|
||||
.hiw-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1;}
|
||||
.hiw-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--amber);margin-bottom:20px;box-shadow:var(--sh-sm);}
|
||||
.hiw-step h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.hiw-step p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;}
|
||||
.hiw-step code{font-family:var(--mono);font-size:0.78em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;}
|
||||
|
||||
/* FEATURE SPLIT */
|
||||
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;max-width:1120px;margin:0 auto;}
|
||||
.feat-split.rev{direction:rtl;}
|
||||
.feat-split.rev>*{direction:ltr;}
|
||||
.feat-copy .label{display:block;margin-bottom:16px;}
|
||||
.feat-copy .d3{margin-bottom:16px;}
|
||||
.feat-copy .subtitle{margin-bottom:28px;}
|
||||
.feat-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
|
||||
.feat-pts li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.55;}
|
||||
.feat-pt-icon{width:20px;height:20px;border-radius:3px;background:var(--amber-soft);border:1px solid var(--amber-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:0.625rem;color:var(--amber);}
|
||||
.feat-vis{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--sh-2xl);border:1px solid var(--border);aspect-ratio:4/3;position:relative;}
|
||||
.feat-vis-dark{background:#0D0D11;border-color:rgba(255,255,255,0.07);}
|
||||
.feat-vis-light{background:var(--bg-muted);}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);padding:24px;font-family:var(--mono);font-size:0.75rem;line-height:1.75;color:rgba(255,255,255,0.75);overflow-x:auto;}
|
||||
.code-block .kw{color:#C4A1FF;}
|
||||
.code-block .str{color:#7DDBA0;}
|
||||
.code-block .cm{color:rgba(255,255,255,0.28);}
|
||||
.code-block .fn{color:#7EB8FF;}
|
||||
.code-block .nm{color:#FFBA7B;}
|
||||
.code-block .ty{color:#FCD34D;}
|
||||
|
||||
/* TECH SECTION */
|
||||
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
|
||||
.tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:32px 28px;transition:box-shadow 0.2s;}
|
||||
.tech-card:hover{box-shadow:var(--sh-lg);}
|
||||
.tech-icon{width:44px;height:44px;background:var(--amber-soft);border:1px solid var(--amber-mid);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:18px;}
|
||||
.tech-card h3{font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.tech-card p{font-size:0.875rem;color:var(--fg-2);line-height:1.65;}
|
||||
.tech-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-mid);padding:3px 9px;border-radius:var(--r-full);}
|
||||
|
||||
/* RELATED */
|
||||
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
|
||||
.related-card{border:1px solid var(--border);border-radius:var(--r-4);padding:24px;transition:box-shadow 0.15s,border-color 0.15s;display:flex;flex-direction:column;gap:10px;}
|
||||
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.related-icon{font-size:1.25rem;}
|
||||
.related-card h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;}
|
||||
.related-card p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;flex:1;}
|
||||
.related-link{font-size:0.8125rem;font-weight:600;color:var(--amber);}
|
||||
|
||||
/* CTA */
|
||||
#cta-bottom{background:var(--bg-inv);padding:120px 40px;position:relative;overflow:hidden;text-align:center;}
|
||||
#cta-bottom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(245,158,11,0.08),transparent 60%),radial-gradient(ellipse 60% 80% at 70% 50%,rgba(124,58,237,0.08),transparent 60%);pointer-events:none;}
|
||||
.cta-inner{position:relative;max-width:680px;margin:0 auto;}
|
||||
.cta-headline{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:-0.045em;color:var(--fg-inv);line-height:1.05;margin-bottom:18px;}
|
||||
.cta-sub{font-size:1.0625rem;color:var(--fg-inv-2);margin-bottom:44px;line-height:1.65;}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72px 40px 40px;}
|
||||
.ft-inner{max-width:1120px;margin:0 auto;}
|
||||
.ft-top{display:grid;grid-template-columns:260px repeat(4,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:36px;}
|
||||
.ft-brand-logo{font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:rgba(255,255,255,0.92);margin-bottom:8px;}
|
||||
.ft-brand-logo span{color:#3385FF;}
|
||||
.ft-brand-tag{font-size:0.875rem;color:rgba(255,255,255,0.3);line-height:1.65;max-width:200px;}
|
||||
.ft-col h4{font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:16px;letter-spacing:-0.01em;}
|
||||
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
|
||||
.ft-col a{font-size:0.875rem;color:rgba(255,255,255,0.32);transition:color 0.14s;letter-spacing:-0.01em;}
|
||||
.ft-col a:hover{color:rgba(255,255,255,0.65);}
|
||||
.ft-bottom{display:flex;justify-content:space-between;align-items:center;}
|
||||
.ft-copy{font-size:0.8125rem;color:rgba(255,255,255,0.22);}
|
||||
|
||||
/* REVEAL */
|
||||
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
|
||||
.reveal.in{opacity:1;transform:none;}
|
||||
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
|
||||
.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
|
||||
.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
|
||||
.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
|
||||
.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}
|
||||
.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:0.28s;}
|
||||
.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:0.35s;}
|
||||
|
||||
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 2px rgba(245,158,11,0.2);}50%{box-shadow:0 0 0 4px rgba(245,158,11,0.08);}}
|
||||
|
||||
@media(max-width:1024px){.feat-split{grid-template-columns:1fr;gap:56px;}.feat-split.rev{direction:ltr;}.hiw-steps{grid-template-columns:1fr 1fr;gap:40px;}.hiw-steps::before{display:none;}.tech-grid{grid-template-columns:1fr 1fr;}.related-grid{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:768px){.wrap{padding:0 24px;}#nav{padding:0 24px;}.nav-inner{display:flex;justify-content:space-between;}.nav-links,.nav-actions .btn{display:none;}.nav-burger{display:flex;}#page-hero{padding:120px 24px 80px;}.pv-shell{margin-top:48px;}.hiw-steps{grid-template-columns:1fr;}.tech-grid,.related-grid{grid-template-columns:1fr;}.ft-top{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:480px){.ft-top{grid-template-columns:1fr;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li class="nav-dropdown">
|
||||
<a href="/#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item active" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon amber">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
|
||||
<a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
|
||||
<button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-mobile" id="nav-mobile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-mobile-ctas">
|
||||
<a href="#" class="btn btn-secondary">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Request Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="label reveal">⇄ Agent Bridge</span>
|
||||
<h1 class="d1 reveal">MCP channel to<br>Cursor, Claude Code<br>& more.</h1>
|
||||
<p class="subtitle reveal">Agent Bridge exposes your entire Origin Graph through the Model Context Protocol — so Cursor, Claude Code, and any MCP-compatible agent can read your component tree, run diffs, and propose changes without leaving the editor.</p>
|
||||
<div class="page-hero-ctas reveal">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product visual: split editor / canvas bridge -->
|
||||
<div class="pv-shell reveal">
|
||||
<div class="pv-chrome">
|
||||
<div class="pv-dot r"></div>
|
||||
<div class="pv-dot y"></div>
|
||||
<div class="pv-dot g"></div>
|
||||
<div class="pv-url">🔒 app.originmain.io/canvas — Agent Bridge active</div>
|
||||
</div>
|
||||
<div class="pv-canvas">
|
||||
<div class="pv-grid"></div>
|
||||
|
||||
<!-- Left panel: VS Code-style editor -->
|
||||
<div class="bridge-panel-left">
|
||||
<div class="bridge-panel-header">
|
||||
<span class="bridge-panel-title">Editor</span>
|
||||
<span class="bridge-panel-badge cursor">Cursor</span>
|
||||
</div>
|
||||
<div class="bridge-panel-body">
|
||||
<div class="editor-line"><span class="editor-ln">11</span><span class="editor-code"><span class="kw">const</span> <span class="fn">CardRoot</span> = <span class="fn">styled</span>.<span class="fn">div</span>`</span></div>
|
||||
<div class="editor-line"><span class="editor-ln">12</span><span class="editor-code" style="padding-left:16px;"><span class="prop">display</span>: <span class="str">flex</span>;</span></div>
|
||||
<div class="editor-line"><span class="editor-ln">13</span><span class="editor-code" style="padding-left:16px;"><span class="prop">flex-direction</span>: <span class="str">column</span>;</span></div>
|
||||
<div class="editor-line"><span class="editor-ln">14</span><span class="editor-code" style="padding-left:16px;"><span class="prop">border-radius</span>: <span class="str">var(--radius-md)</span>;</span></div>
|
||||
<div class="editor-line"><span class="editor-ln">15</span><span class="editor-code" style="padding-left:16px;"><span class="prop">padding</span>: <span class="num">16px</span>;</span></div>
|
||||
<!-- Inline Cursor suggestion -->
|
||||
<div class="editor-suggestion">
|
||||
<div class="editor-suggestion-label">Cursor suggestion · via Agent Bridge</div>
|
||||
<div class="editor-suggestion-diff">
|
||||
<span class="editor-diff-del">− padding: 16px;</span>
|
||||
<span class="editor-diff-add">+ padding: 24px;</span>
|
||||
</div>
|
||||
<div class="editor-suggestion-actions">
|
||||
<button class="editor-action-btn accept">Accept</button>
|
||||
<button class="editor-action-btn reject">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-line"><span class="editor-ln">16</span><span class="editor-code" style="padding-left:16px;"><span class="prop">overflow</span>: <span class="str">hidden</span>;</span></div>
|
||||
<div class="editor-line"><span class="editor-ln">17</span><span class="editor-code"><span class="str">`</span>;</span></div>
|
||||
<div class="editor-line" style="margin-top:6px;"><span class="editor-ln">18</span><span class="editor-code"></span></div>
|
||||
<div class="editor-line"><span class="editor-ln">19</span><span class="editor-code"><span class="cm">// diff_components() — origin graph context loaded</span></span></div>
|
||||
<div class="editor-line"><span class="editor-ln">20</span><span class="editor-code"><span class="cm">// 3 affected children: CardHeader, CardBody, CardFooter</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center bridge connector -->
|
||||
<div class="bridge-connector">
|
||||
<div class="bridge-line-top"></div>
|
||||
<div style="position:relative;display:flex;align-items:center;justify-content:center;">
|
||||
<div class="bridge-rings">
|
||||
<div class="bridge-pulse"></div>
|
||||
<div class="bridge-pulse bridge-pulse-2"></div>
|
||||
</div>
|
||||
<div class="bridge-icon">⇄</div>
|
||||
</div>
|
||||
<div class="bridge-line-bottom"></div>
|
||||
</div>
|
||||
|
||||
<!-- Right panel: Canvas intent diff -->
|
||||
<div class="bridge-panel-right">
|
||||
<div class="bridge-panel-header">
|
||||
<span class="bridge-panel-title">Canvas</span>
|
||||
<span class="bridge-panel-badge canvas">Intent Diff</span>
|
||||
</div>
|
||||
<div class="bridge-panel-body">
|
||||
<!-- Primary diff card -->
|
||||
<div class="diff-card">
|
||||
<div class="diff-card-header">
|
||||
<div class="diff-card-icon">△</div>
|
||||
<span class="diff-card-title">CardRoot</span>
|
||||
<span class="diff-card-agent">Proposed by: Cursor</span>
|
||||
</div>
|
||||
<div class="diff-row">
|
||||
<span class="diff-row-prop">padding</span>
|
||||
<div class="diff-row-vals">
|
||||
<span class="diff-val-old">16px</span>
|
||||
<span class="diff-val-arrow">→</span>
|
||||
<span class="diff-val-new">24px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff-actions">
|
||||
<button class="diff-btn accept">Accept diff</button>
|
||||
<button class="diff-btn reject">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary pending diff -->
|
||||
<div class="diff-card" style="opacity:0.5;">
|
||||
<div class="diff-card-header">
|
||||
<div class="diff-card-icon">△</div>
|
||||
<span class="diff-card-title">CardHeader</span>
|
||||
<span class="diff-card-agent">Proposed by: Cursor</span>
|
||||
</div>
|
||||
<div class="diff-row">
|
||||
<span class="diff-row-prop">gap</span>
|
||||
<div class="diff-row-vals">
|
||||
<span class="diff-val-old">8px</span>
|
||||
<span class="diff-val-arrow">→</span>
|
||||
<span class="diff-val-new">12px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- MCP status line -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-top:6px;">
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#F59E0B;animation:live-pulse 2s ease-in-out infinite;"></div>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.25);letter-spacing:0.06em;text-transform:uppercase;">MCP connected · 2 pending diffs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="how-it-works" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Protocol</span>
|
||||
<h2 class="d2">From handshake to diff<br>in four steps.</h2>
|
||||
<p class="subtitle">A JSON-RPC 2.0 MCP server sits between your AI agent and the Origin Graph. The agent calls tools. The bridge executes them. Proposed changes come back to you for review.</p>
|
||||
</div>
|
||||
<div class="hiw-steps stagger">
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">01</div>
|
||||
<h3>Agent connects</h3>
|
||||
<p>Add the Agent Bridge MCP endpoint to your Cursor or Claude Code settings. The MCP handshake authenticates via <code>AGENT_BRIDGE_SECRET</code> and announces available tool definitions.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">02</div>
|
||||
<h3>Tool call made</h3>
|
||||
<p>Your agent issues a JSON-RPC call — e.g. <code>diff_components({ before, after })</code>. The bridge validates the input schema with Zod before any execution begins.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">03</div>
|
||||
<h3>Bridge executes</h3>
|
||||
<p>Agent Bridge queries the live Origin Graph, runs the diff engine against your real component tree, and streams structured results back to the agent.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">04</div>
|
||||
<h3>Result returned</h3>
|
||||
<p>The agent receives a structured JSON response. Any proposed change is simultaneously queued as an Intent Diff in your canvas — ready for human review before anything applies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEEP DIVE 1: Real tools, not hallucinations -->
|
||||
<div class="section" style="padding:100px 40px;">
|
||||
<div class="feat-split reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-amber">MCP tool definitions</span>
|
||||
<h2 class="d3">Real tools,<br>not hallucinations.</h2>
|
||||
<p class="subtitle">Every agent tool is backed by a live query against your Origin Graph. The agent gets your actual component tree, real prop values, and real token relationships — not documentation that may have drifted from your codebase.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">⇄</span>Tool inputs are defined as JSON Schema and validated with Zod on every call. Malformed inputs never reach the graph.</li>
|
||||
<li><span class="feat-pt-icon">◉</span><code style="font-family:var(--mono);font-size:0.875em;background:var(--bg-muted);padding:1px 5px;border-radius:3px;">query_graph</code> runs structured traversals — find components by name, trace token usage, map dependency chains.</li>
|
||||
<li><span class="feat-pt-icon">△</span><code style="font-family:var(--mono);font-size:0.875em;background:var(--bg-muted);padding:1px 5px;border-radius:3px;">answer_question</code> gives agents plain-language answers grounded in the real graph, not training data.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Read the MCP docs</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:20px 18px;overflow:hidden;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px;">MCP tool definitions</div>
|
||||
|
||||
<!-- get_component -->
|
||||
<div style="margin-bottom:10px;padding:9px 11px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);border-radius:7px;">
|
||||
<div style="font-family:var(--mono);font-size:0.5625rem;color:#FCD34D;font-weight:600;margin-bottom:4px;">get_component</div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.28);line-height:1.75;">
|
||||
<div><span style="color:#C4A1FF;">in:</span> <span style="color:#7DDBA0;">{ name: string, includeChildren?: boolean }</span></div>
|
||||
<div><span style="color:#C4A1FF;">out:</span> <span style="color:#7DDBA0;">{ node: ComponentNode, props: PropSchema, children: ComponentNode[] }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- diff_components -->
|
||||
<div style="margin-bottom:10px;padding:9px 11px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);border-radius:7px;">
|
||||
<div style="font-family:var(--mono);font-size:0.5625rem;color:#FCD34D;font-weight:600;margin-bottom:4px;">diff_components</div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.28);line-height:1.75;">
|
||||
<div><span style="color:#C4A1FF;">in:</span> <span style="color:#7DDBA0;">{ before: ComponentSnapshot, after: ComponentSnapshot }</span></div>
|
||||
<div><span style="color:#C4A1FF;">out:</span> <span style="color:#7DDBA0;">{ diff: IntentDiff[], affectedCount: number }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- query_graph -->
|
||||
<div style="margin-bottom:10px;padding:9px 11px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);border-radius:7px;">
|
||||
<div style="font-family:var(--mono);font-size:0.5625rem;color:#FCD34D;font-weight:600;margin-bottom:4px;">query_graph</div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.28);line-height:1.75;">
|
||||
<div><span style="color:#C4A1FF;">in:</span> <span style="color:#7DDBA0;">{ query: string, depth?: number, filters?: GraphFilter[] }</span></div>
|
||||
<div><span style="color:#C4A1FF;">out:</span> <span style="color:#7DDBA0;">{ nodes: GraphNode[], edges: GraphEdge[], total: number }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- answer_question -->
|
||||
<div style="padding:9px 11px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);border-radius:7px;">
|
||||
<div style="font-family:var(--mono);font-size:0.5625rem;color:#FCD34D;font-weight:600;margin-bottom:4px;">answer_question</div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.28);line-height:1.75;">
|
||||
<div><span style="color:#C4A1FF;">in:</span> <span style="color:#7DDBA0;">{ question: string, context?: string[] }</span></div>
|
||||
<div><span style="color:#C4A1FF;">out:</span> <span style="color:#7DDBA0;">{ answer: string, sources: GraphNode[], confidence: number }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEEP DIVE 2: Auditable agent actions -->
|
||||
<div class="section section-muted" style="padding:100px 40px;">
|
||||
<div class="feat-split rev reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-amber">Audit trail</span>
|
||||
<h2 class="d3">Auditable agent<br>actions. Always.</h2>
|
||||
<p class="subtitle">Every change an agent proposes flows through the exact same Intent Diff review pipeline as a human edit. Nothing is applied silently. Every agent action is stamped, attributable, and reversible.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">△</span>Agent-proposed diffs appear in your canvas labeled with the source agent — Cursor, Claude Code, or any MCP-compatible client.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>Accept or reject individual diffs. The agent cannot bypass the review queue or apply changes directly.</li>
|
||||
<li><span class="feat-pt-icon">⇄</span>Every action is written to an append-only audit log with timestamp, agent identity, tool called, and full input/output payload.</li>
|
||||
</ul>
|
||||
<a href="/features/intent-diff.html" class="btn btn-primary">Explore Intent Diff</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:20px 18px;display:flex;flex-direction:column;gap:10px;overflow:hidden;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;">Intent Diff — agent queue</div>
|
||||
|
||||
<!-- Agent diff card -->
|
||||
<div style="background:rgba(245,158,11,0.05);border:1px solid rgba(245,158,11,0.14);border-radius:9px;padding:11px 13px;">
|
||||
<div style="display:flex;align-items:center;gap:7px;margin-bottom:8px;">
|
||||
<div style="width:22px;height:22px;border-radius:4px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;">△</div>
|
||||
<span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.72);font-weight:600;">CardRoot</span>
|
||||
<span style="margin-left:auto;font-family:var(--mono);font-size:0.4rem;letter-spacing:0.05em;text-transform:uppercase;padding:2px 6px;border-radius:99px;background:rgba(245,158,11,0.1);color:#FCD34D;border:1px solid rgba(245,158,11,0.18);white-space:nowrap;">Proposed by: Claude Code</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:4px;background:rgba(255,255,255,0.02);margin-bottom:3px;">
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.3);">padding</span>
|
||||
<div style="display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.5rem;">
|
||||
<span style="color:#F87171;text-decoration:line-through;opacity:0.7;">16px</span>
|
||||
<span style="color:rgba(255,255,255,0.2);">→</span>
|
||||
<span style="color:#34D399;">24px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:4px;background:rgba(255,255,255,0.02);margin-bottom:7px;">
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.3);">gap</span>
|
||||
<div style="display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.5rem;">
|
||||
<span style="color:#F87171;text-decoration:line-through;opacity:0.7;">8px</span>
|
||||
<span style="color:rgba(255,255,255,0.2);">→</span>
|
||||
<span style="color:#34D399;">12px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;">
|
||||
<button style="font-family:var(--mono);font-size:0.4375rem;letter-spacing:0.05em;padding:4px 10px;border-radius:4px;background:rgba(52,211,153,0.15);color:#34D399;border:1px solid rgba(52,211,153,0.22);cursor:pointer;">Accept diff</button>
|
||||
<button style="font-family:var(--mono);font-size:0.4375rem;letter-spacing:0.05em;padding:4px 10px;border-radius:4px;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.32);border:1px solid rgba(255,255,255,0.09);cursor:pointer;">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit log -->
|
||||
<div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:11px 13px;">
|
||||
<div style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.2);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;">Audit log</div>
|
||||
<div style="display:flex;flex-direction:column;gap:5px;">
|
||||
<div style="display:flex;align-items:center;gap:7px;">
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.18);min-width:52px;">14:02:31</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:#FCD34D;">claude-code</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.3);">diff_components</span>
|
||||
<span style="margin-left:auto;font-family:var(--mono);font-size:0.4375rem;color:#34D399;">queued</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;">
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.18);min-width:52px;">14:02:28</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:#C4A1FF;">cursor</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.3);">query_graph</span>
|
||||
<span style="margin-left:auto;font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.28);">ok</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;">
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.18);min-width:52px;">14:02:21</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:#C4A1FF;">cursor</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.3);">get_component</span>
|
||||
<span style="margin-left:auto;font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.28);">ok</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;">
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.18);min-width:52px;">14:02:09</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:#C4A1FF;">cursor</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.3);">answer_question</span>
|
||||
<span style="margin-left:auto;font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.28);">ok</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CODE BLOCK: Full tool schema reference -->
|
||||
<section class="section section-muted" style="padding:80px 40px;">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Developer reference</span>
|
||||
<h2 class="d2">The full tool schema.</h2>
|
||||
<p class="subtitle">Agent Bridge speaks standard JSON-RPC 2.0. Drop the endpoint into any MCP-compatible client and tool definitions auto-discover on connect.</p>
|
||||
</div>
|
||||
<div class="code-block reveal">
|
||||
<span class="cm">// Agent Bridge — MCP server tool manifest</span>
|
||||
<span class="cm">// Add to Cursor: Settings → MCP → Add Server → paste endpoint + secret</span>
|
||||
|
||||
<span class="kw">const</span> <span class="nm">tools</span> = [
|
||||
{
|
||||
<span class="nm">name</span>: <span class="str">"get_component"</span>,
|
||||
<span class="nm">description</span>: <span class="str">"Fetch a component node from the Origin Graph by name or ID"</span>,
|
||||
<span class="nm">inputSchema</span>: {
|
||||
<span class="nm">type</span>: <span class="str">"object"</span>,
|
||||
<span class="nm">properties</span>: {
|
||||
<span class="nm">name</span>: { <span class="nm">type</span>: <span class="str">"string"</span>, <span class="nm">description</span>: <span class="str">"Component display name"</span> },
|
||||
<span class="nm">includeChildren</span>: { <span class="nm">type</span>: <span class="str">"boolean"</span>, <span class="nm">default</span>: <span class="kw">false</span> }
|
||||
},
|
||||
<span class="nm">required</span>: [<span class="str">"name"</span>]
|
||||
}
|
||||
},
|
||||
{
|
||||
<span class="nm">name</span>: <span class="str">"diff_components"</span>,
|
||||
<span class="nm">description</span>: <span class="str">"Run a structural diff between two component snapshots"</span>,
|
||||
<span class="nm">inputSchema</span>: {
|
||||
<span class="nm">type</span>: <span class="str">"object"</span>,
|
||||
<span class="nm">properties</span>: {
|
||||
<span class="nm">before</span>: { <span class="nm">type</span>: <span class="str">"object"</span>, <span class="nm">description</span>: <span class="str">"ComponentSnapshot before change"</span> },
|
||||
<span class="nm">after</span>: { <span class="nm">type</span>: <span class="str">"object"</span>, <span class="nm">description</span>: <span class="str">"ComponentSnapshot after change"</span> }
|
||||
},
|
||||
<span class="nm">required</span>: [<span class="str">"before"</span>, <span class="str">"after"</span>]
|
||||
}
|
||||
},
|
||||
{
|
||||
<span class="nm">name</span>: <span class="str">"query_graph"</span>,
|
||||
<span class="nm">description</span>: <span class="str">"Traverse the Origin Graph — find components, tokens, and relationships"</span>,
|
||||
<span class="nm">inputSchema</span>: {
|
||||
<span class="nm">type</span>: <span class="str">"object"</span>,
|
||||
<span class="nm">properties</span>: {
|
||||
<span class="nm">query</span>: { <span class="nm">type</span>: <span class="str">"string"</span> },
|
||||
<span class="nm">depth</span>: { <span class="nm">type</span>: <span class="str">"number"</span>, <span class="nm">default</span>: <span class="ty">2</span> },
|
||||
<span class="nm">filters</span>: { <span class="nm">type</span>: <span class="str">"array"</span>, <span class="nm">items</span>: { <span class="nm">type</span>: <span class="str">"string"</span> } }
|
||||
},
|
||||
<span class="nm">required</span>: [<span class="str">"query"</span>]
|
||||
}
|
||||
},
|
||||
{
|
||||
<span class="nm">name</span>: <span class="str">"answer_question"</span>,
|
||||
<span class="nm">description</span>: <span class="str">"Ask a natural-language question grounded in the live Origin Graph"</span>,
|
||||
<span class="nm">inputSchema</span>: {
|
||||
<span class="nm">type</span>: <span class="str">"object"</span>,
|
||||
<span class="nm">properties</span>: {
|
||||
<span class="nm">question</span>: { <span class="nm">type</span>: <span class="str">"string"</span> },
|
||||
<span class="nm">context</span>: { <span class="nm">type</span>: <span class="str">"array"</span>, <span class="nm">items</span>: { <span class="nm">type</span>: <span class="str">"string"</span> } }
|
||||
},
|
||||
<span class="nm">required</span>: [<span class="str">"question"</span>]
|
||||
}
|
||||
}
|
||||
];
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECH CARDS -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Technical foundation</span>
|
||||
<h2 class="d2">Built on open protocols.</h2>
|
||||
<p class="subtitle">Agent Bridge is a first-class MCP server. No proprietary SDKs, no vendor lock-in. If your agent speaks MCP, it works.</p>
|
||||
</div>
|
||||
<div class="tech-grid stagger">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">📡</div>
|
||||
<h3>JSON-RPC 2.0</h3>
|
||||
<p>Every tool call and response follows the JSON-RPC 2.0 specification exactly — standard request/response envelopes, structured error codes, and batch request support out of the box.</p>
|
||||
<span class="tech-tag">Protocol</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⇄</div>
|
||||
<h3>MCP protocol</h3>
|
||||
<p>Agent Bridge registers as a full MCP server — tool discovery, capability negotiation, and streaming all follow the Model Context Protocol spec. Works with Cursor, Claude Code, and any future MCP client.</p>
|
||||
<span class="tech-tag">Standard</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🛡</div>
|
||||
<h3>Tool schema validation</h3>
|
||||
<p>Every inbound tool call is validated against a Zod schema before any execution. Malformed inputs are rejected with structured JSON-RPC error responses — the graph is never reached by bad data.</p>
|
||||
<span class="tech-tag">Zod</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🔑</div>
|
||||
<h3>AGENT_BRIDGE_SECRET auth</h3>
|
||||
<p>Authentication is token-based via a pre-shared <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">AGENT_BRIDGE_SECRET</code>. Set it once in your MCP client config — all subsequent calls are bearer-authenticated automatically.</p>
|
||||
<span class="tech-tag">Security</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⚡</div>
|
||||
<h3>Streaming responses</h3>
|
||||
<p>Large graph queries and diff results stream back incrementally as NDJSON. Your agent receives the first nodes immediately — no waiting for the full response payload to accumulate server-side.</p>
|
||||
<span class="tech-tag">Performance</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">📋</div>
|
||||
<h3>Audit log for agent actions</h3>
|
||||
<p>Every agent action is persisted to an append-only audit log — agent identity, tool called, inputs, outputs, and timestamp. Queryable from the canvas and exportable to JSON at any time.</p>
|
||||
<span class="tech-tag">Compliance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RELATED FEATURES -->
|
||||
<section class="section section-muted">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Connected features</span>
|
||||
<h2 class="d2">Agent Bridge is<br>one half of the loop.</h2>
|
||||
<p class="subtitle">Agents read from the Origin Graph and write back through Intent Diff. The whole system is the pipeline.</p>
|
||||
</div>
|
||||
<div class="related-grid stagger">
|
||||
<a class="related-card" href="/features/origin-graph.html">
|
||||
<div class="related-icon">◉</div>
|
||||
<h3>Origin Graph</h3>
|
||||
<p>The queryable index that Agent Bridge reads from. Every component, token, and relationship in your codebase — live, traversable, and always in sync with your real code.</p>
|
||||
<span class="related-link">Explore Origin Graph →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/intent-diff.html">
|
||||
<div class="related-icon">△</div>
|
||||
<h3>Intent Diff</h3>
|
||||
<p>Every change an agent proposes enters the same Intent Diff review pipeline as a human edit. Nothing gets applied without your explicit sign-off — every agent action is auditable.</p>
|
||||
<span class="related-link">Explore Intent Diff →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/completion-zone.html">
|
||||
<div class="related-icon">◈</div>
|
||||
<h3>Completion Zone</h3>
|
||||
<p>Mark a region in the canvas and let AI fill it using your design language constraints. Pairs with Agent Bridge for end-to-end agentic design-to-code sessions.</p>
|
||||
<span class="related-link">Explore Completion Zone →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-bottom">
|
||||
<div class="cta-inner">
|
||||
<h2 class="cta-headline">Give your agents<br>real context.</h2>
|
||||
<p class="cta-sub">Connect Cursor or Claude Code to your live Origin Graph in under five minutes. No hallucinated docs — just your actual codebase, queryable from any MCP agent.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="ft-inner">
|
||||
<div class="ft-top">
|
||||
<div>
|
||||
<div class="ft-brand-logo">Origin<span>main</span></div>
|
||||
<p class="ft-brand-tag">Where design intent becomes production code.</p>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Integrations</h4>
|
||||
<ul>
|
||||
<li><a href="/features/integrations.html">All integrations</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Linear</a></li>
|
||||
<li><a href="#">Slack</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Developers</h4>
|
||||
<ul>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">MCP Protocol</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-bottom">
|
||||
<span class="ft-copy">© 2025 Originmain. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>20);});
|
||||
// Dropdown: delay-based hover (desktop) + click (mobile/touch)
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd=>{const menu=dd.querySelector('.nav-dropdown-menu');let t;const open=()=>{clearTimeout(t);dd.classList.add('open');menu.classList.add('open');};const close=()=>{t=setTimeout(()=>{dd.classList.remove('open');menu.classList.remove('open');},150);};dd.addEventListener('mouseenter',open);dd.addEventListener('mouseleave',close);menu.addEventListener('mouseenter',open);menu.addEventListener('mouseleave',close);dd.querySelector('a').addEventListener('click',e=>{if(window.matchMedia('(hover:none)').matches||window.innerWidth<=1024){e.preventDefault();const o=menu.classList.toggle('open');dd.classList.toggle('open',o);}});});
|
||||
// Mobile product sub-accordion
|
||||
const mpt=document.getElementById('mob-product-toggle'),mns=document.getElementById('nav-mobile-sub'),mdc=document.getElementById('mob-dd-caret');if(mpt&&mns){mpt.addEventListener('click',e=>{e.preventDefault();const o=mns.classList.toggle('open');if(mdc)mdc.style.transform=o?'rotate(180deg)':'';});}
|
||||
// Burger
|
||||
const burger=document.getElementById('nav-burger'),mob=document.getElementById('nav-mobile');
|
||||
burger.addEventListener('click',()=>{const o=mob.classList.toggle('open');burger.classList.toggle('open',o);burger.setAttribute('aria-expanded',o);});
|
||||
// Reveal
|
||||
const io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.12});
|
||||
document.querySelectorAll('.reveal,.stagger').forEach(el=>io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,805 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Completion Zone — Originmain</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-muted:#F4F4F5;--bg-strong:#EBEBEB;--bg-inv:#0A0A0A;--bg-inv-2:#141414;--bg-inv-3:#1C1C1C;--fg:#0A0A0A;--fg-2:#52525B;--fg-3:#A1A1AA;--fg-4:#D4D4D8;--fg-inv:rgba(255,255,255,0.92);--fg-inv-2:rgba(255,255,255,0.52);--fg-inv-3:rgba(255,255,255,0.28);--blue:#0066FF;--blue-dark:#0050CC;--blue-light:#3385FF;--blue-soft:rgba(0,102,255,0.07);--blue-mid:rgba(0,102,255,0.15);--green:#10B981;--green-dark:#059669;--green-light:#34D399;--green-soft:rgba(16,185,129,0.07);--green-mid:rgba(16,185,129,0.18);--purple:#7C3AED;--teal:#0891B2;--border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.12);--border-inv:rgba(255,255,255,0.08);--border-inv-2:rgba(255,255,255,0.14);--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:20px;--r-6:24px;--r-full:9999px;--sh-xs:0 1px 2px rgba(0,0,0,0.05);--sh-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05);--sh-md:0 4px 8px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);--sh-lg:0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.05);--sh-xl:0 20px 40px rgba(0,0,0,0.09),0 8px 16px rgba(0,0,0,0.05);--sh-2xl:0 32px 64px rgba(0,0,0,0.11),0 16px 32px rgba(0,0,0,0.06);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
|
||||
img,svg{display:block;max-width:100%;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
|
||||
.section{padding:112px 0;}
|
||||
.section-muted{background:var(--bg-subtle);}
|
||||
.section-dark{background:var(--bg-inv);}
|
||||
.d1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;color:var(--fg);}
|
||||
.d2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.038em;color:var(--fg);}
|
||||
.d3{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-0.028em;color:var(--fg);}
|
||||
.subtitle{font-size:clamp(1rem,1.8vw,1.125rem);font-weight:400;line-height:1.75;color:var(--fg-2);}
|
||||
.label{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);}
|
||||
.label-green{color:var(--green);}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:0.9375rem;font-weight:600;padding:11px 22px;border-radius:var(--r-2);transition:transform 0.12s cubic-bezier(.16,1,.3,1),opacity 0.12s,box-shadow 0.12s;white-space:nowrap;letter-spacing:-0.01em;position:relative;overflow:hidden;}
|
||||
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}
|
||||
.btn:hover::after{background:rgba(255,255,255,0.06);}
|
||||
.btn:active{transform:scale(0.98)!important;}
|
||||
.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--sh-sm);}
|
||||
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border-2);}
|
||||
.btn-secondary:hover{background:var(--bg-muted);transform:translateY(-1px);}
|
||||
.btn-green{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(16,185,129,0.35);}
|
||||
.btn-green:hover{background:var(--green-dark);transform:translateY(-1px);}
|
||||
.btn-lg{font-size:1rem;padding:13px 28px;}
|
||||
.btn-white{background:#fff;color:#0A0A0A;box-shadow:0 4px 12px rgba(255,255,255,0.15);}
|
||||
.btn-white:hover{background:#F5F5F5;transform:translateY(-1px);}
|
||||
.btn-outline-white{background:transparent;color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.18);}
|
||||
.btn-outline-white:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
|
||||
.divider{height:1px;background:var(--border);}
|
||||
.section-head{text-align:center;max-width:640px;margin:0 auto 72px;}
|
||||
.section-head .label{display:block;margin-bottom:16px;}
|
||||
.section-head .d2{margin-bottom:18px;}
|
||||
|
||||
/* NAV */
|
||||
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;padding:0 40px;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;}
|
||||
#nav.scrolled{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border);box-shadow:var(--sh-xs);}
|
||||
.nav-inner{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
|
||||
.nav-logo{justify-self:start;font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:var(--fg);display:flex;align-items:center;gap:2px;}
|
||||
.nav-logo span{color:var(--blue);}
|
||||
.nav-links{justify-self:center;display:flex;align-items:center;gap:0;list-style:none;}
|
||||
.nav-links a{font-size:0.9375rem;font-weight:500;color:var(--fg-2);padding:6px 14px;border-radius:var(--r-1);transition:color 0.12s,background 0.12s;letter-spacing:-0.01em;}
|
||||
.nav-links a:hover{color:var(--fg);}
|
||||
.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
|
||||
|
||||
/* Dropdown */
|
||||
.nav-dropdown{position:relative;}
|
||||
.nav-dropdown>a{display:flex;align-items:center;gap:4px;}
|
||||
.nav-dd-caret{transition:transform 0.15s;}
|
||||
/* caret rotation handled via JS .open class */
|
||||
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--sh-xl);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:opacity 0.15s,transform 0.15s,visibility 0.15s;pointer-events:none;}
|
||||
.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;}
|
||||
.nav-dropdown.open .nav-dd-caret{transform:rotate(180deg);}
|
||||
/* Mobile sub-nav */
|
||||
.nav-mobile-sub{display:none;padding:2px 0 6px 14px;flex-direction:column;}
|
||||
.nav-mobile-sub.open{display:flex;}
|
||||
.nav-mobile-sub a{font-size:0.875rem;color:rgba(255,255,255,0.4);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);letter-spacing:-0.01em;transition:color 0.1s;}
|
||||
.nav-mobile-sub a:last-child{border-bottom:none;}
|
||||
.nav-mobile-sub a:hover{color:rgba(255,255,255,0.8);}
|
||||
/* Dark hero: white nav before scrolling */
|
||||
#nav:not(.scrolled) .nav-logo{color:rgba(255,255,255,0.92);}
|
||||
#nav:not(.scrolled) .nav-logo span{color:#3385FF;}
|
||||
#nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.5);}
|
||||
#nav:not(.scrolled) .nav-links a:hover{color:rgba(255,255,255,0.9);}
|
||||
#nav:not(.scrolled) .nav-actions .btn-secondary{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.2);background:transparent;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
|
||||
.nav-dd-item:hover{background:var(--bg-muted);}
|
||||
.nav-dd-item.active{background:var(--green-soft);}
|
||||
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
|
||||
.nav-dd-icon.green{background:var(--green-soft);border-color:var(--green-mid);}
|
||||
.nav-dd-text{display:flex;flex-direction:column;}
|
||||
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
|
||||
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
|
||||
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0;}
|
||||
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-2);}
|
||||
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),opacity 0.18s;transform-origin:center;}
|
||||
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||||
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
|
||||
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||||
.nav-mobile{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.07);padding:12px 24px 24px;flex-direction:column;gap:2px;}
|
||||
.nav-mobile.open{display:flex;}
|
||||
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;}
|
||||
.nav-mobile ul li a{display:block;font-size:1rem;font-weight:500;color:var(--fg-2);padding:11px 4px;border-bottom:1px solid var(--border);letter-spacing:-0.01em;}
|
||||
.nav-mobile ul li:last-child a{border-bottom:none;}
|
||||
.nav-mobile-ctas{display:flex;gap:8px;margin-top:16px;}
|
||||
.nav-mobile-ctas .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.875rem;}
|
||||
|
||||
/* PAGE HERO */
|
||||
#page-hero{padding:140px 40px 100px;background:var(--bg-inv);position:relative;overflow:hidden;text-align:center;}
|
||||
#page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(16,185,129,0.13),transparent 60%),radial-gradient(ellipse 40% 40% at 80% 70%,rgba(52,211,153,0.07),transparent 50%);pointer-events:none;}
|
||||
.page-hero-inner{position:relative;max-width:800px;margin:0 auto;}
|
||||
.page-hero-inner .label{color:rgba(255,255,255,0.3);margin-bottom:20px;display:block;}
|
||||
.page-hero-inner .d1{color:var(--fg-inv);margin-bottom:22px;}
|
||||
.page-hero-inner .subtitle{color:var(--fg-inv-2);max-width:600px;margin:0 auto 44px;}
|
||||
.page-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* PRODUCT VISUAL */
|
||||
.pv-shell{width:100%;max-width:960px;margin:72px auto 0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 48px 96px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06);border-bottom:none;position:relative;}
|
||||
.pv-chrome{background:#1C1C22;height:40px;display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid rgba(255,255,255,0.05);}
|
||||
.pv-dot{width:11px;height:11px;border-radius:50%;}
|
||||
.pv-dot.r{background:#FF5F57;}
|
||||
.pv-dot.y{background:#FFBD2E;}
|
||||
.pv-dot.g{background:#28C840;}
|
||||
.pv-url{flex:1;margin:0 12px;background:rgba(255,255,255,0.06);border-radius:5px;height:25px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.3);max-width:320px;}
|
||||
.pv-canvas{background:#0D0D11;height:400px;position:relative;display:flex;align-items:center;justify-content:center;}
|
||||
.pv-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.055) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;}
|
||||
|
||||
/* COMPLETION BADGE */
|
||||
.pv-cz-badge{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.25);}
|
||||
.pv-cz-dot{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 0 2px rgba(16,185,129,0.25);animation:cz-pulse 2.4s ease-in-out infinite;}
|
||||
@keyframes cz-pulse{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,0.25);}50%{box-shadow:0 0 0 5px rgba(16,185,129,0.08);}}
|
||||
.pv-cz-txt{font-family:var(--mono);font-size:0.5625rem;color:#10B981;font-weight:600;}
|
||||
|
||||
/* Dashed placeholder shimmer */
|
||||
@keyframes shimmer-drift{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
|
||||
.cz-placeholder{border:1.5px dashed rgba(16,185,129,0.45);border-radius:8px;background:linear-gradient(90deg,rgba(16,185,129,0.03) 0%,rgba(16,185,129,0.09) 40%,rgba(52,211,153,0.12) 50%,rgba(16,185,129,0.09) 60%,rgba(16,185,129,0.03) 100%);background-size:200% 100%;animation:shimmer-drift 2.8s ease-in-out infinite;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(16,185,129,0.1),inset 0 0 10px rgba(16,185,129,0.04);}
|
||||
.cz-q{font-family:var(--mono);font-size:1.125rem;color:rgba(16,185,129,0.55);font-weight:700;}
|
||||
|
||||
/* HOW IT WORKS */
|
||||
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative;}
|
||||
.hiw-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);}
|
||||
.hiw-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1;}
|
||||
.hiw-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--green);margin-bottom:20px;box-shadow:var(--sh-sm);}
|
||||
.hiw-step h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.hiw-step p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;}
|
||||
.hiw-step-tag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:0.5625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border:1px solid var(--green-mid);padding:2px 8px;border-radius:var(--r-full);}
|
||||
|
||||
/* FEATURE SPLIT */
|
||||
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;max-width:1120px;margin:0 auto;}
|
||||
.feat-split.rev{direction:rtl;}
|
||||
.feat-split.rev>*{direction:ltr;}
|
||||
.feat-copy .label{display:block;margin-bottom:16px;}
|
||||
.feat-copy .d3{margin-bottom:16px;}
|
||||
.feat-copy .subtitle{margin-bottom:28px;}
|
||||
.feat-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
|
||||
.feat-pts li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.55;}
|
||||
.feat-pt-icon{width:20px;height:20px;border-radius:3px;background:var(--green-soft);border:1px solid var(--green-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:0.625rem;color:var(--green);}
|
||||
|
||||
/* Feature visual */
|
||||
.feat-vis{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--sh-2xl);border:1px solid var(--border);aspect-ratio:4/3;position:relative;}
|
||||
.feat-vis-dark{background:#0D0D11;border-color:rgba(255,255,255,0.07);}
|
||||
.feat-vis-light{background:var(--bg-muted);}
|
||||
|
||||
/* COMPARISON VISUAL */
|
||||
.cz-compare{display:grid;grid-template-columns:1fr 1fr;height:100%;}
|
||||
.cz-compare-col{padding:20px 18px;display:flex;flex-direction:column;gap:10px;}
|
||||
.cz-compare-col.bad{border-right:1px solid rgba(255,255,255,0.05);}
|
||||
.cz-col-head{display:flex;align-items:center;gap:7px;margin-bottom:4px;}
|
||||
.cz-col-badge{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-full);font-weight:600;}
|
||||
.cz-col-badge.bad{background:rgba(239,68,68,0.1);color:#F87171;border:1px solid rgba(239,68,68,0.2);}
|
||||
.cz-col-badge.good{background:rgba(16,185,129,0.1);color:#34D399;border:1px solid rgba(16,185,129,0.22);}
|
||||
.cz-row{display:flex;align-items:flex-start;gap:7px;padding:7px 9px;border-radius:6px;}
|
||||
.cz-row.bad-row{background:rgba(239,68,68,0.05);}
|
||||
.cz-row.good-row{background:rgba(16,185,129,0.05);}
|
||||
.cz-row-icon{font-size:0.625rem;flex-shrink:0;margin-top:1px;}
|
||||
.cz-row-text{font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.55);line-height:1.55;}
|
||||
.cz-row-text strong{display:block;font-weight:600;margin-bottom:1px;}
|
||||
.cz-row-text strong.bad-txt{color:#F87171;}
|
||||
.cz-row-text strong.good-txt{color:#34D399;}
|
||||
|
||||
/* TECH SECTION */
|
||||
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
|
||||
.tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:32px 28px;transition:box-shadow 0.2s;}
|
||||
.tech-card:hover{box-shadow:var(--sh-lg);}
|
||||
.tech-icon{width:44px;height:44px;background:var(--green-soft);border:1px solid var(--green-mid);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:18px;}
|
||||
.tech-card h3{font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.tech-card p{font-size:0.875rem;color:var(--fg-2);line-height:1.65;}
|
||||
.tech-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border:1px solid var(--green-mid);padding:3px 9px;border-radius:var(--r-full);}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);padding:24px;font-family:var(--mono);font-size:0.75rem;line-height:1.75;color:rgba(255,255,255,0.75);overflow-x:auto;}
|
||||
.code-block .kw{color:#7EB8FF;}
|
||||
.code-block .str{color:#7DDBA0;}
|
||||
.code-block .cm{color:rgba(255,255,255,0.28);}
|
||||
.code-block .fn{color:#FFBA7B;}
|
||||
.code-block .nm{color:#D4A0FF;}
|
||||
.code-block .grn{color:#34D399;}
|
||||
|
||||
/* RELATED */
|
||||
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
|
||||
.related-card{border:1px solid var(--border);border-radius:var(--r-4);padding:24px;transition:box-shadow 0.15s,border-color 0.15s;display:flex;flex-direction:column;gap:10px;}
|
||||
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.related-icon{font-size:1.25rem;}
|
||||
.related-card h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;}
|
||||
.related-card p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;flex:1;}
|
||||
.related-link{font-size:0.8125rem;font-weight:600;color:var(--green);}
|
||||
|
||||
/* CTA */
|
||||
#cta-bottom{background:var(--bg-inv);padding:120px 40px;position:relative;overflow:hidden;text-align:center;}
|
||||
#cta-bottom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(16,185,129,0.1),transparent 60%),radial-gradient(ellipse 60% 80% at 70% 50%,rgba(52,211,153,0.07),transparent 60%);pointer-events:none;}
|
||||
.cta-inner{position:relative;max-width:680px;margin:0 auto;}
|
||||
.cta-headline{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:-0.045em;color:var(--fg-inv);line-height:1.05;margin-bottom:18px;}
|
||||
.cta-sub{font-size:1.0625rem;color:var(--fg-inv-2);margin-bottom:44px;line-height:1.65;}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72px 40px 40px;}
|
||||
.ft-inner{max-width:1120px;margin:0 auto;}
|
||||
.ft-top{display:grid;grid-template-columns:260px repeat(4,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:36px;}
|
||||
.ft-brand-logo{font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:rgba(255,255,255,0.92);margin-bottom:8px;}
|
||||
.ft-brand-logo span{color:#3385FF;}
|
||||
.ft-brand-tag{font-size:0.875rem;color:rgba(255,255,255,0.3);line-height:1.65;max-width:200px;}
|
||||
.ft-col h4{font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:16px;letter-spacing:-0.01em;}
|
||||
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
|
||||
.ft-col a{font-size:0.875rem;color:rgba(255,255,255,0.32);transition:color 0.14s;letter-spacing:-0.01em;}
|
||||
.ft-col a:hover{color:rgba(255,255,255,0.65);}
|
||||
.ft-bottom{display:flex;justify-content:space-between;align-items:center;}
|
||||
.ft-copy{font-size:0.8125rem;color:rgba(255,255,255,0.22);}
|
||||
|
||||
/* REVEAL */
|
||||
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
|
||||
.reveal.in{opacity:1;transform:none;}
|
||||
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
|
||||
.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
|
||||
.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
|
||||
.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
|
||||
.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}
|
||||
.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:0.28s;}
|
||||
.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:0.35s;}
|
||||
|
||||
@media(max-width:1024px){.feat-split{grid-template-columns:1fr;gap:56px;}.feat-split.rev{direction:ltr;}.hiw-steps{grid-template-columns:1fr 1fr;gap:40px;}.hiw-steps::before{display:none;}.tech-grid{grid-template-columns:1fr 1fr;}.related-grid{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:768px){.wrap{padding:0 24px;}#nav{padding:0 24px;}.nav-inner{display:flex;justify-content:space-between;}.nav-links,.nav-actions .btn{display:none;}.nav-burger{display:flex;}#page-hero{padding:120px 24px 80px;}.pv-shell{margin-top:48px;}.hiw-steps{grid-template-columns:1fr;}.tech-grid,.related-grid{grid-template-columns:1fr;}.ft-top{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:480px){.ft-top{grid-template-columns:1fr;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li class="nav-dropdown">
|
||||
<a href="/#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item active" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon green">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
|
||||
<a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
|
||||
<button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-mobile" id="nav-mobile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-mobile-ctas">
|
||||
<a href="#" class="btn btn-secondary">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Request Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="label reveal">◈ Completion Zone</span>
|
||||
<h1 class="d1 reveal">AI-filled design,<br>constrained to your system.</h1>
|
||||
<p class="subtitle reveal">Describe a component in plain language. Completion Zone generates it using only tokens, variants, and patterns that already exist in your design system — no hallucinated styles, no drift.</p>
|
||||
<div class="page-hero-ctas reveal">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product visual: before / after canvas -->
|
||||
<div class="pv-shell reveal">
|
||||
<div class="pv-chrome">
|
||||
<div class="pv-dot r"></div>
|
||||
<div class="pv-dot y"></div>
|
||||
<div class="pv-dot g"></div>
|
||||
<div class="pv-url">🔒 app.originmain.io/canvas — Completion Zone</div>
|
||||
</div>
|
||||
<div class="pv-canvas">
|
||||
<div class="pv-grid"></div>
|
||||
<div class="pv-cz-badge"><div class="pv-cz-dot"></div><span class="pv-cz-txt">Constrained generation</span></div>
|
||||
|
||||
<!-- BEFORE: partial card with dashed placeholder -->
|
||||
<div style="position:absolute;left:76px;top:36px;width:256px;">
|
||||
<div style="font-family:var(--mono);font-size:0.475rem;color:rgba(16,185,129,0.55);margin-bottom:5px;">MetricsCard — completing…</div>
|
||||
<div style="background:#1A1A22;border-radius:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.07);">
|
||||
<div style="padding:14px 14px 0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||
<span style="font-size:0.625rem;font-weight:700;color:rgba(255,255,255,0.8);letter-spacing:-0.01em;">Weekly Overview</span>
|
||||
<span style="font-size:0.475rem;background:rgba(16,185,129,0.12);color:#34D399;padding:2px 6px;border-radius:99px;font-weight:600;border:1px solid rgba(16,185,129,0.2);">Live</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;">
|
||||
<div style="background:rgba(255,255,255,0.04);border-radius:5px;padding:8px 9px;border:1px solid rgba(255,255,255,0.06);">
|
||||
<div style="font-size:0.45rem;color:rgba(255,255,255,0.3);margin-bottom:2px;font-family:var(--mono);">Sessions</div>
|
||||
<div style="font-size:0.875rem;font-weight:800;color:rgba(255,255,255,0.88);letter-spacing:-0.04em;">4,821</div>
|
||||
<div style="font-size:0.45rem;color:#34D399;margin-top:1px;">↑ 12%</div>
|
||||
</div>
|
||||
<div style="background:rgba(255,255,255,0.04);border-radius:5px;padding:8px 9px;border:1px solid rgba(255,255,255,0.06);">
|
||||
<div style="font-size:0.45rem;color:rgba(255,255,255,0.3);margin-bottom:2px;font-family:var(--mono);">Conversions</div>
|
||||
<div style="font-size:0.875rem;font-weight:800;color:rgba(255,255,255,0.88);letter-spacing:-0.04em;">9.4%</div>
|
||||
<div style="font-size:0.45rem;color:#34D399;margin-top:1px;">↑ 2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashed shimmer placeholder -->
|
||||
<div class="cz-placeholder" style="height:48px;border-radius:6px;margin-bottom:12px;position:relative;">
|
||||
<span class="cz-q">?</span>
|
||||
<span style="position:absolute;top:-8px;right:7px;font-family:var(--mono);font-size:0.425rem;color:rgba(16,185,129,0.55);background:#0D0D11;padding:0 4px;">metric badge</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 14px 12px;">
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span style="font-size:0.45rem;color:rgba(255,255,255,0.3);font-family:var(--mono);">Goal progress</span><span style="font-size:0.45rem;color:rgba(255,255,255,0.5);font-family:var(--mono);">68%</span></div>
|
||||
<div style="height:2.5px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;"><div style="height:100%;width:68%;background:linear-gradient(90deg,#10B981,#34D399);border-radius:99px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Prompt input -->
|
||||
<div style="margin-top:8px;background:#111118;border:1px solid rgba(16,185,129,0.3);border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:7px;box-shadow:0 0 0 3px rgba(16,185,129,0.06);">
|
||||
<span style="font-size:0.475rem;color:rgba(16,185,129,0.7);">◈</span>
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.55);flex:1;">Add a metric badge to the top-right corner</span>
|
||||
<span style="display:inline-block;width:1.5px;height:10px;background:#10B981;border-radius:1px;animation:cz-pulse 1s ease-in-out infinite;"></span>
|
||||
</div>
|
||||
<div style="display:flex;gap:5px;margin-top:5px;padding:0 1px;align-items:center;">
|
||||
<div style="font-family:var(--mono);font-size:0.45rem;color:rgba(255,255,255,0.22);">Matching:</div>
|
||||
<div style="font-family:var(--mono);font-size:0.45rem;color:rgba(16,185,129,0.65);background:rgba(16,185,129,0.07);padding:1px 5px;border-radius:3px;border:1px solid rgba(16,185,129,0.15);">MetricBadge</div>
|
||||
<div style="font-family:var(--mono);font-size:0.45rem;color:rgba(255,255,255,0.22);">·</div>
|
||||
<div style="font-family:var(--mono);font-size:0.45rem;color:rgba(16,185,129,0.65);background:rgba(16,185,129,0.07);padding:1px 5px;border-radius:3px;border:1px solid rgba(16,185,129,0.15);">color.success</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:10;">
|
||||
<div style="font-family:var(--mono);font-size:0.45rem;color:rgba(16,185,129,0.45);white-space:nowrap;">constrained</div>
|
||||
<div style="font-size:1.125rem;color:rgba(16,185,129,0.65);">→</div>
|
||||
<div style="font-family:var(--mono);font-size:0.45rem;color:rgba(16,185,129,0.45);white-space:nowrap;">generation</div>
|
||||
</div>
|
||||
|
||||
<!-- AFTER: completed card -->
|
||||
<div style="position:absolute;right:76px;top:36px;width:244px;">
|
||||
<div style="font-family:var(--mono);font-size:0.475rem;color:rgba(16,185,129,0.55);margin-bottom:5px;">MetricsCard — completed</div>
|
||||
<div style="background:#1A1A22;border-radius:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 0 1.5px rgba(16,185,129,0.28);border:1px solid rgba(16,185,129,0.18);">
|
||||
<div style="padding:14px 14px 0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||
<span style="font-size:0.625rem;font-weight:700;color:rgba(255,255,255,0.8);letter-spacing:-0.01em;">Weekly Overview</span>
|
||||
<span style="font-size:0.475rem;background:rgba(16,185,129,0.12);color:#34D399;padding:2px 6px;border-radius:99px;font-weight:600;border:1px solid rgba(16,185,129,0.2);">Live</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;">
|
||||
<div style="background:rgba(255,255,255,0.04);border-radius:5px;padding:8px 9px;border:1px solid rgba(255,255,255,0.06);">
|
||||
<div style="font-size:0.45rem;color:rgba(255,255,255,0.3);margin-bottom:2px;font-family:var(--mono);">Sessions</div>
|
||||
<div style="font-size:0.875rem;font-weight:800;color:rgba(255,255,255,0.88);letter-spacing:-0.04em;">4,821</div>
|
||||
<div style="font-size:0.45rem;color:#34D399;margin-top:1px;">↑ 12%</div>
|
||||
</div>
|
||||
<div style="background:rgba(255,255,255,0.04);border-radius:5px;padding:8px 9px;border:1px solid rgba(255,255,255,0.06);">
|
||||
<div style="font-size:0.45rem;color:rgba(255,255,255,0.3);margin-bottom:2px;font-family:var(--mono);">Conversions</div>
|
||||
<div style="font-size:0.875rem;font-weight:800;color:rgba(255,255,255,0.88);letter-spacing:-0.04em;">9.4%</div>
|
||||
<div style="font-size:0.45rem;color:#34D399;margin-top:1px;">↑ 2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filled metric badge component -->
|
||||
<div style="background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.22);border-radius:6px;padding:8px 11px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 0 10px rgba(16,185,129,0.07);">
|
||||
<div>
|
||||
<div style="font-size:0.425rem;font-family:var(--mono);color:rgba(255,255,255,0.3);margin-bottom:1px;">Avg. session</div>
|
||||
<div style="font-size:0.8125rem;font-weight:800;color:#34D399;letter-spacing:-0.04em;">3m 42s</div>
|
||||
</div>
|
||||
<div style="font-size:0.45rem;background:rgba(16,185,129,0.15);color:#34D399;padding:2px 7px;border-radius:99px;font-weight:700;border:1px solid rgba(16,185,129,0.25);">↑ 8%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 14px 12px;">
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span style="font-size:0.45rem;color:rgba(255,255,255,0.3);font-family:var(--mono);">Goal progress</span><span style="font-size:0.45rem;color:rgba(255,255,255,0.5);font-family:var(--mono);">68%</span></div>
|
||||
<div style="height:2.5px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;"><div style="height:100%;width:68%;background:linear-gradient(90deg,#10B981,#34D399);border-radius:99px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-top:6px;padding:0 1px;">
|
||||
<span style="font-family:var(--mono);font-size:0.425rem;color:rgba(16,185,129,0.65);">✓ MetricBadge variant="success" · color.success.600 · spacing.md</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="how-it-works" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Architecture</span>
|
||||
<h2 class="d2">From prompt to placed component in four steps.</h2>
|
||||
<p class="subtitle">Completion Zone is not a generic AI. Every generation pass is anchored to the full context of your Origin Graph — so the output is always on-system.</p>
|
||||
</div>
|
||||
<div class="hiw-steps stagger">
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">01</div>
|
||||
<h3>Prompt captured</h3>
|
||||
<p>"Add a stats row below the chart" — your plain-language intent is parsed and the target artboard region is identified.</p>
|
||||
<span class="hiw-step-tag">Natural language</span>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">02</div>
|
||||
<h3>Graph context injected</h3>
|
||||
<p>Relevant components, design tokens, spacing scales, and color palettes are fetched from your Origin Graph and assembled into the model context.</p>
|
||||
<span class="hiw-step-tag">Origin Graph</span>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">03</div>
|
||||
<h3>AI generates</h3>
|
||||
<p>Claude constrains its output strictly to the graph context — only existing variants, only tokens in your scale. No new styles are ever invented.</p>
|
||||
<span class="hiw-step-tag">Constrained output</span>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">04</div>
|
||||
<h3>Component placed</h3>
|
||||
<p>The generated component is written into the artboard, the live canvas updates, and the result is emitted as an Intent Diff ready to ship.</p>
|
||||
<span class="hiw-step-tag">Live Artboard</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEEP DIVE 1: Not generation — completion -->
|
||||
<div class="section" style="padding:100px 40px;">
|
||||
<div class="feat-split reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-green">Key differentiator</span>
|
||||
<h2 class="d3">Not generation —<br>completion.</h2>
|
||||
<p class="subtitle">Generic AI tools invent. Completion Zone finishes. The difference is the constraint layer: every output token is validated against your existing design system before anything touches the canvas.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">◈</span>Zero design drift — the AI only uses tokens that already exist in your system, never creating new ones.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>Only variants that exist — if your Button has three variants, the AI can only choose from those three.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>Only spacings from your scale — no magic numbers, no arbitrary pixel values slipping through.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>Generates real code, not images — the output is a live component on your artboard, not a static screenshot.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Request early access</a>
|
||||
</div>
|
||||
|
||||
<!-- Two-column comparison visual -->
|
||||
<div class="feat-vis feat-vis-dark reveal" style="overflow:hidden;">
|
||||
<div class="cz-compare" style="height:100%;">
|
||||
<!-- Generic AI -->
|
||||
<div class="cz-compare-col bad">
|
||||
<div class="cz-col-head">
|
||||
<span class="cz-col-badge bad">Generic AI</span>
|
||||
</div>
|
||||
<div style="font-family:var(--mono);font-size:0.475rem;color:rgba(255,255,255,0.2);margin-bottom:5px;letter-spacing:0.06em;text-transform:uppercase;">Output</div>
|
||||
<div class="cz-row bad-row">
|
||||
<span class="cz-row-icon" style="color:#F87171;">✗</span>
|
||||
<div class="cz-row-text"><strong class="bad-txt">Arbitrary styles</strong>background: #2D3748 · padding: 14px 18px</div>
|
||||
</div>
|
||||
<div class="cz-row bad-row">
|
||||
<span class="cz-row-icon" style="color:#F87171;">✗</span>
|
||||
<div class="cz-row-text"><strong class="bad-txt">New tokens introduced</strong>--new-color-7: #1a202c</div>
|
||||
</div>
|
||||
<div class="cz-row bad-row">
|
||||
<span class="cz-row-icon" style="color:#F87171;">✗</span>
|
||||
<div class="cz-row-text"><strong class="bad-txt">Inconsistent variants</strong>Button size="xl" — not in your system</div>
|
||||
</div>
|
||||
<div class="cz-row bad-row">
|
||||
<span class="cz-row-icon" style="color:#F87171;">✗</span>
|
||||
<div class="cz-row-text"><strong class="bad-txt">Magic numbers</strong>border-radius: 7px · margin: 11px</div>
|
||||
</div>
|
||||
<div class="cz-row bad-row">
|
||||
<span class="cz-row-icon" style="color:#F87171;">✗</span>
|
||||
<div class="cz-row-text"><strong class="bad-txt">Hallucinated components</strong>StatsWidget — not in your library</div>
|
||||
</div>
|
||||
<div style="margin-top:auto;padding:8px 9px;background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.12);border-radius:5px;">
|
||||
<div style="font-family:var(--mono);font-size:0.475rem;color:rgba(239,68,68,0.6);">Result: design drift. Manual cleanup required.</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Completion Zone -->
|
||||
<div class="cz-compare-col good">
|
||||
<div class="cz-col-head">
|
||||
<span class="cz-col-badge good">◈ Completion Zone</span>
|
||||
</div>
|
||||
<div style="font-family:var(--mono);font-size:0.475rem;color:rgba(255,255,255,0.2);margin-bottom:5px;letter-spacing:0.06em;text-transform:uppercase;">Output</div>
|
||||
<div class="cz-row good-row">
|
||||
<span class="cz-row-icon" style="color:#34D399;">✓</span>
|
||||
<div class="cz-row-text"><strong class="good-txt">Existing tokens only</strong>color.success.600 · spacing.md</div>
|
||||
</div>
|
||||
<div class="cz-row good-row">
|
||||
<span class="cz-row-icon" style="color:#34D399;">✓</span>
|
||||
<div class="cz-row-text"><strong class="good-txt">Zero new tokens</strong>Only what's already in your Origin Graph</div>
|
||||
</div>
|
||||
<div class="cz-row good-row">
|
||||
<span class="cz-row-icon" style="color:#34D399;">✓</span>
|
||||
<div class="cz-row-text"><strong class="good-txt">Constrained variants</strong>Button variant="primary" size="md" — verified</div>
|
||||
</div>
|
||||
<div class="cz-row good-row">
|
||||
<span class="cz-row-icon" style="color:#34D399;">✓</span>
|
||||
<div class="cz-row-text"><strong class="good-txt">Scale-only spacings</strong>All values drawn from your spacing scale</div>
|
||||
</div>
|
||||
<div class="cz-row good-row">
|
||||
<span class="cz-row-icon" style="color:#34D399;">✓</span>
|
||||
<div class="cz-row-text"><strong class="good-txt">Verified components</strong>MetricBadge — confirmed in your library</div>
|
||||
</div>
|
||||
<div style="margin-top:auto;padding:8px 9px;background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.14);border-radius:5px;">
|
||||
<div style="font-family:var(--mono);font-size:0.475rem;color:rgba(16,185,129,0.7);">Result: zero drift. Ships as-is.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEEP DIVE 2: Full graph context -->
|
||||
<div class="section section-muted" style="padding:100px 40px;">
|
||||
<div class="feat-split rev reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-green">Full graph context</span>
|
||||
<h2 class="d3">The AI knows<br>your entire system.</h2>
|
||||
<p class="subtitle">Before Claude generates a single character, it receives the complete context of your Origin Graph — every token, every component name, every spacing value. The constraint is baked into the prompt, not tacked on afterward.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">◈</span>All design tokens — color palettes, typography scales, spacing systems — injected verbatim into the system prompt.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>All component names, accepted props, and valid variant combinations from your live component library.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>The current artboard snapshot — surrounding components inform what fits, stylistically and spatially.</li>
|
||||
<li><span class="feat-pt-icon">◈</span>Accepted completions feed back into the graph, making every future suggestion smarter over time.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Pseudo-code panel -->
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:18px 16px;overflow:hidden;display:flex;flex-direction:column;">
|
||||
<div style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.2);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.05);padding-bottom:7px;">Context assembly — completion_zone.ts</div>
|
||||
<div style="flex:1;overflow:hidden;font-family:var(--mono);font-size:0.5875rem;line-height:1.85;color:rgba(255,255,255,0.72);background:#111118;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:14px 16px;overflow-y:auto;">
|
||||
<span style="color:rgba(255,255,255,0.28);">// 1. Fetch full Origin Graph context</span>
|
||||
<span style="color:#7EB8FF;">const</span> <span style="color:#D4A0FF;">graph</span> = <span style="color:#7EB8FF;">await</span> <span style="color:#FFBA7B;">originGraph</span>.<span style="color:#FFBA7B;">getContext</span>({
|
||||
tokens: <span style="color:#7DDBA0;">true</span>, <span style="color:rgba(255,255,255,0.28);">// all design tokens</span>
|
||||
components: <span style="color:#7DDBA0;">true</span>, <span style="color:rgba(255,255,255,0.28);">// all names + props</span>
|
||||
variants: <span style="color:#7DDBA0;">true</span>, <span style="color:rgba(255,255,255,0.28);">// valid combos only</span>
|
||||
snapshot: <span style="color:#D4A0FF;">artboard</span>.<span style="color:#FFBA7B;">snapshot</span>(),
|
||||
});
|
||||
|
||||
<span style="color:rgba(255,255,255,0.28);">// 2. Build constrained system prompt</span>
|
||||
<span style="color:#7EB8FF;">const</span> <span style="color:#D4A0FF;">systemPrompt</span> = <span style="color:#FFBA7B;">buildPrompt</span>({
|
||||
instruction: <span style="color:#7DDBA0;">"Only use tokens in this list. "</span>
|
||||
+ <span style="color:#7DDBA0;">"Never invent new tokens or variants."</span>,
|
||||
tokens: <span style="color:#D4A0FF;">graph</span>.<span style="color:#D4A0FF;">tokens</span>,
|
||||
components: <span style="color:#D4A0FF;">graph</span>.<span style="color:#D4A0FF;">components</span>,
|
||||
artboard: <span style="color:#D4A0FF;">graph</span>.<span style="color:#D4A0FF;">snapshot</span>,
|
||||
});
|
||||
|
||||
<span style="color:rgba(255,255,255,0.28);">// 3. Call Claude with full context</span>
|
||||
<span style="color:#7EB8FF;">const</span> <span style="color:#D4A0FF;">result</span> = <span style="color:#7EB8FF;">await</span> <span style="color:#FFBA7B;">claude</span>.<span style="color:#FFBA7B;">complete</span>({
|
||||
system: <span style="color:#D4A0FF;">systemPrompt</span>,
|
||||
prompt: <span style="color:#D4A0FF;">userIntent</span>,
|
||||
model: <span style="color:#7DDBA0;">"claude-sonnet-4-6"</span>,
|
||||
});
|
||||
|
||||
<span style="color:rgba(255,255,255,0.28);">// 4. Validate against graph</span>
|
||||
<span style="color:#7EB8FF;">const</span> <span style="color:#D4A0FF;">validated</span> = <span style="color:#FFBA7B;">validateAgainstGraph</span>(
|
||||
<span style="color:#D4A0FF;">result</span>.<span style="color:#D4A0FF;">component</span>, <span style="color:#D4A0FF;">graph</span>
|
||||
);
|
||||
|
||||
<span style="color:rgba(255,255,255,0.28);">// 5. Place + record feedback loop</span>
|
||||
<span style="color:#7EB8FF;">if</span> (<span style="color:#D4A0FF;">validated</span>.<span style="color:#D4A0FF;">ok</span>) {
|
||||
<span style="color:#D4A0FF;">artboard</span>.<span style="color:#FFBA7B;">place</span>(<span style="color:#D4A0FF;">validated</span>.<span style="color:#D4A0FF;">component</span>);
|
||||
<span style="color:#34D399;">feedbackLoop</span>.<span style="color:#FFBA7B;">accept</span>(<span style="color:#D4A0FF;">validated</span>);
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SELLING POINTS BAND -->
|
||||
<section style="padding:72px 0;background:var(--bg-inv);">
|
||||
<div class="wrap">
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.06);border-radius:var(--r-4);overflow:hidden;" class="stagger">
|
||||
<div style="background:var(--bg-inv-2);padding:32px 28px;">
|
||||
<div style="font-size:1.5rem;margin-bottom:14px;">◈</div>
|
||||
<h3 style="font-size:0.9375rem;font-weight:700;color:var(--fg-inv);letter-spacing:-0.02em;margin-bottom:8px;">Zero design drift</h3>
|
||||
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">Every token, every spacing value, every color reference is pulled from your existing scale. Nothing new is ever introduced into your system.</p>
|
||||
</div>
|
||||
<div style="background:var(--bg-inv-2);padding:32px 28px;">
|
||||
<div style="font-size:1.5rem;margin-bottom:14px;">⬛</div>
|
||||
<h3 style="font-size:0.9375rem;font-weight:700;color:var(--fg-inv);letter-spacing:-0.02em;margin-bottom:8px;">Generates real code</h3>
|
||||
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">The output is a live component placed on your artboard — actual JSX using your real component library, not a static image or an approximation.</p>
|
||||
</div>
|
||||
<div style="background:var(--bg-inv-2);padding:32px 28px;">
|
||||
<div style="font-size:1.5rem;margin-bottom:14px;">⟳</div>
|
||||
<h3 style="font-size:0.9375rem;font-weight:700;color:var(--fg-inv);letter-spacing:-0.02em;margin-bottom:8px;">Learns from your patterns</h3>
|
||||
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">Every accepted completion feeds back into the Origin Graph. The more you build, the better Completion Zone understands your conventions.</p>
|
||||
</div>
|
||||
<div style="background:var(--bg-inv-2);padding:32px 28px;">
|
||||
<div style="font-size:1.5rem;margin-bottom:14px;">◉</div>
|
||||
<h3 style="font-size:0.9375rem;font-weight:700;color:var(--fg-inv);letter-spacing:-0.02em;margin-bottom:8px;">Respects constraints</h3>
|
||||
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">Only variants that exist in your library. Only spacings from your defined scale. Hard constraints enforced in the prompt, not soft suggestions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TECHNICAL SECTION -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Technical foundation</span>
|
||||
<h2 class="d2">Engineered for design systems.</h2>
|
||||
<p class="subtitle">Completion Zone is not a thin wrapper around an LLM. It's a constraint engine built from the ground up for the specific demands of systematic design at scale.</p>
|
||||
</div>
|
||||
<div class="tech-grid stagger">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⚡</div>
|
||||
<h3>Claude API + context injection</h3>
|
||||
<p>Claude powers generation, but the constraint work happens before and after the API call. The system prompt is fully assembled from your Origin Graph on every request — no stale cached context, no drift over time.</p>
|
||||
<span class="tech-tag">Claude API</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">◈</div>
|
||||
<h3>Token-constrained generation</h3>
|
||||
<p>A validation layer sits between the LLM output and the canvas. Every proposed token value is checked against your design token registry. Invalid tokens are flagged or substituted with the nearest valid match from your scale.</p>
|
||||
<span class="tech-tag">Constraint layer</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">◉</div>
|
||||
<h3>Graph context retrieval</h3>
|
||||
<p>The Origin Graph is queried with a relevance function to fetch the most pertinent subset of your component library for each prompt — keeping the context window focused and the generation latency low.</p>
|
||||
<span class="tech-tag">Origin Graph</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">△</div>
|
||||
<h3>Component snapshot diffing</h3>
|
||||
<p>Before placing a completion on the canvas, Originmain diffs it against the current artboard state. Only the minimal set of changes is applied, producing a clean Intent Diff entry with zero noise or redundancy.</p>
|
||||
<span class="tech-tag">Intent Diff</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">✦</div>
|
||||
<h3>Prompt engineering for design systems</h3>
|
||||
<p>The system prompt template communicates your design system's grammar to the model — token naming conventions, component composition patterns, spatial reasoning cues, and variant inheritance rules.</p>
|
||||
<span class="tech-tag">Prompt design</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⟳</div>
|
||||
<h3>Feedback loop</h3>
|
||||
<p>Accepted completions are written back into the Origin Graph as accepted pattern examples. Over time, these examples shift the model's priors toward your team's specific conventions without any fine-tuning or retraining.</p>
|
||||
<span class="tech-tag">Adaptive</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RELATED FEATURES -->
|
||||
<section class="section section-muted">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">What powers it</span>
|
||||
<h2 class="d2">Completion Zone runs on the full stack.</h2>
|
||||
<p class="subtitle">Every piece of Originmain contributes to making completions possible — and every completion makes the rest of the platform smarter.</p>
|
||||
</div>
|
||||
<div class="related-grid stagger">
|
||||
<a class="related-card" href="/features/origin-graph.html">
|
||||
<div class="related-icon">◉</div>
|
||||
<h3>Origin Graph</h3>
|
||||
<p>The indexed knowledge base of every component, token, and relationship in your design system. Completion Zone pulls its constraints directly from the graph on every generation request.</p>
|
||||
<span class="related-link">Explore Origin Graph →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/live-artboard.html">
|
||||
<div class="related-icon">⬜</div>
|
||||
<h3>Live Artboard</h3>
|
||||
<p>Completed components are placed directly onto the live artboard — rendered as real code in a real iframe, not as a static preview. What you see on the canvas is exactly what ships.</p>
|
||||
<span class="related-link">Explore Live Artboard →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/agent-bridge.html">
|
||||
<div class="related-icon">⇄</div>
|
||||
<h3>Agent Bridge</h3>
|
||||
<p>Trigger completions from inside Cursor or Claude Code via the MCP channel. Your editor prompt invokes the same constraint engine, placing components directly from your IDE without switching context.</p>
|
||||
<span class="related-link">Explore Agent Bridge →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-bottom">
|
||||
<div class="cta-inner">
|
||||
<h2 class="cta-headline">Fill the gaps in your<br>design system.</h2>
|
||||
<p class="cta-sub">Early access is free. Connect your Origin Graph and run your first completion in under two minutes.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="ft-inner">
|
||||
<div class="ft-top">
|
||||
<div>
|
||||
<div class="ft-brand-logo">Origin<span>main</span></div>
|
||||
<p class="ft-brand-tag">Where design intent becomes production code.</p>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Integrations</h4>
|
||||
<ul>
|
||||
<li><a href="/features/integrations.html">All integrations</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Linear</a></li>
|
||||
<li><a href="#">Slack</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Developers</h4>
|
||||
<ul>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">MCP Protocol</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-bottom">
|
||||
<span class="ft-copy">© 2025 Originmain. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>20);});
|
||||
// Dropdown: delay-based hover (desktop) + click (mobile/touch)
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd=>{const menu=dd.querySelector('.nav-dropdown-menu');let t;const open=()=>{clearTimeout(t);dd.classList.add('open');menu.classList.add('open');};const close=()=>{t=setTimeout(()=>{dd.classList.remove('open');menu.classList.remove('open');},150);};dd.addEventListener('mouseenter',open);dd.addEventListener('mouseleave',close);menu.addEventListener('mouseenter',open);menu.addEventListener('mouseleave',close);dd.querySelector('a').addEventListener('click',e=>{if(window.matchMedia('(hover:none)').matches||window.innerWidth<=1024){e.preventDefault();const o=menu.classList.toggle('open');dd.classList.toggle('open',o);}});});
|
||||
// Mobile product sub-accordion
|
||||
const mpt=document.getElementById('mob-product-toggle'),mns=document.getElementById('nav-mobile-sub'),mdc=document.getElementById('mob-dd-caret');if(mpt&&mns){mpt.addEventListener('click',e=>{e.preventDefault();const o=mns.classList.toggle('open');if(mdc)mdc.style.transform=o?'rotate(180deg)':'';});}
|
||||
// Burger
|
||||
const burger=document.getElementById('nav-burger'),mob=document.getElementById('nav-mobile');
|
||||
burger.addEventListener('click',()=>{const o=mob.classList.toggle('open');burger.classList.toggle('open',o);burger.setAttribute('aria-expanded',o);});
|
||||
// Reveal
|
||||
const io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.12});
|
||||
document.querySelectorAll('.reveal,.stagger').forEach(el=>io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,833 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Integrations — Originmain</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-muted:#F4F4F5;--bg-strong:#EBEBEB;--bg-inv:#0A0A0A;--bg-inv-2:#141414;--bg-inv-3:#1C1C1C;--fg:#0A0A0A;--fg-2:#52525B;--fg-3:#A1A1AA;--fg-4:#D4D4D8;--fg-inv:rgba(255,255,255,0.92);--fg-inv-2:rgba(255,255,255,0.52);--fg-inv-3:rgba(255,255,255,0.28);--blue:#0066FF;--blue-dark:#0050CC;--blue-light:#3385FF;--blue-soft:rgba(0,102,255,0.07);--blue-mid:rgba(0,102,255,0.15);--purple:#7C3AED;--teal:#0891B2;--border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.12);--border-inv:rgba(255,255,255,0.08);--border-inv-2:rgba(255,255,255,0.14);--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:20px;--r-6:24px;--r-full:9999px;--sh-xs:0 1px 2px rgba(0,0,0,0.05);--sh-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05);--sh-md:0 4px 8px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);--sh-lg:0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.05);--sh-xl:0 20px 40px rgba(0,0,0,0.09),0 8px 16px rgba(0,0,0,0.05);--sh-2xl:0 32px 64px rgba(0,0,0,0.11),0 16px 32px rgba(0,0,0,0.06);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
|
||||
img,svg{display:block;max-width:100%;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
|
||||
.section{padding:112px 0;}
|
||||
.section-muted{background:var(--bg-subtle);}
|
||||
.section-dark{background:var(--bg-inv);}
|
||||
.d1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;color:var(--fg);}
|
||||
.d2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.038em;color:var(--fg);}
|
||||
.d3{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-0.028em;color:var(--fg);}
|
||||
.subtitle{font-size:clamp(1rem,1.8vw,1.125rem);font-weight:400;line-height:1.75;color:var(--fg-2);}
|
||||
.label{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);}
|
||||
.label-blue{color:var(--blue);}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:0.9375rem;font-weight:600;padding:11px 22px;border-radius:var(--r-2);transition:transform 0.12s cubic-bezier(.16,1,.3,1),opacity 0.12s,box-shadow 0.12s;white-space:nowrap;letter-spacing:-0.01em;position:relative;overflow:hidden;}
|
||||
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}
|
||||
.btn:hover::after{background:rgba(255,255,255,0.06);}
|
||||
.btn:active{transform:scale(0.98)!important;}
|
||||
.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--sh-sm);}
|
||||
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border-2);}
|
||||
.btn-secondary:hover{background:var(--bg-muted);transform:translateY(-1px);}
|
||||
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,102,255,0.3);}
|
||||
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-1px);}
|
||||
.btn-lg{font-size:1rem;padding:13px 28px;}
|
||||
.btn-white{background:#fff;color:#0A0A0A;box-shadow:0 4px 12px rgba(255,255,255,0.15);}
|
||||
.btn-white:hover{background:#F5F5F5;transform:translateY(-1px);}
|
||||
.btn-outline-white{background:transparent;color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.18);}
|
||||
.btn-outline-white:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
|
||||
.divider{height:1px;background:var(--border);}
|
||||
.section-head{text-align:center;max-width:640px;margin:0 auto 72px;}
|
||||
.section-head .label{display:block;margin-bottom:16px;}
|
||||
.section-head .d2{margin-bottom:18px;}
|
||||
|
||||
/* NAV */
|
||||
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;padding:0 40px;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;}
|
||||
#nav.scrolled{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border);box-shadow:var(--sh-xs);}
|
||||
.nav-inner{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
|
||||
.nav-logo{justify-self:start;font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:var(--fg);display:flex;align-items:center;gap:2px;}
|
||||
.nav-logo span{color:var(--blue);}
|
||||
.nav-links{justify-self:center;display:flex;align-items:center;gap:0;list-style:none;}
|
||||
.nav-links a{font-size:0.9375rem;font-weight:500;color:var(--fg-2);padding:6px 14px;border-radius:var(--r-1);transition:color 0.12s,background 0.12s;letter-spacing:-0.01em;}
|
||||
.nav-links a:hover{color:var(--fg);}
|
||||
.nav-links a.active{color:var(--blue);}
|
||||
.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
|
||||
|
||||
/* Dropdown */
|
||||
.nav-dropdown{position:relative;}
|
||||
.nav-dropdown>a{display:flex;align-items:center;gap:4px;}
|
||||
.nav-dd-caret{transition:transform 0.15s;}
|
||||
/* caret rotation handled via JS .open class */
|
||||
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--sh-xl);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:opacity 0.15s,transform 0.15s,visibility 0.15s;pointer-events:none;}
|
||||
.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;}
|
||||
.nav-dropdown.open .nav-dd-caret{transform:rotate(180deg);}
|
||||
/* Mobile sub-nav */
|
||||
.nav-mobile-sub{display:none;padding:2px 0 6px 14px;flex-direction:column;}
|
||||
.nav-mobile-sub.open{display:flex;}
|
||||
.nav-mobile-sub a{font-size:0.875rem;color:rgba(255,255,255,0.4);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);letter-spacing:-0.01em;transition:color 0.1s;}
|
||||
.nav-mobile-sub a:last-child{border-bottom:none;}
|
||||
.nav-mobile-sub a:hover{color:rgba(255,255,255,0.8);}
|
||||
/* Dark hero: white nav before scrolling */
|
||||
#nav:not(.scrolled) .nav-logo{color:rgba(255,255,255,0.92);}
|
||||
#nav:not(.scrolled) .nav-logo span{color:#3385FF;}
|
||||
#nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.5);}
|
||||
#nav:not(.scrolled) .nav-links a:hover{color:rgba(255,255,255,0.9);}
|
||||
#nav:not(.scrolled) .nav-actions .btn-secondary{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.2);background:transparent;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
|
||||
.nav-dd-item:hover{background:var(--bg-muted);}
|
||||
.nav-dd-item.current{background:var(--blue-soft);}
|
||||
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
|
||||
.nav-dd-text{display:flex;flex-direction:column;}
|
||||
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
|
||||
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
|
||||
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0;}
|
||||
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-2);}
|
||||
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),opacity 0.18s;transform-origin:center;}
|
||||
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||||
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
|
||||
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||||
.nav-mobile{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.07);padding:12px 24px 24px;flex-direction:column;gap:2px;}
|
||||
.nav-mobile.open{display:flex;}
|
||||
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;}
|
||||
.nav-mobile ul li a{display:block;font-size:1rem;font-weight:500;color:var(--fg-2);padding:11px 4px;border-bottom:1px solid var(--border);letter-spacing:-0.01em;}
|
||||
.nav-mobile ul li:last-child a{border-bottom:none;}
|
||||
.nav-mobile-ctas{display:flex;gap:8px;margin-top:16px;}
|
||||
.nav-mobile-ctas .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.875rem;}
|
||||
|
||||
/* PAGE HERO */
|
||||
#page-hero{padding:140px 40px 100px;background:var(--bg-inv);position:relative;overflow:hidden;text-align:center;}
|
||||
#page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(0,102,255,0.14),transparent 60%),radial-gradient(ellipse 40% 40% at 80% 70%,rgba(0,102,255,0.06),transparent 50%),radial-gradient(ellipse 50% 50% at 15% 60%,rgba(124,58,237,0.06),transparent 50%);pointer-events:none;}
|
||||
.page-hero-inner{position:relative;max-width:800px;margin:0 auto;}
|
||||
.page-hero-inner .label{color:rgba(255,255,255,0.3);margin-bottom:20px;display:block;}
|
||||
.page-hero-inner .d1{color:var(--fg-inv);margin-bottom:22px;}
|
||||
.page-hero-inner .subtitle{color:var(--fg-inv-2);max-width:620px;margin:0 auto 44px;}
|
||||
.page-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* INTEGRATION BENTO GRID */
|
||||
.int-bento{width:100%;max-width:840px;margin:72px auto 0;position:relative;}
|
||||
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
|
||||
.int-card{background:#111118;border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:22px 20px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;overflow:hidden;transition:border-color 0.2s,transform 0.2s;}
|
||||
.int-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.03),transparent 60%);pointer-events:none;}
|
||||
.int-card:hover{border-color:rgba(255,255,255,0.14);transform:translateY(-2px);}
|
||||
.int-logo{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
|
||||
.int-name{font-size:0.875rem;font-weight:700;color:rgba(255,255,255,0.88);letter-spacing:-0.02em;}
|
||||
.int-desc{font-size:0.6875rem;color:rgba(255,255,255,0.35);line-height:1.5;flex:1;}
|
||||
.int-status{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.5625rem;color:#10B981;font-weight:600;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.2);padding:3px 8px;border-radius:var(--r-full);margin-top:4px;}
|
||||
.int-status-dot{width:5px;height:5px;border-radius:50%;background:#10B981;animation:live-pulse 2s ease-in-out infinite;}
|
||||
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,0.25);}50%{box-shadow:0 0 0 4px rgba(16,185,129,0.1);}}
|
||||
|
||||
/* GitHub brand */
|
||||
.int-card.github .int-logo{background:#21262D;}
|
||||
/* Figma brand */
|
||||
.int-card.figma .int-logo{background:#1E1E2E;}
|
||||
/* Linear brand */
|
||||
.int-card.linear .int-logo{background:#0D0D1A;}
|
||||
/* Slack brand */
|
||||
.int-card.slack .int-logo{background:#1A1A2E;}
|
||||
/* VSCode brand */
|
||||
.int-card.vscode .int-logo{background:#0D1117;}
|
||||
/* Cursor brand */
|
||||
.int-card.cursor .int-logo{background:#111118;}
|
||||
/* TypeScript brand */
|
||||
.int-card.typescript .int-logo{background:#0D1B2E;}
|
||||
/* React brand */
|
||||
.int-card.react .int-logo{background:#0D1A1A;}
|
||||
|
||||
/* HOW IT WORKS SECTION */
|
||||
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative;}
|
||||
.hiw-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);}
|
||||
.hiw-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1;}
|
||||
.hiw-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--blue);margin-bottom:20px;box-shadow:var(--sh-sm);}
|
||||
.hiw-step h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.hiw-step p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;}
|
||||
|
||||
/* FEATURE SPLIT */
|
||||
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;max-width:1120px;margin:0 auto;}
|
||||
.feat-split.rev{direction:rtl;}
|
||||
.feat-split.rev>*{direction:ltr;}
|
||||
.feat-copy .label{display:block;margin-bottom:16px;}
|
||||
.feat-copy .d3{margin-bottom:16px;}
|
||||
.feat-copy .subtitle{margin-bottom:28px;}
|
||||
.feat-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
|
||||
.feat-pts li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.55;}
|
||||
.feat-pt-icon{width:20px;height:20px;border-radius:3px;background:var(--blue-soft);border:1px solid var(--blue-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:0.625rem;color:var(--blue);}
|
||||
|
||||
/* Feature visual */
|
||||
.feat-vis{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--sh-2xl);border:1px solid var(--border);aspect-ratio:4/3;position:relative;}
|
||||
.feat-vis-dark{background:#0D0D11;border-color:rgba(255,255,255,0.07);}
|
||||
.feat-vis-light{background:var(--bg-muted);}
|
||||
|
||||
/* TECH SECTION */
|
||||
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
|
||||
.tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:32px 28px;transition:box-shadow 0.2s;}
|
||||
.tech-card:hover{box-shadow:var(--sh-lg);}
|
||||
.tech-icon{width:44px;height:44px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:18px;}
|
||||
.tech-card h3{font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.tech-card p{font-size:0.875rem;color:var(--fg-2);line-height:1.65;}
|
||||
.tech-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-mid);padding:3px 9px;border-radius:var(--r-full);}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);padding:24px;font-family:var(--mono);font-size:0.75rem;line-height:1.75;color:rgba(255,255,255,0.75);overflow-x:auto;}
|
||||
.code-block .kw{color:#7EB8FF;}
|
||||
.code-block .str{color:#7DDBA0;}
|
||||
.code-block .cm{color:rgba(255,255,255,0.28);}
|
||||
.code-block .fn{color:#FFBA7B;}
|
||||
.code-block .nm{color:#D4A0FF;}
|
||||
.code-block .pu{color:rgba(255,255,255,0.5);}
|
||||
|
||||
/* STATUS GRID */
|
||||
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px;}
|
||||
.status-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:24px 20px;display:flex;align-items:center;gap:14px;transition:box-shadow 0.15s,border-color 0.15s;}
|
||||
.status-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.status-logo-wrap{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.status-info{flex:1;min-width:0;}
|
||||
.status-info h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:2px;}
|
||||
.status-info p{font-size:0.75rem;color:var(--fg-3);}
|
||||
.status-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.5625rem;color:#10B981;font-weight:600;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.18);padding:3px 8px;border-radius:var(--r-full);margin-top:6px;white-space:nowrap;}
|
||||
.status-badge-dot{width:5px;height:5px;border-radius:50%;background:#10B981;}
|
||||
|
||||
/* RELATED */
|
||||
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
|
||||
.related-card{border:1px solid var(--border);border-radius:var(--r-4);padding:24px;transition:box-shadow 0.15s,border-color 0.15s;display:flex;flex-direction:column;gap:10px;}
|
||||
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.related-icon{font-size:1.25rem;}
|
||||
.related-card h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;}
|
||||
.related-card p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;flex:1;}
|
||||
.related-link{font-size:0.8125rem;font-weight:600;color:var(--blue);}
|
||||
|
||||
/* CTA */
|
||||
#cta-bottom{background:var(--bg-inv);padding:120px 40px;position:relative;overflow:hidden;text-align:center;}
|
||||
#cta-bottom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(0,102,255,0.12),transparent 60%),radial-gradient(ellipse 60% 80% at 70% 50%,rgba(0,102,255,0.08),transparent 60%);pointer-events:none;}
|
||||
.cta-inner{position:relative;max-width:680px;margin:0 auto;}
|
||||
.cta-headline{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:-0.045em;color:var(--fg-inv);line-height:1.05;margin-bottom:18px;}
|
||||
.cta-sub{font-size:1.0625rem;color:var(--fg-inv-2);margin-bottom:44px;line-height:1.65;}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72px 40px 40px;}
|
||||
.ft-inner{max-width:1120px;margin:0 auto;}
|
||||
.ft-top{display:grid;grid-template-columns:260px repeat(4,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:36px;}
|
||||
.ft-brand-logo{font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:rgba(255,255,255,0.92);margin-bottom:8px;}
|
||||
.ft-brand-logo span{color:#3385FF;}
|
||||
.ft-brand-tag{font-size:0.875rem;color:rgba(255,255,255,0.3);line-height:1.65;max-width:200px;}
|
||||
.ft-col h4{font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:16px;letter-spacing:-0.01em;}
|
||||
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
|
||||
.ft-col a{font-size:0.875rem;color:rgba(255,255,255,0.32);transition:color 0.14s;letter-spacing:-0.01em;}
|
||||
.ft-col a:hover{color:rgba(255,255,255,0.65);}
|
||||
.ft-bottom{display:flex;justify-content:space-between;align-items:center;}
|
||||
.ft-copy{font-size:0.8125rem;color:rgba(255,255,255,0.22);}
|
||||
|
||||
/* REVEAL */
|
||||
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
|
||||
.reveal.in{opacity:1;transform:none;}
|
||||
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
|
||||
.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
|
||||
.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
|
||||
.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
|
||||
.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}
|
||||
.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:0.28s;}
|
||||
.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:0.35s;}
|
||||
.stagger.in>*:nth-child(7){opacity:1;transform:none;transition-delay:0.42s;}
|
||||
.stagger.in>*:nth-child(8){opacity:1;transform:none;transition-delay:0.49s;}
|
||||
|
||||
@media(max-width:1024px){.feat-split{grid-template-columns:1fr;gap:56px;}.feat-split.rev{direction:ltr;}.hiw-steps{grid-template-columns:1fr 1fr;gap:40px;}.hiw-steps::before{display:none;}.tech-grid{grid-template-columns:1fr 1fr;}.related-grid{grid-template-columns:1fr 1fr;}.status-grid{grid-template-columns:1fr 1fr;}.int-grid{grid-template-columns:repeat(2,1fr);}}
|
||||
@media(max-width:768px){.wrap{padding:0 24px;}#nav{padding:0 24px;}.nav-inner{display:flex;justify-content:space-between;}.nav-links,.nav-actions .btn{display:none;}.nav-burger{display:flex;}#page-hero{padding:120px 24px 80px;}.int-bento{margin-top:48px;}.hiw-steps{grid-template-columns:1fr;}.tech-grid,.related-grid,.status-grid{grid-template-columns:1fr;}.ft-top{grid-template-columns:1fr 1fr;}.int-grid{grid-template-columns:repeat(2,1fr);}}
|
||||
@media(max-width:480px){.ft-top{grid-template-columns:1fr;}.int-grid{grid-template-columns:1fr 1fr;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li class="nav-dropdown">
|
||||
<a href="/#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item current" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html" class="active">🔗 Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
|
||||
<a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
|
||||
<button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-mobile" id="nav-mobile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">🔗 Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-mobile-ctas">
|
||||
<a href="#" class="btn btn-secondary">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Request Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="label reveal">Integrations</span>
|
||||
<h1 class="d1 reveal">Connect your<br>entire workflow.</h1>
|
||||
<p class="subtitle reveal">Originmain integrates with GitHub, Figma, Linear, Slack, VS Code, Cursor, TypeScript, and React — so every part of your design-to-code pipeline is connected, without changing how you work.</p>
|
||||
<div class="page-hero-ctas reveal">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Integration bento grid -->
|
||||
<div class="int-bento reveal">
|
||||
<div class="int-grid">
|
||||
<!-- GitHub -->
|
||||
<div class="int-card github">
|
||||
<div class="int-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="rgba(255,255,255,0.9)"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">GitHub</div>
|
||||
<div class="int-desc">PR reviews trigger automatic diffs. Every merge computes a full component-level diff.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- Figma -->
|
||||
<div class="int-card figma">
|
||||
<div class="int-logo">
|
||||
<svg width="20" height="28" viewBox="0 0 38 57" fill="none"><path d="M19 28.5A9.5 9.5 0 1128.5 19 9.51 9.51 0 0119 28.5z" fill="#1ABCFE"/><path d="M9.5 47.5A9.5 9.5 0 019.5 28.5H19v9.5a9.51 9.51 0 01-9.5 9.5z" fill="#0ACF83"/><path d="M19 0H9.5A9.5 9.5 0 009.5 19H19V0z" fill="#FF7262"/><path d="M28.5 0H19v19h9.5A9.5 9.5 0 0028.5 0z" fill="#F24E1E"/><path d="M38 9.5A9.5 9.5 0 0128.5 19H19V0h9.5A9.5 9.5 0 0138 9.5z" fill="#FF7262" opacity=".85"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">Figma</div>
|
||||
<div class="int-desc">Design tokens, components & layouts synced live into the graph.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- Linear -->
|
||||
<div class="int-card linear">
|
||||
<div class="int-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 100 100" fill="none"><path d="M1.22 61.25L38.75 98.78C22.32 95.26 9.26 82.2 5.74 65.77L1.22 61.25zM0 52.81L47.19 100c1.23.06 2.47.06 3.72 0L0 49.09c-.06 1.24-.06 2.48 0 3.72zM4.13 36.72L63.28 95.87A49.61 49.61 0 0077.4 87.9L12.1 22.6a49.61 49.61 0 00-7.97 14.12zM17.3 14.54L85.46 82.7A49.99 49.99 0 0087.9 77.4L22.6 12.1a49.99 49.99 0 00-5.3 2.44zM30.03 6.15L93.85 69.97a50 50 0 001.83-5.44L35.47 4.32a50 50 0 00-5.44 1.83zM43.64 1.57l54.79 54.79A50 50 0 0099.82 51L49 .18a50 50 0 00-5.36 1.39zM56.72.28l43 43C98.68 42.1 100 39.7 100 37.06L62.94 0c-2.64 0-5.04 1.32-6.22 3.28z" fill="rgba(255,255,255,0.88)"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">Linear</div>
|
||||
<div class="int-desc">Issue tracking tied to component changes. Auto-creates issues when drift is detected.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- Slack -->
|
||||
<div class="int-card slack">
|
||||
<div class="int-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.52 2.528 2.528 0 01-2.521-2.52 2.528 2.528 0 012.52-2.52h2.521v2.52z" fill="#E01E5A"/><path d="M6.313 15.165a2.528 2.528 0 012.521-2.52 2.528 2.528 0 012.52 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313z" fill="#E01E5A"/><path d="M8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.52 2.522v2.52H8.834z" fill="#36C5F0"/><path d="M8.834 6.313a2.528 2.528 0 012.52 2.521 2.528 2.528 0 01-2.52 2.52H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312z" fill="#36C5F0"/><path d="M18.956 8.834a2.528 2.528 0 012.522-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.52h-2.522V8.834z" fill="#2EB67D"/><path d="M17.688 8.834a2.528 2.528 0 01-2.522 2.52 2.528 2.528 0 01-2.521-2.52V2.522A2.528 2.528 0 0115.166 0a2.528 2.528 0 012.522 2.522v6.312z" fill="#2EB67D"/><path d="M15.166 18.956a2.528 2.528 0 012.522 2.522A2.528 2.528 0 0115.166 24a2.528 2.528 0 01-2.521-2.522v-2.522h2.521z" fill="#ECB22E"/><path d="M15.166 17.688a2.528 2.528 0 01-2.521-2.522 2.528 2.528 0 012.521-2.521h6.313A2.528 2.528 0 0124 15.166a2.528 2.528 0 01-2.521 2.522h-6.313z" fill="#ECB22E"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">Slack</div>
|
||||
<div class="int-desc">Deploy alerts, review pings, and diff summaries posted to your channels.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- VS Code -->
|
||||
<div class="int-card vscode">
|
||||
<div class="int-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M23.15 2.587L18.21.21a1.494 1.494 0 00-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 00-1.276.057L.327 7.261A1 1 0 00.326 8.74L3.899 12 .326 15.26a1 1 0 00.001 1.479L1.65 17.94a.999.999 0 001.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 001.704.29l4.942-2.377A1.5 1.5 0 0024 19.923V4.077a1.5 1.5 0 00-.85-1.49zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" fill="#007ACC"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">VS Code</div>
|
||||
<div class="int-desc">Extension with inline diff annotations. See component history without leaving your editor.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- Cursor -->
|
||||
<div class="int-card cursor">
|
||||
<div class="int-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="5" fill="rgba(255,255,255,0.05)"/><path d="M12 3L21 8.5V15.5L12 21L3 15.5V8.5L12 3Z" stroke="rgba(255,255,255,0.85)" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 3V21M3 8.5L21 15.5M21 8.5L3 15.5" stroke="rgba(255,255,255,0.3)" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">Cursor</div>
|
||||
<div class="int-desc">Origin diffs surface as Cursor suggestions. Accept/reject via the Agent Bridge.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- TypeScript -->
|
||||
<div class="int-card typescript">
|
||||
<div class="int-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="3" fill="#3178C6"/><path d="M3 13.5h4.5V15H3v-1.5zm6 0h12V15H9v-1.5zM3 17h8v1.5H3V17zm10 0h6v1.5h-6V17zM13.5 9H21v1.5h-7.5V9zm-10.5 0H12V10.5H3V9z" fill="white" opacity=".3"/><path d="M8.5 9v9H7V9H4V7.5h8.5V9H8.5zm7.5 7.5c.5.5 1.2.75 2 .75.6 0 1.1-.15 1.5-.45.4-.3.6-.7.6-1.2 0-.45-.15-.82-.45-1.1-.3-.28-.78-.52-1.42-.72-.46-.14-.78-.27-.96-.4a.5.5 0 01-.27-.44c0-.18.07-.32.2-.43.14-.1.33-.16.57-.16.47 0 .84.18 1.1.55l1-.65c-.2-.32-.5-.57-.88-.74-.37-.17-.8-.26-1.28-.26-.62 0-1.13.17-1.52.5-.38.33-.58.77-.58 1.3 0 .43.14.8.42 1.08.28.27.74.52 1.37.72.48.15.8.3.97.44.16.15.24.33.24.56 0 .24-.09.43-.26.57-.17.14-.4.21-.7.21-.62 0-1.1-.26-1.43-.78L15 16.5z" fill="white"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">TypeScript</div>
|
||||
<div class="int-desc">Type-safe component contracts. Prop inference from your TypeScript types.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
<!-- React -->
|
||||
<div class="int-card react">
|
||||
<div class="int-logo">
|
||||
<svg width="24" height="22" viewBox="0 0 24 22" fill="none"><ellipse cx="12" cy="11" rx="2.5" ry="2.5" fill="#61DAFB"/><ellipse cx="12" cy="11" rx="11" ry="4.2" stroke="#61DAFB" stroke-width="1.2" fill="none"/><ellipse cx="12" cy="11" rx="11" ry="4.2" stroke="#61DAFB" stroke-width="1.2" fill="none" transform="rotate(60 12 11)"/><ellipse cx="12" cy="11" rx="11" ry="4.2" stroke="#61DAFB" stroke-width="1.2" fill="none" transform="rotate(120 12 11)"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="int-name">React</div>
|
||||
<div class="int-desc">Component tree, hooks, and context all mapped to the graph. Full React Fiber integration.</div>
|
||||
</div>
|
||||
<span class="int-status"><span class="int-status-dot"></span>Live</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="how-it-works" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">How it works</span>
|
||||
<h2 class="d2">From connect to notify in four steps.</h2>
|
||||
<p class="subtitle">Every integration follows the same secure pipeline — events flow in, diffs are computed, and your team is alerted in the tools they already use.</p>
|
||||
</div>
|
||||
<div class="hiw-steps stagger">
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">01</div>
|
||||
<h3>Connect</h3>
|
||||
<p>Authorize via OAuth or register a webhook. Originmain handles token refresh and credential storage with zero manual config.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">02</div>
|
||||
<h3>Sync</h3>
|
||||
<p>Events flow into Originmain in real time. Each payload is verified with HMAC signatures before any processing begins.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">03</div>
|
||||
<h3>Diff</h3>
|
||||
<p>Changes are automatically fed into the Intent Diff engine. Component-level diffs are computed and attributed to the triggering event.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">04</div>
|
||||
<h3>Notify</h3>
|
||||
<p>Your team is alerted where they work — a Slack message, a PR comment, a Linear issue update, or an inline editor annotation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEEP DIVE: GITHUB -->
|
||||
<div class="section" style="padding:100px 40px;">
|
||||
<div class="feat-split reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-blue">GitHub integration</span>
|
||||
<h2 class="d3">Every merge computes<br>a full component diff.</h2>
|
||||
<p class="subtitle">When a PR is opened, Originmain receives the push event and immediately kicks off a component-level diff across the entire affected subtree. The result is posted back to the PR as a structured comment — no manual review step.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">⚡</span>PR events trigger automatic diff computation the moment they are received.</li>
|
||||
<li><span class="feat-pt-icon">◉</span>Branch tracking keeps the Origin Graph in sync with every push — not just merges.</li>
|
||||
<li><span class="feat-pt-icon">⇄</span>Originmain posts a structured diff comment directly onto the GitHub PR for inline review.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-blue">Connect GitHub</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;gap:0;overflow:hidden;">
|
||||
<!-- Webhook payload -->
|
||||
<div style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.22);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;">Incoming webhook payload</div>
|
||||
<div class="code-block" style="padding:14px;font-size:0.625rem;line-height:1.65;border-radius:8px;flex-shrink:0;">
|
||||
<span class="pu">{</span>
|
||||
<span class="kw">"event"</span><span class="pu">:</span> <span class="str">"pull_request"</span><span class="pu">,</span>
|
||||
<span class="kw">"action"</span><span class="pu">:</span> <span class="str">"opened"</span><span class="pu">,</span>
|
||||
<span class="kw">"number"</span><span class="pu">:</span> <span class="nm">142</span><span class="pu">,</span>
|
||||
<span class="kw">"head"</span><span class="pu">: {</span>
|
||||
<span class="kw">"sha"</span><span class="pu">:</span> <span class="str">"a4f3c2d"</span><span class="pu">,</span>
|
||||
<span class="kw">"ref"</span><span class="pu">:</span> <span class="str">"feat/dashboard-v2"</span>
|
||||
<span class="pu">},</span>
|
||||
<span class="kw">"x-hub-signature-256"</span><span class="pu">:</span> <span class="str">"sha256=…"</span>
|
||||
<span class="pu">}</span></div>
|
||||
<!-- Arrow -->
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:8px 0;gap:8px;">
|
||||
<div style="flex:1;height:1px;background:rgba(255,255,255,0.07);"></div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);display:flex;align-items:center;gap:5px;">
|
||||
<span style="width:16px;height:16px;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.2);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:0.4rem;color:#10B981;">✓</span>
|
||||
HMAC verified · diff triggered
|
||||
</div>
|
||||
<div style="flex:1;height:1px;background:rgba(255,255,255,0.07);"></div>
|
||||
</div>
|
||||
<!-- Diff result -->
|
||||
<div style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.22);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;">Computed component diff</div>
|
||||
<div style="background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:14px;font-family:var(--mono);font-size:0.625rem;line-height:1.65;flex-shrink:0;">
|
||||
<div style="color:#FFBA7B;margin-bottom:6px;">~ DashboardHeader</div>
|
||||
<div style="color:rgba(255,255,255,0.35);padding-left:10px;margin-bottom:3px;"> <span style="color:#F87171;">- title: "Overview"</span></div>
|
||||
<div style="color:rgba(255,255,255,0.35);padding-left:10px;margin-bottom:8px;"> <span style="color:#4ADE80;">+ title: "Dashboard v2"</span></div>
|
||||
<div style="color:#7EB8FF;margin-bottom:6px;">+ MetricCard (new)</div>
|
||||
<div style="color:rgba(255,255,255,0.35);padding-left:10px;margin-bottom:3px;"> <span style="color:#4ADE80;">+ metric="weekly_active"</span></div>
|
||||
<div style="color:rgba(255,255,255,0.35);padding-left:10px;"> <span style="color:#4ADE80;">+ format="number"</span></div>
|
||||
</div>
|
||||
<!-- Arrow to PR comment -->
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:8px 0;gap:8px;">
|
||||
<div style="flex:1;height:1px;background:rgba(255,255,255,0.07);"></div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);">posted to PR #142</div>
|
||||
<div style="flex:1;height:1px;background:rgba(255,255,255,0.07);"></div>
|
||||
</div>
|
||||
<!-- PR comment mock -->
|
||||
<div style="background:#161B22;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:10px;flex-shrink:0;">
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#0066FF,#7C3AED);"></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.5);font-weight:600;">originmain-bot</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.2);">commented just now</span>
|
||||
</div>
|
||||
<div style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.65);">Origin Diff — 2 components changed, 1 added</div>
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.35);margin-top:3px;">View full diff on Originmain →</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEEP DIVE: FIGMA -->
|
||||
<div class="section section-muted" style="padding:100px 40px;">
|
||||
<div class="feat-split rev reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-blue">Figma integration</span>
|
||||
<h2 class="d3">Design changes update<br>the graph automatically.</h2>
|
||||
<p class="subtitle">Connect your Figma file and Originmain subscribes to every change. Design tokens, component definitions, and layout compositions are extracted and mapped directly into the Origin Graph — no manual export, no hand-off step.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">◈</span>Design tokens (color, spacing, typography) are extracted and kept in sync as you iterate in Figma.</li>
|
||||
<li><span class="feat-pt-icon">⬜</span>Component library updates propagate to every artboard that references them — instantly.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Layout changes generate Intent Diffs that can be handed directly to the Agent Bridge.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-blue">Connect Figma</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-light reveal">
|
||||
<div style="position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;gap:12px;overflow:hidden;">
|
||||
<!-- Token sync panel -->
|
||||
<div style="font-size:0.6875rem;font-weight:700;color:#0A0A0A;letter-spacing:-0.02em;margin-bottom:4px;">Figma → Origin Graph</div>
|
||||
<!-- Token rows -->
|
||||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||||
<div style="background:#fff;border:1px solid rgba(0,0,0,0.07);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,0.05);">
|
||||
<div style="width:22px;height:22px;border-radius:5px;background:#0066FF;flex-shrink:0;"></div>
|
||||
<div style="flex:1;"><div style="font-size:0.6875rem;font-weight:600;color:#0A0A0A;">color/brand/primary</div><div style="font-family:monospace;font-size:0.5625rem;color:#A1A1AA;">#0066FF</div></div>
|
||||
<div style="font-family:monospace;font-size:0.5rem;color:#10B981;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.15);padding:2px 6px;border-radius:99px;">synced</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid rgba(0,0,0,0.07);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,0.05);">
|
||||
<div style="width:22px;height:22px;border-radius:5px;background:#F4F4F5;border:1px solid rgba(0,0,0,0.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.6875rem;">T</div>
|
||||
<div style="flex:1;"><div style="font-size:0.6875rem;font-weight:600;color:#0A0A0A;">typography/heading/xl</div><div style="font-family:monospace;font-size:0.5625rem;color:#A1A1AA;">900 / 4.5rem / -0.045em</div></div>
|
||||
<div style="font-family:monospace;font-size:0.5rem;color:#10B981;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.15);padding:2px 6px;border-radius:99px;">synced</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid rgba(0,0,0,0.07);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,0.05);">
|
||||
<div style="width:22px;height:22px;border-radius:5px;background:#F4F4F5;border:1px solid rgba(0,0,0,0.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.5rem;">sp</div>
|
||||
<div style="flex:1;"><div style="font-size:0.6875rem;font-weight:600;color:#0A0A0A;">spacing/lg</div><div style="font-family:monospace;font-size:0.5625rem;color:#A1A1AA;">32px</div></div>
|
||||
<div style="font-family:monospace;font-size:0.5rem;color:#F59E0B;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);padding:2px 6px;border-radius:99px;">updating</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Component library -->
|
||||
<div style="margin-top:4px;background:#fff;border:1px solid rgba(0,0,0,0.07);border-radius:8px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,0.05);">
|
||||
<div style="font-size:0.6875rem;font-weight:700;color:#0A0A0A;margin-bottom:8px;">Component library — 48 components</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:6px;">
|
||||
<div style="background:#F4F4F5;border-radius:6px;height:28px;display:flex;align-items:center;justify-content:center;font-size:0.5rem;color:#52525B;font-weight:600;">Button</div>
|
||||
<div style="background:#F4F4F5;border-radius:6px;height:28px;display:flex;align-items:center;justify-content:center;font-size:0.5rem;color:#52525B;font-weight:600;">Card</div>
|
||||
<div style="background:#F4F4F5;border-radius:6px;height:28px;display:flex;align-items:center;justify-content:center;font-size:0.5rem;color:#52525B;font-weight:600;">Input</div>
|
||||
<div style="background:rgba(0,102,255,0.07);border:1px solid rgba(0,102,255,0.15);border-radius:6px;height:28px;display:flex;align-items:center;justify-content:center;font-size:0.5rem;color:#0066FF;font-weight:600;">Badge ↑</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SETUP IN MINUTES: TECH SECTION -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Setup in minutes</span>
|
||||
<h2 class="d2">Built on secure, open standards.</h2>
|
||||
<p class="subtitle">Every integration uses platform-native authentication and cryptographic verification. No credentials stored in plaintext, no polling — only push-based, event-driven architecture.</p>
|
||||
</div>
|
||||
<div class="tech-grid stagger">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🔐</div>
|
||||
<h3>HMAC verification</h3>
|
||||
<p>Every incoming webhook is verified with HMAC-SHA256 before processing. The shared secret is stored encrypted in Originmain's key vault — never in environment variables or config files.</p>
|
||||
<span class="tech-tag">Security</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">✍️</div>
|
||||
<h3>Webhook signatures</h3>
|
||||
<p>Each platform has its own signature header — <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">x-hub-signature-256</code> for GitHub, <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">x-figma-signature</code> for Figma. Originmain verifies each using the platform's prescribed algorithm.</p>
|
||||
<span class="tech-tag">Protocol</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">📨</div>
|
||||
<h3>Event types</h3>
|
||||
<p>Subscribe only to the events you need. Originmain exposes a per-integration event filter — receive <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">pull_request.opened</code> and <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">push</code> from GitHub, or <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">FILE_UPDATE</code> from Figma.</p>
|
||||
<span class="tech-tag">Granularity</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🔑</div>
|
||||
<h3>OAuth flows</h3>
|
||||
<p>GitHub, Figma, Linear, and Slack all use standard OAuth 2.0 with PKCE. Tokens are refreshed automatically — you authorize once and Originmain handles the rest without user intervention.</p>
|
||||
<span class="tech-tag">Authentication</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⏱</div>
|
||||
<h3>API rate limits</h3>
|
||||
<p>Originmain's integration layer respects every platform's rate limit with adaptive back-off and request queuing. High-volume repos with hundreds of daily PRs process without dropped events.</p>
|
||||
<span class="tech-tag">Reliability</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">📋</div>
|
||||
<h3>Audit logs</h3>
|
||||
<p>Every event received, every diff triggered, every notification sent is recorded with a timestamp and payload hash. Full audit trail available to workspace admins via the Originmain dashboard.</p>
|
||||
<span class="tech-tag">Compliance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- INTEGRATION STATUS GRID -->
|
||||
<section class="section section-muted">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Integration status</span>
|
||||
<h2 class="d2">All integrations, all live.</h2>
|
||||
<p class="subtitle">Every integration ships fully operational on day one. Connect GitHub and Figma in under two minutes, then add Linear, Slack, and your editor tools from the dashboard.</p>
|
||||
</div>
|
||||
<div class="status-grid stagger">
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#21262D;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="rgba(255,255,255,0.85)"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>GitHub</h3>
|
||||
<p>PR diffs & branch sync</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#1E1E2E;">
|
||||
<svg width="16" height="22" viewBox="0 0 38 57" fill="none"><path d="M19 28.5A9.5 9.5 0 1128.5 19 9.51 9.51 0 0119 28.5z" fill="#1ABCFE"/><path d="M9.5 47.5A9.5 9.5 0 019.5 28.5H19v9.5a9.51 9.51 0 01-9.5 9.5z" fill="#0ACF83"/><path d="M19 0H9.5A9.5 9.5 0 009.5 19H19V0z" fill="#FF7262"/><path d="M28.5 0H19v19h9.5A9.5 9.5 0 0028.5 0z" fill="#F24E1E"/><path d="M38 9.5A9.5 9.5 0 0128.5 19H19V0h9.5A9.5 9.5 0 0138 9.5z" fill="#FF7262" opacity=".85"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>Figma</h3>
|
||||
<p>Token & component sync</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#0D0D1A;">
|
||||
<svg width="20" height="20" viewBox="0 0 100 100" fill="none"><path d="M1.22 61.25L38.75 98.78C22.32 95.26 9.26 82.2 5.74 65.77L1.22 61.25zM0 52.81L47.19 100c1.23.06 2.47.06 3.72 0L0 49.09c-.06 1.24-.06 2.48 0 3.72zM4.13 36.72L63.28 95.87A49.61 49.61 0 0077.4 87.9L12.1 22.6a49.61 49.61 0 00-7.97 14.12zM17.3 14.54L85.46 82.7A49.99 49.99 0 0087.9 77.4L22.6 12.1a49.99 49.99 0 00-5.3 2.44zM30.03 6.15L93.85 69.97a50 50 0 001.83-5.44L35.47 4.32a50 50 0 00-5.44 1.83zM43.64 1.57l54.79 54.79A50 50 0 0099.82 51L49 .18a50 50 0 00-5.36 1.39zM56.72.28l43 43C98.68 42.1 100 39.7 100 37.06L62.94 0c-2.64 0-5.04 1.32-6.22 3.28z" fill="rgba(255,255,255,0.8)"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>Linear</h3>
|
||||
<p>Issue & milestone sync</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#1A1A2E;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.52 2.528 2.528 0 01-2.521-2.52 2.528 2.528 0 012.52-2.52h2.521v2.52z" fill="#E01E5A"/><path d="M6.313 15.165a2.528 2.528 0 012.521-2.52 2.528 2.528 0 012.52 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313z" fill="#E01E5A"/><path d="M8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.52 2.522v2.52H8.834z" fill="#36C5F0"/><path d="M8.834 6.313a2.528 2.528 0 012.52 2.521 2.528 2.528 0 01-2.52 2.52H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312z" fill="#36C5F0"/><path d="M18.956 8.834a2.528 2.528 0 012.522-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.52h-2.522V8.834z" fill="#2EB67D"/><path d="M17.688 8.834a2.528 2.528 0 01-2.522 2.52 2.528 2.528 0 01-2.521-2.52V2.522A2.528 2.528 0 0115.166 0a2.528 2.528 0 012.522 2.522v6.312z" fill="#2EB67D"/><path d="M15.166 18.956a2.528 2.528 0 012.522 2.522A2.528 2.528 0 0115.166 24a2.528 2.528 0 01-2.521-2.522v-2.522h2.521z" fill="#ECB22E"/><path d="M15.166 17.688a2.528 2.528 0 01-2.521-2.522 2.528 2.528 0 012.521-2.521h6.313A2.528 2.528 0 0124 15.166a2.528 2.528 0 01-2.521 2.522h-6.313z" fill="#ECB22E"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>Slack</h3>
|
||||
<p>Alerts & diff summaries</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#0D1117;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M23.15 2.587L18.21.21a1.494 1.494 0 00-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 00-1.276.057L.327 7.261A1 1 0 00.326 8.74L3.899 12 .326 15.26a1 1 0 00.001 1.479L1.65 17.94a.999.999 0 001.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 001.704.29l4.942-2.377A1.5 1.5 0 0024 19.923V4.077a1.5 1.5 0 00-.85-1.49zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" fill="#007ACC"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>VS Code</h3>
|
||||
<p>Inline diff annotations</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#111118;border:1px solid rgba(255,255,255,0.08);">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 3L21 8.5V15.5L12 21L3 15.5V8.5L12 3Z" stroke="rgba(255,255,255,0.8)" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 3V21M3 8.5L21 15.5M21 8.5L3 15.5" stroke="rgba(255,255,255,0.25)" stroke-width="1"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>Cursor</h3>
|
||||
<p>Agent Bridge suggestions</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#0D1B2E;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="3" fill="#3178C6"/><path d="M8.5 9v9H7V9H4V7.5h8.5V9H8.5zm7.5 7.5c.5.5 1.2.75 2 .75.6 0 1.1-.15 1.5-.45.4-.3.6-.7.6-1.2 0-.45-.15-.82-.45-1.1-.3-.28-.78-.52-1.42-.72-.46-.14-.78-.27-.96-.4a.5.5 0 01-.27-.44c0-.18.07-.32.2-.43.14-.1.33-.16.57-.16.47 0 .84.18 1.1.55l1-.65c-.2-.32-.5-.57-.88-.74-.37-.17-.8-.26-1.28-.26-.62 0-1.13.17-1.52.5-.38.33-.58.77-.58 1.3 0 .43.14.8.42 1.08.28.27.74.52 1.37.72.48.15.8.3.97.44.16.15.24.33.24.56 0 .24-.09.43-.26.57-.17.14-.4.21-.7.21-.62 0-1.1-.26-1.43-.78L15 16.5z" fill="white"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>TypeScript</h3>
|
||||
<p>Type-safe prop contracts</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<div class="status-logo-wrap" style="background:#0D1A1A;">
|
||||
<svg width="22" height="20" viewBox="0 0 24 22" fill="none"><ellipse cx="12" cy="11" rx="2.5" ry="2.5" fill="#61DAFB"/><ellipse cx="12" cy="11" rx="11" ry="4.2" stroke="#61DAFB" stroke-width="1.2" fill="none"/><ellipse cx="12" cy="11" rx="11" ry="4.2" stroke="#61DAFB" stroke-width="1.2" fill="none" transform="rotate(60 12 11)"/><ellipse cx="12" cy="11" rx="11" ry="4.2" stroke="#61DAFB" stroke-width="1.2" fill="none" transform="rotate(120 12 11)"/></svg>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<h3>React</h3>
|
||||
<p>Full Fiber tree mapping</p>
|
||||
<span class="status-badge"><span class="status-badge-dot"></span>Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RELATED FEATURES -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Goes deeper with</span>
|
||||
<h2 class="d2">Integrations power every feature.</h2>
|
||||
<p class="subtitle">The integration layer is the connective tissue of the whole platform — every feature benefits from a connected workflow.</p>
|
||||
</div>
|
||||
<div class="related-grid stagger">
|
||||
<a class="related-card" href="/features/agent-bridge.html">
|
||||
<div class="related-icon">⇄</div>
|
||||
<h3>Agent Bridge</h3>
|
||||
<p>Cursor and Claude Code receive Origin diffs directly through the Agent Bridge MCP channel. Integrations are what keep the bridge fed with up-to-date component context.</p>
|
||||
<span class="related-link">Explore Agent Bridge →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/intent-diff.html">
|
||||
<div class="related-icon">△</div>
|
||||
<h3>Intent Diff</h3>
|
||||
<p>GitHub pushes, Figma changes, and Linear milestones all trigger Intent Diff computations. Every integration event has a diff attached — automatically, with no manual review step.</p>
|
||||
<span class="related-link">Explore Intent Diff →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/origin-graph.html">
|
||||
<div class="related-icon">◉</div>
|
||||
<h3>Origin Graph</h3>
|
||||
<p>Figma tokens, TypeScript types, and React Fiber data all flow into the Origin Graph through the integration layer, keeping your component index complete and current at all times.</p>
|
||||
<span class="related-link">Explore Origin Graph →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-bottom">
|
||||
<div class="cta-inner">
|
||||
<h2 class="cta-headline">Your whole stack,<br>finally connected.</h2>
|
||||
<p class="cta-sub">Connect GitHub and Figma in under two minutes. Every other integration is one click from the dashboard.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="ft-inner">
|
||||
<div class="ft-top">
|
||||
<div>
|
||||
<div class="ft-brand-logo">Origin<span>main</span></div>
|
||||
<p class="ft-brand-tag">Where design intent becomes production code.</p>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Integrations</h4>
|
||||
<ul>
|
||||
<li><a href="/features/integrations.html">All integrations</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Linear</a></li>
|
||||
<li><a href="#">Slack</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Developers</h4>
|
||||
<ul>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">MCP Protocol</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-bottom">
|
||||
<span class="ft-copy">© 2025 Originmain. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>20);});
|
||||
// Dropdown: delay-based hover (desktop) + click (mobile/touch)
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd=>{const menu=dd.querySelector('.nav-dropdown-menu');let t;const open=()=>{clearTimeout(t);dd.classList.add('open');menu.classList.add('open');};const close=()=>{t=setTimeout(()=>{dd.classList.remove('open');menu.classList.remove('open');},150);};dd.addEventListener('mouseenter',open);dd.addEventListener('mouseleave',close);menu.addEventListener('mouseenter',open);menu.addEventListener('mouseleave',close);dd.querySelector('a').addEventListener('click',e=>{if(window.matchMedia('(hover:none)').matches||window.innerWidth<=1024){e.preventDefault();const o=menu.classList.toggle('open');dd.classList.toggle('open',o);}});});
|
||||
// Mobile product sub-accordion
|
||||
const mpt=document.getElementById('mob-product-toggle'),mns=document.getElementById('nav-mobile-sub'),mdc=document.getElementById('mob-dd-caret');if(mpt&&mns){mpt.addEventListener('click',e=>{e.preventDefault();const o=mns.classList.toggle('open');if(mdc)mdc.style.transform=o?'rotate(180deg)':'';});}
|
||||
// Burger
|
||||
const burger=document.getElementById('nav-burger'),mob=document.getElementById('nav-mobile');
|
||||
burger.addEventListener('click',()=>{const o=mob.classList.toggle('open');burger.classList.toggle('open',o);burger.setAttribute('aria-expanded',o);});
|
||||
// Reveal
|
||||
const io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.12});
|
||||
document.querySelectorAll('.reveal,.stagger').forEach(el=>io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,740 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Intent Diff — Originmain</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-muted:#F4F4F5;--bg-strong:#EBEBEB;--bg-inv:#0A0A0A;--bg-inv-2:#141414;--bg-inv-3:#1C1C1C;--fg:#0A0A0A;--fg-2:#52525B;--fg-3:#A1A1AA;--fg-4:#D4D4D8;--fg-inv:rgba(255,255,255,0.92);--fg-inv-2:rgba(255,255,255,0.52);--fg-inv-3:rgba(255,255,255,0.28);--blue:#0066FF;--blue-dark:#0050CC;--blue-light:#3385FF;--blue-soft:rgba(0,102,255,0.07);--blue-mid:rgba(0,102,255,0.15);--purple:#7C3AED;--purple-dark:#6D28D9;--purple-soft:rgba(124,58,237,0.07);--purple-mid:rgba(124,58,237,0.15);--teal:#0891B2;--border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.12);--border-inv:rgba(255,255,255,0.08);--border-inv-2:rgba(255,255,255,0.14);--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:20px;--r-6:24px;--r-full:9999px;--sh-xs:0 1px 2px rgba(0,0,0,0.05);--sh-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05);--sh-md:0 4px 8px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);--sh-lg:0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.05);--sh-xl:0 20px 40px rgba(0,0,0,0.09),0 8px 16px rgba(0,0,0,0.05);--sh-2xl:0 32px 64px rgba(0,0,0,0.11),0 16px 32px rgba(0,0,0,0.06);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
|
||||
img,svg{display:block;max-width:100%;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
|
||||
.section{padding:112px 0;}
|
||||
.section-muted{background:var(--bg-subtle);}
|
||||
.section-dark{background:var(--bg-inv);}
|
||||
.d1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;color:var(--fg);}
|
||||
.d2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.038em;color:var(--fg);}
|
||||
.d3{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-0.028em;color:var(--fg);}
|
||||
.subtitle{font-size:clamp(1rem,1.8vw,1.125rem);font-weight:400;line-height:1.75;color:var(--fg-2);}
|
||||
.label{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);}
|
||||
.label-purple{color:var(--purple);}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:0.9375rem;font-weight:600;padding:11px 22px;border-radius:var(--r-2);transition:transform 0.12s cubic-bezier(.16,1,.3,1),opacity 0.12s,box-shadow 0.12s;white-space:nowrap;letter-spacing:-0.01em;position:relative;overflow:hidden;}
|
||||
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}
|
||||
.btn:hover::after{background:rgba(255,255,255,0.06);}
|
||||
.btn:active{transform:scale(0.98)!important;}
|
||||
.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--sh-sm);}
|
||||
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border-2);}
|
||||
.btn-secondary:hover{background:var(--bg-muted);transform:translateY(-1px);}
|
||||
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 4px 12px rgba(124,58,237,0.3);}
|
||||
.btn-purple:hover{background:var(--purple-dark);transform:translateY(-1px);}
|
||||
.btn-lg{font-size:1rem;padding:13px 28px;}
|
||||
.btn-white{background:#fff;color:#0A0A0A;box-shadow:0 4px 12px rgba(255,255,255,0.15);}
|
||||
.btn-white:hover{background:#F5F5F5;transform:translateY(-1px);}
|
||||
.btn-outline-white{background:transparent;color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.18);}
|
||||
.btn-outline-white:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
|
||||
.divider{height:1px;background:var(--border);}
|
||||
.section-head{text-align:center;max-width:640px;margin:0 auto 72px;}
|
||||
.section-head .label{display:block;margin-bottom:16px;}
|
||||
.section-head .d2{margin-bottom:18px;}
|
||||
|
||||
/* NAV */
|
||||
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;padding:0 40px;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;}
|
||||
#nav.scrolled{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border);box-shadow:var(--sh-xs);}
|
||||
.nav-inner{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
|
||||
.nav-logo{justify-self:start;font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:var(--fg);display:flex;align-items:center;gap:2px;}
|
||||
.nav-logo span{color:var(--blue);}
|
||||
.nav-links{justify-self:center;display:flex;align-items:center;gap:0;list-style:none;}
|
||||
.nav-links a{font-size:0.9375rem;font-weight:500;color:var(--fg-2);padding:6px 14px;border-radius:var(--r-1);transition:color 0.12s,background 0.12s;letter-spacing:-0.01em;}
|
||||
.nav-links a:hover{color:var(--fg);}
|
||||
.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
|
||||
|
||||
/* Dropdown */
|
||||
.nav-dropdown{position:relative;}
|
||||
.nav-dropdown>a{display:flex;align-items:center;gap:4px;}
|
||||
.nav-dd-caret{transition:transform 0.15s;}
|
||||
/* caret rotation handled via JS .open class */
|
||||
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--sh-xl);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:opacity 0.15s,transform 0.15s,visibility 0.15s;pointer-events:none;}
|
||||
.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;}
|
||||
.nav-dropdown.open .nav-dd-caret{transform:rotate(180deg);}
|
||||
/* Mobile sub-nav */
|
||||
.nav-mobile-sub{display:none;padding:2px 0 6px 14px;flex-direction:column;}
|
||||
.nav-mobile-sub.open{display:flex;}
|
||||
.nav-mobile-sub a{font-size:0.875rem;color:rgba(255,255,255,0.4);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);letter-spacing:-0.01em;transition:color 0.1s;}
|
||||
.nav-mobile-sub a:last-child{border-bottom:none;}
|
||||
.nav-mobile-sub a:hover{color:rgba(255,255,255,0.8);}
|
||||
/* Dark hero: white nav before scrolling */
|
||||
#nav:not(.scrolled) .nav-logo{color:rgba(255,255,255,0.92);}
|
||||
#nav:not(.scrolled) .nav-logo span{color:#3385FF;}
|
||||
#nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.5);}
|
||||
#nav:not(.scrolled) .nav-links a:hover{color:rgba(255,255,255,0.9);}
|
||||
#nav:not(.scrolled) .nav-actions .btn-secondary{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.2);background:transparent;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
|
||||
.nav-dd-item:hover{background:var(--bg-muted);}
|
||||
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
|
||||
.nav-dd-icon.purple{background:var(--purple-soft);border-color:var(--purple-mid);}
|
||||
.nav-dd-text{display:flex;flex-direction:column;}
|
||||
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
|
||||
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
|
||||
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0;}
|
||||
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-2);}
|
||||
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),opacity 0.18s;transform-origin:center;}
|
||||
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||||
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
|
||||
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||||
.nav-mobile{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.07);padding:12px 24px 24px;flex-direction:column;gap:2px;}
|
||||
.nav-mobile.open{display:flex;}
|
||||
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;}
|
||||
.nav-mobile ul li a{display:block;font-size:1rem;font-weight:500;color:var(--fg-2);padding:11px 4px;border-bottom:1px solid var(--border);letter-spacing:-0.01em;}
|
||||
.nav-mobile ul li:last-child a{border-bottom:none;}
|
||||
.nav-mobile-ctas{display:flex;gap:8px;margin-top:16px;}
|
||||
.nav-mobile-ctas .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.875rem;}
|
||||
|
||||
/* PAGE HERO */
|
||||
#page-hero{padding:140px 40px 100px;background:var(--bg-inv);position:relative;overflow:hidden;text-align:center;}
|
||||
#page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(124,58,237,0.14),transparent 60%),radial-gradient(ellipse 40% 40% at 80% 70%,rgba(0,102,255,0.07),transparent 50%);pointer-events:none;}
|
||||
.page-hero-inner{position:relative;max-width:800px;margin:0 auto;}
|
||||
.page-hero-inner .label{color:rgba(255,255,255,0.3);margin-bottom:20px;display:block;}
|
||||
.page-hero-inner .d1{color:var(--fg-inv);margin-bottom:22px;}
|
||||
.page-hero-inner .subtitle{color:var(--fg-inv-2);max-width:600px;margin:0 auto 44px;}
|
||||
.page-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* PRODUCT VISUAL */
|
||||
.pv-shell{width:100%;max-width:960px;margin:72px auto 0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 48px 96px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06);border-bottom:none;position:relative;}
|
||||
.pv-chrome{background:#1C1C22;height:40px;display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid rgba(255,255,255,0.05);}
|
||||
.pv-dot{width:11px;height:11px;border-radius:50%;}
|
||||
.pv-dot.r{background:#FF5F57;}
|
||||
.pv-dot.y{background:#FFBD2E;}
|
||||
.pv-dot.g{background:#28C840;}
|
||||
.pv-url{flex:1;margin:0 12px;background:rgba(255,255,255,0.06);border-radius:5px;height:25px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.3);max-width:380px;}
|
||||
.pv-tab-bar{display:flex;align-items:center;gap:2px;margin-left:auto;}
|
||||
.pv-tab{font-family:var(--mono);font-size:0.5625rem;padding:3px 10px;border-radius:4px;color:rgba(255,255,255,0.35);cursor:default;letter-spacing:0.04em;}
|
||||
.pv-tab.active{background:rgba(124,58,237,0.22);color:rgba(167,139,250,0.9);border:1px solid rgba(124,58,237,0.28);}
|
||||
|
||||
/* SPLIT DIFF PANELS */
|
||||
.diff-canvas{background:#0D0D11;min-height:380px;display:flex;align-items:stretch;}
|
||||
.diff-panel{flex:1;display:flex;flex-direction:column;min-width:0;}
|
||||
.diff-panel-head{height:36px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid rgba(255,255,255,0.06);}
|
||||
.diff-panel.before .diff-panel-head{background:#1A0A0A;border-right:1px solid rgba(255,255,255,0.04);}
|
||||
.diff-panel.after .diff-panel-head{background:#0A1A0A;}
|
||||
.diff-panel-label{font-family:var(--mono);font-size:0.5625rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}
|
||||
.diff-panel.before .diff-panel-label{color:rgba(248,113,113,0.8);}
|
||||
.diff-panel.after .diff-panel-label{color:rgba(74,222,128,0.8);}
|
||||
.diff-panel-file{font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.2);margin-left:10px;}
|
||||
.diff-lines{flex:1;padding:12px 0;overflow:hidden;}
|
||||
.diff-divider{width:1px;background:rgba(255,255,255,0.05);flex-shrink:0;}
|
||||
.dl{display:flex;align-items:baseline;padding:0 16px;min-height:22px;font-family:var(--mono);font-size:0.6rem;line-height:1.8;}
|
||||
.dl-num{width:28px;flex-shrink:0;color:rgba(255,255,255,0.18);text-align:right;margin-right:12px;font-size:0.55rem;user-select:none;}
|
||||
.dl-sign{width:12px;flex-shrink:0;font-weight:700;font-size:0.6rem;}
|
||||
.dl-text{flex:1;min-width:0;}
|
||||
.dl.ctx .dl-sign{color:rgba(255,255,255,0.15);}
|
||||
.dl.ctx .dl-text{color:rgba(255,255,255,0.38);}
|
||||
.dl.rem{background:rgba(220,38,38,0.1);}
|
||||
.dl.rem .dl-sign{color:#F87171;}
|
||||
.dl.rem .dl-text{color:rgba(248,113,113,0.9);}
|
||||
.dl.add{background:rgba(22,163,74,0.1);}
|
||||
.dl.add .dl-sign{color:#4ADE80;}
|
||||
.dl.add .dl-text{color:rgba(74,222,128,0.9);}
|
||||
.dl.hunk{background:rgba(124,58,237,0.08);border-top:1px solid rgba(124,58,237,0.15);border-bottom:1px solid rgba(124,58,237,0.15);}
|
||||
.dl.hunk .dl-text{color:rgba(167,139,250,0.6);font-size:0.5625rem;}
|
||||
.prop-key{color:rgba(255,255,255,0.5);}
|
||||
.prop-val-rem{color:#FCA5A5;}
|
||||
.prop-val-add{color:#86EFAC;}
|
||||
.prop-val-str{color:#FCD34D;}
|
||||
.prop-val-num{color:#93C5FD;}
|
||||
|
||||
/* HOW IT WORKS */
|
||||
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative;}
|
||||
.hiw-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);}
|
||||
.hiw-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1;}
|
||||
.hiw-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--purple);margin-bottom:20px;box-shadow:var(--sh-sm);}
|
||||
.hiw-step h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.hiw-step p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;}
|
||||
|
||||
/* FEATURE SPLIT */
|
||||
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;max-width:1120px;margin:0 auto;}
|
||||
.feat-split.rev{direction:rtl;}
|
||||
.feat-split.rev>*{direction:ltr;}
|
||||
.feat-copy .label{display:block;margin-bottom:16px;}
|
||||
.feat-copy .d3{margin-bottom:16px;}
|
||||
.feat-copy .subtitle{margin-bottom:28px;}
|
||||
.feat-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
|
||||
.feat-pts li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.55;}
|
||||
.feat-pt-icon{width:20px;height:20px;border-radius:3px;background:var(--purple-soft);border:1px solid var(--purple-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:0.625rem;color:var(--purple);}
|
||||
|
||||
/* Feature visual */
|
||||
.feat-vis{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--sh-2xl);border:1px solid var(--border);aspect-ratio:4/3;position:relative;}
|
||||
.feat-vis-dark{background:#0D0D11;border-color:rgba(255,255,255,0.07);}
|
||||
.feat-vis-light{background:var(--bg-muted);}
|
||||
|
||||
/* TECH SECTION */
|
||||
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
|
||||
.tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:32px 28px;transition:box-shadow 0.2s;}
|
||||
.tech-card:hover{box-shadow:var(--sh-lg);}
|
||||
.tech-icon{width:44px;height:44px;background:var(--purple-soft);border:1px solid var(--purple-mid);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:18px;}
|
||||
.tech-card h3{font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.tech-card p{font-size:0.875rem;color:var(--fg-2);line-height:1.65;}
|
||||
.tech-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--purple);background:var(--purple-soft);border:1px solid var(--purple-mid);padding:3px 9px;border-radius:var(--r-full);}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);padding:24px;font-family:var(--mono);font-size:0.75rem;line-height:1.75;color:rgba(255,255,255,0.75);overflow-x:auto;}
|
||||
.code-block .kw{color:#7EB8FF;}
|
||||
.code-block .str{color:#7DDBA0;}
|
||||
.code-block .cm{color:rgba(255,255,255,0.28);}
|
||||
.code-block .fn{color:#FFBA7B;}
|
||||
.code-block .nm{color:#D4A0FF;}
|
||||
.code-block .rem{color:#F87171;}
|
||||
.code-block .add{color:#4ADE80;}
|
||||
.code-block .hdr{color:#A78BFA;}
|
||||
.code-block .ctx{color:rgba(255,255,255,0.38);}
|
||||
|
||||
/* ACCEPT/REJECT PANEL */
|
||||
.ar-panel{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);overflow:hidden;}
|
||||
.ar-panel-head{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;}
|
||||
.ar-panel-title{font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;}
|
||||
.ar-panel-badge{font-family:var(--mono);font-size:0.5625rem;color:rgba(167,139,250,0.8);background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.2);padding:2px 8px;border-radius:var(--r-full);}
|
||||
.ar-row{display:flex;align-items:flex-start;gap:12px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.04);}
|
||||
.ar-row:last-child{border-bottom:none;}
|
||||
.ar-checkbox{width:16px;height:16px;border-radius:3px;border:1.5px solid rgba(255,255,255,0.18);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:0.5rem;}
|
||||
.ar-checkbox.checked{background:rgba(74,222,128,0.15);border-color:rgba(74,222,128,0.5);color:#4ADE80;}
|
||||
.ar-checkbox.unchecked{background:rgba(248,113,113,0.08);border-color:rgba(248,113,113,0.3);}
|
||||
.ar-prop{flex:1;}
|
||||
.ar-prop-name{font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.45);margin-bottom:4px;}
|
||||
.ar-prop-change{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
|
||||
.ar-val-old{font-family:var(--mono);font-size:0.625rem;color:#FCA5A5;background:rgba(220,38,38,0.1);padding:1px 6px;border-radius:3px;text-decoration:line-through;text-decoration-color:rgba(248,113,113,0.4);}
|
||||
.ar-val-arrow{font-size:0.5625rem;color:rgba(255,255,255,0.2);}
|
||||
.ar-val-new{font-family:var(--mono);font-size:0.625rem;color:#86EFAC;background:rgba(22,163,74,0.1);padding:1px 6px;border-radius:3px;}
|
||||
.ar-actions{display:flex;gap:4px;flex-shrink:0;margin-top:2px;}
|
||||
.ar-btn{font-family:var(--mono);font-size:0.5rem;padding:3px 8px;border-radius:3px;font-weight:600;letter-spacing:0.04em;cursor:default;}
|
||||
.ar-btn-accept{background:rgba(22,163,74,0.12);color:#4ADE80;border:1px solid rgba(74,222,128,0.2);}
|
||||
.ar-btn-reject{background:rgba(220,38,38,0.08);color:#F87171;border:1px solid rgba(248,113,113,0.2);}
|
||||
|
||||
/* RELATED */
|
||||
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
|
||||
.related-card{border:1px solid var(--border);border-radius:var(--r-4);padding:24px;transition:box-shadow 0.15s,border-color 0.15s;display:flex;flex-direction:column;gap:10px;}
|
||||
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.related-icon{font-size:1.25rem;}
|
||||
.related-card h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;}
|
||||
.related-card p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;flex:1;}
|
||||
.related-link{font-size:0.8125rem;font-weight:600;color:var(--purple);}
|
||||
|
||||
/* CTA */
|
||||
#cta-bottom{background:var(--bg-inv);padding:120px 40px;position:relative;overflow:hidden;text-align:center;}
|
||||
#cta-bottom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(124,58,237,0.14),transparent 60%),radial-gradient(ellipse 60% 80% at 70% 50%,rgba(0,102,255,0.08),transparent 60%);pointer-events:none;}
|
||||
.cta-inner{position:relative;max-width:680px;margin:0 auto;}
|
||||
.cta-headline{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:-0.045em;color:var(--fg-inv);line-height:1.05;margin-bottom:18px;}
|
||||
.cta-sub{font-size:1.0625rem;color:var(--fg-inv-2);margin-bottom:44px;line-height:1.65;}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72px 40px 40px;}
|
||||
.ft-inner{max-width:1120px;margin:0 auto;}
|
||||
.ft-top{display:grid;grid-template-columns:260px repeat(4,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:36px;}
|
||||
.ft-brand-logo{font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:rgba(255,255,255,0.92);margin-bottom:8px;}
|
||||
.ft-brand-logo span{color:#3385FF;}
|
||||
.ft-brand-tag{font-size:0.875rem;color:rgba(255,255,255,0.3);line-height:1.65;max-width:200px;}
|
||||
.ft-col h4{font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:16px;letter-spacing:-0.01em;}
|
||||
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
|
||||
.ft-col a{font-size:0.875rem;color:rgba(255,255,255,0.32);transition:color 0.14s;letter-spacing:-0.01em;}
|
||||
.ft-col a:hover{color:rgba(255,255,255,0.65);}
|
||||
.ft-bottom{display:flex;justify-content:space-between;align-items:center;}
|
||||
.ft-copy{font-size:0.8125rem;color:rgba(255,255,255,0.22);}
|
||||
|
||||
/* REVEAL */
|
||||
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
|
||||
.reveal.in{opacity:1;transform:none;}
|
||||
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
|
||||
.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
|
||||
.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
|
||||
.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
|
||||
.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}
|
||||
.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:0.28s;}
|
||||
.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:0.35s;}
|
||||
|
||||
@media(max-width:1024px){.feat-split{grid-template-columns:1fr;gap:56px;}.feat-split.rev{direction:ltr;}.hiw-steps{grid-template-columns:1fr 1fr;gap:40px;}.hiw-steps::before{display:none;}.tech-grid{grid-template-columns:1fr 1fr;}.related-grid{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:768px){.wrap{padding:0 24px;}#nav{padding:0 24px;}.nav-inner{display:flex;justify-content:space-between;}.nav-links,.nav-actions .btn{display:none;}.nav-burger{display:flex;}#page-hero{padding:120px 24px 80px;}.pv-shell{margin-top:48px;}.diff-canvas{flex-direction:column;}.diff-divider{width:100%;height:1px;}.hiw-steps{grid-template-columns:1fr;}.tech-grid,.related-grid{grid-template-columns:1fr;}.ft-top{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:480px){.ft-top{grid-template-columns:1fr;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li class="nav-dropdown">
|
||||
<a href="/#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon purple">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
|
||||
<a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
|
||||
<button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-mobile" id="nav-mobile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-mobile-ctas">
|
||||
<a href="#" class="btn btn-secondary">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Request Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="label reveal">△ Intent Diff</span>
|
||||
<h1 class="d1 reveal">Ship component-level<br>diffs, not redlines.</h1>
|
||||
<p class="subtitle reveal">Every design change is expressed as a structured diff of props, styles, and tree — not a screenshot comparison. Reviewers see exactly what changed and why.</p>
|
||||
<div class="page-hero-ctas reveal">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split diff product visual -->
|
||||
<div class="pv-shell reveal">
|
||||
<div class="pv-chrome">
|
||||
<div class="pv-dot r"></div>
|
||||
<div class="pv-dot y"></div>
|
||||
<div class="pv-dot g"></div>
|
||||
<div class="pv-url">🔒 app.originmain.io/diff/Button@pr-412</div>
|
||||
<div class="pv-tab-bar">
|
||||
<span class="pv-tab active">Split</span>
|
||||
<span class="pv-tab">Unified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff-canvas">
|
||||
|
||||
<!-- Before panel -->
|
||||
<div class="diff-panel before">
|
||||
<div class="diff-panel-head">
|
||||
<span class="diff-panel-label">Before</span>
|
||||
<span class="diff-panel-file">a/Button.tsx</span>
|
||||
</div>
|
||||
<div class="diff-lines">
|
||||
<div class="dl hunk"><span class="dl-num"></span><span class="dl-sign"></span><span class="dl-text">@@ -1,10 +1,10 @@ Button</span></div>
|
||||
<div class="dl ctx"><span class="dl-num">1</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">component:</span> <span class="prop-val-str">"Button"</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">2</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">variant:</span> <span class="prop-val-str">"primary"</span></span></div>
|
||||
<div class="dl rem"><span class="dl-num">3</span><span class="dl-sign">−</span><span class="dl-text"><span class="prop-key">padding:</span> <span class="prop-val-rem">16px</span></span></div>
|
||||
<div class="dl rem"><span class="dl-num">4</span><span class="dl-sign">−</span><span class="dl-text"><span class="prop-key">color:</span> <span class="prop-val-rem">#333333</span></span></div>
|
||||
<div class="dl rem"><span class="dl-num">5</span><span class="dl-sign">−</span><span class="dl-text"><span class="prop-key">background:</span> <span class="prop-val-rem">#F5F5F5</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">6</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">fontSize:</span> <span class="prop-val-num">14</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">7</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">fontWeight:</span> <span class="prop-val-num">500</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">8</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">height:</span> <span class="prop-val-num">36</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">9</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">disabled:</span> <span class="prop-val-num">false</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center divider -->
|
||||
<div class="diff-divider"></div>
|
||||
|
||||
<!-- After panel -->
|
||||
<div class="diff-panel after">
|
||||
<div class="diff-panel-head">
|
||||
<span class="diff-panel-label">After</span>
|
||||
<span class="diff-panel-file">b/Button.tsx</span>
|
||||
</div>
|
||||
<div class="diff-lines">
|
||||
<div class="dl hunk"><span class="dl-num"></span><span class="dl-sign"></span><span class="dl-text">@@ -1,10 +1,11 @@ Button</span></div>
|
||||
<div class="dl ctx"><span class="dl-num">1</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">component:</span> <span class="prop-val-str">"Button"</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">2</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">variant:</span> <span class="prop-val-str">"primary"</span></span></div>
|
||||
<div class="dl add"><span class="dl-num">3</span><span class="dl-sign">+</span><span class="dl-text"><span class="prop-key">padding:</span> <span class="prop-val-add">24px</span></span></div>
|
||||
<div class="dl add"><span class="dl-num">4</span><span class="dl-sign">+</span><span class="dl-text"><span class="prop-key">color:</span> <span class="prop-val-add">#0066FF</span></span></div>
|
||||
<div class="dl add"><span class="dl-num">5</span><span class="dl-sign">+</span><span class="dl-text"><span class="prop-key">background:</span> <span class="prop-val-add">#EBF2FF</span></span></div>
|
||||
<div class="dl add"><span class="dl-num">6</span><span class="dl-sign">+</span><span class="dl-text"><span class="prop-key">borderRadius:</span> <span class="prop-val-add">8px</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">7</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">fontSize:</span> <span class="prop-val-num">14</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">8</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">fontWeight:</span> <span class="prop-val-num">500</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">9</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">height:</span> <span class="prop-val-num">36</span></span></div>
|
||||
<div class="dl ctx"><span class="dl-num">10</span><span class="dl-sign"> </span><span class="dl-text"><span class="prop-key">disabled:</span> <span class="prop-val-num">false</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="how-it-works" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Architecture</span>
|
||||
<h2 class="d2">From snapshot to diff in four steps.</h2>
|
||||
<p class="subtitle">Intent Diff runs a Myers/LCS algorithm on serialized component trees — not on pixels. Every merge triggers a full, machine-readable patch automatically.</p>
|
||||
</div>
|
||||
<div class="hiw-steps stagger">
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">01</div>
|
||||
<h3>Snapshot captured</h3>
|
||||
<p>The component tree is serialized to a structured document of props and styles, validated against a Zod schema before being stored as the diff baseline.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">02</div>
|
||||
<h3>Myers algorithm runs</h3>
|
||||
<p>The LCS-based Myers diff algorithm compares the serialized lines of the before and after snapshots, finding the minimum edit script between them.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">03</div>
|
||||
<h3>Unified patch generated</h3>
|
||||
<p>A standard unified patch string is emitted — <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">--- before / +++ after</code> with hunk headers and context lines on each side.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">04</div>
|
||||
<h3>Diff rendered</h3>
|
||||
<p>The patch is passed to <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">@pierre/diffs</code> and displayed in Split or Unified view for reviewers to inspect, accept, or reject individual prop changes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEEP DIVE 1: Structured diff -->
|
||||
<div class="section" style="padding:100px 40px;">
|
||||
<div class="feat-split reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-purple">Structured, not visual</span>
|
||||
<h2 class="d3">The diff runs on the<br>component AST, not pixels.</h2>
|
||||
<p class="subtitle">Screenshot comparison tools tell you something looks different. Intent Diff tells you exactly which prop changed, from what value to what value. Every diff is a first-class data structure — queryable, storable, and consumable by CI/CD pipelines without any manual interpretation.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">△</span>Diffs are computed on Zod-validated component snapshots, never on rendered images.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Output is a standard unified patch string — parseable by any diff tooling in your stack.</li>
|
||||
<li><span class="feat-pt-icon">△</span>CI/CD can consume the patch directly — block merges, post PR comments, or trigger alerts on specific prop changes.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Request early access</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;">Unified patch — Button.tsx</div>
|
||||
<div style="background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:16px;font-family:var(--mono);font-size:0.6rem;line-height:1.9;flex:1;overflow:hidden;">
|
||||
<div style="color:#A78BFA;">--- a/Button</div>
|
||||
<div style="color:#A78BFA;">+++ b/Button</div>
|
||||
<div style="color:#A78BFA;margin-bottom:4px;">@@ -3,5 +3,6 @@ Button</div>
|
||||
<div style="color:rgba(255,255,255,0.35);"> component: "Button"</div>
|
||||
<div style="color:rgba(255,255,255,0.35);"> variant: "primary"</div>
|
||||
<div style="color:#F87171;background:rgba(220,38,38,0.1);padding:1px 0;">- padding: 16px</div>
|
||||
<div style="color:#4ADE80;background:rgba(22,163,74,0.1);padding:1px 0;">+ padding: 24px</div>
|
||||
<div style="color:#F87171;background:rgba(220,38,38,0.1);padding:1px 0;">- color: #333333</div>
|
||||
<div style="color:#4ADE80;background:rgba(22,163,74,0.1);padding:1px 0;">+ color: #0066FF</div>
|
||||
<div style="color:#F87171;background:rgba(220,38,38,0.1);padding:1px 0;">- background: #F5F5F5</div>
|
||||
<div style="color:#4ADE80;background:rgba(22,163,74,0.1);padding:1px 0;">+ background: #EBF2FF</div>
|
||||
<div style="color:#4ADE80;background:rgba(22,163,74,0.1);padding:1px 0;">+ borderRadius: 8px</div>
|
||||
<div style="color:rgba(255,255,255,0.35);"> fontSize: 14</div>
|
||||
<div style="color:rgba(255,255,255,0.35);"> fontWeight: 500</div>
|
||||
</div>
|
||||
<div style="margin-top:12px;display:flex;gap:16px;">
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="width:8px;height:8px;border-radius:2px;background:rgba(220,38,38,0.45);flex-shrink:0;"></span><span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);">3 removals</span></div>
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="width:8px;height:8px;border-radius:2px;background:rgba(22,163,74,0.45);flex-shrink:0;"></span><span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);">4 additions</span></div>
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="width:8px;height:8px;border-radius:2px;background:rgba(124,58,237,0.45);flex-shrink:0;"></span><span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);">1 hunk</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEEP DIVE 2: Accept / Reject -->
|
||||
<div class="section section-muted" style="padding:100px 40px;">
|
||||
<div class="feat-split rev reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-purple">Granular review</span>
|
||||
<h2 class="d3">Accept or reject<br>individual prop changes.</h2>
|
||||
<p class="subtitle">Reviewers are not forced to approve or reject an entire diff. Each prop change is an independent item — cherry-pick what ships and what goes back, with a full audit trail recorded per decision. No more all-or-nothing PR approvals on design work.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">△</span>Check a single prop to accept it without touching adjacent changes in the same diff.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Rejected changes surface as inline comments on the originating artboard in real time.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Every accepted change is recorded in the merge commit metadata — zero ambiguity in history.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;">Diff inspector — Button@pr-412</div>
|
||||
<div class="ar-panel">
|
||||
<div class="ar-panel-head">
|
||||
<span class="ar-panel-title">Prop changes · 4 total</span>
|
||||
<span class="ar-panel-badge">2 accepted · 1 rejected · 1 pending</span>
|
||||
</div>
|
||||
<div class="ar-row">
|
||||
<div class="ar-checkbox checked">✓</div>
|
||||
<div class="ar-prop">
|
||||
<div class="ar-prop-name">padding</div>
|
||||
<div class="ar-prop-change">
|
||||
<span class="ar-val-old">16px</span>
|
||||
<span class="ar-val-arrow">→</span>
|
||||
<span class="ar-val-new">24px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-actions">
|
||||
<span class="ar-btn ar-btn-accept">Accept</span>
|
||||
<span class="ar-btn ar-btn-reject">Reject</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-row">
|
||||
<div class="ar-checkbox unchecked"></div>
|
||||
<div class="ar-prop">
|
||||
<div class="ar-prop-name">color</div>
|
||||
<div class="ar-prop-change">
|
||||
<span class="ar-val-old">#333333</span>
|
||||
<span class="ar-val-arrow">→</span>
|
||||
<span class="ar-val-new">#0066FF</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-actions">
|
||||
<span class="ar-btn ar-btn-accept">Accept</span>
|
||||
<span class="ar-btn ar-btn-reject">Reject</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-row">
|
||||
<div class="ar-checkbox checked">✓</div>
|
||||
<div class="ar-prop">
|
||||
<div class="ar-prop-name">background</div>
|
||||
<div class="ar-prop-change">
|
||||
<span class="ar-val-old">#F5F5F5</span>
|
||||
<span class="ar-val-arrow">→</span>
|
||||
<span class="ar-val-new">#EBF2FF</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-actions">
|
||||
<span class="ar-btn ar-btn-accept">Accept</span>
|
||||
<span class="ar-btn ar-btn-reject">Reject</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-row">
|
||||
<div class="ar-checkbox"></div>
|
||||
<div class="ar-prop">
|
||||
<div class="ar-prop-name">borderRadius <span style="font-family:var(--mono);font-size:0.5rem;color:rgba(167,139,250,0.65);background:rgba(124,58,237,0.1);padding:1px 5px;border-radius:3px;margin-left:4px;">new</span></div>
|
||||
<div class="ar-prop-change">
|
||||
<span class="ar-val-new">8px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-actions">
|
||||
<span class="ar-btn ar-btn-accept">Accept</span>
|
||||
<span class="ar-btn ar-btn-reject">Reject</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px;font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.18);text-align:right;">Reviewed by SinachPat · just now</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TECHNICAL SECTION -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Technical foundation</span>
|
||||
<h2 class="d2">Built on proven algorithms.</h2>
|
||||
<p class="subtitle">Intent Diff applies battle-tested diff theory — the same algorithm that powers Git — to component trees, not text files. Structured input means structured, machine-readable output.</p>
|
||||
</div>
|
||||
<div class="tech-grid stagger">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon" style="font-size:1rem;font-weight:800;font-family:var(--mono);">ND</div>
|
||||
<h3>Myers algorithm</h3>
|
||||
<p>The O(ND) Myers diff algorithm finds the shortest edit script between two sequences. The same algorithm used in <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">git diff</code> — applied here to serialized component prop lines, not source code.</p>
|
||||
<span class="tech-tag">Core algorithm</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon" style="font-size:1rem;font-weight:700;font-family:var(--mono);">LCS</div>
|
||||
<h3>LCS backtracking</h3>
|
||||
<p>After the edit graph is constructed, longest-common-subsequence backtracking produces the minimum set of additions and removals — minimizing diff noise and keeping context stable across rebases.</p>
|
||||
<span class="tech-tag">Edit script</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon" style="font-size:1rem;font-weight:700;font-family:var(--mono);">±</div>
|
||||
<h3>Unified patch format</h3>
|
||||
<p>Output is a standard unified patch string with <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">---</code> and <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">+++</code> headers, <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">@@</code> hunk ranges, and three lines of context. Parseable by any standard tooling out of the box.</p>
|
||||
<span class="tech-tag">Output format</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon" style="font-size:0.875rem;font-weight:700;font-family:var(--mono);letter-spacing:-0.04em;">⊟⊠</div>
|
||||
<h3>Split / Unified views</h3>
|
||||
<p>The patch is rendered by <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">@pierre/diffs</code> in two modes: Split (side-by-side panels) for detailed prop comparison, and Unified (stacked) for a linear review flow.</p>
|
||||
<span class="tech-tag">Rendering</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🗂</div>
|
||||
<h3>Zod schemas for snapshots</h3>
|
||||
<p>Every component snapshot is validated at write time against a shared Zod schema. Type-safe serialization means the diff algorithm always operates on well-formed input — no silent failures or undefined prop shapes.</p>
|
||||
<span class="tech-tag">Type safety</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⚙</div>
|
||||
<h3>CI/CD integration</h3>
|
||||
<p>The unified patch is available as a JSON payload on every merge event. Pipe it into GitHub Actions, Linear, or your own webhook to block PRs on token violations or notify designers of overridden changes.</p>
|
||||
<span class="tech-tag">Automation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RELATED FEATURES -->
|
||||
<section class="section section-muted">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">What connects here</span>
|
||||
<h2 class="d2">Intent Diff sits at the center.</h2>
|
||||
<p class="subtitle">Every artboard edit creates a diff. Every diff is queryable by the graph. Every diff is shippable through the bridge.</p>
|
||||
</div>
|
||||
<div class="related-grid stagger">
|
||||
<a class="related-card" href="/features/live-artboard.html">
|
||||
<div class="related-icon">⬜</div>
|
||||
<h3>Live Artboard</h3>
|
||||
<p>Every prop change made in a Live Artboard is recorded as an Intent Diff entry automatically — edits accumulate into a reviewable, shippable patch without any extra steps from the designer.</p>
|
||||
<span class="related-link">Explore Live Artboard →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/origin-graph.html">
|
||||
<div class="related-icon">◉</div>
|
||||
<h3>Origin Graph</h3>
|
||||
<p>Diffs are indexed into the Origin Graph, making it queryable which components changed most frequently, which props are most volatile, and who last touched any given node in the tree.</p>
|
||||
<span class="related-link">Explore Origin Graph →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/agent-bridge.html">
|
||||
<div class="related-icon">⇄</div>
|
||||
<h3>Agent Bridge</h3>
|
||||
<p>The Agent Bridge exposes diffs as MCP tool responses. Ask Cursor or Claude Code to apply the accepted diff for any component and the agent writes the prop changes directly into your codebase.</p>
|
||||
<span class="related-link">Explore Agent Bridge →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-bottom">
|
||||
<div class="cta-inner">
|
||||
<h2 class="cta-headline">No more redline hell.<br>Ship the diff.</h2>
|
||||
<p class="cta-sub">Every design change expressed as a structured, machine-readable, component-level diff. Early access is free.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="ft-inner">
|
||||
<div class="ft-top">
|
||||
<div>
|
||||
<div class="ft-brand-logo">Origin<span>main</span></div>
|
||||
<p class="ft-brand-tag">Where design intent becomes production code.</p>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Integrations</h4>
|
||||
<ul>
|
||||
<li><a href="/features/integrations.html">All integrations</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Linear</a></li>
|
||||
<li><a href="#">Slack</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Developers</h4>
|
||||
<ul>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">MCP Protocol</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-bottom">
|
||||
<span class="ft-copy">© 2025 Originmain. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>20);});
|
||||
// Dropdown: delay-based hover (desktop) + click (mobile/touch)
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd=>{const menu=dd.querySelector('.nav-dropdown-menu');let t;const open=()=>{clearTimeout(t);dd.classList.add('open');menu.classList.add('open');};const close=()=>{t=setTimeout(()=>{dd.classList.remove('open');menu.classList.remove('open');},150);};dd.addEventListener('mouseenter',open);dd.addEventListener('mouseleave',close);menu.addEventListener('mouseenter',open);menu.addEventListener('mouseleave',close);dd.querySelector('a').addEventListener('click',e=>{if(window.matchMedia('(hover:none)').matches||window.innerWidth<=1024){e.preventDefault();const o=menu.classList.toggle('open');dd.classList.toggle('open',o);}});});
|
||||
// Mobile product sub-accordion
|
||||
const mpt=document.getElementById('mob-product-toggle'),mns=document.getElementById('nav-mobile-sub'),mdc=document.getElementById('mob-dd-caret');if(mpt&&mns){mpt.addEventListener('click',e=>{e.preventDefault();const o=mns.classList.toggle('open');if(mdc)mdc.style.transform=o?'rotate(180deg)':'';});}
|
||||
// Burger
|
||||
const burger=document.getElementById('nav-burger'),mob=document.getElementById('nav-mobile');
|
||||
burger.addEventListener('click',()=>{const o=mob.classList.toggle('open');burger.classList.toggle('open',o);burger.setAttribute('aria-expanded',o);});
|
||||
// Reveal
|
||||
const io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.12});
|
||||
document.querySelectorAll('.reveal,.stagger').forEach(el=>io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,652 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Live Artboard — Originmain</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-muted:#F4F4F5;--bg-strong:#EBEBEB;--bg-inv:#0A0A0A;--bg-inv-2:#141414;--bg-inv-3:#1C1C1C;--fg:#0A0A0A;--fg-2:#52525B;--fg-3:#A1A1AA;--fg-4:#D4D4D8;--fg-inv:rgba(255,255,255,0.92);--fg-inv-2:rgba(255,255,255,0.52);--fg-inv-3:rgba(255,255,255,0.28);--blue:#0066FF;--blue-dark:#0050CC;--blue-light:#3385FF;--blue-soft:rgba(0,102,255,0.07);--blue-mid:rgba(0,102,255,0.15);--purple:#7C3AED;--teal:#0891B2;--border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.12);--border-inv:rgba(255,255,255,0.08);--border-inv-2:rgba(255,255,255,0.14);--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:20px;--r-6:24px;--r-full:9999px;--sh-xs:0 1px 2px rgba(0,0,0,0.05);--sh-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05);--sh-md:0 4px 8px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);--sh-lg:0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.05);--sh-xl:0 20px 40px rgba(0,0,0,0.09),0 8px 16px rgba(0,0,0,0.05);--sh-2xl:0 32px 64px rgba(0,0,0,0.11),0 16px 32px rgba(0,0,0,0.06);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
|
||||
img,svg{display:block;max-width:100%;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
|
||||
.section{padding:112px 0;}
|
||||
.section-muted{background:var(--bg-subtle);}
|
||||
.section-dark{background:var(--bg-inv);}
|
||||
.d1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;color:var(--fg);}
|
||||
.d2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.038em;color:var(--fg);}
|
||||
.d3{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-0.028em;color:var(--fg);}
|
||||
.subtitle{font-size:clamp(1rem,1.8vw,1.125rem);font-weight:400;line-height:1.75;color:var(--fg-2);}
|
||||
.label{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);}
|
||||
.label-blue{color:var(--blue);}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:0.9375rem;font-weight:600;padding:11px 22px;border-radius:var(--r-2);transition:transform 0.12s cubic-bezier(.16,1,.3,1),opacity 0.12s,box-shadow 0.12s;white-space:nowrap;letter-spacing:-0.01em;position:relative;overflow:hidden;}
|
||||
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}
|
||||
.btn:hover::after{background:rgba(255,255,255,0.06);}
|
||||
.btn:active{transform:scale(0.98)!important;}
|
||||
.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--sh-sm);}
|
||||
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border-2);}
|
||||
.btn-secondary:hover{background:var(--bg-muted);transform:translateY(-1px);}
|
||||
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,102,255,0.3);}
|
||||
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-1px);}
|
||||
.btn-lg{font-size:1rem;padding:13px 28px;}
|
||||
.btn-white{background:#fff;color:#0A0A0A;box-shadow:0 4px 12px rgba(255,255,255,0.15);}
|
||||
.btn-white:hover{background:#F5F5F5;transform:translateY(-1px);}
|
||||
.btn-outline-white{background:transparent;color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.18);}
|
||||
.btn-outline-white:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
|
||||
.divider{height:1px;background:var(--border);}
|
||||
.section-head{text-align:center;max-width:640px;margin:0 auto 72px;}
|
||||
.section-head .label{display:block;margin-bottom:16px;}
|
||||
.section-head .d2{margin-bottom:18px;}
|
||||
|
||||
/* NAV */
|
||||
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;padding:0 40px;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;}
|
||||
#nav.scrolled{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border);box-shadow:var(--sh-xs);}
|
||||
.nav-inner{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
|
||||
.nav-logo{justify-self:start;font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:var(--fg);display:flex;align-items:center;gap:2px;}
|
||||
.nav-logo span{color:var(--blue);}
|
||||
.nav-links{justify-self:center;display:flex;align-items:center;gap:0;list-style:none;}
|
||||
.nav-links a{font-size:0.9375rem;font-weight:500;color:var(--fg-2);padding:6px 14px;border-radius:var(--r-1);transition:color 0.12s,background 0.12s;letter-spacing:-0.01em;}
|
||||
.nav-links a:hover{color:var(--fg);}
|
||||
.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
|
||||
|
||||
/* Dropdown */
|
||||
.nav-dropdown{position:relative;}
|
||||
.nav-dropdown>a{display:flex;align-items:center;gap:4px;}
|
||||
.nav-dd-caret{transition:transform 0.15s;}
|
||||
/* caret rotation handled via JS .open class */
|
||||
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--sh-xl);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:opacity 0.15s,transform 0.15s,visibility 0.15s;pointer-events:none;}
|
||||
.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;}
|
||||
.nav-dropdown.open .nav-dd-caret{transform:rotate(180deg);}
|
||||
/* Mobile sub-nav */
|
||||
.nav-mobile-sub{display:none;padding:2px 0 6px 14px;flex-direction:column;}
|
||||
.nav-mobile-sub.open{display:flex;}
|
||||
.nav-mobile-sub a{font-size:0.875rem;color:rgba(255,255,255,0.4);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);letter-spacing:-0.01em;transition:color 0.1s;}
|
||||
.nav-mobile-sub a:last-child{border-bottom:none;}
|
||||
.nav-mobile-sub a:hover{color:rgba(255,255,255,0.8);}
|
||||
/* Dark hero: white nav before scrolling */
|
||||
#nav:not(.scrolled) .nav-logo{color:rgba(255,255,255,0.92);}
|
||||
#nav:not(.scrolled) .nav-logo span{color:#3385FF;}
|
||||
#nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.5);}
|
||||
#nav:not(.scrolled) .nav-links a:hover{color:rgba(255,255,255,0.9);}
|
||||
#nav:not(.scrolled) .nav-actions .btn-secondary{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.2);background:transparent;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
|
||||
.nav-dd-item:hover{background:var(--bg-muted);}
|
||||
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
|
||||
.nav-dd-text{display:flex;flex-direction:column;}
|
||||
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
|
||||
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
|
||||
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0;}
|
||||
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-2);}
|
||||
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),opacity 0.18s;transform-origin:center;}
|
||||
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||||
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
|
||||
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||||
.nav-mobile{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.07);padding:12px 24px 24px;flex-direction:column;gap:2px;}
|
||||
.nav-mobile.open{display:flex;}
|
||||
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;}
|
||||
.nav-mobile ul li a{display:block;font-size:1rem;font-weight:500;color:var(--fg-2);padding:11px 4px;border-bottom:1px solid var(--border);letter-spacing:-0.01em;}
|
||||
.nav-mobile ul li:last-child a{border-bottom:none;}
|
||||
.nav-mobile-ctas{display:flex;gap:8px;margin-top:16px;}
|
||||
.nav-mobile-ctas .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.875rem;}
|
||||
|
||||
/* PAGE HERO */
|
||||
#page-hero{padding:140px 40px 100px;background:var(--bg-inv);position:relative;overflow:hidden;text-align:center;}
|
||||
#page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(51,133,255,0.12),transparent 60%),radial-gradient(ellipse 40% 40% at 80% 70%,rgba(124,58,237,0.07),transparent 50%);pointer-events:none;}
|
||||
.page-hero-inner{position:relative;max-width:800px;margin:0 auto;}
|
||||
.page-hero-inner .label{color:rgba(255,255,255,0.3);margin-bottom:20px;display:block;}
|
||||
.page-hero-inner .d1{color:var(--fg-inv);margin-bottom:22px;}
|
||||
.page-hero-inner .subtitle{color:var(--fg-inv-2);max-width:580px;margin:0 auto 44px;}
|
||||
.page-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* PRODUCT VISUAL */
|
||||
.pv-shell{width:100%;max-width:960px;margin:72px auto 0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 48px 96px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06);border-bottom:none;position:relative;}
|
||||
.pv-chrome{background:#1C1C22;height:40px;display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid rgba(255,255,255,0.05);}
|
||||
.pv-dot{width:11px;height:11px;border-radius:50%;}
|
||||
.pv-dot.r{background:#FF5F57;}
|
||||
.pv-dot.y{background:#FFBD2E;}
|
||||
.pv-dot.g{background:#28C840;}
|
||||
.pv-url{flex:1;margin:0 12px;background:rgba(255,255,255,0.06);border-radius:5px;height:25px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.3);max-width:320px;}
|
||||
.pv-canvas{background:#0D0D11;height:380px;position:relative;display:flex;align-items:center;justify-content:center;}
|
||||
.pv-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.055) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;}
|
||||
|
||||
/* ARTBOARD VISUAL */
|
||||
.pv-ab{position:absolute;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.6);}
|
||||
.pv-ab.sel{box-shadow:0 0 0 2px #3385FF,0 8px 40px rgba(0,0,0,0.6);}
|
||||
.pv-ab-lbl{position:absolute;top:-22px;left:0;font-family:var(--mono);font-size:0.5rem;color:#3385FF;white-space:nowrap;}
|
||||
.pv-handle{position:absolute;width:7px;height:7px;background:#fff;border:2px solid #3385FF;border-radius:1.5px;z-index:10;}
|
||||
.pv-h-tl{top:-3px;left:-3px;}
|
||||
.pv-h-tr{top:-3px;right:-3px;}
|
||||
.pv-h-bl{bottom:-3px;left:-3px;}
|
||||
.pv-h-br{bottom:-3px;right:-3px;}
|
||||
|
||||
/* LIVE BADGE */
|
||||
.pv-live-badge{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.25);}
|
||||
.pv-live-dot{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 0 2px rgba(16,185,129,0.25);animation:live-pulse 2s ease-in-out infinite;}
|
||||
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,0.25);}50%{box-shadow:0 0 0 4px rgba(16,185,129,0.1);}}
|
||||
.pv-live-txt{font-family:var(--mono);font-size:0.5625rem;color:#10B981;font-weight:600;}
|
||||
|
||||
/* Fiber overlay */
|
||||
.pv-fiber{position:absolute;pointer-events:none;z-index:5;}
|
||||
.pv-fiber-box{position:absolute;border:1px solid rgba(51,133,255,0.5);border-radius:2px;}
|
||||
.pv-fiber-lbl{position:absolute;background:rgba(51,133,255,0.9);color:#fff;font-family:var(--mono);font-size:0.4rem;padding:1px 4px;border-radius:2px;white-space:nowrap;top:-14px;left:0;}
|
||||
|
||||
/* HOW IT WORKS SECTION */
|
||||
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative;}
|
||||
.hiw-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);}
|
||||
.hiw-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1;}
|
||||
.hiw-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--blue);margin-bottom:20px;box-shadow:var(--sh-sm);}
|
||||
.hiw-step h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.hiw-step p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;}
|
||||
|
||||
/* FEATURE SPLIT */
|
||||
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;max-width:1120px;margin:0 auto;}
|
||||
.feat-split.rev{direction:rtl;}
|
||||
.feat-split.rev>*{direction:ltr;}
|
||||
.feat-copy .label{display:block;margin-bottom:16px;}
|
||||
.feat-copy .d3{margin-bottom:16px;}
|
||||
.feat-copy .subtitle{margin-bottom:28px;}
|
||||
.feat-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
|
||||
.feat-pts li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.55;}
|
||||
.feat-pt-icon{width:20px;height:20px;border-radius:3px;background:var(--blue-soft);border:1px solid var(--blue-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:0.625rem;color:var(--blue);}
|
||||
|
||||
/* Feature visual */
|
||||
.feat-vis{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--sh-2xl);border:1px solid var(--border);aspect-ratio:4/3;position:relative;}
|
||||
.feat-vis-dark{background:#0D0D11;border-color:rgba(255,255,255,0.07);}
|
||||
.feat-vis-light{background:var(--bg-muted);}
|
||||
|
||||
/* TECH SECTION */
|
||||
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
|
||||
.tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:32px 28px;transition:box-shadow 0.2s;}
|
||||
.tech-card:hover{box-shadow:var(--sh-lg);}
|
||||
.tech-icon{width:44px;height:44px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:18px;}
|
||||
.tech-card h3{font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.tech-card p{font-size:0.875rem;color:var(--fg-2);line-height:1.65;}
|
||||
.tech-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-mid);padding:3px 9px;border-radius:var(--r-full);}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);padding:24px;font-family:var(--mono);font-size:0.75rem;line-height:1.75;color:rgba(255,255,255,0.75);overflow-x:auto;}
|
||||
.code-block .kw{color:#7EB8FF;}
|
||||
.code-block .str{color:#7DDBA0;}
|
||||
.code-block .cm{color:rgba(255,255,255,0.28);}
|
||||
.code-block .fn{color:#FFBA7B;}
|
||||
.code-block .nm{color:#D4A0FF;}
|
||||
|
||||
/* RELATED */
|
||||
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
|
||||
.related-card{border:1px solid var(--border);border-radius:var(--r-4);padding:24px;transition:box-shadow 0.15s,border-color 0.15s;display:flex;flex-direction:column;gap:10px;}
|
||||
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.related-icon{font-size:1.25rem;}
|
||||
.related-card h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;}
|
||||
.related-card p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;flex:1;}
|
||||
.related-link{font-size:0.8125rem;font-weight:600;color:var(--blue);}
|
||||
|
||||
/* CTA */
|
||||
#cta-bottom{background:var(--bg-inv);padding:120px 40px;position:relative;overflow:hidden;text-align:center;}
|
||||
#cta-bottom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(124,58,237,0.12),transparent 60%),radial-gradient(ellipse 60% 80% at 70% 50%,rgba(0,102,255,0.1),transparent 60%);pointer-events:none;}
|
||||
.cta-inner{position:relative;max-width:680px;margin:0 auto;}
|
||||
.cta-headline{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:-0.045em;color:var(--fg-inv);line-height:1.05;margin-bottom:18px;}
|
||||
.cta-sub{font-size:1.0625rem;color:var(--fg-inv-2);margin-bottom:44px;line-height:1.65;}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72px 40px 40px;}
|
||||
.ft-inner{max-width:1120px;margin:0 auto;}
|
||||
.ft-top{display:grid;grid-template-columns:260px repeat(4,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:36px;}
|
||||
.ft-brand-logo{font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:rgba(255,255,255,0.92);margin-bottom:8px;}
|
||||
.ft-brand-logo span{color:#3385FF;}
|
||||
.ft-brand-tag{font-size:0.875rem;color:rgba(255,255,255,0.3);line-height:1.65;max-width:200px;}
|
||||
.ft-col h4{font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:16px;letter-spacing:-0.01em;}
|
||||
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
|
||||
.ft-col a{font-size:0.875rem;color:rgba(255,255,255,0.32);transition:color 0.14s;letter-spacing:-0.01em;}
|
||||
.ft-col a:hover{color:rgba(255,255,255,0.65);}
|
||||
.ft-bottom{display:flex;justify-content:space-between;align-items:center;}
|
||||
.ft-copy{font-size:0.8125rem;color:rgba(255,255,255,0.22);}
|
||||
|
||||
/* REVEAL */
|
||||
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
|
||||
.reveal.in{opacity:1;transform:none;}
|
||||
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
|
||||
.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
|
||||
.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
|
||||
.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
|
||||
.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}
|
||||
|
||||
@media(max-width:1024px){.feat-split{grid-template-columns:1fr;gap:56px;}.feat-split.rev{direction:ltr;}.hiw-steps{grid-template-columns:1fr 1fr;gap:40px;}.hiw-steps::before{display:none;}.tech-grid{grid-template-columns:1fr 1fr;}.related-grid{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:768px){.wrap{padding:0 24px;}#nav{padding:0 24px;}.nav-inner{display:flex;justify-content:space-between;}.nav-links,.nav-actions .btn{display:none;}.nav-burger{display:flex;}#page-hero{padding:120px 24px 80px;}.pv-shell{margin-top:48px;}.hiw-steps{grid-template-columns:1fr;}.tech-grid,.related-grid{grid-template-columns:1fr;}.ft-top{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:480px){.ft-top{grid-template-columns:1fr;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li class="nav-dropdown">
|
||||
<a href="/#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
|
||||
<a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
|
||||
<button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-mobile" id="nav-mobile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-mobile-ctas">
|
||||
<a href="#" class="btn btn-secondary">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Request Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="label reveal">Live Artboard</span>
|
||||
<h1 class="d1 reveal">Your app,<br>live on the canvas.</h1>
|
||||
<p class="subtitle reveal">Not a mockup. Not a screenshot. Every artboard is a real iframe render of your actual component tree — running your real code, connected to your real data.</p>
|
||||
<div class="page-hero-ctas reveal">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product visual -->
|
||||
<div class="pv-shell reveal">
|
||||
<div class="pv-chrome">
|
||||
<div class="pv-dot r"></div>
|
||||
<div class="pv-dot y"></div>
|
||||
<div class="pv-dot g"></div>
|
||||
<div class="pv-url">🔒 app.originmain.io/canvas</div>
|
||||
</div>
|
||||
<div class="pv-canvas">
|
||||
<div class="pv-grid"></div>
|
||||
<div class="pv-live-badge"><div class="pv-live-dot"></div><span class="pv-live-txt">Live render</span></div>
|
||||
|
||||
<!-- Selected artboard -->
|
||||
<div class="pv-ab sel" style="top:48px;left:80px;width:220px;">
|
||||
<div class="pv-ab-lbl">DashboardCard — live</div>
|
||||
<div class="pv-handle pv-h-tl"></div><div class="pv-handle pv-h-tr"></div>
|
||||
<div class="pv-handle pv-h-bl"></div><div class="pv-handle pv-h-br"></div>
|
||||
<!-- Fiber overlay boxes -->
|
||||
<div class="pv-fiber" style="inset:0;">
|
||||
<div class="pv-fiber-box" style="top:14px;left:14px;right:14px;height:28px;">
|
||||
<span class="pv-fiber-lbl">Card</span>
|
||||
</div>
|
||||
<div class="pv-fiber-box" style="top:56px;left:14px;width:80px;height:16px;">
|
||||
<span class="pv-fiber-lbl">Title</span>
|
||||
</div>
|
||||
<div class="pv-fiber-box" style="top:56px;right:14px;width:40px;height:16px;"></div>
|
||||
</div>
|
||||
<!-- Card content -->
|
||||
<div style="padding:18px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<span style="font-size:0.6875rem;font-weight:600;color:#111;letter-spacing:-0.01em;">Revenue Overview</span>
|
||||
<span style="font-size:0.5625rem;background:#ECFDF5;color:#059669;padding:2px 6px;border-radius:99px;font-weight:600;">Live</span>
|
||||
</div>
|
||||
<div style="font-size:1.375rem;font-weight:800;color:#0A0A0A;letter-spacing:-0.045em;line-height:1;margin-bottom:4px;">$12,450</div>
|
||||
<div style="font-size:0.625rem;color:#059669;font-weight:600;margin-bottom:12px;">↑ +2.4%</div>
|
||||
<div style="height:2px;background:#F0F0F0;border-radius:99px;overflow:hidden;margin-bottom:12px;"><div style="height:100%;width:68%;background:#0066FF;border-radius:99px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second artboard -->
|
||||
<div class="pv-ab" style="top:48px;right:80px;width:160px;">
|
||||
<div class="pv-ab-lbl">UserProfile</div>
|
||||
<div style="padding:16px;text-align:center;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#0066FF);margin:0 auto 8px;"></div>
|
||||
<div style="font-size:0.6875rem;font-weight:700;color:#0A0A0A;margin-bottom:2px;">Sarah Chen</div>
|
||||
<div style="font-size:0.5625rem;color:#A1A1AA;">Design Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inspector peek -->
|
||||
<div style="position:absolute;right:16px;top:168px;width:156px;background:#111115;border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:12px;font-family:monospace;">
|
||||
<div style="font-size:0.4375rem;color:rgba(255,255,255,0.25);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;">Props — Card</div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:5px;"><span style="font-size:0.5625rem;color:rgba(255,255,255,0.35);">title</span><span style="font-size:0.5625rem;color:#7DDBA0;">"Revenue…"</span></div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:5px;"><span style="font-size:0.5625rem;color:rgba(255,255,255,0.35);">value</span><span style="font-size:0.5625rem;color:#7EB8FF;">12450</span></div>
|
||||
<div style="display:flex;justify-content:space-between;"><span style="font-size:0.5625rem;color:rgba(255,255,255,0.35);">live</span><span style="font-size:0.5625rem;color:#FFBA7B;">true</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="how-it-works" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Architecture</span>
|
||||
<h2 class="d2">From URL to live canvas in four steps.</h2>
|
||||
<p class="subtitle">A lightweight runtime bridge connects your running app to the Originmain canvas with no build step required.</p>
|
||||
</div>
|
||||
<div class="hiw-steps stagger">
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">01</div>
|
||||
<h3>Open any route</h3>
|
||||
<p>Paste any URL from your running app. Originmain opens it as an iframe-backed artboard in the canvas.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">02</div>
|
||||
<h3>Fiber hook injects</h3>
|
||||
<p>A lightweight script injects into the iframe and hooks into React's fiber tree — reading every component's props, state, and DOM rect.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">03</div>
|
||||
<h3>Canvas receives tree</h3>
|
||||
<p>The fiber tree streams to the host via postMessage. The canvas renders selection overlays and prop inspectors in real time.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">04</div>
|
||||
<h3>Edits write back</h3>
|
||||
<p>Click any component. Change a prop in the inspector. The iframe re-renders instantly — no round-trips, no rebuild.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEEP DIVE 1: Real components -->
|
||||
<div class="section" style="padding:100px 40px;">
|
||||
<div class="feat-split reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-blue">Real renders</span>
|
||||
<h2 class="d3">Not a mockup.<br>The actual component tree.</h2>
|
||||
<p class="subtitle">Every artboard runs your actual React components in a sandboxed iframe. Your real styles, your real tokens, your real data — all visible and editable from the canvas.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">⬜</span>Open any route from your dev server, staging URL, or production app.</li>
|
||||
<li><span class="feat-pt-icon">◉</span>The full fiber tree is mapped — every component, hook, and context value.</li>
|
||||
<li><span class="feat-pt-icon">⚡</span>Hot module reload propagates instantly. The canvas always reflects the current build.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Request early access</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;gap:8px;overflow:hidden;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px;">Fiber tree — DashboardCard</div>
|
||||
<!-- Tree nodes -->
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="color:rgba(51,133,255,0.6);font-family:monospace;font-size:0.6rem;">▶</span><span style="font-family:var(--mono);font-size:0.625rem;color:#7EB8FF;">DashboardCard</span><span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);margin-left:auto;">×1</span></div>
|
||||
<div style="padding-left:16px;display:flex;flex-direction:column;gap:6px;">
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="color:rgba(255,255,255,0.2);font-size:0.6rem;">▶</span><span style="font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.65);">Card</span><span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);margin-left:auto;">elevation="md"</span></div>
|
||||
<div style="padding-left:14px;display:flex;flex-direction:column;gap:5px;">
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.5);">CardHeader</span></div>
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.5);">MetricDisplay</span><span style="font-family:var(--mono);font-size:0.5rem;color:#FFBA7B;margin-left:auto;">value=12450</span></div>
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.5);">ProgressBar</span><span style="font-family:var(--mono);font-size:0.5rem;color:#7EB8FF;margin-left:auto;">value=68</span></div>
|
||||
<div style="display:flex;align-items:center;gap:6px;"><span style="font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.5);">TagList</span><span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.2);margin-left:auto;">×3 items</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:auto;padding:12px;background:rgba(51,133,255,0.08);border:1px solid rgba(51,133,255,0.15);border-radius:6px;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);margin-bottom:6px;">SELECTED — MetricDisplay</div>
|
||||
<div style="display:flex;justify-content:space-between;"><span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.4);">value</span><span style="font-family:var(--mono);font-size:0.5625rem;color:#FFBA7B;">12450</span></div>
|
||||
<div style="display:flex;justify-content:space-between;margin-top:4px;"><span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.4);">currency</span><span style="font-family:var(--mono);font-size:0.5625rem;color:#7DDBA0;">"USD"</span></div>
|
||||
<div style="display:flex;justify-content:space-between;margin-top:4px;"><span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.4);">format</span><span style="font-family:var(--mono);font-size:0.5625rem;color:#7DDBA0;">"compact"</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEEP DIVE 2: Interaction -->
|
||||
<div class="section section-muted" style="padding:100px 40px;">
|
||||
<div class="feat-split rev reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-blue">Interaction model</span>
|
||||
<h2 class="d3">Click. Edit. See it.<br>No context switch.</h2>
|
||||
<p class="subtitle">Click any component in the canvas — the inspector populates with its live props. Change a value and the iframe re-renders in under 16ms. All edits accumulate into an Intent Diff automatically.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">◈</span>Selection handles show the exact DOM rect reported by the fiber hook.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Every prop change is recorded as an entry in the artboard's undo stack.</li>
|
||||
<li><span class="feat-pt-icon">⇄</span>Cmd+Z / Cmd+Shift+Z for full undo/redo — applied live to the iframe.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-light reveal" style="overflow:visible;">
|
||||
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:32px;">
|
||||
<div style="width:100%;max-width:260px;position:relative;">
|
||||
<!-- Artboard frame -->
|
||||
<div style="background:#fff;border-radius:10px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,0.12);border:2px solid #3385FF;position:relative;">
|
||||
<!-- Selection handle -->
|
||||
<div style="position:absolute;top:-4px;left:-4px;width:8px;height:8px;background:#fff;border:2px solid #3385FF;border-radius:2px;"></div>
|
||||
<div style="position:absolute;top:-4px;right:-4px;width:8px;height:8px;background:#fff;border:2px solid #3385FF;border-radius:2px;"></div>
|
||||
<div style="position:absolute;bottom:-4px;left:-4px;width:8px;height:8px;background:#fff;border:2px solid #3385FF;border-radius:2px;"></div>
|
||||
<div style="position:absolute;bottom:-4px;right:-4px;width:8px;height:8px;background:#fff;border:2px solid #3385FF;border-radius:2px;"></div>
|
||||
<!-- Content -->
|
||||
<div style="font-size:0.6875rem;font-weight:700;color:#0A0A0A;margin-bottom:12px;">Revenue Overview</div>
|
||||
<div style="font-size:1.25rem;font-weight:800;color:#0A0A0A;letter-spacing:-0.04em;">$12,450</div>
|
||||
<div style="font-size:0.5625rem;color:#059669;margin-top:3px;margin-bottom:12px;">↑ +2.4%</div>
|
||||
<div style="height:2px;background:#F0F0F0;border-radius:99px;overflow:hidden;"><div style="height:100%;width:68%;background:#0066FF;border-radius:99px;"></div></div>
|
||||
</div>
|
||||
<!-- Inspector popup -->
|
||||
<div style="position:absolute;right:-130px;top:0;width:120px;background:#111115;border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,0.4);">
|
||||
<div style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.25);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:7px;">Props</div>
|
||||
<div style="margin-bottom:5px;"><div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.35);">borderRadius</div><div style="font-family:var(--mono);font-size:0.5625rem;color:#FFBA7B;margin-top:1px;">12</div></div>
|
||||
<div style="margin-bottom:5px;"><div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.35);">accentColor</div><div style="font-family:var(--mono);font-size:0.5625rem;color:#7DDBA0;margin-top:1px;">"#0066FF"</div></div>
|
||||
<div style="margin-bottom:5px;"><div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.35);">elevation</div><div style="font-family:var(--mono);font-size:0.5625rem;color:#7DDBA0;margin-top:1px;">"medium"</div></div>
|
||||
</div>
|
||||
<!-- Component label -->
|
||||
<div style="position:absolute;top:-22px;left:0;font-family:var(--mono);font-size:0.5rem;color:#3385FF;">ProgressBar</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TECHNICAL SECTION -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Technical foundation</span>
|
||||
<h2 class="d2">Built on open standards.</h2>
|
||||
<p class="subtitle">No proprietary runtime. No custom compiler. Live Artboard works with any React app — any version, any bundler, any framework.</p>
|
||||
</div>
|
||||
<div class="tech-grid stagger">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⬛</div>
|
||||
<h3>iframe sandboxing</h3>
|
||||
<p>Each artboard runs in a sandboxed iframe with <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">allow-scripts allow-same-origin</code>. Your app runs in full isolation — Originmain never modifies your code.</p>
|
||||
<span class="tech-tag">Security</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⚛</div>
|
||||
<h3>React Fiber hook</h3>
|
||||
<p>A lightweight script hooks into React's internal fiber tree via <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">__REACT_DEVTOOLS_GLOBAL_HOOK__</code> — the same API used by React DevTools. Works with React 16.8+.</p>
|
||||
<span class="tech-tag">Compatibility</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">📡</div>
|
||||
<h3>postMessage protocol</h3>
|
||||
<p>Fiber tree updates stream from the iframe to the host canvas via a typed postMessage protocol. Messages are validated with a shared artboard ID so multiple artboards never cross-contaminate.</p>
|
||||
<span class="tech-tag">Protocol</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🎯</div>
|
||||
<h3>DOM rect tracking</h3>
|
||||
<p>Every component's bounding rect is captured on mount and update. This drives the selection overlay, hover highlights, and resize handles — all pixel-accurate to the live render.</p>
|
||||
<span class="tech-tag">Precision</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">♻️</div>
|
||||
<h3>Zero build step</h3>
|
||||
<p>No Babel plugin, no webpack loader, no custom babel config. Paste any URL — dev server, staging, or production — and the artboard renders immediately.</p>
|
||||
<span class="tech-tag">Zero friction</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🔒</div>
|
||||
<h3>Cross-origin safe</h3>
|
||||
<p>When the iframe is cross-origin, the renderer can include the hook script directly via a small npm package. Same protocol, same canvas experience — no compromise on security.</p>
|
||||
<span class="tech-tag">Flexibility</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RELATED FEATURES -->
|
||||
<section class="section section-muted">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">What's next</span>
|
||||
<h2 class="d2">Live Artboard powers everything.</h2>
|
||||
<p class="subtitle">The real-time component tree is the foundation for every other Originmain feature.</p>
|
||||
</div>
|
||||
<div class="related-grid stagger">
|
||||
<a class="related-card" href="/features/origin-graph.html">
|
||||
<div class="related-icon">◉</div>
|
||||
<h3>Origin Graph</h3>
|
||||
<p>The fiber tree feeds directly into the Origin Graph — building a queryable index of every component, token, and relationship in your app.</p>
|
||||
<span class="related-link">Explore Origin Graph →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/intent-diff.html">
|
||||
<div class="related-icon">△</div>
|
||||
<h3>Intent Diff</h3>
|
||||
<p>Every visual edit in a live artboard generates an Intent Diff — a machine-readable, component-level description of exactly what changed.</p>
|
||||
<span class="related-link">Explore Intent Diff →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/completion-zone.html">
|
||||
<div class="related-icon">◈</div>
|
||||
<h3>Completion Zone</h3>
|
||||
<p>Mark any region of the artboard. AI fills it using your design language constraints, then renders the result live in the same artboard.</p>
|
||||
<span class="related-link">Explore Completion Zone →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-bottom">
|
||||
<div class="cta-inner">
|
||||
<h2 class="cta-headline">See your app<br>live on the canvas.</h2>
|
||||
<p class="cta-sub">Early access is free. Connect your first artboard in under two minutes.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="ft-inner">
|
||||
<div class="ft-top">
|
||||
<div>
|
||||
<div class="ft-brand-logo">Origin<span>main</span></div>
|
||||
<p class="ft-brand-tag">Where design intent becomes production code.</p>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Integrations</h4>
|
||||
<ul>
|
||||
<li><a href="/features/integrations.html">All integrations</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Linear</a></li>
|
||||
<li><a href="#">Slack</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Developers</h4>
|
||||
<ul>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">MCP Protocol</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-bottom">
|
||||
<span class="ft-copy">© 2025 Originmain. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>20);});
|
||||
// Dropdown: delay-based hover (desktop) + click (mobile/touch)
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd=>{const menu=dd.querySelector('.nav-dropdown-menu');let t;const open=()=>{clearTimeout(t);dd.classList.add('open');menu.classList.add('open');};const close=()=>{t=setTimeout(()=>{dd.classList.remove('open');menu.classList.remove('open');},150);};dd.addEventListener('mouseenter',open);dd.addEventListener('mouseleave',close);menu.addEventListener('mouseenter',open);menu.addEventListener('mouseleave',close);dd.querySelector('a').addEventListener('click',e=>{if(window.matchMedia('(hover:none)').matches||window.innerWidth<=1024){e.preventDefault();const o=menu.classList.toggle('open');dd.classList.toggle('open',o);}});});
|
||||
// Mobile product sub-accordion
|
||||
const mpt=document.getElementById('mob-product-toggle'),mns=document.getElementById('nav-mobile-sub'),mdc=document.getElementById('mob-dd-caret');if(mpt&&mns){mpt.addEventListener('click',e=>{e.preventDefault();const o=mns.classList.toggle('open');if(mdc)mdc.style.transform=o?'rotate(180deg)':'';});}
|
||||
// Burger
|
||||
const burger=document.getElementById('nav-burger'),mob=document.getElementById('nav-mobile');
|
||||
burger.addEventListener('click',()=>{const o=mob.classList.toggle('open');burger.classList.toggle('open',o);burger.setAttribute('aria-expanded',o);});
|
||||
// Reveal
|
||||
const io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.12});
|
||||
document.querySelectorAll('.reveal,.stagger').forEach(el=>io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,774 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Origin Graph — Originmain</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--bg:#FFFFFF;--bg-subtle:#FAFAFA;--bg-muted:#F4F4F5;--bg-strong:#EBEBEB;--bg-inv:#0A0A0A;--bg-inv-2:#141414;--bg-inv-3:#1C1C1C;--fg:#0A0A0A;--fg-2:#52525B;--fg-3:#A1A1AA;--fg-4:#D4D4D8;--fg-inv:rgba(255,255,255,0.92);--fg-inv-2:rgba(255,255,255,0.52);--fg-inv-3:rgba(255,255,255,0.28);--blue:#0066FF;--blue-dark:#0050CC;--blue-light:#3385FF;--blue-soft:rgba(0,102,255,0.07);--blue-mid:rgba(0,102,255,0.15);--purple:#7C3AED;--teal:#0891B2;--teal-dark:#0E7490;--teal-soft:rgba(8,145,178,0.07);--teal-mid:rgba(8,145,178,0.18);--border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.12);--border-inv:rgba(255,255,255,0.08);--border-inv-2:rgba(255,255,255,0.14);--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:20px;--r-6:24px;--r-full:9999px;--sh-xs:0 1px 2px rgba(0,0,0,0.05);--sh-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05);--sh-md:0 4px 8px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);--sh-lg:0 10px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.05);--sh-xl:0 20px 40px rgba(0,0,0,0.09),0 8px 16px rgba(0,0,0,0.05);--sh-2xl:0 32px 64px rgba(0,0,0,0.11),0 16px 32px rgba(0,0,0,0.06);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',monospace;}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||||
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;}
|
||||
img,svg{display:block;max-width:100%;}
|
||||
a{color:inherit;text-decoration:none;}
|
||||
button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 40px;}
|
||||
.section{padding:112px 0;}
|
||||
.section-muted{background:var(--bg-subtle);}
|
||||
.section-dark{background:var(--bg-inv);}
|
||||
.d1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-0.045em;color:var(--fg);}
|
||||
.d2{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.038em;color:var(--fg);}
|
||||
.d3{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-0.028em;color:var(--fg);}
|
||||
.subtitle{font-size:clamp(1rem,1.8vw,1.125rem);font-weight:400;line-height:1.75;color:var(--fg-2);}
|
||||
.label{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);}
|
||||
.label-teal{color:var(--teal);}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:0.9375rem;font-weight:600;padding:11px 22px;border-radius:var(--r-2);transition:transform 0.12s cubic-bezier(.16,1,.3,1),opacity 0.12s,box-shadow 0.12s;white-space:nowrap;letter-spacing:-0.01em;position:relative;overflow:hidden;}
|
||||
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}
|
||||
.btn:hover::after{background:rgba(255,255,255,0.06);}
|
||||
.btn:active{transform:scale(0.98)!important;}
|
||||
.btn-primary{background:var(--fg);color:var(--bg);box-shadow:var(--sh-sm);}
|
||||
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border:1px solid var(--border-2);}
|
||||
.btn-secondary:hover{background:var(--bg-muted);transform:translateY(-1px);}
|
||||
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 4px 12px rgba(8,145,178,0.3);}
|
||||
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-1px);}
|
||||
.btn-lg{font-size:1rem;padding:13px 28px;}
|
||||
.btn-white{background:#fff;color:#0A0A0A;box-shadow:0 4px 12px rgba(255,255,255,0.15);}
|
||||
.btn-white:hover{background:#F5F5F5;transform:translateY(-1px);}
|
||||
.btn-outline-white{background:transparent;color:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.18);}
|
||||
.btn-outline-white:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
|
||||
.divider{height:1px;background:var(--border);}
|
||||
.section-head{text-align:center;max-width:640px;margin:0 auto 72px;}
|
||||
.section-head .label{display:block;margin-bottom:16px;}
|
||||
.section-head .d2{margin-bottom:18px;}
|
||||
|
||||
/* NAV */
|
||||
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;display:flex;align-items:center;padding:0 40px;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;}
|
||||
#nav.scrolled{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border);box-shadow:var(--sh-xs);}
|
||||
.nav-inner{max-width:1120px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
|
||||
.nav-logo{justify-self:start;font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:var(--fg);display:flex;align-items:center;gap:2px;}
|
||||
.nav-logo span{color:var(--teal);}
|
||||
.nav-links{justify-self:center;display:flex;align-items:center;gap:0;list-style:none;}
|
||||
.nav-links a{font-size:0.9375rem;font-weight:500;color:var(--fg-2);padding:6px 14px;border-radius:var(--r-1);transition:color 0.12s,background 0.12s;letter-spacing:-0.01em;}
|
||||
.nav-links a:hover{color:var(--fg);}
|
||||
.nav-actions{justify-self:end;display:flex;align-items:center;gap:8px;}
|
||||
|
||||
/* Dropdown */
|
||||
.nav-dropdown{position:relative;}
|
||||
.nav-dropdown>a{display:flex;align-items:center;gap:4px;}
|
||||
.nav-dd-caret{transition:transform 0.15s;}
|
||||
/* caret rotation handled via JS .open class */
|
||||
.nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-3);box-shadow:var(--sh-xl);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:opacity 0.15s,transform 0.15s,visibility 0.15s;pointer-events:none;}
|
||||
.nav-dropdown-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:all;}
|
||||
.nav-dropdown.open .nav-dd-caret{transform:rotate(180deg);}
|
||||
/* Mobile sub-nav */
|
||||
.nav-mobile-sub{display:none;padding:2px 0 6px 14px;flex-direction:column;}
|
||||
.nav-mobile-sub.open{display:flex;}
|
||||
.nav-mobile-sub a{font-size:0.875rem;color:rgba(255,255,255,0.4);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.06);letter-spacing:-0.01em;transition:color 0.1s;}
|
||||
.nav-mobile-sub a:last-child{border-bottom:none;}
|
||||
.nav-mobile-sub a:hover{color:rgba(255,255,255,0.8);}
|
||||
/* Dark hero: white nav before scrolling */
|
||||
#nav:not(.scrolled) .nav-logo{color:rgba(255,255,255,0.92);}
|
||||
#nav:not(.scrolled) .nav-logo span{color:#3385FF;}
|
||||
#nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.5);}
|
||||
#nav:not(.scrolled) .nav-links a:hover{color:rgba(255,255,255,0.9);}
|
||||
#nav:not(.scrolled) .nav-actions .btn-secondary{color:rgba(255,255,255,0.65);border-color:rgba(255,255,255,0.2);background:transparent;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
|
||||
.nav-dd-item:hover{background:var(--bg-muted);}
|
||||
.nav-dd-item.active{background:var(--teal-soft);}
|
||||
.nav-dd-icon{width:30px;height:30px;background:var(--teal-soft);border:1px solid var(--teal-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
|
||||
.nav-dd-icon.blue-icon{background:var(--blue-soft);border-color:var(--blue-mid);}
|
||||
.nav-dd-text{display:flex;flex-direction:column;}
|
||||
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
|
||||
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
|
||||
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0;}
|
||||
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-2);}
|
||||
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform 0.22s cubic-bezier(0.16,1,0.3,1),opacity 0.18s;transform-origin:center;}
|
||||
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
|
||||
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
|
||||
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
|
||||
.nav-mobile{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.07);padding:12px 24px 24px;flex-direction:column;gap:2px;}
|
||||
.nav-mobile.open{display:flex;}
|
||||
.nav-mobile ul{list-style:none;display:flex;flex-direction:column;}
|
||||
.nav-mobile ul li a{display:block;font-size:1rem;font-weight:500;color:var(--fg-2);padding:11px 4px;border-bottom:1px solid var(--border);letter-spacing:-0.01em;}
|
||||
.nav-mobile ul li:last-child a{border-bottom:none;}
|
||||
.nav-mobile-ctas{display:flex;gap:8px;margin-top:16px;}
|
||||
.nav-mobile-ctas .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.875rem;}
|
||||
|
||||
/* PAGE HERO */
|
||||
#page-hero{padding:140px 40px 100px;background:var(--bg-inv);position:relative;overflow:hidden;text-align:center;}
|
||||
#page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(8,145,178,0.14),transparent 60%),radial-gradient(ellipse 40% 40% at 80% 70%,rgba(8,145,178,0.07),transparent 50%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(124,58,237,0.06),transparent 50%);pointer-events:none;}
|
||||
.page-hero-inner{position:relative;max-width:800px;margin:0 auto;}
|
||||
.page-hero-inner .label{color:rgba(255,255,255,0.3);margin-bottom:20px;display:block;}
|
||||
.page-hero-inner .d1{color:var(--fg-inv);margin-bottom:22px;}
|
||||
.page-hero-inner .subtitle{color:var(--fg-inv-2);max-width:600px;margin:0 auto 44px;}
|
||||
.page-hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* PRODUCT VISUAL */
|
||||
.pv-shell{width:100%;max-width:960px;margin:72px auto 0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 48px 96px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06);border-bottom:none;position:relative;}
|
||||
.pv-chrome{background:#1C1C22;height:40px;display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid rgba(255,255,255,0.05);}
|
||||
.pv-dot{width:11px;height:11px;border-radius:50%;}
|
||||
.pv-dot.r{background:#FF5F57;}
|
||||
.pv-dot.y{background:#FFBD2E;}
|
||||
.pv-dot.g{background:#28C840;}
|
||||
.pv-url{flex:1;margin:0 12px;background:rgba(255,255,255,0.06);border-radius:5px;height:25px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,0.3);max-width:320px;}
|
||||
.pv-canvas{background:#0D0D11;height:400px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
|
||||
.pv-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.042) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;}
|
||||
|
||||
/* Graph SVG */
|
||||
.graph-svg{position:absolute;inset:0;width:100%;height:100%;}
|
||||
|
||||
/* Node info panel */
|
||||
.graph-panel{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:148px;background:#111118;border:1px solid rgba(8,145,178,0.22);border-radius:10px;padding:14px;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
|
||||
.graph-panel-title{font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.25);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;}
|
||||
.graph-panel-name{font-family:var(--mono);font-size:0.6875rem;font-weight:600;color:#0891B2;margin-bottom:10px;}
|
||||
.graph-stat{display:flex;justify-content:space-between;margin-bottom:6px;}
|
||||
.graph-stat-label{font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.32);}
|
||||
.graph-stat-val{font-family:var(--mono);font-size:0.5625rem;font-weight:600;color:rgba(255,255,255,0.7);}
|
||||
.graph-stat-val.teal{color:#0891B2;}
|
||||
.graph-sep{height:1px;background:rgba(255,255,255,0.06);margin:10px 0;}
|
||||
.graph-edge-legend{display:flex;flex-direction:column;gap:5px;margin-top:4px;}
|
||||
.graph-edge-item{display:flex;align-items:center;gap:6px;}
|
||||
.graph-edge-line{width:16px;height:1px;flex-shrink:0;}
|
||||
.graph-edge-line.usage{background:rgba(255,255,255,0.3);}
|
||||
.graph-edge-line.inherit{background-image:repeating-linear-gradient(90deg,rgba(124,58,237,0.7) 0,rgba(124,58,237,0.7) 4px,transparent 4px,transparent 7px);}
|
||||
.graph-edge-line.token{background-image:repeating-linear-gradient(90deg,rgba(8,145,178,0.7) 0,rgba(8,145,178,0.7) 3px,transparent 3px,transparent 5px);}
|
||||
.graph-edge-text{font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.3);}
|
||||
|
||||
/* HOW IT WORKS */
|
||||
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative;}
|
||||
.hiw-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);}
|
||||
.hiw-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;z-index:1;}
|
||||
.hiw-num{width:56px;height:56px;border-radius:50%;background:var(--bg);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--teal);margin-bottom:20px;box-shadow:var(--sh-sm);}
|
||||
.hiw-step h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.hiw-step p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;}
|
||||
|
||||
/* FEATURE SPLIT */
|
||||
.feat-split{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;max-width:1120px;margin:0 auto;}
|
||||
.feat-split.rev{direction:rtl;}
|
||||
.feat-split.rev>*{direction:ltr;}
|
||||
.feat-copy .label{display:block;margin-bottom:16px;}
|
||||
.feat-copy .d3{margin-bottom:16px;}
|
||||
.feat-copy .subtitle{margin-bottom:28px;}
|
||||
.feat-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
|
||||
.feat-pts li{display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.55;}
|
||||
.feat-pt-icon{width:20px;height:20px;border-radius:3px;background:var(--teal-soft);border:1px solid var(--teal-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:0.625rem;color:var(--teal);}
|
||||
|
||||
/* Feature visual */
|
||||
.feat-vis{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--sh-2xl);border:1px solid var(--border);aspect-ratio:4/3;position:relative;}
|
||||
.feat-vis-dark{background:#0D0D11;border-color:rgba(255,255,255,0.07);}
|
||||
.feat-vis-light{background:var(--bg-muted);}
|
||||
|
||||
/* TECH SECTION */
|
||||
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
|
||||
.tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-4);padding:32px 28px;transition:box-shadow 0.2s;}
|
||||
.tech-card:hover{box-shadow:var(--sh-lg);}
|
||||
.tech-icon{width:44px;height:44px;background:var(--teal-soft);border:1px solid var(--teal-mid);border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:18px;}
|
||||
.tech-card h3{font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;margin-bottom:8px;}
|
||||
.tech-card p{font-size:0.875rem;color:var(--fg-2);line-height:1.65;}
|
||||
.tech-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);border:1px solid var(--teal-mid);padding:3px 9px;border-radius:var(--r-full);}
|
||||
|
||||
/* CODE BLOCK */
|
||||
.code-block{background:#111118;border:1px solid rgba(255,255,255,0.07);border-radius:var(--r-3);padding:24px;font-family:var(--mono);font-size:0.75rem;line-height:1.75;color:rgba(255,255,255,0.75);overflow-x:auto;}
|
||||
.code-block .kw{color:#7EB8FF;}
|
||||
.code-block .str{color:#7DDBA0;}
|
||||
.code-block .cm{color:rgba(255,255,255,0.28);}
|
||||
.code-block .fn{color:#FFBA7B;}
|
||||
.code-block .nm{color:#D4A0FF;}
|
||||
.code-block .tl{color:#5FCDD9;}
|
||||
|
||||
/* RELATED */
|
||||
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
|
||||
.related-card{border:1px solid var(--border);border-radius:var(--r-4);padding:24px;transition:box-shadow 0.15s,border-color 0.15s;display:flex;flex-direction:column;gap:10px;}
|
||||
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-2);}
|
||||
.related-icon{font-size:1.25rem;}
|
||||
.related-card h3{font-size:0.9375rem;font-weight:700;color:var(--fg);letter-spacing:-0.02em;}
|
||||
.related-card p{font-size:0.8125rem;color:var(--fg-2);line-height:1.6;flex:1;}
|
||||
.related-link{font-size:0.8125rem;font-weight:600;color:var(--teal);}
|
||||
|
||||
/* CTA */
|
||||
#cta-bottom{background:var(--bg-inv);padding:120px 40px;position:relative;overflow:hidden;text-align:center;}
|
||||
#cta-bottom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 30% 50%,rgba(8,145,178,0.1),transparent 60%),radial-gradient(ellipse 60% 80% at 70% 50%,rgba(8,145,178,0.07),transparent 60%);pointer-events:none;}
|
||||
.cta-inner{position:relative;max-width:680px;margin:0 auto;}
|
||||
.cta-headline{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:-0.045em;color:var(--fg-inv);line-height:1.05;margin-bottom:18px;}
|
||||
.cta-sub{font-size:1.0625rem;color:var(--fg-inv-2);margin-bottom:44px;line-height:1.65;}
|
||||
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
|
||||
|
||||
/* FOOTER */
|
||||
footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72px 40px 40px;}
|
||||
.ft-inner{max-width:1120px;margin:0 auto;}
|
||||
.ft-top{display:grid;grid-template-columns:260px repeat(4,1fr);gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:36px;}
|
||||
.ft-brand-logo{font-size:1rem;font-weight:800;letter-spacing:-0.04em;color:rgba(255,255,255,0.92);margin-bottom:8px;}
|
||||
.ft-brand-logo span{color:#0891B2;}
|
||||
.ft-brand-tag{font-size:0.875rem;color:rgba(255,255,255,0.3);line-height:1.65;max-width:200px;}
|
||||
.ft-col h4{font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:16px;letter-spacing:-0.01em;}
|
||||
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
|
||||
.ft-col a{font-size:0.875rem;color:rgba(255,255,255,0.32);transition:color 0.14s;letter-spacing:-0.01em;}
|
||||
.ft-col a:hover{color:rgba(255,255,255,0.65);}
|
||||
.ft-bottom{display:flex;justify-content:space-between;align-items:center;}
|
||||
.ft-copy{font-size:0.8125rem;color:rgba(255,255,255,0.22);}
|
||||
|
||||
/* REVEAL */
|
||||
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);}
|
||||
.reveal.in{opacity:1;transform:none;}
|
||||
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
|
||||
.stagger.in>*:nth-child(1){opacity:1;transform:none;transition-delay:0s;}
|
||||
.stagger.in>*:nth-child(2){opacity:1;transform:none;transition-delay:0.07s;}
|
||||
.stagger.in>*:nth-child(3){opacity:1;transform:none;transition-delay:0.14s;}
|
||||
.stagger.in>*:nth-child(4){opacity:1;transform:none;transition-delay:0.21s;}
|
||||
.stagger.in>*:nth-child(5){opacity:1;transform:none;transition-delay:0.28s;}
|
||||
.stagger.in>*:nth-child(6){opacity:1;transform:none;transition-delay:0.35s;}
|
||||
|
||||
@media(max-width:1024px){.feat-split{grid-template-columns:1fr;gap:56px;}.feat-split.rev{direction:ltr;}.hiw-steps{grid-template-columns:1fr 1fr;gap:40px;}.hiw-steps::before{display:none;}.tech-grid{grid-template-columns:1fr 1fr;}.related-grid{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:768px){.wrap{padding:0 24px;}#nav{padding:0 24px;}.nav-inner{display:flex;justify-content:space-between;}.nav-links,.nav-actions .btn{display:none;}.nav-burger{display:flex;}#page-hero{padding:120px 24px 80px;}.pv-shell{margin-top:48px;}.hiw-steps{grid-template-columns:1fr;}.tech-grid,.related-grid{grid-template-columns:1fr;}.ft-top{grid-template-columns:1fr 1fr;}}
|
||||
@media(max-width:480px){.ft-top{grid-template-columns:1fr;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav id="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li class="nav-dropdown">
|
||||
<a href="/#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon blue-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item active" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">◉ Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon blue-icon">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon blue-icon">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon blue-icon">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon blue-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
|
||||
<a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
|
||||
<button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-mobile" id="nav-mobile">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
</ul>
|
||||
<div class="nav-mobile-ctas">
|
||||
<a href="#" class="btn btn-secondary">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Request Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="page-hero">
|
||||
<div class="page-hero-inner">
|
||||
<span class="label reveal">◉ Origin Graph</span>
|
||||
<h1 class="d1 reveal">Every component,<br>indexed and queryable.</h1>
|
||||
<p class="subtitle reveal">The Origin Graph is a living knowledge graph of your entire component ecosystem — relationships, history, usage, and design tokens — all queryable in real time.</p>
|
||||
<div class="page-hero-ctas reveal">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graph product visual -->
|
||||
<div class="pv-shell reveal">
|
||||
<div class="pv-chrome">
|
||||
<div class="pv-dot r"></div>
|
||||
<div class="pv-dot y"></div>
|
||||
<div class="pv-dot g"></div>
|
||||
<div class="pv-url">🔒 app.originmain.io/graph</div>
|
||||
</div>
|
||||
<div class="pv-canvas">
|
||||
<div class="pv-grid"></div>
|
||||
|
||||
<!-- SVG graph visualization -->
|
||||
<svg class="graph-svg" viewBox="0 0 960 400" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<marker id="arr-usage" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
|
||||
<path d="M0,1 L5,3 L0,5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
|
||||
</marker>
|
||||
<marker id="arr-token" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
|
||||
<path d="M0,1 L5,3 L0,5" fill="none" stroke="rgba(8,145,178,0.5)" stroke-width="1"/>
|
||||
</marker>
|
||||
<marker id="arr-inherit" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
|
||||
<path d="M0,1 L5,3 L0,5" fill="none" stroke="rgba(124,58,237,0.5)" stroke-width="1"/>
|
||||
</marker>
|
||||
<filter id="glow-teal" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Usage edges (solid faint white) -->
|
||||
<!-- NavBar → Button -->
|
||||
<line stroke="rgba(255,255,255,0.12)" stroke-width="1" x1="285" y1="128" x2="404" y2="192" marker-end="url(#arr-usage)"/>
|
||||
<!-- DashboardCard → Card -->
|
||||
<line stroke="rgba(255,255,255,0.12)" stroke-width="1" x1="490" y1="180" x2="578" y2="130" marker-end="url(#arr-usage)"/>
|
||||
<!-- DashboardCard → Button -->
|
||||
<line stroke="rgba(255,255,255,0.12)" stroke-width="1" x1="462" y1="192" x2="436" y2="192" marker-end="url(#arr-usage)"/>
|
||||
<!-- Card → Input -->
|
||||
<line stroke="rgba(255,255,255,0.12)" stroke-width="1" x1="606" y1="148" x2="634" y2="256" marker-end="url(#arr-usage)"/>
|
||||
<!-- NavBar → Input -->
|
||||
<line stroke="rgba(255,255,255,0.08)" stroke-width="1" x1="308" y1="135" x2="618" y2="265" marker-end="url(#arr-usage)"/>
|
||||
|
||||
<!-- Inheritance edge (dashed purple) -->
|
||||
<!-- DashboardCard extends Card -->
|
||||
<line stroke="rgba(124,58,237,0.35)" stroke-width="1.5" stroke-dasharray="5 3" x1="510" y1="178" x2="582" y2="142" marker-end="url(#arr-inherit)"/>
|
||||
|
||||
<!-- Token edges (dashed teal) -->
|
||||
<!-- --color-primary → Button -->
|
||||
<line stroke="rgba(8,145,178,0.3)" stroke-width="1" stroke-dasharray="3 3" x1="400" y1="302" x2="418" y2="212" marker-end="url(#arr-token)"/>
|
||||
<!-- --color-primary → Card -->
|
||||
<line stroke="rgba(8,145,178,0.3)" stroke-width="1" stroke-dasharray="3 3" x1="412" y1="294" x2="578" y2="148" marker-end="url(#arr-token)"/>
|
||||
<!-- --color-primary → DashboardCard -->
|
||||
<line stroke="rgba(8,145,178,0.3)" stroke-width="1" stroke-dasharray="3 3" x1="404" y1="290" x2="472" y2="218" marker-end="url(#arr-token)"/>
|
||||
<!-- --color-primary → Input -->
|
||||
<line stroke="rgba(8,145,178,0.25)" stroke-width="1" stroke-dasharray="3 3" x1="418" y1="298" x2="636" y2="278" marker-end="url(#arr-token)"/>
|
||||
<!-- --color-primary → NavBar -->
|
||||
<line stroke="rgba(8,145,178,0.25)" stroke-width="1" stroke-dasharray="3 3" x1="382" y1="290" x2="282" y2="148" marker-end="url(#arr-token)"/>
|
||||
|
||||
<!-- Node: NavBar -->
|
||||
<g transform="translate(262,120)">
|
||||
<circle r="32" fill="#191920" stroke="rgba(255,255,255,0.12)" stroke-width="1.5"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="9" fill="rgba(255,255,255,0.65)">NavBar</text>
|
||||
</g>
|
||||
|
||||
<!-- Node: Button -->
|
||||
<g transform="translate(420,200)">
|
||||
<circle r="30" fill="#191920" stroke="rgba(255,255,255,0.12)" stroke-width="1.5"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="9" fill="rgba(255,255,255,0.65)">Button</text>
|
||||
</g>
|
||||
|
||||
<!-- Node: DashboardCard — selected, blue ring, glow -->
|
||||
<g transform="translate(490,200)" filter="url(#glow-teal)">
|
||||
<circle r="44" fill="none" stroke="rgba(8,145,178,0.12)" stroke-width="1"/>
|
||||
<circle r="36" fill="#0D1E26" stroke="#0891B2" stroke-width="2"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="8" fill="#0891B2" font-weight="600">Dashboard</text>
|
||||
<text y="12" text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="8" fill="#0891B2" font-weight="600">Card</text>
|
||||
</g>
|
||||
|
||||
<!-- Selected label tooltip -->
|
||||
<g transform="translate(490,148)">
|
||||
<rect x="-52" y="-11" width="104" height="18" rx="4" fill="rgba(8,145,178,0.12)" stroke="rgba(8,145,178,0.28)" stroke-width="1"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="7" fill="rgba(8,145,178,0.85)">DashboardCard — selected</text>
|
||||
</g>
|
||||
|
||||
<!-- Node: Card -->
|
||||
<g transform="translate(600,120)">
|
||||
<circle r="30" fill="#191920" stroke="rgba(255,255,255,0.12)" stroke-width="1.5"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="9" fill="rgba(255,255,255,0.65)">Card</text>
|
||||
</g>
|
||||
|
||||
<!-- Node: Input -->
|
||||
<g transform="translate(648,280)">
|
||||
<circle r="26" fill="#191920" stroke="rgba(255,255,255,0.12)" stroke-width="1.5"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="9" fill="rgba(255,255,255,0.65)">Input</text>
|
||||
</g>
|
||||
|
||||
<!-- Node: --color-primary (token, teal circle) -->
|
||||
<g transform="translate(392,316)">
|
||||
<circle r="24" fill="#0A1A20" stroke="rgba(8,145,178,0.5)" stroke-width="1.5"/>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="rgba(8,145,178,0.85)" y="-5">--color</text>
|
||||
<text text-anchor="middle" dominant-baseline="central" font-family="'JetBrains Mono',monospace" font-size="6.5" fill="rgba(8,145,178,0.85)" y="6">-primary</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
||||
<!-- Node info panel -->
|
||||
<div class="graph-panel">
|
||||
<div class="graph-panel-title">Node Inspector</div>
|
||||
<div class="graph-panel-name">DashboardCard</div>
|
||||
<div class="graph-stat">
|
||||
<span class="graph-stat-label">uses</span>
|
||||
<span class="graph-stat-val teal">4</span>
|
||||
</div>
|
||||
<div class="graph-stat">
|
||||
<span class="graph-stat-label">used by</span>
|
||||
<span class="graph-stat-val">2</span>
|
||||
</div>
|
||||
<div class="graph-stat">
|
||||
<span class="graph-stat-label">tokens consumed</span>
|
||||
<span class="graph-stat-val">12</span>
|
||||
</div>
|
||||
<div class="graph-sep"></div>
|
||||
<div class="graph-panel-title" style="margin-bottom:6px;">Edge types</div>
|
||||
<div class="graph-edge-legend">
|
||||
<div class="graph-edge-item">
|
||||
<div class="graph-edge-line usage"></div>
|
||||
<span class="graph-edge-text">Usage</span>
|
||||
</div>
|
||||
<div class="graph-edge-item">
|
||||
<div class="graph-edge-line inherit"></div>
|
||||
<span class="graph-edge-text">Inheritance</span>
|
||||
</div>
|
||||
<div class="graph-edge-item">
|
||||
<div class="graph-edge-line token"></div>
|
||||
<span class="graph-edge-text">Token link</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section id="how-it-works" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Architecture</span>
|
||||
<h2 class="d2">From source file to queryable graph<br>in four steps.</h2>
|
||||
<p class="subtitle">A two-pass pipeline — static analysis plus runtime capture — builds a continuously updated graph with zero manual annotation required.</p>
|
||||
</div>
|
||||
<div class="hiw-steps stagger">
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">01</div>
|
||||
<h3>Static analysis</h3>
|
||||
<p>An AST walker scans every component file, extracting imports, prop signatures, and design-token references without running your code.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">02</div>
|
||||
<h3>Runtime capture</h3>
|
||||
<p>A React Fiber hook captures live props and state at render time, adding real-world usage data that static analysis alone can't see.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">03</div>
|
||||
<h3>Graph construction</h3>
|
||||
<p>Nodes and typed edges — usage, inheritance, token links — are written to Supabase, forming a queryable graph that updates incrementally.</p>
|
||||
</div>
|
||||
<div class="hiw-step">
|
||||
<div class="hiw-num">04</div>
|
||||
<h3>Query interface</h3>
|
||||
<p>A REST API and MCP tool set expose the graph to AI agents, the diff engine, and the Inspector — answering natural-language queries in real time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEEP DIVE 1: Impact analysis -->
|
||||
<div class="section" style="padding:100px 40px;">
|
||||
<div class="feat-split reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-teal">Impact analysis, instant</span>
|
||||
<h2 class="d3">Change a token.<br>See all 47 components affected — instantly.</h2>
|
||||
<p class="subtitle">Because every design-token link is a first-class edge in the graph, changing <code style="font-family:var(--mono);font-size:0.85em;background:var(--bg-muted);padding:2px 6px;border-radius:4px;">--color-primary</code> immediately highlights every component downstream. No Storybook trawl. No grep. Just the answer.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">◉</span>Token edges are resolved at index time — the graph knows before you even ask.</li>
|
||||
<li><span class="feat-pt-icon">◉</span>Affected nodes are ranked by depth: direct consumers first, transitive next.</li>
|
||||
<li><span class="feat-pt-icon">◉</span>The result feeds directly into Intent Diff, so every PR ships with a complete blast-radius audit.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Request early access</a>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;">Token blast radius — --color-primary</div>
|
||||
|
||||
<!-- Token source row -->
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;">
|
||||
<div style="width:28px;height:28px;border-radius:6px;background:rgba(8,145,178,0.15);border:1px solid rgba(8,145,178,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4" stroke="#0891B2" stroke-width="1.5"/></svg>
|
||||
</div>
|
||||
<span style="font-family:var(--mono);font-size:0.625rem;color:#0891B2;font-weight:600;">--color-primary</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.22);margin-left:auto;white-space:nowrap;">#0066FF → #0891B2</span>
|
||||
</div>
|
||||
|
||||
<!-- Affected component list -->
|
||||
<div style="display:flex;flex-direction:column;gap:7px;padding-left:14px;border-left:1px solid rgba(8,145,178,0.2);">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:5px;height:1px;background:rgba(8,145,178,0.4);flex-shrink:0;margin-left:-17px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:4px;background:rgba(8,145,178,0.1);border:1px solid rgba(8,145,178,0.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><div style="width:8px;height:8px;border-radius:50%;background:rgba(8,145,178,0.6);"></div></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.65);">Button</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(8,145,178,0.8);margin-left:auto;background:rgba(8,145,178,0.08);padding:1px 6px;border-radius:3px;">direct</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:5px;height:1px;background:rgba(8,145,178,0.4);flex-shrink:0;margin-left:-17px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:4px;background:rgba(8,145,178,0.1);border:1px solid rgba(8,145,178,0.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><div style="width:8px;height:8px;border-radius:50%;background:rgba(8,145,178,0.6);"></div></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.65);">Card</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(8,145,178,0.8);margin-left:auto;background:rgba(8,145,178,0.08);padding:1px 6px;border-radius:3px;">direct</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:5px;height:1px;background:rgba(8,145,178,0.4);flex-shrink:0;margin-left:-17px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:4px;background:rgba(8,145,178,0.1);border:1px solid rgba(8,145,178,0.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><div style="width:8px;height:8px;border-radius:50%;background:rgba(8,145,178,0.6);"></div></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.65);">NavBar</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(8,145,178,0.8);margin-left:auto;background:rgba(8,145,178,0.08);padding:1px 6px;border-radius:3px;">direct</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:5px;height:1px;background:rgba(255,255,255,0.1);flex-shrink:0;margin-left:-17px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><div style="width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18);"></div></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.4);">DashboardCard</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.25);margin-left:auto;background:rgba(255,255,255,0.04);padding:1px 6px;border-radius:3px;">via Card</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:5px;height:1px;background:rgba(255,255,255,0.1);flex-shrink:0;margin-left:-17px;"></div>
|
||||
<div style="width:20px;height:20px;border-radius:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><div style="width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18);"></div></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,0.4);">Input</span>
|
||||
<span style="font-family:var(--mono);font-size:0.4375rem;color:rgba(255,255,255,0.25);margin-left:auto;background:rgba(255,255,255,0.04);padding:1px 6px;border-radius:3px;">via Button</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;opacity:0.45;">
|
||||
<div style="width:5px;height:1px;background:rgba(255,255,255,0.1);flex-shrink:0;margin-left:-17px;"></div>
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.3);">+ 42 more components…</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary bar -->
|
||||
<div style="margin-top:auto;padding:10px 12px;background:rgba(8,145,178,0.07);border:1px solid rgba(8,145,178,0.14);border-radius:6px;display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.3);">Total affected</span>
|
||||
<span style="font-family:var(--mono);font-size:0.75rem;font-weight:700;color:#0891B2;">47 components</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEEP DIVE 2: Graph as API -->
|
||||
<div class="section section-muted" style="padding:100px 40px;">
|
||||
<div class="feat-split rev reveal">
|
||||
<div class="feat-copy">
|
||||
<span class="label label-teal">The graph as API</span>
|
||||
<h2 class="d3">Not just a visualization.<br>A queryable API.</h2>
|
||||
<p class="subtitle">Every node in the graph is a structured JSON object accessible via REST or MCP tools. AI agents, CI pipelines, and custom tooling can query your entire component ecosystem programmatically — no scraping, no docs to keep in sync.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">◉</span>REST endpoints return nodes, edges, and subgraphs with fully typed results.</li>
|
||||
<li><span class="feat-pt-icon">◉</span>MCP tools let AI agents query the graph via natural language through Agent Bridge.</li>
|
||||
<li><span class="feat-pt-icon">◉</span>Completion Zone AI pulls the relevant graph neighborhood as context automatically — no manual prompt engineering.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
<div style="position:absolute;inset:0;padding:28px;overflow:auto;">
|
||||
<div style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.25);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;">GET /graph/nodes/Button</div>
|
||||
<div class="code-block" style="font-size:0.6875rem;padding:18px;margin:0;line-height:1.7;">
|
||||
<span class="kw">{</span>
|
||||
<span class="str">"id"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="str">"Button"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"type"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="str">"component"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"file"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="str">"src/ui/Button.tsx"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"props"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="kw">{</span>
|
||||
<span class="str">"label"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="nm">"string"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"variant"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="nm">"primary | secondary"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"disabled"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="nm">"boolean"</span>
|
||||
<span class="kw">}</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"usedBy"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="kw">[</span><span class="str">"Card"</span><span style="color:rgba(255,255,255,0.45)">, </span><span class="str">"NavBar"</span><span class="kw">]</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"uses"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="kw">[]</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"tokens"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="kw">[</span>
|
||||
<span class="tl">"--color-primary"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="tl">"--radius-sm"</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="tl">"--font-weight-semibold"</span>
|
||||
<span class="kw">]</span><span style="color:rgba(255,255,255,0.45)">,</span>
|
||||
<span class="str">"updatedAt"</span><span style="color:rgba(255,255,255,0.45)">: </span><span class="str">"2025-04-25T14:22:07Z"</span>
|
||||
<span class="kw">}</span>
|
||||
</div>
|
||||
<div style="margin-top:12px;padding:8px 12px;background:rgba(8,145,178,0.07);border:1px solid rgba(8,145,178,0.14);border-radius:6px;display:flex;align-items:center;gap:6px;">
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(8,145,178,0.8);">MCP →</span>
|
||||
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.35);">graph.query("What will break if I rename Button?")</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TECH SECTION -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">Technical foundation</span>
|
||||
<h2 class="d2">Six layers that keep<br>the graph always current.</h2>
|
||||
<p class="subtitle">Origin Graph is designed to stay accurate as your codebase moves — incremental, typed, and accessible to any tooling that speaks REST or MCP.</p>
|
||||
</div>
|
||||
<div class="tech-grid stagger">
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🌳</div>
|
||||
<h3>AST walker</h3>
|
||||
<p>A Babel-based AST walker traverses every component file on save, extracting imports, JSX usage, and design-token references — without executing any code.</p>
|
||||
<span class="tech-tag">Static analysis</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⚛</div>
|
||||
<h3>React Fiber runtime</h3>
|
||||
<p>A Fiber hook captures live props and state during rendering, adding real-world usage data — actual prop values in production — that static analysis cannot infer.</p>
|
||||
<span class="tech-tag">Runtime</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🗄</div>
|
||||
<h3>Supabase graph store</h3>
|
||||
<p>Nodes and edges are persisted in Supabase Postgres with a graph-friendly schema. Postgres views and RPC functions serve subgraph queries with sub-10ms latency.</p>
|
||||
<span class="tech-tag">Persistence</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">🔗</div>
|
||||
<h3>Typed edges</h3>
|
||||
<p>Three edge types — <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">usage</code>, <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">inheritance</code>, <code style="font-family:var(--mono);font-size:0.8em;background:var(--bg-muted);padding:1px 4px;border-radius:3px;">token</code> — are stored with directionality and metadata, making impact analysis a simple graph traversal rather than a heuristic search.</p>
|
||||
<span class="tech-tag">Data model</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">💬</div>
|
||||
<h3>Natural language queries</h3>
|
||||
<p>Agent Bridge exposes the graph as an MCP tool. Ask "What will break if I rename Card?" in plain English from Cursor, Claude Code, or any MCP-compatible editor.</p>
|
||||
<span class="tech-tag">Agent Bridge</span>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<div class="tech-icon">⚡</div>
|
||||
<h3>Incremental updates</h3>
|
||||
<p>Only the files touched since the last commit are re-indexed. No full rebuild. A project with 1,000 components updates in under two seconds on a file save.</p>
|
||||
<span class="tech-tag">Performance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RELATED FEATURES -->
|
||||
<section class="section section-muted">
|
||||
<div class="wrap">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">What connects here</span>
|
||||
<h2 class="d2">Origin Graph powers<br>everything downstream.</h2>
|
||||
<p class="subtitle">The graph is infrastructure. Every Originmain feature that needs to understand your codebase queries it first.</p>
|
||||
</div>
|
||||
<div class="related-grid stagger">
|
||||
<a class="related-card" href="/features/live-artboard.html">
|
||||
<div class="related-icon">⬜</div>
|
||||
<h3>Live Artboard</h3>
|
||||
<p>The Fiber hook that powers Live Artboard is the same one feeding runtime usage data into Origin Graph. Both features share a single, lightweight injection.</p>
|
||||
<span class="related-link">Explore Live Artboard →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/intent-diff.html">
|
||||
<div class="related-icon">△</div>
|
||||
<h3>Intent Diff</h3>
|
||||
<p>When Intent Diff calculates the blast radius of a change, it queries Origin Graph. The complete token and usage graph makes the diff semantically complete.</p>
|
||||
<span class="related-link">Explore Intent Diff →</span>
|
||||
</a>
|
||||
<a class="related-card" href="/features/completion-zone.html">
|
||||
<div class="related-icon">◈</div>
|
||||
<h3>Completion Zone</h3>
|
||||
<p>Completion Zone AI pulls the relevant graph neighborhood as context before generating. Your design system constraints arrive as graph data — not a prompt you maintain.</p>
|
||||
<span class="related-link">Explore Completion Zone →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-bottom">
|
||||
<div class="cta-inner">
|
||||
<h2 class="cta-headline">Your component graph,<br>always up to date.</h2>
|
||||
<p class="cta-sub">Early access is free. Connect your repo and the first full graph index runs in under a minute.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="#" class="btn btn-white btn-lg">Request Early Access</a>
|
||||
<a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="ft-inner">
|
||||
<div class="ft-top">
|
||||
<div>
|
||||
<div class="ft-brand-logo">Origin<span>main</span></div>
|
||||
<p class="ft-brand-tag">Where design intent becomes production code.</p>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Integrations</h4>
|
||||
<ul>
|
||||
<li><a href="/features/integrations.html">All integrations</a></li>
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Linear</a></li>
|
||||
<li><a href="#">Slack</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Developers</h4>
|
||||
<ul>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">API Reference</a></li>
|
||||
<li><a href="#">MCP Protocol</a></li>
|
||||
<li><a href="#">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="/#pricing">Pricing</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-bottom">
|
||||
<span class="ft-copy">© 2025 Originmain. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('scrolled',window.scrollY>20);});
|
||||
// Dropdown: delay-based hover (desktop) + click (mobile/touch)
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd=>{const menu=dd.querySelector('.nav-dropdown-menu');let t;const open=()=>{clearTimeout(t);dd.classList.add('open');menu.classList.add('open');};const close=()=>{t=setTimeout(()=>{dd.classList.remove('open');menu.classList.remove('open');},150);};dd.addEventListener('mouseenter',open);dd.addEventListener('mouseleave',close);menu.addEventListener('mouseenter',open);menu.addEventListener('mouseleave',close);dd.querySelector('a').addEventListener('click',e=>{if(window.matchMedia('(hover:none)').matches||window.innerWidth<=1024){e.preventDefault();const o=menu.classList.toggle('open');dd.classList.toggle('open',o);}});});
|
||||
// Mobile product sub-accordion
|
||||
const mpt=document.getElementById('mob-product-toggle'),mns=document.getElementById('nav-mobile-sub'),mdc=document.getElementById('mob-dd-caret');if(mpt&&mns){mpt.addEventListener('click',e=>{e.preventDefault();const o=mns.classList.toggle('open');if(mdc)mdc.style.transform=o?'rotate(180deg)':'';});}
|
||||
// Burger
|
||||
const burger=document.getElementById('nav-burger'),mob=document.getElementById('nav-mobile');
|
||||
burger.addEventListener('click',()=>{const o=mob.classList.toggle('open');burger.classList.toggle('open',o);burger.setAttribute('aria-expanded',o);});
|
||||
// Reveal
|
||||
const io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.12});
|
||||
document.querySelectorAll('.reveal,.stagger').forEach(el=>io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -349,6 +349,63 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
/* ── Nav dropdown ── */
|
||||
.nav-dropdown { position: relative; }
|
||||
.nav-dropdown > a { display: flex; align-items: center; gap: 4px; }
|
||||
.nav-dd-caret { transition: transform 0.15s; }
|
||||
.nav-dropdown.open .nav-dd-caret { transform: rotate(180deg); }
|
||||
.nav-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: rgba(255,255,255,0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-3);
|
||||
box-shadow: var(--sh-xl);
|
||||
padding: 10px 8px 8px; /* top padding bridges the visual gap without a dead zone */
|
||||
min-width: 248px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.nav-dropdown-menu.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
/* Mobile sub-nav (product pages list inside hamburger drawer) */
|
||||
.nav-mobile-sub { display: none; padding: 2px 0 6px 14px; flex-direction: column; }
|
||||
.nav-mobile-sub.open { display: flex; }
|
||||
.nav-mobile-sub a { font-size: 0.875rem; color: var(--fg-3); padding: 8px 4px; border-bottom: 1px solid var(--border); letter-spacing: -0.01em; transition: color 0.1s; }
|
||||
.nav-mobile-sub a:last-child { border-bottom: none; }
|
||||
.nav-mobile-sub a:hover { color: var(--fg); }
|
||||
.nav-dd-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--r-2);
|
||||
transition: background 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-dd-item:hover { background: var(--bg-muted); }
|
||||
.nav-dd-icon {
|
||||
width: 30px; height: 30px;
|
||||
background: var(--blue-soft);
|
||||
border: 1px solid var(--blue-mid);
|
||||
border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; font-size: 13px;
|
||||
}
|
||||
.nav-dd-text { display: flex; flex-direction: column; }
|
||||
.nav-dd-name { font-size: 0.8125rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
|
||||
.nav-dd-desc { font-size: 0.6875rem; color: var(--fg-3); margin-top: 1px; line-height: 1.4; }
|
||||
.nav-dd-sep { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
|
||||
/* ════════════════════════════════════════════════════════════
|
||||
HERO — Figma Sites: product-forward, massive type
|
||||
════════════════════════════════════════════════════════════ */
|
||||
@@ -1529,7 +1586,39 @@ footer {
|
||||
<div class="nav-inner">
|
||||
<a href="#" class="nav-logo">Origin<span>main</span></a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#features">Product</a></li>
|
||||
<li class="nav-dropdown">
|
||||
<a href="#features" style="display:flex;align-items:center;gap:4px;">
|
||||
Product
|
||||
<svg class="nav-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
<a class="nav-dd-item" href="/features/live-artboard.html">
|
||||
<div class="nav-dd-icon">⬜</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/origin-graph.html">
|
||||
<div class="nav-dd-icon">◉</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/intent-diff.html">
|
||||
<div class="nav-dd-icon">△</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
|
||||
</a>
|
||||
<div class="nav-dd-sep"></div>
|
||||
<a class="nav-dd-item" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon">◈</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/agent-bridge.html">
|
||||
<div class="nav-dd-icon">⇄</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
|
||||
</a>
|
||||
<a class="nav-dd-item" href="/features/integrations.html">
|
||||
<div class="nav-dd-icon">🔗</div>
|
||||
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#integrations">Integrations</a></li>
|
||||
<li><a href="#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
@@ -1546,7 +1635,20 @@ footer {
|
||||
<!-- Mobile drawer (hidden on desktop) -->
|
||||
<div class="nav-mobile" id="nav-mobile" aria-hidden="true">
|
||||
<ul>
|
||||
<li><a href="#features">Product</a></li>
|
||||
<li>
|
||||
<a href="#features" id="mob-product-toggle" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
Product
|
||||
<svg id="mob-dd-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" style="transition:transform 0.15s;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</a>
|
||||
<div class="nav-mobile-sub" id="nav-mobile-sub">
|
||||
<a href="/features/live-artboard.html">Live Artboard</a>
|
||||
<a href="/features/origin-graph.html">Origin Graph</a>
|
||||
<a href="/features/intent-diff.html">Intent Diff</a>
|
||||
<a href="/features/completion-zone.html">Completion Zone</a>
|
||||
<a href="/features/agent-bridge.html">Agent Bridge</a>
|
||||
<a href="/features/integrations.html">Integrations</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#integrations">Integrations</a></li>
|
||||
<li><a href="#pricing">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
@@ -1783,7 +1885,7 @@ footer {
|
||||
Hot reload and real-time data. The canvas reflects your app state at all times.
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">See it in action →</a>
|
||||
<a href="/features/live-artboard.html" class="btn btn-primary">See it in action →</a>
|
||||
</div>
|
||||
<div class="feat-visual feat-visual-dark reveal">
|
||||
<div class="fv-artboard-scene">
|
||||
@@ -1824,7 +1926,7 @@ footer {
|
||||
Parity is verified automatically. The canvas confirms the result.
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Explore Intent Diff →</a>
|
||||
<a href="/features/intent-diff.html" class="btn btn-primary">Explore Intent Diff →</a>
|
||||
</div>
|
||||
<div class="feat-visual feat-visual-dark reveal">
|
||||
<div class="fv-diff-scene">
|
||||
@@ -1865,7 +1967,7 @@ footer {
|
||||
Agent Bridge exposes the graph to external AI tools via MCP protocol.
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Explore the Graph →</a>
|
||||
<a href="/features/origin-graph.html" class="btn btn-primary">Explore the Graph →</a>
|
||||
</div>
|
||||
<div class="feat-visual feat-visual-dark reveal" style="position:relative;">
|
||||
<div class="fv-graph-scene">
|
||||
@@ -2339,11 +2441,13 @@ footer {
|
||||
<div class="ft-col">
|
||||
<h4>Product</h4>
|
||||
<ul>
|
||||
<li><a href="#">Live Artboard</a></li>
|
||||
<li><a href="#">Origin Graph</a></li>
|
||||
<li><a href="#">Intent Diff</a></li>
|
||||
<li><a href="#">Agent Bridge</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
<li><a href="/features/live-artboard.html">Live Artboard</a></li>
|
||||
<li><a href="/features/origin-graph.html">Origin Graph</a></li>
|
||||
<li><a href="/features/intent-diff.html">Intent Diff</a></li>
|
||||
<li><a href="/features/completion-zone.html">Completion Zone</a></li>
|
||||
<li><a href="/features/agent-bridge.html">Agent Bridge</a></li>
|
||||
<li><a href="/features/integrations.html">Integrations</a></li>
|
||||
<li><a href="#pricing">Pricing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ft-col">
|
||||
@@ -2400,6 +2504,38 @@ document.querySelectorAll('.int-card:not(.int-more)').forEach(card => {
|
||||
});
|
||||
});
|
||||
|
||||
// ── Nav dropdown: delay-based hover (desktop) + click toggle (mobile/touch) ──
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd => {
|
||||
const menu = dd.querySelector('.nav-dropdown-menu');
|
||||
let closeTimer;
|
||||
const open = () => { clearTimeout(closeTimer); dd.classList.add('open'); menu.classList.add('open'); };
|
||||
const sched = () => { closeTimer = setTimeout(() => { dd.classList.remove('open'); menu.classList.remove('open'); }, 150); };
|
||||
dd.addEventListener('mouseenter', open);
|
||||
dd.addEventListener('mouseleave', sched);
|
||||
menu.addEventListener('mouseenter', open);
|
||||
menu.addEventListener('mouseleave', sched);
|
||||
// Mobile / touch: click the trigger link to toggle instead of hover
|
||||
dd.querySelector('a').addEventListener('click', e => {
|
||||
if (window.matchMedia('(hover: none)').matches || window.innerWidth <= 1024) {
|
||||
e.preventDefault();
|
||||
const isOpen = menu.classList.toggle('open');
|
||||
dd.classList.toggle('open', isOpen);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── Mobile product sub-accordion ─────────────────────────
|
||||
const mobProductToggle = document.getElementById('mob-product-toggle');
|
||||
const navMobileSub = document.getElementById('nav-mobile-sub');
|
||||
const mobDdCaret = document.getElementById('mob-dd-caret');
|
||||
if (mobProductToggle && navMobileSub) {
|
||||
mobProductToggle.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const isOpen = navMobileSub.classList.toggle('open');
|
||||
if (mobDdCaret) mobDdCaret.style.transform = isOpen ? 'rotate(180deg)' : '';
|
||||
});
|
||||
}
|
||||
|
||||
// ── Mobile hamburger ──────────────────────────────────────
|
||||
const burger = document.getElementById('nav-burger');
|
||||
const mobileMenu = document.getElementById('nav-mobile');
|
||||
|
||||
Reference in New Issue
Block a user