[AV-77311] Updating landing-page.css to add new CSS for new landing page style.

Added new collapse.js to try and add collapsible sections to landing page.

Created a new body-landing-page-capella.hbs to allow for any layout changes

Updated footer-scripts.hbs to try and inject new collapse.js but it's not working atm.

Author: sarahlwelton

src/css/landing-page.css

@@ -173,7 +173,7 @@
 }
 
 .doc.landing-page-doc img {
-  max-width: 100%;
+  overflow: visible;
 }
 
 .doc.landing-page-doc ul {
@@ -256,6 +256,85 @@
   box-shadow: 0 0 15px -5px #ccc;
 }
 
+/* CSS for card-style landing page */
+
+.centered > h2 {
+  text-align: center;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 80%;
+  margin: 20px auto;
+}
+
+.card-box {
+  width: 30%;
+  margin: 1.66%;
+  padding: 2rem;
+  background-color: white;
+  border-bottom: 20px solid var(--color-brand-orange);
+  box-shadow: 0 0 29.48px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8.8px;
+}
+
+.card-box > .fa-regular {
+  color: var(--color-brand-red);
+}
+
+.card-box > h3 {
+  margin-block-start: 0;
+  padding-left: 0;
+  text-align: center;
+}
+
+.card-box > div.ulist > ul li {
+  list-style-type: disc;
+  color: var(--color-link);
+  font-weight: var(--weight-semibold);
+}
+
+.card-box > div.ulist > ul li:hover {
+  text-decoration: underline;
+}
+
+.ten-minutes-container {
+  display: flex;
+}
+
+.ten-minutes-container > .collapsible-section {
+  flex: 1;
+}
+
+.ten-minutes-container > .collapsible-section > .collapsible {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.ten-minutes-container > .collapsible-section > .collapsible h3 {
+  margin: 0;
+}
+
+.ten-minutes-container > .collapsible-section > .collapsible .content {
+  display: none;
+  margin-top: 10px;
+}
+
+.image-section {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-section img {
+  max-width: 100%;
+  height: auto;
+}
+
 /* CSS for nav filter */
 .nav.tutorials-filter .nav-menu {
   padding: 20px;

src/helpers/collapse.js

@@ -0,0 +1,24 @@
+function toggleCollapse (index) {
+  const collapsibles = document.querySelectorAll('.collapsible')
+  const images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg']
+  const imageElement = document.getElementById('image')
+
+  collapsibles.forEach((collapsible, i) => {
+    const content = collapsible.querySelector('.content')
+    if (i === index) {
+      content.style.display = content.style.display === 'block' ? 'none' : 'block'
+      imageElement.src = images[index]
+    } else {
+      content.style.display = 'none'
+    }
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const collapsibles = document.querySelectorAll('.collapsible')
+  collapsibles.forEach((collapsible, index) => {
+    collapsible.addEventListener('click', () => {
+      toggleCollapse(index)
+    })
+  })
+})

src/partials/body-landing-page-capella.hbs

@@ -0,0 +1,18 @@
+<div class="body container">
+{{#if (eq (nav-mode) 'client')}}
+{{#with (nav-group-for-page (nav-groups))}}
+{{#if ./components.length}}
+<aside class="nav left-sidebar">
+  <div class="nav-container">
+    <a href="#" class="menu-expand-toggle"><span>Navigation</span><i class="fas fa-times-circle"></i><i class="fas fa-chevron-circle-left"></i></a>
+  </div>
+</aside>
+{{/if}}
+{{/with}}
+{{/if}}
+<main class="article" data-ceiling="topbar">
+<article class="doc landing-page-doc">
+{{{page.contents}}}
+</article>
+</main>
+</div>

src/partials/footer-scripts.hbs

@@ -49,3 +49,6 @@ MathJax.Hub.Register.StartupHook("AsciiMath Jax Ready", function () {
 {{#if (eq env.SHOW_FEEDBACK_BUTTON 'true')}}
 <script async id="feedback-script" src="{{{uiRootPath}}}/js/vendor/feedback.js?v=1" data-collector-id="{{#if env.JIRA_COLLECTOR_ID}}{{env.JIRA_COLLECTOR_ID}}{{else}}709818cb{{/if}}"></script>
 {{/if}}
+{{#if (eq page.layout 'landing-page-capella')}}
+<script async id="collapsible" src="{{{uiRootPath}}}/js/collapse.js"></script>
+{{/if}}