Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <!-- | |
| REFERENCE | |
| Physical object this page should feel like: FAA flight progress strip from a 1970s air traffic control tower | |
| Where you'd find that object: PDX approach control, Portland, Oregon — circa 1974 | |
| What the object is made of: Heavy heat-resistant paper stock, offset-printed with red and green rule lines | |
| How it's printed / typeset / constructed: Condensed gothic headers, monospaced typed entries, punched edge holes for the strip bay, handwritten pencil updates | |
| One adjective the object evokes that is NOT "modern" or "clean": METHODICAL | |
| --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>VECTOR — Task Management for Operations</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=Oswald:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --desk: oklch(0.935 0.008 80); | |
| --paper: oklch(0.97 0.01 85); | |
| --paper-dim: oklch(0.955 0.013 85); | |
| --frame: oklch(0.26 0.015 65); | |
| --frame-mid: oklch(0.36 0.015 65); | |
| --graphite: oklch(0.20 0.02 65); | |
| --muted: oklch(0.44 0.015 65); | |
| --muted-light: oklch(0.60 0.012 65); | |
| --red: oklch(0.48 0.19 22); | |
| --red-soft: oklch(0.92 0.04 22); | |
| --amber: oklch(0.70 0.14 75); | |
| --amber-soft: oklch(0.93 0.035 75); | |
| --green: oklch(0.52 0.10 155); | |
| --green-soft: oklch(0.93 0.035 155); | |
| --blue: oklch(0.48 0.10 255); | |
| --rule: oklch(0.78 0.012 85); | |
| --border: oklch(0.84 0.01 80); | |
| --frame-text: oklch(0.82 0.01 85); | |
| --frame-muted: oklch(0.58 0.01 85); | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Fira Code', monospace; | |
| font-size: 16px; | |
| line-height: 1.65; | |
| background: var(--desk); | |
| color: var(--graphite); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Oswald', sans-serif; | |
| line-height: 1.1; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| p { max-width: 68ch; } | |
| .container { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding: 0 28px; | |
| } | |
| /* ─── NAV ─── */ | |
| .nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: var(--paper); | |
| border-bottom: 2px solid var(--graphite); | |
| } | |
| .nav-inner { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 52px; | |
| padding: 0 28px; | |
| } | |
| .nav-brand { | |
| font-family: 'Oswald', sans-serif; | |
| font-weight: 700; | |
| font-size: 18px; | |
| letter-spacing: 0.10em; | |
| text-transform: uppercase; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .nav-brand-mark { | |
| width: 10px; | |
| height: 26px; | |
| background: var(--red); | |
| flex-shrink: 0; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 24px; | |
| font-size: 12px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| } | |
| .nav-links a { color: var(--muted); transition: color 0.15s; } | |
| .nav-links a:hover { color: var(--graphite); } | |
| /* ─── HERO ─── */ | |
| .hero { padding: 72px 0 24px; } | |
| .hero-heading { | |
| font-size: clamp(64px, 13vw, 170px); | |
| font-weight: 700; | |
| letter-spacing: 0.10em; | |
| text-transform: uppercase; | |
| line-height: 0.88; | |
| margin-bottom: 12px; | |
| padding-left: 28px; | |
| border-left: 12px solid var(--red); | |
| } | |
| .hero-tagline { | |
| font-family: 'Oswald', sans-serif; | |
| font-size: clamp(20px, 2.8vw, 30px); | |
| font-weight: 300; | |
| letter-spacing: 0.02em; | |
| margin-bottom: 40px; | |
| padding-left: 28px; | |
| color: var(--muted); | |
| max-width: 30ch; | |
| line-height: 1.3; | |
| } | |
| /* ─── RACK ─── */ | |
| .rack { | |
| background: var(--frame); | |
| border: 2px solid oklch(0.18 0.015 65); | |
| border-radius: 3px; | |
| padding: 14px; | |
| margin-bottom: 44px; | |
| box-shadow: 0 10px 40px oklch(0.25 0.02 65 / 0.35); | |
| } | |
| .rack-header { | |
| font-size: 11px; | |
| letter-spacing: 0.10em; | |
| text-transform: uppercase; | |
| color: oklch(0.68 0.01 85); | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--frame-mid); | |
| margin-bottom: 2px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .rack-header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 10px; | |
| color: var(--frame-muted); | |
| } | |
| .rack-live-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--green); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| .rack-strips { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .task-strip { | |
| display: flex; | |
| background: var(--paper); | |
| transition: transform 0.15s ease, box-shadow 0.15s ease; | |
| cursor: default; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .task-strip { transition: none; } | |
| .rack-live-dot { animation: none; } | |
| } | |
| .task-strip:hover { | |
| transform: translateX(4px); | |
| box-shadow: -4px 2px 0 oklch(0.18 0.02 65 / 0.3); | |
| } | |
| .task-tab { | |
| width: 6px; | |
| min-height: 44px; | |
| flex-shrink: 0; | |
| } | |
| .task-tab--urgent { background: var(--red); } | |
| .task-tab--high { background: var(--amber); } | |
| .task-tab--routine { background: var(--green); } | |
| .task-content { | |
| display: grid; | |
| grid-template-columns: 7.5ch 1fr 14ch 8.5ch; | |
| align-items: center; | |
| flex: 1; | |
| padding: 0 14px; | |
| min-height: 44px; | |
| font-size: 13px; | |
| gap: 6px; | |
| border-left: 1px solid var(--rule); | |
| } | |
| .task-id { | |
| font-weight: 500; | |
| color: var(--muted); | |
| letter-spacing: 0.04em; | |
| font-size: 11px; | |
| } | |
| .task-name { | |
| font-weight: 400; | |
| color: var(--graphite); | |
| line-height: 1.3; | |
| } | |
| .task-handoff { | |
| color: var(--muted-light); | |
| font-size: 11px; | |
| letter-spacing: 0.01em; | |
| } | |
| .task-due { | |
| font-weight: 500; | |
| font-size: 11px; | |
| letter-spacing: 0.06em; | |
| text-align: right; | |
| } | |
| .task-due--urgent { color: var(--red); } | |
| .task-due--high { color: var(--amber); } | |
| .task-due--routine { color: var(--muted); } | |
| .rack-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 10px; | |
| margin-top: 2px; | |
| border-top: 1px solid var(--frame-mid); | |
| font-size: 10px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: oklch(0.60 0.01 85); | |
| } | |
| .rack-status { display: flex; gap: 14px; align-items: center; } | |
| .rack-dot { | |
| display: inline-block; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 1px; | |
| margin-right: 4px; | |
| vertical-align: middle; | |
| } | |
| .rack-dot--urgent { background: var(--red); } | |
| .rack-dot--high { background: var(--amber); } | |
| .rack-dot--routine { background: var(--green); } | |
| /* ─── HERO CTA ─── */ | |
| .hero-bottom { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 28px; | |
| flex-wrap: wrap; | |
| padding-left: 28px; | |
| border-left: 12px solid var(--red); | |
| margin-bottom: 16px; | |
| } | |
| .hero-desc { | |
| font-size: 14px; | |
| color: var(--muted); | |
| max-width: 50ch; | |
| line-height: 1.6; | |
| } | |
| .btn { | |
| display: inline-block; | |
| font-family: 'Oswald', sans-serif; | |
| font-weight: 600; | |
| font-size: 14px; | |
| letter-spacing: 0.10em; | |
| text-transform: uppercase; | |
| padding: 11px 24px; | |
| border: 2px solid var(--red); | |
| background: var(--red); | |
| color: oklch(0.97 0.005 85); | |
| cursor: pointer; | |
| transition: background 0.15s, color 0.15s; | |
| text-decoration: none; | |
| flex-shrink: 0; | |
| line-height: 1.4; | |
| } | |
| .btn:hover { | |
| background: transparent; | |
| color: var(--red); | |
| } | |
| /* ─── FEATURES ─── */ | |
| .features { | |
| padding: 48px 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .features-label { | |
| font-size: 11px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--muted-light); | |
| margin-bottom: 4px; | |
| padding-left: 4px; | |
| } | |
| .feature { | |
| display: flex; | |
| background: var(--paper); | |
| border: 1px solid var(--border); | |
| box-shadow: 0 1px 4px oklch(0.30 0.02 65 / 0.06); | |
| transition: box-shadow 0.2s; | |
| } | |
| .feature:hover { | |
| box-shadow: 0 4px 16px oklch(0.30 0.02 65 / 0.12); | |
| } | |
| .feature-tab { | |
| width: 8px; | |
| flex-shrink: 0; | |
| } | |
| .feature-tab--red { background: var(--red); } | |
| .feature-tab--amber { background: var(--amber); } | |
| .feature-tab--green { background: var(--green); } | |
| .feature-flight { | |
| width: 110px; | |
| flex-shrink: 0; | |
| padding: 24px 18px; | |
| border-right: 1px solid var(--rule); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| } | |
| .feature-flight-num { | |
| font-family: 'Oswald', sans-serif; | |
| font-size: 13px; | |
| font-weight: 500; | |
| letter-spacing: 0.08em; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| } | |
| .feature-flight-route { | |
| font-size: 10px; | |
| color: var(--muted-light); | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| line-height: 1.4; | |
| } | |
| .feature-body { | |
| flex: 1; | |
| padding: 26px 28px; | |
| min-width: 0; | |
| } | |
| .feature-heading { | |
| font-size: clamp(22px, 2.8vw, 34px); | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| } | |
| .feature-desc { | |
| font-size: 14px; | |
| color: var(--muted); | |
| line-height: 1.65; | |
| max-width: 54ch; | |
| } | |
| .feature-detail { | |
| width: 180px; | |
| flex-shrink: 0; | |
| padding: 24px 18px; | |
| border-left: 1px solid var(--rule); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| gap: 10px; | |
| } | |
| .detail-item { | |
| font-size: 10px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--muted-light); | |
| } | |
| .detail-item strong { | |
| color: var(--graphite); | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 500; | |
| text-transform: none; | |
| letter-spacing: 0; | |
| margin-top: 2px; | |
| } | |
| /* ─── NOTE SECTION ─── */ | |
| .note-section { | |
| padding: 40px 0 48px; | |
| } | |
| .note-strip { | |
| display: flex; | |
| background: var(--paper-dim); | |
| border: 1px solid var(--border); | |
| box-shadow: 0 1px 4px oklch(0.30 0.02 65 / 0.06); | |
| overflow: hidden; | |
| } | |
| .note-tab { | |
| width: 8px; | |
| flex-shrink: 0; | |
| background: var(--blue); | |
| } | |
| .note-body { | |
| flex: 1; | |
| padding: 32px 36px; | |
| min-width: 0; | |
| } | |
| .note-label { | |
| font-size: 11px; | |
| letter-spacing: 0.10em; | |
| text-transform: uppercase; | |
| color: var(--blue); | |
| margin-bottom: 14px; | |
| font-weight: 500; | |
| } | |
| .note-text { | |
| font-family: 'Oswald', sans-serif; | |
| font-weight: 300; | |
| font-size: clamp(17px, 2.2vw, 22px); | |
| line-height: 1.55; | |
| color: var(--graphite); | |
| max-width: 58ch; | |
| } | |
| .note-text em { | |
| font-style: normal; | |
| color: var(--muted); | |
| } | |
| .note-sign { | |
| margin-top: 18px; | |
| font-family: 'Fira Code', monospace; | |
| font-size: 12px; | |
| color: var(--muted-light); | |
| letter-spacing: 0.04em; | |
| } | |
| /* ─── CTA ─── */ | |
| .cta-section { | |
| background: var(--frame); | |
| padding: 56px 0; | |
| } | |
| .cta-inner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 28px; | |
| flex-wrap: wrap; | |
| } | |
| .cta-text { color: var(--frame-text); } | |
| .cta-stat { | |
| font-family: 'Oswald', sans-serif; | |
| font-size: clamp(26px, 4vw, 44px); | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| line-height: 1.05; | |
| margin-bottom: 4px; | |
| } | |
| .cta-sub { | |
| font-size: 13px; | |
| color: var(--frame-muted); | |
| letter-spacing: 0.03em; | |
| } | |
| .btn-cta { | |
| border-color: var(--frame-text); | |
| background: var(--frame-text); | |
| color: var(--frame); | |
| } | |
| .btn-cta:hover { | |
| background: transparent; | |
| color: var(--frame-text); | |
| } | |
| /* ─── FOOTER ─── */ | |
| .footer { | |
| background: var(--frame); | |
| padding: 20px 0; | |
| border-top: 1px solid var(--frame-mid); | |
| } | |
| .footer-inner { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 11px; | |
| color: oklch(0.50 0.01 85); | |
| letter-spacing: 0.03em; | |
| } | |
| .footer-links { display: flex; gap: 18px; } | |
| .footer-links a { color: oklch(0.50 0.01 85); transition: color 0.15s; } | |
| .footer-links a:hover { color: oklch(0.72 0.01 85); } | |
| /* ─── RESPONSIVE ─── */ | |
| @media (max-width: 768px) { | |
| .hero { padding: 48px 0 16px; } | |
| .hero-heading { | |
| padding-left: 16px; | |
| border-left-width: 8px; | |
| } | |
| .hero-tagline { | |
| padding-left: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .hero-bottom { | |
| padding-left: 16px; | |
| border-left-width: 8px; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .rack { padding: 10px; } | |
| .rack-header { font-size: 10px; } | |
| .task-content { | |
| grid-template-columns: 1fr; | |
| gap: 1px; | |
| padding: 8px 12px; | |
| } | |
| .task-id { font-size: 9px; order: 2; } | |
| .task-name { font-size: 12px; order: 1; } | |
| .task-handoff { font-size: 9px; order: 3; } | |
| .task-due { text-align: left; order: 4; } | |
| .feature { | |
| flex-direction: column; | |
| min-height: auto; | |
| } | |
| .feature-tab { width: auto; height: 6px; } | |
| .feature-flight { | |
| width: auto; | |
| border-right: none; | |
| border-bottom: 1px solid var(--rule); | |
| padding: 14px 18px; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .feature-body { padding: 18px 18px 14px; } | |
| .feature-heading { font-size: 22px; } | |
| .feature-desc { font-size: 13px; } | |
| .feature-detail { | |
| width: auto; | |
| border-left: none; | |
| border-top: 1px solid var(--rule); | |
| padding: 14px 18px; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| gap: 12px 24px; | |
| } | |
| .detail-item { min-width: 100px; } | |
| .note-tab { width: auto; height: 6px; } | |
| .note-strip { flex-direction: column; } | |
| .note-body { padding: 20px 18px; } | |
| .note-text { font-size: 16px; } | |
| .cta-section { padding: 40px 0; } | |
| .cta-inner { flex-direction: column; align-items: flex-start; } | |
| .footer-inner { | |
| flex-direction: column; | |
| gap: 10px; | |
| text-align: center; | |
| } | |
| .nav-links { gap: 16px; font-size: 11px; } | |
| } | |
| @media (max-width: 420px) { | |
| .container { padding: 0 16px; } | |
| .nav-inner { padding: 0 16px; } | |
| .hero-heading { font-size: 56px; letter-spacing: 0.06em; } | |
| .hero-tagline { font-size: 18px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav class="nav"> | |
| <div class="nav-inner"> | |
| <a href="#" class="nav-brand"> | |
| <div class="nav-brand-mark"></div> | |
| Vector | |
| </a> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#origin">Origin</a> | |
| <a href="#waitlist">Waitlist</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1 class="hero-heading">Vector</h1> | |
| <p class="hero-tagline">Task management for people who run operations, not bucket lists.</p> | |
| <!-- RACK VISUAL --> | |
| <div class="rack" role="img" aria-label="Vector app interface showing four task strips in a strip board"> | |
| <div class="rack-header"> | |
| <span>Reyes — Operations Lead — Dec 2024</span> | |
| <span class="rack-header-right"><span class="rack-live-dot"></span> Live</span> | |
| </div> | |
| <div class="rack-strips"> | |
| <div class="task-strip"> | |
| <div class="task-tab task-tab--urgent"></div> | |
| <div class="task-content"> | |
| <span class="task-id">VEC-0041</span> | |
| <span class="task-name">Requisition approval — Phase 2 materials</span> | |
| <span class="task-handoff">Reyes → Moroz</span> | |
| <span class="task-due task-due--urgent">DUE 12/03</span> | |
| </div> | |
| </div> | |
| <div class="task-strip"> | |
| <div class="task-tab task-tab--high"></div> | |
| <div class="task-content"> | |
| <span class="task-id">VEC-0042</span> | |
| <span class="task-name">Site walkthrough — Warehouse 7, NW Front Ave</span> | |
| <span class="task-handoff">Moroz → Chen</span> | |
| <span class="task-due task-due--high">DUE 12/05</span> | |
| </div> | |
| </div> | |
| <div class="task-strip"> | |
| <div class="task-tab task-tab--routine"></div> | |
| <div class="task-content"> | |
| <span class="task-id">VEC-0043</span> | |
| <span class="task-name">Permit filing — City of Portland, Bureau of Development</span> | |
| <span class="task-handoff">Chen → Torres</span> | |
| <span class="task-due task-due--routine">DUE 12/08</span> | |
| </div> | |
| </div> | |
| <div class="task-strip"> | |
| <div class="task-tab task-tab--routine"></div> | |
| <div class="task-content"> | |
| <span class="task-id">VEC-0044</span> | |
| <span class="task-name">Final handoff — Ops room setup, Building C</span> | |
| <span class="task-handoff">Torres → Reyes</span> | |
| <span class="task-due task-due--routine">DUE 12/12</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rack-footer"> | |
| <div class="rack-status"> | |
| <span><span class="rack-dot rack-dot--urgent"></span>1 urgent</span> | |
| <span><span class="rack-dot rack-dot--high"></span>1 high</span> | |
| <span><span class="rack-dot rack-dot--routine"></span>2 routine</span> | |
| </div> | |
| <span>Updated 09:41 PST</span> | |
| </div> | |
| </div> | |
| <div class="hero-bottom"> | |
| <p class="hero-desc">Built for operations leads, project coordinators, and anyone who keeps other people's work moving. Designed by two controllers who got tired of watching teams collide on shared projects.</p> | |
| <a href="#waitlist" class="btn">Request Clearance</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FEATURES --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <p class="features-label">Strip manual — three things to know</p> | |
| <div class="feature"> | |
| <div class="feature-tab feature-tab--red"></div> | |
| <div class="feature-flight"> | |
| <span class="feature-flight-num">VEC-021</span> | |
| <span class="feature-flight-route">Route:<br>Assign → Sequence → Track</span> | |
| </div> | |
| <div class="feature-body"> | |
| <h2 class="feature-heading">Flight plan</h2> | |
| <p class="feature-desc">Every task has a route. Assign it, sequence it, and track it from departure to arrival. No more orphaned action items floating between Slack and email. Each strip shows who owns it, where it's headed, and when it's due to land.</p> | |
| </div> | |
| <div class="feature-detail"> | |
| <div class="detail-item">Assignees<strong>Unlimited</strong></div> | |
| <div class="detail-item">Dependencies<strong>Per-strip routing</strong></div> | |
| <div class="detail-item">Sequencing<strong>Drag to reorder</strong></div> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-tab feature-tab--amber"></div> | |
| <div class="feature-flight"> | |
| <span class="feature-flight-num">VEC-047</span> | |
| <span class="feature-flight-route">Route:<br>Hand off → Confirm → Clear</span> | |
| </div> | |
| <div class="feature-body"> | |
| <h2 class="feature-heading">Handoff</h2> | |
| <p class="feature-desc">When you pass a task off, the next controller sees everything. Context, history, attachments, and blockers — all attached to the strip. No "what did they mean by this?" messages. The strip carries the full narrative.</p> | |
| </div> | |
| <div class="feature-detail"> | |
| <div class="detail-item">Context<strong>Auto-attached</strong></div> | |
| <div class="detail-item">History<strong>Full audit trail</strong></div> | |
| <div class="detail-item">Confirm<strong>Accept or bounce</strong></div> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-tab feature-tab--green"></div> | |
| <div class="feature-flight"> | |
| <span class="feature-flight-num">VEC-063</span> | |
| <span class="feature-flight-route">Route:<br>Flag → Scan → Act</span> | |
| </div> | |
| <div class="feature-body"> | |
| <h2 class="feature-heading">Clearance</h2> | |
| <p class="feature-desc">Four priority levels, color-coded and always visible. You always know what needs attention right now and what can wait until the next shift. No guessing, no sorting through a flat list to find the thing that's on fire.</p> | |
| </div> | |
| <div class="feature-detail"> | |
| <div class="detail-item">Priority<strong>4 levels, color-tabbed</strong></div> | |
| <div class="feature-detail-item">Scan<strong>Filter by status</strong></div> | |
| <div class="detail-item">Alerts<strong>Escalation rules</strong></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ORIGIN NOTE --> | |
| <section class="note-section" id="origin"> | |
| <div class="container"> | |
| <div class="note-strip"> | |
| <div class="note-tab"></div> | |
| <div class="note-body"> | |
| <p class="note-label">A note from the founders</p> | |
| <p class="note-text">We spent six years clearing aircraft at Portland Approach. Every shift, 38 controllers coordinated 500+ flights without a single missed handoff. Then we'd come home and try to run a product release across three teams using a shared spreadsheet and a Slack channel. <em>It was chaos.</em> So we built what we knew: a system where every task has a strip, every handoff is visible, and nothing falls through the cracks.</p> | |
| <p class="note-sign">— Kaitlyn Reyes & Dan Moroz, Portland, OR</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="cta-section" id="waitlist"> | |
| <div class="container"> | |
| <div class="cta-inner"> | |
| <div class="cta-text"> | |
| <p class="cta-stat">840 ops leads on the waitlist</p> | |
| <p class="cta-sub">Next cohort boards March 2025. No credit card, no demo call, no pitch deck.</p> | |
| </div> | |
| <a href="#" class="btn btn-cta">Request Clearance</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-inner"> | |
| <span>© 2025 Vector Systems Inc. · Portland, OR</span> | |
| <div class="footer-links"> | |
| <a href="#">Privacy</a> | |
| <a href="#">Terms</a> | |
| <a href="#">hello@vector.app</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |