/* Prototype-specific overrides */ .summary-tag { display: inline-block; padding: 0.5rem 1rem; background: var(--bg-light); border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--text-medium); margin-bottom: 1rem; } .page-title { font-size: 2.5rem; font-weight: 800; color: var(--midnight-graphite); margin-bottom: 1rem; line-height: 1.2; } .notice { color: var(--text-medium); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; } .badge { display: inline-block; padding: 0.5rem 1rem; background: linear-gradient(135deg, var(--deep-purple), var(--quantum-violet)); color: white; border-radius: 8px; font-size: 0.9rem; font-weight: 600; font-family: 'Monaco', 'Consolas', monospace; } .section-subtitle { color: var(--text-medium); font-size: 1.1rem; margin-bottom: 2rem; } .tag-list { display: flex; gap: 0.5rem; flex-wrap: wrap; list-style: none; margin: 1rem 0; } .tag { padding: 0.25rem 0.75rem; background: var(--bg-light); border-radius: 12px; font-size: 0.8rem; font-weight: 600; color: var(--text-dark); } .layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; } .section-header { margin-bottom: 2rem; } .section-header h2 { font-size: 2rem; color: var(--midnight-graphite); margin-bottom: 0.5rem; } .logo { font-size: 1.5rem; font-weight: 800; color: white; } .logo span { background: linear-gradient(135deg, var(--quantum-teal), var(--photon-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-right: 0.5rem; } header { background: var(--midnight-graphite); padding: 1rem 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; } nav ul { display: flex; gap: 2rem; list-style: none; } nav a { color: white; text-decoration: none; font-weight: 500; transition: color var(--transition-base); } nav a:hover { color: var(--quantum-teal); } .page-wrapper { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; } @media (max-width: 768px) { .header-inner { flex-direction: column; gap: 1rem; } nav ul { flex-direction: column; gap: 0.5rem; text-align: center; } .page-title { font-size: 2rem; } .layout-grid { grid-template-columns: 1fr; } }

Updated

Static review space for partner-facing UI flows

Use these static captures to review layouts without running the React application. Each mockup mirrors a live TSX component and links back to the source location for transparency.

frontend/qix_prototypes_static_site

Curated prototype collections

High-signal review sets grouped by launch theme.

Cell Journey Launch

High-touch customer journeys focused on lab automation onboarding, discovery workflows, and marketing capture forms. Optimized for the launch partner review cadence.

  • Customer
  • Forms
  • Automation
Explore Cell Journey mockups

Enterprise Design System

Core QFI³ enterprise modules and reusable widgets. Includes authentication, metadata management, and marketing capture patterns lifted from the shared design system.

  • Design System
  • Forms
  • Admin
Open design system mockups

QSPECTIVE™ Public Launch Site

Clean commercial marketing site for public launch. Features professional metrics, industry solutions, and competitive advantages without patent-sensitive information. Ready for public deployment.

  • Commercial
  • Marketing
  • Public
View public launch site

QSPECTIVE™ Investor Hub

Comprehensive investor briefing site showcasing revolutionary quantum-classical platform with full technical depth, 27+ patent portfolio, and enterprise deployment capabilities.

  • Investor
  • Technical
  • Confidential
Access investor hub

Browse by directory

Direct access to organized component folders.

qix_component_demos/ celljourney_launch/ enterprise_design/ qspective_static_site/ React Source Code