From 7cc3bd42a0874265bdee0321fb77c7e8e5b845ef Mon Sep 17 00:00:00 2001 From: Jarvis Jr Hermes Date: Wed, 12 Aug 2026 12:45:15 +0000 Subject: [PATCH] feat: add IOTA-inspired steering portal --- docs/index.md | 2 +- src/css/custom.css | 91 ++++++++++---- src/pages/index.module.css | 243 +++++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 131 ++++++++++++++++++++ 4 files changed, 443 insertions(+), 24 deletions(-) create mode 100644 src/pages/index.module.css create mode 100644 src/pages/index.tsx diff --git a/docs/index.md b/docs/index.md index 4cc34d7..2179f4d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,6 @@ --- id: index -slug: / +slug: /overview/ title: Corp v1 Steering Committee sidebar_position: 1 --- diff --git a/src/css/custom.css b/src/css/custom.css index c589109..95731f3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,33 +1,78 @@ -@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css'); -@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap'); :root { - --ifm-font-family-base: 'Geist', system-ui, sans-serif; - --ifm-font-family-monospace: 'Geist Mono', monospace; - --ifm-color-primary: #2563eb; - --ifm-color-primary-dark: #1d4ed8; - --ifm-color-primary-darker: #1e40af; - --ifm-color-primary-darkest: #1e3a8a; - --ifm-color-primary-light: #3b82f6; - --ifm-color-primary-lighter: #60a5fa; - --ifm-color-primary-lightest: #93c5fd; + --ifm-font-family-base: 'Inter', system-ui, sans-serif; + --ifm-font-family-monospace: 'JetBrains Mono', monospace; + --ifm-color-primary: #0f766e; + --ifm-color-primary-dark: #115e59; + --ifm-color-primary-darker: #134e4a; + --ifm-color-primary-darkest: #042f2e; + --ifm-color-primary-light: #14b8a6; + --ifm-color-primary-lighter: #2dd4bf; + --ifm-color-primary-lightest: #5eead4; --ifm-global-radius: 0; --ifm-code-border-radius: 0; - --ifm-button-border-radius: 0; + --ifm-pre-border-radius: 0; --ifm-alert-border-radius: 0; + --ifm-button-border-radius: 0; + --ifm-badge-border-radius: 0; + --ifm-card-border-radius: 0; + --ifm-pagination-nav-border-radius: 0; } [data-theme='dark'] { - --ifm-background-color: #09090b; - --ifm-background-surface-color: #111113; - --ifm-color-primary: #60a5fa; - --ifm-color-content: #ededed; - --ifm-color-content-secondary: #a1a1aa; + --ifm-background-color: #08101b; + --ifm-background-surface-color: #101722; + --ifm-color-primary: #5eead4; + --ifm-color-primary-dark: #2dd4bf; + --ifm-color-primary-darker: #14b8a6; + --ifm-color-primary-darkest: #0f766e; + --ifm-color-primary-light: #99f6e4; + --ifm-color-primary-lighter: #ccfbf1; + --ifm-color-primary-lightest: #f0fdfa; + --ifm-color-content: #f5f7fa; + --ifm-color-content-secondary: #a5b0c2; + --ifm-toc-border-color: #283345; } -.navbar {background: #09090b !important; border-bottom: 1px solid #27272a; box-shadow: none;} -.navbar__title {letter-spacing: .08em; font-weight: 700;} -.footer {border-top: 1px solid #27272a;} -.button, code, pre, .card, .alert, .pagination-nav__link, .menu, input, select, textarea {border-radius: 0 !important;} -table {display: table; width: 100%;} -th {text-transform: uppercase; letter-spacing: .06em; font-size: .75rem;} +html, body { background: #08101b; } + +/* Corp v1 has an explicit no-rounding rule. This intentionally overrides + Infima and third-party component radii across all rendered shapes. */ +*, *::before, *::after { border-radius: 0 !important; } + +.navbar { + height: 68px; + background: rgba(8, 16, 27, .97) !important; + border-bottom: 1px solid #283345 !important; + box-shadow: none !important; +} +.navbar__brand { margin-right: 2.5rem; } +.navbar__title { color: #f5f7fa !important; font-size: .87rem; letter-spacing: .09em; font-weight: 700; } +.navbar__link { color: #a5b0c2 !important; font-size: .86rem; font-weight: 500; } +.navbar__link:hover, .navbar__link--active { color: #5eead4 !important; } +.navbar-sidebar { background: #08101b !important; } + +.footer { background: #050b12 !important; border-top: 1px solid #283345; } +.footer__title { color: #f5f7fa; letter-spacing: .04em; } +.footer__link-item { color: #a5b0c2; } +.footer__link-item:hover { color: #5eead4; } + +.theme-doc-markdown h1, +.theme-doc-markdown h2, +.theme-doc-markdown h3 { letter-spacing: -.025em; } +.theme-doc-sidebar-container { border-right-color: #283345 !important; } +.menu__link { font-size: .9rem; } +.menu__link--active { background: rgba(94, 234, 212, .08) !important; } +.table-of-contents__link--active { color: #5eead4; } + +.button, code, pre, .card, .alert, .pagination-nav__link, .menu, +input, select, textarea, details, summary, table, .dropdown__menu, +.navbar__search-input, .theme-code-block { border-radius: 0 !important; } + +table { display: table; width: 100%; } +th { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; } + +@media (max-width: 996px) { + .navbar { height: 60px; } +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css new file mode 100644 index 0000000..de91e41 --- /dev/null +++ b/src/pages/index.module.css @@ -0,0 +1,243 @@ +.page { + --portal-ink: #f5f7fa; + --portal-muted: #a5b0c2; + --portal-line: #283345; + --portal-panel: #101722; + --portal-panel-strong: #151e2c; + --portal-accent: #5eead4; + background: #08101b; + color: var(--portal-ink); +} + +.hero { + min-height: 700px; + position: relative; + overflow: hidden; + display: grid; + align-items: center; + border-bottom: 1px solid var(--portal-line); + background: + radial-gradient(circle at 78% 22%, rgba(19, 185, 170, .13), transparent 28%), + linear-gradient(125deg, #08101b 0%, #0b1522 62%, #0c1a26 100%); +} + +.gridTexture { + position: absolute; + inset: 0; + opacity: .25; + background-image: + linear-gradient(var(--portal-line) 1px, transparent 1px), + linear-gradient(90deg, var(--portal-line) 1px, transparent 1px); + background-size: 72px 72px; + mask-image: linear-gradient(to right, transparent, #000 38%, #000); +} + +.heroInner { + width: min(1240px, calc(100% - 64px)); + margin: 0 auto; + position: relative; + z-index: 1; + padding: 112px 0 140px; +} + +.kicker, +.eyebrow { + display: block; + color: var(--portal-accent); + font-family: var(--ifm-font-family-monospace); + font-size: .74rem; + font-weight: 700; + letter-spacing: .16em; + margin-bottom: 24px; +} + +.hero h1 { + max-width: 900px; + font-size: clamp(3.3rem, 7vw, 6.8rem); + line-height: .98; + letter-spacing: -.055em; + margin: 0; + text-wrap: balance; +} + +.heroInner > p { + max-width: 720px; + margin: 36px 0 0; + color: var(--portal-muted); + font-size: clamp(1.05rem, 1.55vw, 1.3rem); + line-height: 1.65; +} + +.heroActions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 44px; +} + +.primaryAction, +.secondaryAction { + min-height: 52px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 28px; + padding: 0 22px; + font-size: .9rem; + font-weight: 700; + border: 1px solid transparent; + text-decoration: none !important; +} + +.primaryAction { + color: #06110f !important; + background: var(--portal-accent); + border-color: var(--portal-accent); +} + +.primaryAction:hover { background: #99f6e4; border-color: #99f6e4; } + +.secondaryAction { + color: var(--portal-ink) !important; + background: transparent; + border-color: #4a5669; +} + +.secondaryAction:hover { border-color: var(--portal-accent); color: var(--portal-accent) !important; } + +.arrow { font-size: 1.05em; line-height: 1; } + +.heroRail { + position: absolute; + right: 0; + bottom: 0; + z-index: 1; + display: grid; + grid-template-columns: repeat(4, auto); + border-top: 1px solid var(--portal-line); + border-left: 1px solid var(--portal-line); + background: rgba(8, 16, 27, .88); +} + +.heroRail span { + padding: 17px 25px; + border-right: 1px solid var(--portal-line); + font-family: var(--ifm-font-family-monospace); + color: #748196; + font-size: .67rem; + letter-spacing: .12em; +} + +.portals, +.principles { + width: min(1240px, calc(100% - 64px)); + margin: 0 auto; + padding: 112px 0; +} + +.sectionHeading { max-width: 680px; margin-bottom: 52px; } +.sectionHeading h2, +.principlesIntro h2, +.cta h2 { + font-size: clamp(2.25rem, 4vw, 4rem); + letter-spacing: -.04em; + margin: 0; +} +.sectionHeading p { color: var(--portal-muted); font-size: 1.08rem; margin: 18px 0 0; } + +.portalGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-top: 1px solid var(--portal-line); + border-left: 1px solid var(--portal-line); +} + +.portalCard { + min-width: 0; + display: flex; + flex-direction: column; + background: var(--portal-panel); + border-right: 1px solid var(--portal-line); + border-bottom: 1px solid var(--portal-line); +} + +.cardHeader { flex: 1; min-height: 310px; padding: 36px; } +.cardHeader h2 { font-size: 2.1rem; letter-spacing: -.035em; margin: 0 0 18px; } +.cardHeader p { color: var(--portal-muted); line-height: 1.65; margin: 0; } +.eyebrow { margin-bottom: 46px; color: #718096; } +.cardLinks { border-top: 1px solid var(--portal-line); } + +.cardLink { + min-height: 90px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + padding: 19px 24px; + color: var(--portal-ink) !important; + border-bottom: 1px solid var(--portal-line); + text-decoration: none !important; + transition: background .18s ease, color .18s ease; +} +.cardLink:last-child { border-bottom: 0; } +.cardLink:hover { background: var(--portal-panel-strong); color: var(--portal-accent) !important; } +.cardLink strong, .cardLink small { display: block; } +.cardLink strong { font-size: .95rem; } +.cardLink small { color: var(--portal-muted); font-size: .75rem; margin-top: 5px; } + +.principles { border-top: 1px solid var(--portal-line); } +.principlesIntro { max-width: 700px; margin-bottom: 64px; } +.principleGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-top: 1px solid var(--portal-line); + border-left: 1px solid var(--portal-line); +} +.principleGrid > div { + min-height: 280px; + padding: 34px; + border-right: 1px solid var(--portal-line); + border-bottom: 1px solid var(--portal-line); +} +.principleGrid strong { color: var(--portal-accent); font-family: var(--ifm-font-family-monospace); font-size: .78rem; } +.principleGrid h3 { margin: 72px 0 14px; font-size: 1.35rem; } +.principleGrid p { color: var(--portal-muted); line-height: 1.6; margin: 0; } + +.cta { + width: min(1240px, calc(100% - 64px)); + margin: 0 auto; + padding: 64px; + display: flex; + align-items: end; + justify-content: space-between; + gap: 40px; + border: 1px solid var(--portal-line); + border-bottom: 0; + background: #0d1724; +} +.cta .kicker { margin-bottom: 16px; } + +@media (max-width: 996px) { + .hero { min-height: 640px; } + .heroRail { left: 0; right: auto; grid-template-columns: repeat(4, 1fr); width: 100%; } + .heroRail span { padding: 14px 8px; text-align: center; } + .portalGrid, .principleGrid { grid-template-columns: 1fr; } + .cardHeader { min-height: auto; } + .cta { align-items: flex-start; flex-direction: column; } +} + +@media (max-width: 600px) { + .heroInner, .portals, .principles, .cta { width: calc(100% - 32px); } + .heroInner { padding: 88px 0 120px; } + .hero h1 { font-size: clamp(2.75rem, 14vw, 4.4rem); } + .heroActions { flex-direction: column; } + .primaryAction, .secondaryAction { width: 100%; } + .heroRail span { font-size: .54rem; letter-spacing: .05em; } + .portals, .principles { padding: 80px 0; } + .cardHeader { padding: 28px; } + .cta { padding: 36px 28px; } +} + +@media (prefers-reduced-motion: reduce) { + .cardLink { transition: none; } +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..299dc19 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import Layout from '@theme/Layout'; +import Heading from '@theme/Heading'; +import styles from './index.module.css'; + +type PortalLink = {label: string; to: string; description: string}; + +type PortalGroup = { + eyebrow: string; + title: string; + description: string; + links: PortalLink[]; +}; + +const groups: PortalGroup[] = [ + { + eyebrow: 'PORTFOLIO', + title: 'Projects', + description: 'See every Corp v1 initiative, its accountable owners, lifecycle state, and expected outcomes.', + links: [ + {label: 'Projects registry', to: '/projects/', description: 'Browse the complete project portfolio'}, + {label: 'Project lifecycle', to: '/governance/project-lifecycle/', description: 'Understand kickoff, steering, and shutdown'}, + ], + }, + { + eyebrow: 'ORGANIZATION', + title: 'Teams', + description: 'Navigate mandates, responsibilities, leadership, membership, and project allocation.', + links: [ + {label: 'Teams registry', to: '/teams/', description: 'Find teams and their responsibilities'}, + {label: 'Members registry', to: '/members/', description: 'Review governance roles and assignments'}, + ], + }, + { + eyebrow: 'CONTROL', + title: 'Governance', + description: 'Follow the decisions that authorize projects and preserve accountability as direction changes.', + links: [ + {label: 'Decision log', to: '/governance/decisions/', description: 'Read authoritative steering decisions'}, + {label: 'Steering overview', to: '/overview/', description: 'Learn how this committee operates'}, + ], + }, +]; + +function Arrow(): React.JSX.Element { + return ; +} + +function PortalCard({group}: {group: PortalGroup}): React.JSX.Element { + return ( +
+
+ {group.eyebrow} + {group.title} +

{group.description}

+
+
+ {group.links.map((item) => ( + + + {item.label} + {item.description} + + + + ))} +
+
+ ); +} + +export default function Home(): React.JSX.Element { + return ( + +
+
+
+ +
+
+ DISCOVER + Navigate Corp v1 +

Start with the registry that matches the decision you need to make.

+
+
+ {groups.map((group) => )} +
+
+ +
+
+ OPERATING MODEL + Governance without ambiguity +
+
+
01Named accountability

Every active project has a sponsor, accountable lead, and assigned team.

+
02Explicit lifecycle

Projects move through documented proposal, approval, active, paused, shutdown, and closure states.

+
03Durable decisions

Kickoffs, material changes, and shutdowns are preserved as dated steering decisions.

+
+
+ +
+
+ AUTHORITATIVE SOURCE + Review the current portfolio. +
+ Open projects registry +
+
+ + ); +}