Add new fancy landing page

.markdownlint.yaml

@@ -1,7 +1,4 @@
 MD013:
   line_length: 120
-MD033:
-  allowed_elements:
-    - "figure"
-    - "figcaption"
+MD033: false
 MD046: false # Code block style errors interfere with admonitions

docs/.pages

@@ -1,4 +1,4 @@
 nav:
-  - Overview: index.md
+  - index.md
   - getting-started
   - references

docs/index.md

@@ -1,26 +1,51 @@
 ---
+template: home.html
 hide:
   - navigation
   - toc
 ---
 
-# Welcome
+#
 
-!!! warning "🚧 Under Construction 🚧"
+<div class="grid cards" markdown>
 
-    This documentation site is still **heavily** under construction. Please come back later for full documentation.
+-   :material-clock-fast:{ .lg .middle } __Set up in 10 minutes__
 
-The Cloud-Based Lab Emulator (or **CBLE** for short) is designed to be a fully-automated self-service virtual lab
+    ---
+
+    Use the [auto-installer](./getting-started/quick-start.md#install) to get up and running in minutes
+
+    [:octicons-arrow-right-24: Getting started](./getting-started/quick-start.md)
+
+-   :simple-yaml:{ .lg .middle } __Configure with just YAML__
+
+    ---
+
+    Focus less on configuration and more on creating a high quality experience for your users
+
+    [:octicons-arrow-right-24: Config Reference](./references/config-file.md)
+
+-   :material-cloud:{ .lg .middle } __Made for flexibility__
+
+    ---
+
+    Use the powerful provider system to adapt to virtually any cloud environment
+
+    [:octicons-arrow-right-24: Providers](./getting-started/providers/overview.md)
+
+</div>
+
+<!-- The Cloud-Based Lab Emulator (or __CBLE__ for short) is designed to be a fully-automated self-service virtual lab
 environment that is cloud provider agnostic. This means whatever your resources, CBLE can scale to be the solution you need.
 
-[Get Started :material-chevron-right:](./getting-started/quick-start.md){ .md-button .md-button--primary }
+[Get Started :material-chevron-right:](./getting-started/quick-start.md){ .md-button .md-button--primary } -->
 
 ## Project Inspiration
 
 This project was proposed as an Independent Study at [Rochester Institute of Technology](https://rit.edu) as a part of my
 (Bradley Harker) Cybersecurity MS degree program in the Fall 2023 semester. The original project proposal is here:
 
-??? abstract "Proposal"
+??? abstract "Independent Study Proposal"
 
     _The goal of this independent study is to develop a fully-automated self-service virtual lab environment
     that aims to be both scalable and flexible to fit any form of deployment as well as learn about requirements
@@ -38,3 +63,10 @@ This project was proposed as an Independent Study at [Rochester Institute of Tec
     of the interviews and the resulting design extrapolated from the findings. No current course in the CSEC
     curriculum offers this kind of opportunity to develop a product (the platform) in collaboration with a client
     (RIT) and teach the project design and project management progress._
+
+The project was then continued as a Capstone Project at [Rochester Institute of Technology](https://rit.edu) as a part of
+my (Bradley Harker) Cybersecurity MS degree program in the Spring 2024 semester. The paper abstract is here:
+
+??? abstract "Capstone Project Abstract"
+
+    _[To be added]_

mkdocs.yml

@@ -1,8 +1,11 @@
-site_name: CBLE Docs
-site_url: https://cble-platform.github.io/docs/
-site_description: Full platform documentation for the Cloud-Based Lab Emulator (CBLE)
+site_name: Cloud-Based Lab Emulator (CBLE)
+site_url: https://docs.cble.io/
+site_description: Cloud-Based Lab Emulator (CBLE) is a provider-agnostic automated self-service virtual lab platform.
 repo_url: https://github.com/cble-platform
 repo_name: cble-platform
+copyright: >
+  Copyright © 2024 - Bradley Harker -
+  <a href="#__consent">Change cookie settings</a>
 theme:
   name: material
   custom_dir: overrides
@@ -29,7 +32,7 @@ theme:
 
     # Palette toggle for dark mode
     - media: "(prefers-color-scheme: dark)"
-      primary: black
+      primary: teal
       accent: cyan
       scheme: slate
       toggle:
@@ -79,3 +82,31 @@ extra_css:
 extra:
   version:
     provider: mike
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/cble-platform
+  analytics:
+    provider: google
+    property: G-M8Q262RM03
+    feedback:
+      title: Was this page helpful?
+      ratings:
+        - icon: material/emoticon-happy-outline
+          name: This page was helpful
+          data: 1
+          note: >-
+            Thanks for your feedback!
+        - icon: material/emoticon-sad-outline
+          name: This page could be improved
+          data: 0
+          note: >-
+            Thanks for your feedback!
+  consent:
+    title: Cookie consent
+    description: >-
+      We use cookies to recognize your repeated visits and preferences, as well
+      as to measure the effectiveness of our documentation and whether users
+      find what they're searching for. With your consent, you're helping us to
+      make our documentation better.
+watch:
+  - overrides

overrides/assets/javascripts/hero.js

@@ -0,0 +1,45 @@
+// Max rotation
+const MAX_ROTATION = 20;
+
+// Integrate with mkdocs instant loading
+document$.subscribe(function () {
+  // Check light/dark mode
+  let colorScheme = document.body.getAttribute("data-md-color-scheme");
+  // Get hero container
+  const heroContainer = document.getElementById("cble-hero-container");
+  // Get hero image
+  let heroImage = document.getElementById(`cble-hero-image-${colorScheme}`);
+
+  // Update element selector based on light/dark mode
+  document.querySelector("form[data-md-component=palette]").onchange = (e) => {
+    // Check light/dark mode
+    colorScheme = document.body.getAttribute("data-md-color-scheme");
+    // Get hero image
+    heroImage = document.getElementById(`cble-hero-image-${colorScheme}`);
+  };
+
+  heroContainer.onmousemove = (e) => {
+    // Only run animation on large devices
+    if (window.innerWidth < 1220) return;
+
+    let x = e.pageX;
+    let y = e.pageY;
+
+    window.requestAnimationFrame(() => {
+      let imgBox = heroImage.getBoundingClientRect();
+      let deltaX = x - (imgBox.x + imgBox.width / 2);
+      let deltaY = y - (imgBox.y + imgBox.height / 2);
+      let thetaY = (deltaX / (imgBox.x + imgBox.width / 2 + window.scrollX)) * MAX_ROTATION;
+      let thetaX = (deltaY / (imgBox.y + imgBox.height / 2 + window.scrollY)) * -MAX_ROTATION;
+      // console.log(x, y, imgBox.x + imgBox.width / 2, imgBox.y + imgBox.height / 2 + window.scrollY, deltaX, deltaY, thetaX, thetaY);
+      heroImage.style.transform = `perspective(500px) rotateX(${thetaX}deg) rotateY(${thetaY}deg)`;
+    });
+  };
+
+  // Return to center on mouse leave
+  heroContainer.onmouseleave = (e) => {
+    window.requestAnimationFrame(() => {
+      heroImage.style.transform = `perspective(500px) rotateX(5deg) rotateY(-5deg)`;
+    });
+  };
+});

overrides/assets/stylesheets/custom/layout/hero.css

@@ -0,0 +1,125 @@
+.cble-container {
+  min-height: calc(100dvh - 9em);
+  /* padding-top: 1.25rem; */
+  /* background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>")
+      no-repeat bottom,
+    linear-gradient(to bottom, var(--md-primary-fg-color), rgba(255, 255, 255, 0.25) 99%, var(--md-default-bg-color) 99%); */
+  /* background: linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-accent-fg-color--transparent) 100%); */
+}
+
+[data-md-color-scheme="slate"] .cble-container {
+  background: linear-gradient(to bottom, var(--md-primary-fg-color), #fff0 100%);
+}
+
+[data-md-color-scheme="default"] .cble-container {
+  background: linear-gradient(to bottom, var(--md-primary-fg-color), rgba(255, 255, 255, 0.15) 100%);
+}
+
+/* Landing page hero */
+.cble-hero {
+  height: calc(100dvh - 9em);
+  width: 100%;
+  margin: 0 1rem;
+  /* color: var(--md-primary-bg-color); */
+  color: var(--md-typeset-color);
+}
+
+/* Hero headline */
+.cble-hero h1 {
+  margin-bottom: 1.25rem;
+  font-weight: 700;
+  color: var(--md-typeset-color);
+}
+
+[data-md-color-scheme="slate"] .cble-hero .cble-hero__content,
+[data-md-color-scheme="slate"] .cble-hero h1 {
+  color: #fff !important;
+}
+
+/* Hero content */
+.cble-hero .cble-hero__content {
+  padding-bottom: 7.5rem;
+  color: var(--md-typeset-color);
+}
+
+/* Hero image */
+.cble-hero .cble-hero__image {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cble-hero .cble-hero__image img {
+  transition: all 0.15s ease-out;
+  transform: perspective(500px) rotateX(5deg) rotateY(-5deg);
+}
+
+.cble-hero .md-button {
+  margin-top: 0.625rem;
+  margin-right: 0.625rem;
+  color: var(--md-primary-bg-color);
+}
+
+/* Button on focus/hover */
+/* .cble-hero .md-button:is(:focus, :hover) {
+  color: var(--md-accent-bg-color);
+  background-color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+} */
+
+/* Primary button */
+/* .cble-hero .md-button--primary {
+  color: var(--md-accent-fg-color);
+  background-color: var(--md-primary-bg-color);
+  border-color: var(--md-primary-bg-color);
+} */
+
+@media screen and (max-width: 479px) {
+  .cble-hero h1 {
+    font-size: 1.75rem;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .cble-hero {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  .cble-hero .cble-hero__content {
+    padding-bottom: 3rem;
+  }
+
+  .cble-hero .cble-hero__image {
+    order: 1;
+    width: 50%;
+    padding: 0 3rem;
+  }
+}
+
+/* @media screen and (min-width: 1220px) {
+  .cble-hero .cble-hero__image {
+    transform: translateX(10rem);
+  }
+} */
+
+/* 
+///   $break-devices: (
+///     mobile: (
+///       portrait:  220px  479px,
+///       landscape: 480px  719px
+///     ),
+///     tablet: (
+///       portrait:  720px  959px,
+///       landscape: 960px  1219px
+///     ),
+///     screen: (
+///       small:     1220px 1599px,
+///       medium:    1600px 1999px,
+///       large:     2000px
+///     )
+///   );
+///
+*/

overrides/home.html

@@ -0,0 +1,43 @@
+{% extends "main.html" %} {% block tabs %} {{ super() }}
+<style>
+  .md-main__inner {
+    margin: 0 auto;
+  }
+  .md-content {
+    width: 100%;
+  }
+  @media screen and (min-width: 60em) {
+    .md-sidebar--secondary {
+      display: none;
+    }
+  }
+  @media screen and (min-width: 76.25em) {
+    .md-sidebar--primary {
+      display: none;
+    }
+  }
+</style>
+<section class="cble-container" id="cble-hero-container">
+  <div class="md-grid md-typeset">
+    <div class="cble-hero">
+      <div class="cble-hero__image">
+        <img id="cble-hero-image-default" src="assets/images/cble_nodes_light.png#only-light" alt="" draggable="false" />
+        <img id="cble-hero-image-slate" src="assets/images/cble_nodes_dark.png#only-dark" alt="" draggable="false" />
+      </div>
+      <div class="cble-hero__content">
+        <h1>Cloud-Based Lab Emulator (CBLE)</h1>
+        <p>{{ config.site_description }} Set up in 10 minutes.</p>
+        <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | e }}" class="md-button md-button--primary">
+          Quick start <span class="twemoji">{% include ".icons/material/chevron-right.svg" %}</span>
+        </a>
+        <!-- <a href="{{ 'insiders/' | url }}" title="Material for MkDocs Insiders" class="md-button"> Get Insiders </a> -->
+      </div>
+    </div>
+  </div>
+</section>
+{% endblock %} {% block content %} {{ super() }} {% endblock %} {% block footer %} {{ super() }} {% endblock %} {% block scripts %}
+<!-- Add scripts that need to run before here -->
+{{ super() }}
+<!-- Add scripts that need to run afterwards here -->
+<script src="{{ 'assets/javascripts/hero.js' | url }}" />
+{% endblock %}

overrides/main.html

@@ -1,8 +1,18 @@
 {% extends "base.html" %}
 
+<!-- Custom front matter -->
+{% block extrahead %}
+
+  <!-- Extra style sheets (can't be set in mkdocs.yml due to content hash) -->
+  <link
+    rel="stylesheet"
+    href="{{ 'assets/stylesheets/custom/layout/hero.css' | url }}"
+  />
+{% endblock %}
+
 {% block outdated %}
   You're not viewing the latest version.
   <a href="{{ '../' ~ base_url }}"> 
     <strong>Click here to go to latest.</strong>
   </a>
-{% endblock %}
+{% endblock %}