<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map - Visual Thinking & Diagram Creation | Think-MCP</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=JetBrains+Mono:wght@400;500&family=Manrope:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
/* ============================================
MAP LANDING PAGE - NO EMOJIS, ICONS ONLY
Using @animate-ui style SVG icons
============================================ */
:root {
/* Map Tool Accent - Purple (Premium) */
--map-accent: #401877;
--map-accent-light: #5a2a9e;
--map-accent-glow: rgba(64, 24, 119, 0.4);
/* Maslow Brand Tokens */
--teal: #6DC4AD;
--pink: #EE7BB3;
--orange: #F3A326;
--blue: #469DBB;
/* Backgrounds */
--silver-bg: #E6EAF3;
--surface: #FFFFFF;
--dark-blue: #121D35;
--dark-surface: #1A2847;
--dark-surface-alt: #243356;
/* Text */
--text-primary: #333333;
--text-secondary: #A5A5A5;
--text-light: #FFFFFF;
--text-light-secondary: #B8C4D9;
/* Borders */
--border: #D0D5E0;
--border-dark: #3A4A6B;
/* Typography */
--font-primary: 'Manrope', system-ui, sans-serif;
--font-code: 'JetBrains Mono', monospace;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-primary);
background: var(--silver-bg);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* Utility classes */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Icon styles - SVG based, NO EMOJIS */
.icon {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.icon-lg {
width: 32px;
height: 32px;
}
.icon-xl {
width: 48px;
height: 48px;
}
/* Button styles */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
font-family: var(--font-primary);
font-weight: 600;
font-size: 16px;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
border: none;
}
.btn-primary {
background: var(--text-primary);
color: var(--text-light);
}
.btn-primary:hover {
background: #1a1a1a;
transform: translateY(-2px);
}
.btn-accent {
background: var(--teal);
color: var(--text-light);
}
.btn-accent:hover {
background: #5ab89a;
transform: translateY(-2px);
}
.btn-ghost {
background: transparent;
color: var(--map-accent);
border: 2px solid var(--map-accent);
}
.btn-ghost:hover {
background: var(--map-accent);
color: var(--text-light);
}
.btn-ghost-light {
background: transparent;
color: var(--text-light);
border: 2px solid var(--text-light);
}
.btn-ghost-light:hover {
background: var(--text-light);
color: var(--dark-blue);
}
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
/* ============================================
HERO SECTION - Animated Beam Diagram
============================================ */
.hero {
background: var(--silver-bg);
padding: var(--space-24) 0;
position: relative;
overflow: hidden;
}
/* Interactive grid pattern background */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(64, 24, 119, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(64, 24, 119, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
position: relative;
z-index: 1;
}
.hero-content {
animation: fadeSlideIn 0.6s ease-out;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--map-accent);
margin-bottom: var(--space-4);
}
.hero-accent-line {
width: 60px;
height: 3px;
background: var(--map-accent);
margin-bottom: var(--space-4);
animation: growLine 0.8s ease-out 0.3s both;
}
@keyframes growLine {
from { width: 0; }
to { width: 60px; }
}
.hero-title {
font-size: 56px;
line-height: 1.1;
margin-bottom: var(--space-6);
}
.hero-title-bold {
font-weight: 800;
color: var(--text-primary);
}
.hero-title-light {
font-weight: 300;
color: var(--text-secondary);
}
.hero-subtitle {
font-size: 20px;
color: var(--text-secondary);
margin-bottom: var(--space-8);
max-width: 480px;
}
.hero-ctas {
display: flex;
gap: var(--space-4);
}
/* Hero visual - Animated Beam Diagram */
.hero-visual {
position: relative;
height: 400px;
animation: fadeSlideIn 0.6s ease-out 0.2s both;
}
.diagram-container {
position: relative;
width: 100%;
height: 100%;
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* Animated beam SVG */
.beam-diagram {
width: 100%;
height: 100%;
}
.diagram-node {
fill: var(--surface);
stroke: var(--map-accent);
stroke-width: 2;
}
.diagram-node-center {
fill: var(--map-accent);
}
.diagram-node-label {
font-family: var(--font-primary);
font-size: 11px;
font-weight: 600;
fill: var(--text-primary);
text-anchor: middle;
}
.diagram-node-label-light {
fill: var(--text-light);
}
/* Animated beams */
.beam-path {
fill: none;
stroke: url(#beamGradient);
stroke-width: 2;
stroke-dasharray: 8 4;
animation: beamFlow 2s linear infinite;
}
@keyframes beamFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -24; }
}
.beam-glow {
fill: none;
stroke: var(--map-accent);
stroke-width: 6;
opacity: 0.2;
filter: blur(4px);
}
/* ============================================
STAKES SECTION - The Problem
============================================ */
.stakes {
background: var(--surface);
padding: var(--space-24) 0;
}
.section-header {
text-align: center;
margin-bottom: var(--space-12);
}
.section-title {
font-size: 36px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.section-subtitle {
font-size: 18px;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.stakes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.stake-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-8);
transition: all 0.3s ease;
}
.stake-card:hover {
transform: translateY(-4px);
border-left: 3px solid var(--map-accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.stake-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(64, 24, 119, 0.08);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
color: var(--map-accent);
}
.stake-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.stake-description {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ============================================
FEATURES SECTION - Diagram Types (Bento)
============================================ */
.features {
background: var(--silver-bg);
padding: var(--space-24) 0;
}
.features-intro {
max-width: 700px;
margin-bottom: var(--space-12);
}
.features-empathy {
font-size: 18px;
color: var(--text-secondary);
font-style: italic;
margin-bottom: var(--space-8);
padding-left: var(--space-6);
border-left: 3px solid var(--map-accent);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: var(--space-6);
}
.bento-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-8);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.bento-card:hover {
transform: translateY(-4px);
border-color: var(--map-accent);
box-shadow: 0 8px 32px rgba(64, 24, 119, 0.12);
}
.bento-card-large {
grid-column: span 2;
grid-row: span 2;
display: flex;
flex-direction: column;
}
.bento-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(64, 24, 119, 0.08);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
color: var(--map-accent);
}
.bento-card-large .bento-icon {
width: 72px;
height: 72px;
}
.bento-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.bento-card-large .bento-title {
font-size: 28px;
}
.bento-description {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
}
.bento-card-large .bento-description {
font-size: 17px;
flex: 1;
}
.bento-visual {
margin-top: auto;
padding-top: var(--space-6);
}
.mini-flowchart {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mini-node {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--silver-bg);
border: 2px solid var(--map-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: var(--map-accent);
}
.mini-arrow {
width: 24px;
height: 2px;
background: var(--map-accent);
position: relative;
}
.mini-arrow::after {
content: '';
position: absolute;
right: 0;
top: -4px;
border: 5px solid transparent;
border-left-color: var(--map-accent);
}
/* ============================================
PROCESS SECTION - 3 Steps
============================================ */
.process {
background: var(--surface);
padding: var(--space-24) 0;
}
.process-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
position: relative;
}
/* Connector line between steps */
.process-steps::before {
content: '';
position: absolute;
top: 40px;
left: calc(16.66% + 24px);
right: calc(16.66% + 24px);
height: 2px;
background: linear-gradient(90deg, var(--map-accent), var(--teal));
z-index: 0;
}
.step-card {
text-align: center;
position: relative;
z-index: 1;
}
.step-number {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--surface);
border: 3px solid var(--map-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 800;
color: var(--map-accent);
margin: 0 auto var(--space-6);
transition: all 0.3s ease;
}
.step-card:hover .step-number {
background: var(--map-accent);
color: var(--text-light);
}
.step-title {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.step-description {
font-size: 15px;
color: var(--text-secondary);
max-width: 280px;
margin: 0 auto;
}
/* ============================================
DEMO SECTION - Dark Band with Tabs
============================================ */
.demo {
background: var(--dark-blue);
padding: var(--space-24) 0;
position: relative;
}
/* Animated grid pattern */
.demo::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(64, 24, 119, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(64, 24, 119, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
animation: gridShift 20s linear infinite;
pointer-events: none;
}
@keyframes gridShift {
from { transform: translate(0, 0); }
to { transform: translate(30px, 30px); }
}
.demo .section-title {
color: var(--text-light);
}
.demo .section-subtitle {
color: var(--text-light-secondary);
}
.demo-panel {
background: var(--dark-surface);
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
z-index: 1;
}
.demo-tabs {
display: flex;
background: var(--dark-surface-alt);
border-bottom: 1px solid var(--border-dark);
}
.demo-tab {
padding: var(--space-4) var(--space-6);
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
color: var(--text-light-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.demo-tab:hover {
color: var(--text-light);
background: rgba(64, 24, 119, 0.2);
}
.demo-tab.active {
color: var(--text-light);
background: var(--dark-surface);
border-left-color: var(--map-accent);
}
.demo-content {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 300px;
}
.demo-code {
padding: var(--space-6);
background: var(--dark-surface-alt);
border-right: 1px solid var(--border-dark);
}
.demo-code-header {
font-size: 12px;
font-weight: 600;
color: var(--text-light-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.demo-code pre {
font-family: var(--font-code);
font-size: 13px;
color: var(--text-light);
line-height: 1.7;
overflow-x: auto;
}
.demo-code .keyword { color: #c792ea; }
.demo-code .string { color: #c3e88d; }
.demo-code .property { color: #82aaff; }
.demo-code .number { color: #f78c6c; }
.demo-visual {
padding: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
}
.demo-diagram {
width: 100%;
max-width: 300px;
}
.demo-cta {
padding: var(--space-6);
text-align: center;
border-top: 1px solid var(--border-dark);
}
/* ============================================
SUCCESS SECTION - Before/After
============================================ */
.success {
background: var(--silver-bg);
padding: var(--space-24) 0;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.comparison-card {
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
}
.comparison-header {
padding: var(--space-4) var(--space-6);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.comparison-before .comparison-header {
background: var(--border);
color: var(--text-secondary);
}
.comparison-after .comparison-header {
background: var(--map-accent);
color: var(--text-light);
}
.comparison-content {
padding: var(--space-6);
}
.comparison-before .comparison-content {
border-left: 3px solid var(--border);
}
.comparison-after .comparison-content {
border-left: 3px solid var(--map-accent);
}
.comparison-text {
font-size: 14px;
color: var(--text-secondary);
font-family: var(--font-code);
line-height: 1.8;
}
.comparison-diagram {
padding: var(--space-4);
}
.success-metrics {
display: flex;
justify-content: center;
gap: var(--space-12);
margin-top: var(--space-12);
}
.metric {
text-align: center;
}
.metric-value {
font-size: 48px;
font-weight: 800;
color: var(--map-accent);
}
.metric-label {
font-size: 14px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================
CTA SECTION - Dark Band
============================================ */
.cta {
background: var(--dark-blue);
padding: var(--space-24) 0;
text-align: center;
}
.cta-title {
font-size: 42px;
font-weight: 700;
color: var(--text-light);
margin-bottom: var(--space-4);
}
.cta-subtitle {
font-size: 20px;
color: var(--text-light-secondary);
margin-bottom: var(--space-8);
}
.cta-buttons {
display: flex;
justify-content: center;
gap: var(--space-4);
}
/* ============================================
FOOTER
============================================ */
.footer {
background: var(--dark-blue);
padding: var(--space-12) 0;
border-top: 1px solid var(--border-dark);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
}
.footer-brand {
font-size: 24px;
font-weight: 700;
color: var(--text-light);
margin-bottom: var(--space-4);
}
.footer-tagline {
font-size: 14px;
color: var(--text-light-secondary);
}
.footer-heading {
font-size: 14px;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: var(--space-2);
}
.footer-links a {
font-size: 14px;
color: var(--text-light-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: var(--teal);
}
.footer-bottom {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--border-dark);
text-align: center;
font-size: 13px;
color: var(--text-light-secondary);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
gap: var(--space-12);
}
.hero-visual {
height: 300px;
}
.stakes-grid,
.process-steps {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.process-steps::before {
display: none;
}
.bento-grid {
grid-template-columns: 1fr;
}
.bento-card-large {
grid-column: span 1;
grid-row: span 1;
}
.comparison-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 40px;
}
.section-title {
font-size: 28px;
}
.demo-content {
grid-template-columns: 1fr;
}
.demo-code {
border-right: none;
border-bottom: 1px solid var(--border-dark);
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.success-metrics {
flex-direction: column;
gap: var(--space-6);
}
.footer-grid {
grid-template-columns: 1fr;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<!-- ============================================
HERO SECTION
============================================ -->
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<div class="hero-accent-line" aria-hidden="true"></div>
<span class="hero-eyebrow">Think-MCP Tools</span>
<h1 id="hero-title" class="hero-title">
<span class="hero-title-bold">See</span>
<span class="hero-title-light">your thinking</span>
</h1>
<p class="hero-subtitle">
Transform invisible complexity into visible clarity. Create flowcharts, concept maps, and diagrams that reveal what text can't show.
</p>
<div class="hero-ctas">
<a href="#demo" class="btn btn-primary">Try Map Free</a>
<a href="#demo" class="btn btn-ghost">Watch Demo</a>
</div>
</div>
<div class="hero-visual" aria-hidden="true">
<div class="diagram-container">
<svg class="beam-diagram" viewBox="0 0 400 320">
<defs>
<linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#401877;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#401877;stop-opacity:1" />
<stop offset="100%" style="stop-color:#401877;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Beam paths (animated connections) -->
<path class="beam-glow" d="M80,80 Q140,120 200,160" />
<path class="beam-path" d="M80,80 Q140,120 200,160" />
<path class="beam-glow" d="M80,240 Q140,200 200,160" />
<path class="beam-path" d="M80,240 Q140,200 200,160" />
<path class="beam-glow" d="M200,160 Q260,120 320,80" />
<path class="beam-path" d="M200,160 Q260,120 320,80" />
<path class="beam-glow" d="M200,160 Q260,200 320,240" />
<path class="beam-path" d="M200,160 Q260,200 320,240" />
<!-- Input nodes (left) -->
<rect class="diagram-node" x="40" y="50" width="80" height="60" rx="8" />
<text class="diagram-node-label" x="80" y="85">System</text>
<rect class="diagram-node" x="40" y="210" width="80" height="60" rx="8" />
<text class="diagram-node-label" x="80" y="245">Process</text>
<!-- Center node -->
<rect class="diagram-node diagram-node-center" x="160" y="130" width="80" height="60" rx="8" />
<text class="diagram-node-label diagram-node-label-light" x="200" y="165">Map</text>
<!-- Output nodes (right) -->
<rect class="diagram-node" x="280" y="50" width="80" height="60" rx="8" />
<text class="diagram-node-label" x="320" y="85">Flowchart</text>
<rect class="diagram-node" x="280" y="210" width="80" height="60" rx="8" />
<text class="diagram-node-label" x="320" y="245">Concept</text>
</svg>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================
STAKES SECTION - The Problem
============================================ -->
<section class="stakes" aria-labelledby="stakes-title">
<div class="container">
<header class="section-header">
<h2 id="stakes-title" class="section-title">Complexity you can't communicate kills projects</h2>
<p class="section-subtitle">The architecture in your head stays invisible until you can show it</p>
</header>
<div class="stakes-grid">
<article class="stake-card">
<div class="stake-icon" aria-hidden="true">
<!-- Eye-off icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
<line x1="1" y1="1" x2="23" y2="23"/>
</svg>
</div>
<h3 class="stake-title">Invisible architecture</h3>
<p class="stake-description">
The system in your head can't be shared. Meetings end with everyone having a different mental model.
</p>
</article>
<article class="stake-card">
<div class="stake-icon" aria-hidden="true">
<!-- File-text icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10,9 9,9 8,9"/>
</svg>
</div>
<h3 class="stake-title">Lost in text</h3>
<p class="stake-description">
Documentation nobody reads because it's walls of words. Critical relationships buried in paragraphs.
</p>
</article>
<article class="stake-card">
<div class="stake-icon" aria-hidden="true">
<!-- Alert-triangle icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<line x1="12" y1="9" x2="12" y2="13"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</div>
<h3 class="stake-title">Decisions without full picture</h3>
<p class="stake-description">
Teams build the wrong thing because they couldn't see how everything connects. Expensive pivots follow.
</p>
</article>
</div>
</div>
</section>
<!-- ============================================
FEATURES SECTION - Diagram Types
============================================ -->
<section class="features" aria-labelledby="features-title">
<div class="container">
<div class="features-intro">
<p class="features-empathy">
"We know what it's like to have a clear picture in your head that you can't get out. To explain a system five times because the diagram in the docs is outdated."
</p>
<h2 id="features-title" class="section-title">Every diagram type you need</h2>
</div>
<div class="bento-grid">
<article class="bento-card bento-card-large">
<div class="bento-icon" aria-hidden="true">
<!-- Git-branch icon (SVG, not emoji) -->
<svg class="icon icon-xl" viewBox="0 0 24 24">
<line x1="6" y1="3" x2="6" y2="15"/>
<circle cx="18" cy="6" r="3"/>
<circle cx="6" cy="18" r="3"/>
<path d="M18 9a9 9 0 0 1-9 9"/>
</svg>
</div>
<h3 class="bento-title">Flowcharts</h3>
<p class="bento-description">
Processes, algorithms, decision paths. See the flow of logic from start to finish with clear decision points and branches.
</p>
<div class="bento-visual">
<div class="mini-flowchart">
<div class="mini-node">Start</div>
<div class="mini-arrow"></div>
<div class="mini-node">Check</div>
<div class="mini-arrow"></div>
<div class="mini-node">End</div>
</div>
</div>
</article>
<article class="bento-card">
<div class="bento-icon" aria-hidden="true">
<!-- Link icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</svg>
</div>
<h3 class="bento-title">Concept Maps</h3>
<p class="bento-description">
Relationships between ideas. See how concepts connect, influence, and depend on each other.
</p>
</article>
<article class="bento-card">
<div class="bento-icon" aria-hidden="true">
<!-- Repeat icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<polyline points="17,1 21,5 17,9"/>
<path d="M3 11V9a4 4 0 0 1 4-4h14"/>
<polyline points="7,23 3,19 7,15"/>
<path d="M21 13v2a4 4 0 0 1-4 4H3"/>
</svg>
</div>
<h3 class="bento-title">State Diagrams</h3>
<p class="bento-description">
System states and transitions. Model how entities change over time with clear state paths.
</p>
</article>
<article class="bento-card">
<div class="bento-icon" aria-hidden="true">
<!-- List-tree icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<path d="M21 12h-8"/>
<path d="M21 6H8"/>
<path d="M21 18h-8"/>
<path d="M3 6v4c0 1.1.9 2 2 2h3"/>
<path d="M3 10v6c0 1.1.9 2 2 2h3"/>
</svg>
</div>
<h3 class="bento-title">Tree Diagrams</h3>
<p class="bento-description">
Hierarchies and decomposition. Break complex problems into visual structure.
</p>
</article>
<article class="bento-card">
<div class="bento-icon" aria-hidden="true">
<!-- Share-2 icon (SVG, not emoji) -->
<svg class="icon icon-lg" viewBox="0 0 24 24">
<circle cx="18" cy="5" r="3"/>
<circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
</svg>
</div>
<h3 class="bento-title">Custom Graphs</h3>
<p class="bento-description">
Networks and connections. Build any visual structure that fits your mental model.
</p>
</article>
</div>
</div>
</section>
<!-- ============================================
PROCESS SECTION - 3 Steps
============================================ -->
<section class="process" aria-labelledby="process-title">
<div class="container">
<header class="section-header">
<h2 id="process-title" class="section-title">From thought to visual in three moves</h2>
</header>
<div class="process-steps">
<article class="step-card">
<div class="step-number" aria-hidden="true">1</div>
<h3 class="step-title">Create</h3>
<p class="step-description">
Start with nodes and edges. Build your structure piece by piece as you think.
</p>
</article>
<article class="step-card">
<div class="step-number" aria-hidden="true">2</div>
<h3 class="step-title">Transform</h3>
<p class="step-description">
Regroup, recolor, resize. See your diagram from different perspectives.
</p>
</article>
<article class="step-card">
<div class="step-number" aria-hidden="true">3</div>
<h3 class="step-title">Observe</h3>
<p class="step-description">
Record insights as they emerge. The visual reveals what text couldn't show.
</p>
</article>
</div>
</div>
</section>
<!-- ============================================
DEMO SECTION - Dark Band
============================================ -->
<section class="demo" id="demo" aria-labelledby="demo-title">
<div class="container">
<header class="section-header">
<h2 id="demo-title" class="section-title">See Map build a real diagram</h2>
<p class="section-subtitle">Watch complexity become clarity in seconds</p>
</header>
<div class="demo-panel">
<div class="demo-tabs" role="tablist">
<button class="demo-tab active" role="tab" aria-selected="true">Flowchart</button>
<button class="demo-tab" role="tab" aria-selected="false">Concept Map</button>
<button class="demo-tab" role="tab" aria-selected="false">State Diagram</button>
</div>
<div class="demo-content">
<div class="demo-code">
<div class="demo-code-header">Input</div>
<pre><code>{
<span class="property">"operation"</span>: <span class="string">"create"</span>,
<span class="property">"diagramType"</span>: <span class="string">"flowchart"</span>,
<span class="property">"elements"</span>: [
{<span class="property">"id"</span>: <span class="string">"start"</span>, <span class="property">"type"</span>: <span class="string">"node"</span>,
<span class="property">"label"</span>: <span class="string">"User Request"</span>},
{<span class="property">"id"</span>: <span class="string">"auth"</span>, <span class="property">"type"</span>: <span class="string">"node"</span>,
<span class="property">"label"</span>: <span class="string">"Validate Token"</span>},
{<span class="property">"id"</span>: <span class="string">"e1"</span>, <span class="property">"type"</span>: <span class="string">"edge"</span>,
<span class="property">"source"</span>: <span class="string">"start"</span>, <span class="property">"target"</span>: <span class="string">"auth"</span>}
]
}</code></pre>
</div>
<div class="demo-visual">
<svg class="demo-diagram" viewBox="0 0 200 200">
<rect x="60" y="20" width="80" height="40" rx="6" fill="#243356" stroke="#401877" stroke-width="2"/>
<text x="100" y="45" fill="#FFFFFF" font-family="Manrope" font-size="11" text-anchor="middle">User Request</text>
<line x1="100" y1="60" x2="100" y2="100" stroke="#401877" stroke-width="2" stroke-dasharray="4 2"/>
<polygon points="95,95 100,105 105,95" fill="#401877"/>
<rect x="50" y="110" width="100" height="40" rx="6" fill="#243356" stroke="#401877" stroke-width="2"/>
<text x="100" y="135" fill="#FFFFFF" font-family="Manrope" font-size="11" text-anchor="middle">Validate Token</text>
<line x1="100" y1="150" x2="100" y2="180" stroke="#401877" stroke-width="2" stroke-dasharray="4 2"/>
<text x="100" y="195" fill="#B8C4D9" font-family="Manrope" font-size="10" text-anchor="middle">...continue building</text>
</svg>
</div>
</div>
<div class="demo-cta">
<a href="#" class="btn btn-accent">Try This Example</a>
</div>
</div>
</div>
</section>
<!-- ============================================
SUCCESS SECTION - Before/After
============================================ -->
<section class="success" aria-labelledby="success-title">
<div class="container">
<header class="section-header">
<h2 id="success-title" class="section-title">What changes when you think visually</h2>
<p class="section-subtitle">The same information, transformed</p>
</header>
<div class="comparison-grid">
<div class="comparison-card comparison-before">
<div class="comparison-header">Before</div>
<div class="comparison-content">
<p class="comparison-text">
"The API gateway receives requests and forwards them to the auth service which validates tokens.
If valid, the request goes to the user service which queries PostgreSQL.
The response is cached in Redis before returning to the client.
If the token is invalid, an error is returned directly from auth..."
</p>
</div>
</div>
<div class="comparison-card comparison-after">
<div class="comparison-header">After</div>
<div class="comparison-content">
<div class="comparison-diagram">
<svg viewBox="0 0 300 180">
<!-- API Gateway -->
<rect x="110" y="10" width="80" height="30" rx="4" fill="#F3E8FF" stroke="#401877" stroke-width="2"/>
<text x="150" y="30" fill="#401877" font-family="Manrope" font-size="10" font-weight="600" text-anchor="middle">API Gateway</text>
<!-- Arrow down -->
<line x1="150" y1="40" x2="150" y2="55" stroke="#401877" stroke-width="2"/>
<polygon points="145,52 150,60 155,52" fill="#401877"/>
<!-- Auth Service -->
<rect x="110" y="60" width="80" height="30" rx="4" fill="#F3E8FF" stroke="#401877" stroke-width="2"/>
<text x="150" y="80" fill="#401877" font-family="Manrope" font-size="10" font-weight="600" text-anchor="middle">Auth Service</text>
<!-- Branch arrows -->
<path d="M150,90 L150,100 L80,100 L80,115" stroke="#401877" stroke-width="2" fill="none"/>
<path d="M150,90 L150,100 L220,100 L220,115" stroke="#6DC4AD" stroke-width="2" fill="none"/>
<polygon points="75,112 80,120 85,112" fill="#401877"/>
<polygon points="215,112 220,120 225,112" fill="#6DC4AD"/>
<!-- Error and User Service -->
<rect x="40" y="120" width="80" height="30" rx="4" fill="#FFE4E4" stroke="#E57373" stroke-width="2"/>
<text x="80" y="140" fill="#E57373" font-family="Manrope" font-size="10" font-weight="600" text-anchor="middle">Error</text>
<rect x="180" y="120" width="80" height="30" rx="4" fill="#E8F5E9" stroke="#6DC4AD" stroke-width="2"/>
<text x="220" y="140" fill="#6DC4AD" font-family="Manrope" font-size="10" font-weight="600" text-anchor="middle">User Service</text>
<!-- Labels -->
<text x="100" y="108" fill="#A5A5A5" font-family="Manrope" font-size="8">invalid</text>
<text x="175" y="108" fill="#A5A5A5" font-family="Manrope" font-size="8">valid</text>
</svg>
</div>
</div>
</div>
</div>
<div class="success-metrics">
<div class="metric">
<div class="metric-value">5x</div>
<div class="metric-label">Faster understanding</div>
</div>
<div class="metric">
<div class="metric-value">100%</div>
<div class="metric-label">Team alignment</div>
</div>
<div class="metric">
<div class="metric-value">0</div>
<div class="metric-label">Lost relationships</div>
</div>
</div>
</div>
</section>
<!-- ============================================
CTA SECTION - Dark Band
============================================ -->
<section class="cta" aria-labelledby="cta-title">
<div class="container">
<h2 id="cta-title" class="cta-title">Stop describing. Start showing.</h2>
<p class="cta-subtitle">Transform your next complex idea into a clear visual.</p>
<div class="cta-buttons">
<a href="#" class="btn btn-accent">Try Map Free</a>
<a href="#" class="btn btn-ghost-light">Read Documentation</a>
</div>
</div>
</section>
<!-- ============================================
FOOTER
============================================ -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-brand">Think-MCP</div>
<p class="footer-tagline">Mental models for better thinking</p>
</div>
<div>
<h4 class="footer-heading">Tools</h4>
<ul class="footer-links">
<li><a href="#">Trace</a></li>
<li><a href="#">Council</a></li>
<li><a href="#">Decide</a></li>
<li><a href="#">Hypothesis</a></li>
<li><a href="#">Map</a></li>
</ul>
</div>
<div>
<h4 class="footer-heading">Resources</h4>
<ul class="footer-links">
<li><a href="#">Documentation</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">API Reference</a></li>
</ul>
</div>
<div>
<h4 class="footer-heading">Connect</h4>
<ul class="footer-links">
<li><a href="#">GitHub</a></li>
<li><a href="#">Discord</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>Map - Visual Thinking Tool | Part of Think-MCP</p>
</div>
</div>
</footer>
</body>
</html>
