[AV-77311] New Landing Page UI Bundle Updates

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,267 @@
   box-shadow: 0 0 15px -5px #ccc;
 }
 
+/* CSS for redesigned Capella Landing Page */
+
+/* Adjusting spacing gutters around the content */
+@media screen and (min-width: 769px) {
+  main.capella-article {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    margin: 0 auto;
+    max-width: clamp(55em, 60%, var(--width-page-area));
+  }
+}
+
+/* CSS for top section: H1, H2, and Capella Stars image */
+.doc.landing-page-capella .top-row {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  margin-top: -1rem;
+}
+
+.doc.landing-page-capella .top-row > .positioned-image {
+  flex-direction: row;
+  width: 35%;
+  min-width: 300px;
+  height: auto;
+  position: relative;
+  margin-top: -2.5rem; /* Adjust to position image right below the div */
+  margin-left: 1rem; /* Adjust to position image to the right of the div */
+}
+
+.doc.landing-page-capella .top-row > .top-row-text-container {
+  flex-direction: column;
+  padding-right: 1rem;
+  position: relative;
+}
+
+.doc.landing-page-capella .top-row > .top-row-text-container > h1 {
+  font-weight: 600;
+  margin-top: 1rem;
+}
+
+/* Adjusted CSS for Tabbed "Ten Minutes" Content */
+.doc.landing-page-capella .tabs {
+  margin: 2rem 0 2rem 0;
+  width: 80%;
+}
+
+.doc.landing-page-capella .tabs .tablist > ul li {
+  align-content: space-around;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-right: 1rem;
+}
+
+.doc.landing-page-capella .tablist.ulist {
+  display: flex;
+  justify-content: center;
+}
+
+.doc.landing-page-capella .tabpanel {
+  display: flex;
+  padding: 2em 1.25em;
+}
+
+.doc.landing-page-capella .tabpanel > .text-tabs-container {
+  flex-direction: column;
+  padding: 2rem 4rem 2rem 1rem;
+  width: 50%;
+}
+
+.doc.landing-page-capella .tabpanel > .text-tabs-container > .paragraph > p > a {
+  font-weight: var(--weight-semibold);
+}
+
+.doc.landing-page-capella .tabpanel > .tabs-image {
+  width: 50%;
+}
+
+/* CSS for How Do You Want To Start Building Today? section */
+.doc.landing-page-capella .centered > h2 {
+  text-align: center;
+  margin-top: 4rem;
+}
+
+.doc.landing-page-capella .card-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 20px auto;
+}
+
+.doc.landing-page-capella .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;
+}
+
+.doc.landing-page-capella .card-box:hover {
+  transition: box-shadow 0.3s ease-in-out;
+  box-shadow: 5px 10px 29.48px 0 rgba(0, 0, 0, 0.4);
+}
+
+.doc.landing-page-capella .card-box > .svg-inline--fa {
+  color: var(--color-brand-red);
+  font-size: 2em;
+  margin-bottom: 0.5em;
+}
+
+.doc.landing-page-capella .card-box > h3 {
+  margin-block-start: 0;
+  padding-left: 1.5em;
+  text-align: left;
+}
+
+.doc.landing-page-capella .card-box > p {
+  margin-top: 1rem;
+}
+
+.doc.landing-page-capella .card-box > div.ulist > ul li {
+  list-style-type: disc;
+  color: var(--color-link);
+  font-weight: var(--weight-semibold);
+}
+
+.doc.landing-page-capella .card-box > div.ulist > ul li:hover {
+  text-decoration: underline;
+}
+
+.doc.landing-page-capella .ending-image {
+  width: 100%; /* Adjust as needed */
+  height: auto;
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  top: 150px; /* Adjust this value to control the amount of overlap */
+  z-index: 1;
+}
+
+/* Screen size considerations */
+
+@media screen and (min-width: 340px) and (max-width: 499px) {
+  .doc.landing-page-capella .top-row > .positioned-image {
+    min-width: 130px;
+    margin-top: -37.5rem; /* Adjust to position image right below the div */
+  }
+
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel {
+    display: block;
+  }
+
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 250px;
+  }
+
+  .doc.landing-page-capella .card-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 500px) and (max-width: 700px) {
+  .doc.landing-page-capella .top-row > .positioned-image {
+    min-width: 130px;
+    margin-top: -29rem; /* Adjust to position image right below the div */
+  }
+
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel {
+    display: block;
+  }
+
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 275px;
+  }
+
+  .doc.landing-page-capella .card-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: 701px) and (max-width: 1699px) {
+  .doc.landing-page-capella .top-row > .positioned-image {
+    min-width: 150px;
+    margin-top: -15rem; /* Adjust to position image right below the div */
+  }
+
+  .doc.landing-page-capella .tabs {
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel {
+    display: block;
+    padding: 2em 1.25em;
+  }
+
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 50%;
+  }
+
+  .doc.landing-page-capella .card-container {
+    width: 100%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 46%;
+  }
+}
+
+@media screen and (min-width: 1700px) {
+  .doc.landing-page-capella .tabpanel > .text-tabs-container {
+    width: 50%;
+  }
+
+  .doc.landing-page-capella .tabpanel > .tabs-image {
+    width: 50%;
+  }
+
+  .doc.landing-page-capella .card-box {
+    width: 30%;
+  }
+}
+
 /* CSS for nav filter */
 .nav.tutorials-filter .nav-menu {
   padding: 20px;

src/layouts/landing-page-capella.hbs

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+{{> head-first}}
+<title>{{{detag (or page.title 'landing page')}}}{{#if site.title}} | {{{site.title}}}{{/if}}</title>
+{{> head-last}}
+</head>
+<body class="landing-page">
+{{> header}}
+{{> body-landing-page-capella}}
+{{> footer}}
+</body>
+</html>

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="capella-article" data-ceiling="topbar">
+<article class="doc landing-page-capella">
+{{{page.contents}}}
+</article>
+</main>
+</div>