refactor: remove old roadmap documentation and implement new roadmap data structure

Co-authored-by: Copilot <copilot@github.com>

Author: jan-bures

src/components/Footer.astro

@@ -22,6 +22,7 @@ const socialLinks = [
 
 const quickLinks = [
 	{ href: '/', label: 'Home' },
+	{ href: '/roadmap', label: 'Roadmap' },
 	{ href: '/guides', label: 'Documentation' },
 	{ href: '/blog', label: 'Blog' },
 	// { href: '/gallery', label: 'Gallery' },

src/components/Header.astro

@@ -4,6 +4,7 @@ const { pathname } = Astro.url;
 
 const navItems = [
 	{ href: '/', label: 'Home' },
+	{ href: '/roadmap', label: 'Roadmap' },
 	{ href: '/guides', label: 'Documentation' },
 	{ href: '/blog', label: 'Blog' },
 	// { href: '/gallery', label: 'Gallery' },

src/components/ProgressBar.astro

@@ -0,0 +1,91 @@
+---
+interface Props {
+	min: number;
+	max: number;
+	value: number;
+	animated?: boolean;
+	class?: string;
+	ariaLabel?: string;
+}
+
+const {
+	min,
+	max,
+	value,
+	animated = true,
+	class: className = '',
+	ariaLabel = 'Progress',
+} = Astro.props;
+
+const range = Math.max(max - min, 1);
+const clampedValue = Math.min(Math.max(value, min), max);
+const percent = ((clampedValue - min) / range) * 100;
+---
+
+<div
+	class:list={['progress-bar', className]}
+	data-progress-bar
+	data-animated={animated ? 'true' : 'false'}
+	data-target={percent.toString()}
+	role="progressbar"
+	aria-label={ariaLabel}
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-valuenow={clampedValue}
+>
+	<div class="progress-bar__track">
+		<div class="progress-bar__fill"></div>
+	</div>
+</div>
+
+<script is:inline>
+	document.querySelectorAll('[data-progress-bar]').forEach((element) => {
+		if (!(element instanceof HTMLElement) || element.dataset.ready === 'true') {
+			return;
+		}
+
+		const fill = element.querySelector('.progress-bar__fill');
+
+		if (!(fill instanceof HTMLElement)) {
+			return;
+		}
+
+		const target = element.dataset.target ?? '0';
+		const animate = element.dataset.animated !== 'false';
+		const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		element.dataset.ready = 'true';
+
+		if (!animate || reducedMotion) {
+			fill.style.width = `${target}%`;
+			return;
+		}
+
+		requestAnimationFrame(() => {
+			fill.style.width = `${target}%`;
+		});
+	});
+</script>
+
+<style>
+	.progress-bar__track {
+		height: 0.38rem;
+		border-radius: 999px;
+		background: rgba(255, 255, 255, 0.12);
+		overflow: hidden;
+	}
+
+	.progress-bar__fill {
+		width: 0;
+		height: 100%;
+		border-radius: inherit;
+		background: linear-gradient(90deg, #5faef5 0%, #df1601 100%);
+		transition: width 1.1s cubic-bezier(0.2, 0.9, 0.25, 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress-bar__fill {
+			transition: none;
+		}
+	}
+</style>

src/content/docs/blog/roadmap.mdx

@@ -8,7 +8,7 @@ hero:
       link: /guides/installation/
       icon: right-arrow
     - text: View Roadmap
-      link: /guides/roadmap/
+      link: /roadmap/
       icon: rocket
 ---
 
@@ -23,7 +23,7 @@ Explore comprehensive guides, development updates, and reference documentation f
 		Step-by-step instructions for installing KSP2 Redux on Steam, Epic Games Store, or Portable versions. [Get started →](/guides/installation/)
 	</Card>
 	<Card title="Roadmap" icon="star">
-		Explore our complete development roadmap from Foundation to Multiplayer. [View roadmap →](/guides/roadmap/)
+		Explore our complete development roadmap from Foundation to Multiplayer. [View roadmap →](/roadmap/)
 	</Card>
 	<Card title="Mod Compatibility" icon="puzzle">
 		Learn about using mods with Redux and the new modding SDK. [Learn more →](/guides/mod-compatibility/)
@@ -39,7 +39,7 @@ New to KSP2 Redux? Here's your quick start path:
 
 1. **[Read the Installation Guide](/guides/installation/)** - Get Redux installed on your system
 2. **[Check the FAQ](/faq/)** - Find answers to common questions
-3. **[View the Roadmap](/guides/roadmap/)** - See what's coming next
+3. **[View the Roadmap](/roadmap/)** - See what's coming next
 4. **[Join the Community](#community)** - Connect with other players and developers
 
 ## Development Blog