feat(docs): add public roadmap and improve site navigation
- Add comprehensive public roadmap with In Progress, Getting Started, and Community sections - Add roadmap callout to README.md and docs welcome page - Add roadmap-specific card grid styles with equal-height cards - Fix rehype-markdown-links plugin to detect docs directory in various project structures - Rename roadmap.md to roadmap.mdx for proper Astro/Starlight rendering - Update doc link validator to support .mdx files
This commit is contained in:
Brian Madison
parent
1d49fe1802
commit
44eeaa8a71
37
CHANGELOG.md
37
CHANGELOG.md
|
|
@ -1,5 +1,42 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## [6.0.2]
|
||||||
|
|
||||||
|
### 🎁 Features
|
||||||
|
|
||||||
|
* Add CodeBuddy platform support with installer configuration (#1483)
|
||||||
|
* Add LLM audit prompt for file reference conventions - new audit tool using parallel subagents (#1720)
|
||||||
|
* Migrate Codex installer from `.codex/prompts` to `.agents/skills` format to align with Codex CLI changes (#1729)
|
||||||
|
* Convert review-pr and audit-file-refs tools to proper bmad-os skills with slash commands `/bmad-os-review-pr` and `/bmad-os-audit-file-refs` (#1732)
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes
|
||||||
|
|
||||||
|
* Fix 24 broken step references in create-architecture workflow after directory rename (#1734)
|
||||||
|
* Fix step file path references in check-implementation-readiness workflow (#1709, #1716)
|
||||||
|
* Fix 3 broken file references and enable strict file reference validation in CI (#1717)
|
||||||
|
* Fix Rovo Dev integration with custom installer that generates prompts.yml manifest (#1701)
|
||||||
|
* Fix 104 relative step file references to use standardized `{project-root}/_bmad/` paths across 68 files (#1722)
|
||||||
|
* Fix code fence imbalance in step-03-starter.md that caused rendering issues (#1724)
|
||||||
|
* Remove Windsurf from recommended/preferred IDEs list (#1727)
|
||||||
|
* Fix default Codex install location from global to project for better defaults (#1698)
|
||||||
|
* Add npx cache workaround to Quick Start for stale beta versions (#1685)
|
||||||
|
* Add language instructions to replace placeholder text in Research overview (#1703)
|
||||||
|
* Ignore `.junie/` IDE integration folder in git and prettier configs (#1719)
|
||||||
|
|
||||||
|
### ♻️ Refactoring
|
||||||
|
|
||||||
|
* Update open source tool skills structure for future plugin migration
|
||||||
|
* Standardize all workflow descriptions for skill generation with concise format and explicit trigger phrases
|
||||||
|
* Remove `disable-model-invocation` flag from all IDE installer templates to enable workflow skill calls
|
||||||
|
|
||||||
|
### 📚 Documentation
|
||||||
|
|
||||||
|
* Elevate `bmad-help` as primary on-ramp across all documentation
|
||||||
|
* Update workflow names with `bmad-bmm-` prefix and standardize table formatting
|
||||||
|
* Clarify phase routing and catalog path in help task
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## [6.0.0]
|
## [6.0.0]
|
||||||
|
|
||||||
V6 Stable Release! The End of Beta!
|
V6 Stable Release! The End of Beta!
|
||||||
|
|
|
||||||
10
README.md
10
README.md
|
|
@ -22,6 +22,16 @@ Traditional AI tools do the thinking for you, producing average results. BMad ag
|
||||||
|
|
||||||
[Learn more at **docs.bmad-method.org**](http://docs.bmad-method.org)
|
[Learn more at **docs.bmad-method.org**](http://docs.bmad-method.org)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 What's Next for BMad?
|
||||||
|
|
||||||
|
**V6 is here and we're just getting started!** The BMad Method is evolving rapidly with optimizations including Cross Platform Agent Team and Sub Agent inclusion, Skills Architecture, BMad Builder v1, Dev Loop Automation, and so much more in the works.
|
||||||
|
|
||||||
|
**[📍 Check out the complete Roadmap →](http://docs.bmad-method.org/roadmap/)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
|
||||||
**Prerequisites**: [Node.js](https://nodejs.org) v20+
|
**Prerequisites**: [Node.js](https://nodejs.org) v20+
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,10 @@ The BMad Method (**B**reakthrough **M**ethod of **A**gile AI **D**riven Developm
|
||||||
|
|
||||||
If you're comfortable working with AI coding assistants like Claude, Cursor, or GitHub Copilot, you're ready to get started.
|
If you're comfortable working with AI coding assistants like Claude, Cursor, or GitHub Copilot, you're ready to get started.
|
||||||
|
|
||||||
|
:::note[🚀 V6 is Here and We're Just Getting Started!]
|
||||||
|
Skills Architecture, BMad Builder v1, Dev Loop Automation, and so much more in the works. **[Check out the Roadmap →](/roadmap/)**
|
||||||
|
:::
|
||||||
|
|
||||||
## New Here? Start with a Tutorial
|
## New Here? Start with a Tutorial
|
||||||
|
|
||||||
The fastest way to understand BMad is to try it.
|
The fastest way to understand BMad is to try it.
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
---
|
||||||
|
title: Roadmap
|
||||||
|
description: What's next for BMad - Features, improvements, and community contributions
|
||||||
|
---
|
||||||
|
|
||||||
|
# The BMad Method: Public Roadmap
|
||||||
|
|
||||||
|
The BMad Method, BMad Method Module (BMM), and BMad Builder (BMB) are evolving. Here's what we're working on and what's coming next.
|
||||||
|
|
||||||
|
<div class="roadmap-container">
|
||||||
|
|
||||||
|
<h2 class="roadmap-section-title">In Progress</h2>
|
||||||
|
|
||||||
|
<div class="roadmap-future">
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🧩</span>
|
||||||
|
<h4>Universal Skills Architecture</h4>
|
||||||
|
<p>One skill, any platform. Write once, run everywhere.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🏗️</span>
|
||||||
|
<h4>BMad Builder v1</h4>
|
||||||
|
<p>Craft production-ready AI agents and workflows with evals, teams, and graceful degradation built in.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🧠</span>
|
||||||
|
<h4>Project Context System</h4>
|
||||||
|
<p>Your AI actually understands your project. Framework-aware context that evolves with your codebase.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">📦</span>
|
||||||
|
<h4>Centralized Skills</h4>
|
||||||
|
<p>Install once, use everywhere. Share skills across projects without the file clutter.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🔄</span>
|
||||||
|
<h4>Adaptive Skills</h4>
|
||||||
|
<p>Skills that know your tool. Optimized variants for Claude, Codex, Kimi, and OpenCode, plus many more.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">📝</span>
|
||||||
|
<h4>BMad Team Pros Blog</h4>
|
||||||
|
<p>Guides, articles and insights from the team. Launching soon.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="roadmap-section-title">Getting Started</h2>
|
||||||
|
|
||||||
|
<div class="roadmap-future">
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🏪</span>
|
||||||
|
<h4>Skill Marketplace</h4>
|
||||||
|
<p>Discover, install, and update community-built skills. One curl command away from superpowers.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🎨</span>
|
||||||
|
<h4>Workflow Customization</h4>
|
||||||
|
<p>Make it yours. Integrate Jira, Linear, custom outputs your workflow, your rules.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🚀</span>
|
||||||
|
<h4>Phase 1-3 Optimization</h4>
|
||||||
|
<p>Lightning-fast planning with sub-agent context gathering. YOLO mode meets guided excellence.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🌐</span>
|
||||||
|
<h4>Enterprise Ready</h4>
|
||||||
|
<p>SSO, audit logs, team workspaces. All the boring stuff that makes companies say yes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">💎</span>
|
||||||
|
<h4>Community Modules Explosion</h4>
|
||||||
|
<p>Entertainment, security, therapy, roleplay and much more. Expand the BMad Method platform.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">⚡</span>
|
||||||
|
<h4>Dev Loop Automation</h4>
|
||||||
|
<p>Optional autopilot for development. Let AI handle the flow while keeping quality sky-high.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="roadmap-section-title">Community and Team</h2>
|
||||||
|
|
||||||
|
<div class="roadmap-future">
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🎙️</span>
|
||||||
|
<h4>The BMad Method Podcast</h4>
|
||||||
|
<p>Conversations about AI-native development. Launching March 1, 2026!</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🎓</span>
|
||||||
|
<h4>The BMad Method Master Class</h4>
|
||||||
|
<p>Go from user to expert. Deep dives into every phase, every workflow, every secret.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🏗️</span>
|
||||||
|
<h4>The BMad Builder Master Class</h4>
|
||||||
|
<p>Build your own agents. Advanced techniques for when you are ready to create, not just use.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">⚡</span>
|
||||||
|
<h4>BMad Prototype First</h4>
|
||||||
|
<p>Idea to working prototype in one session. Craft your dream app like a work of art.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🌴</span>
|
||||||
|
<h4>BMad BALM!</h4>
|
||||||
|
<p>Life management for the AI-native. Tasks, habits, goals your AI copilot for everything.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🖥️</span>
|
||||||
|
<h4>Official UI</h4>
|
||||||
|
<p>A beautiful interface for the entire BMad ecosystem. CLI power, GUI polish.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roadmap-future-card">
|
||||||
|
<span class="roadmap-emoji">🔒</span>
|
||||||
|
<h4>BMad in a Box</h4>
|
||||||
|
<p>Self-hosted, air-gapped, enterprise-grade. Your AI assistant, your infrastructure, your control.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-top: 3rem; padding: 2rem; background: var(--color-bg-card); border-radius: 12px; border: 1px solid var(--color-border);">
|
||||||
|
<h3 style="margin: 0 0 1rem;">Want to Contribute?</h3>
|
||||||
|
<p style="color: var(--slate-color-400); margin: 0;">
|
||||||
|
This is only a partial list of what's planned. The BMad Open Source team welcomes contributors!{" "}<br />
|
||||||
|
<a href="https://github.com/bmad-code-org/BMAD-METHOD" style="color: var(--color-in-progress);">Join us on GitHub</a> to help shape the future of AI-driven development.
|
||||||
|
</p>
|
||||||
|
<p style="color: var(--slate-color-400); margin: 1.5rem 0 0;">
|
||||||
|
Love what we're building? We appreciate both one-time and monthly{" "}<a href="https://buymeacoffee.com/bmad" style="color: var(--color-in-progress);">support</a>.
|
||||||
|
</p>
|
||||||
|
<p style="color: var(--slate-color-400); margin: 1rem 0 0;">
|
||||||
|
For corporate sponsorship, partnership inquiries, speaking engagements, training, or media enquiries:{" "}
|
||||||
|
<a href="mailto:contact@bmadcode.com" style="color: var(--color-in-progress);">contact@bmadcode.com</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -51,7 +51,7 @@ function getMarkdownFiles(dir) {
|
||||||
|
|
||||||
if (entry.isDirectory()) {
|
if (entry.isDirectory()) {
|
||||||
walk(fullPath);
|
walk(fullPath);
|
||||||
} else if (entry.isFile() && entry.name.endsWith('.md')) {
|
} else if (entry.isFile() && (entry.name.endsWith('.md') || entry.name.endsWith('.mdx'))) {
|
||||||
files.push(fullPath);
|
files.push(fullPath);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -120,10 +120,13 @@ function resolveLink(siteRelativePath, sourceFile) {
|
||||||
if (!resolved.startsWith(DOCS_ROOT + path.sep) && resolved !== DOCS_ROOT) return null;
|
if (!resolved.startsWith(DOCS_ROOT + path.sep) && resolved !== DOCS_ROOT) return null;
|
||||||
if (fs.existsSync(resolved) && fs.statSync(resolved).isFile()) return resolved;
|
if (fs.existsSync(resolved) && fs.statSync(resolved).isFile()) return resolved;
|
||||||
if (fs.existsSync(resolved + '.md')) return resolved + '.md';
|
if (fs.existsSync(resolved + '.md')) return resolved + '.md';
|
||||||
// Directory: check for index.md
|
if (fs.existsSync(resolved + '.mdx')) return resolved + '.mdx';
|
||||||
|
// Directory: check for index.md or index.mdx
|
||||||
if (fs.existsSync(resolved) && fs.statSync(resolved).isDirectory()) {
|
if (fs.existsSync(resolved) && fs.statSync(resolved).isDirectory()) {
|
||||||
const indexFile = path.join(resolved, 'index.md');
|
const indexFile = path.join(resolved, 'index.md');
|
||||||
|
const indexMdxFile = path.join(resolved, 'index.mdx');
|
||||||
if (fs.existsSync(indexFile)) return indexFile;
|
if (fs.existsSync(indexFile)) return indexFile;
|
||||||
|
if (fs.existsSync(indexMdxFile)) return indexMdxFile;
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -134,12 +137,17 @@ function resolveLink(siteRelativePath, sourceFile) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (checkPath.endsWith('/')) {
|
if (checkPath.endsWith('/')) {
|
||||||
// Could be file.md or directory/index.md
|
// Could be file.md, file.mdx, or directory/index.md/mdx
|
||||||
const asFile = path.join(DOCS_ROOT, checkPath.slice(0, -1) + '.md');
|
const baseName = checkPath.slice(0, -1);
|
||||||
|
const asMd = path.join(DOCS_ROOT, baseName + '.md');
|
||||||
|
const asMdx = path.join(DOCS_ROOT, baseName + '.mdx');
|
||||||
const asIndex = path.join(DOCS_ROOT, checkPath, 'index.md');
|
const asIndex = path.join(DOCS_ROOT, checkPath, 'index.md');
|
||||||
|
const asIndexMdx = path.join(DOCS_ROOT, checkPath, 'index.mdx');
|
||||||
|
|
||||||
if (fs.existsSync(asFile)) return asFile;
|
if (fs.existsSync(asMd)) return asMd;
|
||||||
|
if (fs.existsSync(asMdx)) return asMdx;
|
||||||
if (fs.existsSync(asIndex)) return asIndex;
|
if (fs.existsSync(asIndex)) return asIndex;
|
||||||
|
if (fs.existsSync(asIndexMdx)) return asIndexMdx;
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -151,10 +159,16 @@ function resolveLink(siteRelativePath, sourceFile) {
|
||||||
const withMd = direct + '.md';
|
const withMd = direct + '.md';
|
||||||
if (fs.existsSync(withMd)) return withMd;
|
if (fs.existsSync(withMd)) return withMd;
|
||||||
|
|
||||||
// Directory without trailing slash: check for index.md
|
// Try with .mdx extension
|
||||||
|
const withMdx = direct + '.mdx';
|
||||||
|
if (fs.existsSync(withMdx)) return withMdx;
|
||||||
|
|
||||||
|
// Directory without trailing slash: check for index.md or index.mdx
|
||||||
if (fs.existsSync(direct) && fs.statSync(direct).isDirectory()) {
|
if (fs.existsSync(direct) && fs.statSync(direct).isDirectory()) {
|
||||||
const indexFile = path.join(direct, 'index.md');
|
const indexFile = path.join(direct, 'index.md');
|
||||||
|
const indexMdxFile = path.join(direct, 'index.mdx');
|
||||||
if (fs.existsSync(indexFile)) return indexFile;
|
if (fs.existsSync(indexFile)) return indexFile;
|
||||||
|
if (fs.existsSync(indexMdxFile)) return indexMdxFile;
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
|
|
|
||||||
|
|
@ -90,6 +90,7 @@ export default defineConfig({
|
||||||
// Sidebar configuration (Diataxis structure)
|
// Sidebar configuration (Diataxis structure)
|
||||||
sidebar: [
|
sidebar: [
|
||||||
{ label: 'Welcome', slug: 'index' },
|
{ label: 'Welcome', slug: 'index' },
|
||||||
|
{ label: 'Roadmap', slug: 'roadmap' },
|
||||||
{
|
{
|
||||||
label: 'Tutorials',
|
label: 'Tutorials',
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
|
|
|
||||||
|
|
@ -101,11 +101,19 @@ export function findFirstDelimiter(str) {
|
||||||
/** Walk up from a file path to find the content docs directory. */
|
/** Walk up from a file path to find the content docs directory. */
|
||||||
export function detectContentDir(filePath) {
|
export function detectContentDir(filePath) {
|
||||||
const segments = filePath.split(path.sep);
|
const segments = filePath.split(path.sep);
|
||||||
// Look for src/content/docs in the path
|
// Look for src/content/docs in the path (standard Astro)
|
||||||
for (let i = segments.length - 1; i >= 2; i--) {
|
for (let i = segments.length - 1; i >= 2; i--) {
|
||||||
if (segments[i - 2] === 'src' && segments[i - 1] === 'content' && segments[i] === 'docs') {
|
if (segments[i - 2] === 'src' && segments[i - 1] === 'content' && segments[i] === 'docs') {
|
||||||
return segments.slice(0, i + 1).join(path.sep);
|
return segments.slice(0, i + 1).join(path.sep);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Also check for a standalone 'docs' directory (BMAD project structure)
|
||||||
|
// Path format: .../bmm/docs/file.mdx or .../bmm/website/...
|
||||||
|
for (let i = segments.length - 1; i >= 0; i--) {
|
||||||
|
if (segments[i] === 'docs') {
|
||||||
|
// Found docs directory - use its parent as the content root
|
||||||
|
return segments.slice(0, i + 1).join(path.sep);
|
||||||
|
}
|
||||||
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -507,3 +507,299 @@ blockquote {
|
||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
ROADMAP STYLES
|
||||||
|
============================================ */
|
||||||
|
.roadmap-container {
|
||||||
|
--color-planned: #6366f1;
|
||||||
|
--color-in-progress: #10b981;
|
||||||
|
--color-exploring: #f59e0b;
|
||||||
|
--color-bg-card: rgba(255, 255, 255, 0.03);
|
||||||
|
--color-border: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .roadmap-container {
|
||||||
|
--color-bg-card: rgba(255, 255, 255, 0.03);
|
||||||
|
--color-border: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light .roadmap-container {
|
||||||
|
--color-bg-card: rgba(0, 0, 0, 0.02);
|
||||||
|
--color-border: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-legend {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 2rem 0;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-dot.planned { background: var(--color-planned); }
|
||||||
|
.legend-dot.in-progress { background: var(--color-in-progress); }
|
||||||
|
.legend-dot.exploring { background: var(--color-exploring); }
|
||||||
|
|
||||||
|
.roadmap-timeline {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 3rem auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-timeline::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(to bottom, var(--color-in-progress), var(--color-planned), var(--color-exploring));
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(odd) .roadmap-card {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(even) .roadmap-card {
|
||||||
|
grid-column: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-marker {
|
||||||
|
grid-column: 2;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid var(--starlight-canvas-bg);
|
||||||
|
background: var(--color-in-progress);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 0 0 4px var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item.in-progress .roadmap-marker { background: var(--color-in-progress); }
|
||||||
|
.roadmap-item.planned .roadmap-marker { background: var(--color-planned); }
|
||||||
|
.roadmap-item.exploring .roadmap-marker { background: var(--color-exploring); }
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(odd) .roadmap-content {
|
||||||
|
grid-column: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(even) .roadmap-content {
|
||||||
|
grid-column: 3;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-card {
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
border-color: var(--color-in-progress);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-card.planned:hover { border-color: var(--color-planned); }
|
||||||
|
.roadmap-card.exploring:hover { border-color: var(--color-exploring); }
|
||||||
|
|
||||||
|
.roadmap-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(odd) .roadmap-header {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-badge {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-badge.in-progress {
|
||||||
|
background: rgba(16, 185, 129, 0.15);
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-badge.planned {
|
||||||
|
background: rgba(99, 102, 241, 0.15);
|
||||||
|
color: #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-badge.exploring {
|
||||||
|
background: rgba(245, 158, 11, 0.15);
|
||||||
|
color: #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-description {
|
||||||
|
color: var(--slate-color-500);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-features {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-features li {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--slate-color-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-features li::before {
|
||||||
|
content: '→';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--color-in-progress);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item.planned .roadmap-features li::before { color: var(--color-planned); }
|
||||||
|
.roadmap-item.exploring .roadmap-features li::before { color: var(--color-exploring); }
|
||||||
|
|
||||||
|
.roadmap-section-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 3rem 0 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: linear-gradient(135deg, var(--color-in-progress), var(--color-planned));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(245, 158, 11, 0.05));
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future-card h4 {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future-card p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future-card:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future-card h4 {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-planned);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-future-card p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--slate-color-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-emoji {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.roadmap-timeline::before {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item {
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(odd) .roadmap-card,
|
||||||
|
.roadmap-item:nth-child(even) .roadmap-card {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(odd) .roadmap-content,
|
||||||
|
.roadmap-item:nth-child(even) .roadmap-content {
|
||||||
|
grid-column: 2;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-marker {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roadmap-item:nth-child(odd) .roadmap-header {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue