Add splash page

Author: amrit110

docs/assets/splash.png

@@ -23,3 +23,5 @@ To submit issues or suggestions, please use our provided templates:
 * [Request a feature](https://github.com/VectorInstitute/reference-implementation-catalog/issues/new?template=feature_request.md) - for suggesting improvements or new additions
 
 For any questions, please reach out to the AI Engineering team at Vector Institute.
+
+<div style="margin-bottom: 4rem;"></div>

docs/implementation_details.md

@@ -1,17 +1,73 @@
-# Vector Institute Reference Implementation Catalog
-
-<div class="catalog-header" markdown>
-Welcome to the Vector Institute Reference Implementation Catalog!
-The catalog is a curated collection of high quality implementations
-developed by researchers and engineers at the Vector Institute. This catalog provides
-access to repositories that demonstrate state-of-the-art techniques across a wide
-range of AI domains.
+---
+hide:
+  - navigation
+  - toc
+---
+
+<!-- Hero section with background image -->
+<div class="hero-section" markdown>
+  <div class="hero-content">
+    <h1></h1>
+    <p>A curated collection of high-quality AI implementations developed by researchers and engineers at the Vector Institute</p>
+    <a href="#browse-implementations-by-year" class="md-button md-button--primary">Browse Implementations</a>
+    <a href="https://github.com/VectorInstitute/reference-implementation-catalog" class="md-button md-button--primary">View on GitHub</a>
+  </div>
 </div>
 
-<div class="catalog-stats">
-  <div class="stat">
-    <div class="stat-number">100+</div>
+<!-- Custom styling for the hero section -->
 <style>
+.hero-section {
+  position: relative;
+  padding: 5rem 4rem;
+  text-align: center;
+  color: white;
+  background-color: var(--md-primary-fg-color);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('assets/splash.png');
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0; /* Remove margins */
+  padding: 0;
+  width: 100vw; /* Full viewport width */
+  max-width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  min-height: 70vh;
+}
+
+.hero-content {
+  max-width: 800px;
+  z-index: 10;
+}
+
+.hero-content h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: #ffffff;
+  font-family: 'Roboto', sans-serif;
+}
+
+.hero-content p {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.4;
+  color: #f8f8f8;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+}
+
 .dataset-tag {
   display: inline-block;
   background-color: #6a5acd;
@@ -26,6 +82,9 @@ range of AI domains.
 }
 </style>
 
+<div class="catalog-stats">
+  <div class="stat">
+    <div class="stat-number">100+</div>
     <div class="stat-label">Reference Implementations</div>
   </div>
   <div class="stat">
@@ -456,4 +515,3 @@ range of AI domains.
     </div>
 
     </div>
-

docs/index.md

@@ -1,8 +1,8 @@
 /* Vector brand colors */
 [data-md-color-primary="vector"] {
-  --md-primary-fg-color: #eb088a;
-  --md-primary-fg-color--light: #f252a5;
-  --md-primary-fg-color--dark: #b00068;
+  --md-primary-fg-color: #c30672; /* Darker pink */
+  --md-primary-fg-color--light: #d83a8e; /* Adjusted lighter shade */
+  --md-primary-fg-color--dark: #9a0058; /* Adjusted darker shade */
   --md-primary-bg-color: hsla(0, 0%, 100%, 1);
   --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
 }
@@ -52,6 +52,35 @@
   opacity: 1;
 }
 
+/* Hero button styling */
+.md-button {
+  display: inline-block;
+  padding: 0.625em 1.25em;
+  font-size: 0.85em;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  border-radius: 0.25em;
+  transition: all 0.25s;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  cursor: pointer;
+  margin: 0.5em;
+}
+
+.md-button--primary {
+  background-color: var(--md-primary-fg-color);
+  border: 0.1em solid var(--md-primary-fg-color);
+  color: var(--md-primary-bg-color);
+}
+
+.md-button:hover {
+  background-color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+  color: var(--md-primary-bg-color);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,.3);
+}
+
 /* Make the inner footer grid elements distribute evenly */
 .md-footer-meta__inner {
   display: flex;
@@ -259,18 +288,40 @@
 .md-content {
   max-width: 100% !important;
   width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow-x: hidden !important;
 }
 
 .md-content__inner {
-  margin: 0 auto !important;
-  padding: 0 1rem !important;
+  margin: 0 !important;
+  padding: 0 !important;
   max-width: 100% !important;
   width: 100% !important;
+  overflow-x: hidden !important;
+}
+
+/* Add padding to main content area, except for the hero section */
+.md-content__inner > *:not(.hero-section):not(style) {
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
 }
 
 .md-grid {
   max-width: 100% !important;
   width: 100% !important;
+  margin: 0 !important;
+}
+
+/* Override any max-width restriction */
+.md-main {
+  max-width: 100% !important;
+  width: 100vw !important;
+  overflow-x: hidden !important;
+}
+
+body {
+  overflow-x: hidden !important;
 }
 
 /* Overwrite any container width limitations */
@@ -350,7 +401,8 @@
 
 /* Header logo styling */
 .md-header__button.md-logo img {
-  height: 2rem;
+  height: 1.8rem;
   width: auto;
-  opacity: 0.9;
+  opacity: 1;
+  padding: 0.2rem;
 }

docs/stylesheets/extra.css

@@ -54,9 +54,13 @@ theme:
     - toc.follow
     - navigation.expand
     - header.autohide
+    - navigation.instant.progress
+    - navigation.path
+    - navigation.prune
+    - content.tabs.link
   icon:
     repo: fontawesome/brands/github
-  logo: assets/reference-implementations-logo.png
+  logo: assets/vector-logo.svg
   logo_footer: assets/vector-logo.svg
   name: material
   palette: