Enhance homepage with custom HTML template

docs/README.md

@@ -1,15 +1,7 @@
-# AirStack Boilerplate
-
-Welcome to the AirStack Boilerplate! This repository template serves to kickstart the development of your own robotics autonomy stack. You're encouraged to customize your version in any way to best suit your project's needs.
-
-This boilerplate is maintained by the [AirLab](https://theairlab.org) at Carnegie Mellon University's Robotics Institute.
-
-Please head to our [Getting Started](getting_started.md) page to start.
-
-
-
-
-![Overview](overview.png)
-*AirStack*
-
-
+---
+template: home.html
+title: Home
+hide:
+  - navigation
+  - toc
+---

docs/overrides/home.html

@@ -0,0 +1,100 @@
+{% extends "main.html" %}
+
+{% block tabs %}
+  {{ super() }}
+
+  <!-- Hero section with background media -->
+  <section class="splash-container">
+    <!-- Background media -->
+    <div class="splash-background">
+      <div class="media-overlay"></div>
+      <div class="media-container">
+        <img src="assets/media/splash-background.gif" alt="Background Animation" class="splash-media">
+      </div>
+    </div>
+
+    <!-- Hero content -->
+    <div class="md-grid md-typeset">
+      <div class="mdx-hero">
+        <div class="mdx-hero__content">
+          <h1>Welcome to AirStack</h1>
+          <p>A comprehensive robotics autonomy stack boilerplate for accelerating your robotics development</p>
+          <a href="{{ 'docs/getting_started/' | url }}" class="md-button md-button--primary">
+            Get Started
+          </a>
+          <a href="{{ config.repo_url }}" class="md-button">
+            View on GitHub
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}
+
+{% block content %}
+<div class="md-content md-grid" data-md-component="content">
+  <div class="md-content__inner">
+    <!-- What is AirStack section -->
+    <section class="mdx-container">
+      <div class="md-grid md-typeset">
+        <div class="what-is-section">
+          <h2>What is AirStack?</h2>
+          <p>
+            AirStack is a powerful robotics development boilerplate maintained by the 
+            <a href="https://theairlab.org" target="_blank">AirLab</a> at Carnegie Mellon University's 
+            Robotics Institute. It provides a structured foundation for building advanced robotics 
+            applications with:
+          </p>
+          <ul class="feature-list">
+            <li>🤖 <strong>Complete Autonomy Stack</strong> - From sensors to behavior planning</li>
+            <li>🔧 <strong>Modular Architecture</strong> - Easy to customize and extend</li>
+            <li>🚀 <strong>Development Tools</strong> - Docker support, VSCode integration, and testing frameworks</li>
+            <li>📊 <strong>Ground Control Station</strong> - Built-in monitoring and control interface</li>
+            <li>🎮 <strong>Simulation Ready</strong> - Integrated with Isaac Sim</li>
+            <li>🔄 <strong>CI/CD Pipeline</strong> - Automated testing and deployment</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Feature Cards section -->
+    <section class="mdx-container">
+      <div class="md-grid md-typeset">
+        <h2>Key Features</h2>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <div class="feature-icon">🎯</div>
+            <h3>Autonomy Modules</h3>
+            <p>Complete suite of autonomy components including perception, planning, and control systems.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">🌐</div>
+            <h3>Ground Control</h3>
+            <p>Built-in ground control station for robot monitoring and control, with multi-robot support.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">🎲</div>
+            <h3>Simulation</h3>
+            <p>Integrated simulation environment with Isaac Sim for testing and development.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon">🛠️</div>
+            <h3>Development Tools</h3>
+            <p>Comprehensive development environment with Docker, VSCode, and testing frameworks.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Architecture Overview section -->
+    <section class="mdx-container">
+      <div class="md-grid md-typeset">
+        <div class="architecture-section">
+          <img src="overview.png" alt="AirStack Architecture Overview" class="architecture-image">
+          <p class="image-caption">AirStack Architecture Overview</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+{% endblock %}

docs/stylesheets/extra.css

@@ -2,8 +2,237 @@
     --md-primary-fg-color:        #EE0F0F;
     --md-primary-fg-color--light: #ECB7B7;
     --md-primary-fg-color--dark:  #90030C;
-  }
+}
 
-  [data-md-color-scheme="slate"] {
+[data-md-color-scheme="slate"] {
     --md-hue: 210; 
-  }
+}
+
+/* Ensure navigation tabs are above splash content */
+.md-tabs {
+    position: relative;
+    z-index: 10;
+}
+
+/* Splash container and background */
+.splash-container {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 98px); /* Subtract header height to prevent overlap */
+    min-height: 600px;
+    overflow: hidden;
+    margin-top: 0; /* Remove negative margin */
+    padding-top: 1rem; /* Add some padding from the navigation */
+}
+
+.splash-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.media-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Darkens the background media */
+    z-index: 2;
+}
+
+.media-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.splash-media {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Hero section */
+.mdx-container {
+    padding: 1rem;
+    margin: 0 auto;
+}
+
+.mdx-hero {
+    position: relative;
+    z-index: 3;
+    margin: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: white;
+    padding-top: 5rem; /* Add padding to push content down */
+}
+
+.mdx-hero h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.15;
+    color: #ffffff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.mdx-hero p {
+    font-size: 1.4rem;
+    font-weight: 300;
+    margin-bottom: 2rem;
+    color: #ffffff;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+    max-width: 35rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mdx-hero .md-button {
+    margin: 0.5rem;
+    font-size: 1rem;
+    padding: 0.625em 2em;
+}
+
+.mdx-hero .md-button--primary {
+    background-color: var(--md-primary-fg-color);
+    border-color: var(--md-primary-fg-color);
+    color: var(--md-primary-bg-color);
+}
+
+/* What is section */
+.what-is-section {
+    margin: 4rem 0;
+}
+
+.what-is-section h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: var(--md-default-fg-color);
+}
+
+.what-is-section p {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 2rem 0;
+}
+
+.feature-list li {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.feature-list li strong {
+    color: var(--md-primary-fg-color);
+}
+
+/* Feature grid */
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Increased minimum width */
+    gap: 2rem;
+    margin: 2rem 0 4rem;
+}
+
+.feature-card {
+    background-color: var(--md-default-bg-color);
+    border: 1px solid var(--md-default-fg-color--lightest);
+    border-radius: 8px;
+    padding: 2rem;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 1rem 0;
+    color: var(--md-primary-fg-color);
+    white-space: nowrap; /* Prevent text wrapping */
+}
+
+.feature-card p {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--md-default-fg-color--light);
+}
+
+/* Architecture section */
+.architecture-section {
+    margin: 4rem 0;
+    text-align: center;
+}
+
+.architecture-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+}
+
+.image-caption {
+    font-size: 1rem;
+    color: var(--md-default-fg-color--light);
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 76.1875em) {
+    .mdx-hero h1 {
+        font-size: 2.5rem;
+    }
+
+    .mdx-hero p {
+        font-size: 1.2rem;
+    }
+
+    .what-is-section h2 {
+        font-size: 2rem;
+    }
+
+    .feature-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .mdx-hero h1 {
+        font-size: 2rem;
+    }
+
+    .mdx-hero p {
+        font-size: 1.1rem;
+    }
+
+    .what-is-section h2 {
+        font-size: 1.75rem;
+    }
+}