Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concepta AI Hub</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0a1220;
  min-height: 100vh;
  color: white;
  display: flex; flex-direction: column;
}

header {
  padding: 20px 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.brand { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: white; }
.brand span { color: #5b9bd5; }
.header-sub { font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 0.5px; }

.hero {
  padding: 72px 48px 56px;
  max-width: 700px;
}
.hero-label {
  font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: #6C5CE7; margin-bottom: 16px;
}
.hero-title {
  font-size: 44px; font-weight: 800; line-height: 1.08;
  margin-bottom: 16px; color: white;
}
.hero-body {
  font-size: 16px; color: rgba(255,255,255,0.45); line-height: 1.7; max-width: 560px;
}

.sections {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.section-card {
  background: #0a1220;
  padding: 48px 44px 44px;
  text-decoration: none;
  color: white;
  display: flex; flex-direction: column;
  transition: background 0.2s;
  position: relative;
  overflow: hidden;
}
.section-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.section-card:hover { background: #0f1e30; }
.section-card:hover::before { opacity: 1; }

.section-card.intake::before { background: #1D6A39; }
.section-card.foundation::before { background: #6C5CE7; }
.section-card.orbit::before { background: #0891b2; }

.section-num {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 28px; opacity: 0.3;
}
.section-icon { font-size: 40px; margin-bottom: 24px; display: block; }
.section-label {
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 10px;
}
.section-card.intake .section-label { color: #4ade80; }
.section-card.foundation .section-label { color: #a78bfa; }
.section-card.orbit .section-label { color: #38bdf8; }

.section-title {
  font-size: 22px; font-weight: 800; line-height: 1.2;
  margin-bottom: 14px; color: white;
}
.section-desc {
  font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7;
  flex: 1;
}
.section-pages {
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.section-page-item {
  font-size: 11px; color: rgba(255,255,255,0.3);
  display: flex; align-items: center; gap: 6px;
}
.section-page-item::before { content: '—'; opacity: 0.4; }

.section-cta {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}
.section-card.intake .section-cta { color: #4ade80; }
.section-card.foundation .section-cta { color: #a78bfa; }
.section-card.orbit .section-cta { color: #38bdf8; }
.cta-arrow { font-size: 20px; transition: transform 0.15s; }
.section-card:hover .cta-arrow { transform: translateX(4px); }

footer {
  padding: 20px 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; color: rgba(255,255,255,0.2);
  display: flex; justify-content: space-between; align-items: center;
}
</style>
</head>
<body>

<header>
  <div class="brand">Concepta <span>Technology</span></div>
  <div class="header-sub">AI Hub &nbsp;·&nbsp; concepta-intake-process.pages.dev</div>
</header>

<div class="hero">
  <div class="hero-label">Internal Resources</div>
  <div class="hero-title">Concepta<br>AI Hub</div>
  <div class="hero-body">Three practice areas. One place. Select a section below to access its documentation, diagrams, and reference materials.</div>
</div>

<div class="sections">

  <!-- INTAKE PROCESS -->
  <a class="section-card intake" href="Phase1_Start_Here.html">
    <div class="section-num">01</div>
    <span class="section-icon">📥</span>
    <div class="section-label">Client Operations</div>
    <div class="section-title">Intake Process</div>
    <div class="section-desc">Standardized client request intake flows, reference documentation, and account setup guides. How requests enter the system and move through delivery.</div>
    <div class="section-pages">
      <div class="section-page-item">Request flow diagrams</div>
      <div class="section-page-item">Reference docs &amp; templates</div>
      <div class="section-page-item">AI Agent MVP overview</div>
      <div class="section-page-item">Budget model &amp; T-shirt sizing</div>
    </div>
    <div class="section-cta">
      Open Intake Process <span class="cta-arrow">→</span>
    </div>
  </a>

  <!-- FOUNDATION PLAY -->
  <a class="section-card foundation" href="Foundation_Landing.html">
    <div class="section-num">02</div>
    <span class="section-icon">🏗</span>
    <div class="section-label">AI Strategy</div>
    <div class="section-title">Foundation Play</div>
    <div class="section-desc">Foundational domain and capability framework. AI-enhanced SDLC. The strategic operating model for how Concepta builds and manages software at scale.</div>
    <div class="section-pages">
      <div class="section-page-item">Capability framework pitch</div>
      <div class="section-page-item">SDLC walkthrough (10 min)</div>
      <div class="section-page-item">Current state vs. AI-native diagrams</div>
      <div class="section-page-item">Role shifts &amp; bottleneck analysis</div>
    </div>
    <div class="section-cta">
      Open Foundation Play <span class="cta-arrow">→</span>
    </div>
  </a>

  <!-- ORBIT / CODE ANALYSIS -->
  <a class="section-card orbit" href="Orbit_Landing.html">
    <div class="section-num">03</div>
    <span class="section-icon">🔭</span>
    <div class="section-label">Code Intelligence</div>
    <div class="section-title">Orbit</div>
    <div class="section-desc">AI-powered code health monitoring, error intelligence, and observability for client platforms. Proactive issue detection before clients feel the impact.</div>
    <div class="section-pages">
      <div class="section-page-item">Live analytics dashboard</div>
      <div class="section-page-item">Client account reports</div>
      <div class="section-page-item">Error pattern analysis</div>
      <div class="section-page-item">Code health scoring</div>
    </div>
    <div class="section-cta">
      Open Orbit <span class="cta-arrow">→</span>
    </div>
  </a>

</div>

<footer>
  <span>Concepta Technology &nbsp;·&nbsp; Internal Use Only</span>
  <span>concepta-intake-process.pages.dev</span>
</footer>

</body>
</html>