From 6ef5f7f85187d8e17aa0d51c0db4b5302fc12b8d Mon Sep 17 00:00:00 2001
From: Nagaraj Devendhiran <nagaraj.devendhiran@netcentric.biz>
Date: Thu, 29 Feb 2024 22:40:52 +0100
Subject: [PATCH 1/5] 28 - Style engine focus page

---
 scripts/aem.js     | 26 +++++++++++++++++
 scripts/scripts.js |  2 ++
 styles/styles.css  | 73 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 101 insertions(+)

diff --git a/scripts/aem.js b/scripts/aem.js
index d83079c..d263d23 100644
--- a/scripts/aem.js
+++ b/scripts/aem.js
@@ -21,6 +21,7 @@
  * @param {string} data.target subject of the checkpoint event,
  * for instance the href of a link, or a search term
  */
+
 function sampleRUM(checkpoint, data = {}) {
   sampleRUM.defer = sampleRUM.defer || [];
   const defer = (fnname) => {
@@ -633,6 +634,30 @@ function decorateBlocks(main) {
   main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
 }
 
+function decorateEngineFocusPage() {
+  const parentElement = document.querySelector('body.engine-focus .default-content-wrapper');
+  const engineFocusH1 = document.querySelector('body.engine-focus .default-content-wrapper > h1:first-child');
+
+  if (engineFocusH1) {
+    engineFocusH1.innerHTML = `Selected Spaceship: ${engineFocusH1.textContent}`;
+  }
+
+  if (parentElement) {
+    const groupElement = document.createElement('div');
+    const engineFocusH2 = parentElement.querySelector('h2');
+    const buttonSelect = document.createElement('button');
+    groupElement.classList.add('group');
+    buttonSelect.classList.add('btn-select');
+    buttonSelect.textContent = 'Select ';
+
+    const description = parentElement.querySelector('h2 + p');
+    groupElement.appendChild(engineFocusH2);
+    groupElement.appendChild(description);
+    groupElement.appendChild(buttonSelect);
+    parentElement.appendChild(groupElement);
+  }
+}
+
 function decorateGroups() {
   const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
   if (!parentElement) {
@@ -757,6 +782,7 @@ export {
   decorateTemplateAndTheme,
   decorateSpaceshipFocusPageH1,
   decorateGroups,
+  decorateEngineFocusPage,
   fetchPlaceholders,
   getMetadata,
   loadBlock,
diff --git a/scripts/scripts.js b/scripts/scripts.js
index b47729b..d69ebb2 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -13,6 +13,7 @@ import {
   loadBlocks,
   loadCSS,
   getMetadata,
+  decorateEngineFocusPage,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
@@ -127,6 +128,7 @@ export function decorateMain(main) {
   decorateBlocks(main);
   decorateGroups();
   decorateSpaceshipFocusPageH1();
+  decorateEngineFocusPage();
 }
 
 /**
diff --git a/styles/styles.css b/styles/styles.css
index a987dac..4b8a6be 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -10,6 +10,8 @@
   --text-color: black;
   --midnight-blue-color: #000048;
   --dark-blue: #2F78C4;
+  --dark-teal: #11C7CC;
+
 
   /* fonts */
   --body-font-family: "Gellix", "Gellix-fallback";
@@ -391,6 +393,77 @@ main .section.highlight {
   line-height: 26px;
   font-weight: 600;
 }
+
+body.engine-focus .section {
+  padding: 0;
+}
+
+body.engine-focus .default-content-wrapper { 
+  display: grid; 
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  height: 100%;
+  max-width: 100%;
+}
+
+body.engine-focus .default-content-wrapper h1 {
+  grid-row: 1 / 1;
+  grid-column: 1 / 2;
+  font-size: var(--paragraph-font-size);
+  line-height: 26px;
+  margin: 64px 102px 0 56px;
+}
+
+body.engine-focus .default-content-wrapper .group {
+  margin-right: 117px;
+  margin-left: 56px;
+  font-size: var(--paragraph-font-size);
+}
+
+body.engine-focus .default-content-wrapper .group h2 {
+  line-height: 26px;
+  font-size: var(--paragraph-font-size);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+body.engine-focus .default-content-wrapper .group h2 + p {
+  line-height: 27px;
+  margin-top: 30px;
+  margin-bottom: 35px;
+}
+
+body.engine-focus .default-content-wrapper .group .btn-select {
+  padding: 15px 45px 15px 25px;
+  border-radius: 100px;
+  background-color: var(--dark-teal);
+  line-height: 20px;
+  color: var(--midnight-blue-color);
+  font-size: var(--paragraph-font-size);
+  margin: 0;
+}
+
+body.engine-focus .default-content-wrapper .group .btn-select::after {
+  content: url('../app/arrow-right-bold.svg');
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  position: absolute;
+  padding-left: 5px;
+}
+/* stylelint-disable-next-line no-descending-specificity */
+body.engine-focus .default-content-wrapper h1 + p {
+  grid-row: 1 / 4;
+  grid-column: 2 / 3;
+  margin: 0;
+  height: 100vh;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+body.engine-focus .default-content-wrapper h1 + p img {
+  height: 100%;
+}
+
 /* stylelint-disable-next-line no-descending-specificity */
 p {
   font-size: var(--paragraph-font-size);

From 9c41fb404e37c1ca65ebaab5000be104d29c9cdb Mon Sep 17 00:00:00 2001
From: Nagaraj Devendhiran <nagaraj.devendhiran@netcentric.biz>
Date: Thu, 29 Feb 2024 23:08:16 +0100
Subject: [PATCH 2/5] 30 - Style interior and exterior focus page

---
 scripts/aem.js     | 40 +++++++++++++++++++++-------------------
 scripts/scripts.js |  6 ++++--
 styles/styles.css  | 40 ++++++++++++++++++++++++++++++----------
 3 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/scripts/aem.js b/scripts/aem.js
index d263d23..3623004 100644
--- a/scripts/aem.js
+++ b/scripts/aem.js
@@ -634,28 +634,30 @@ function decorateBlocks(main) {
   main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
 }
 
-function decorateEngineFocusPage() {
-  const parentElement = document.querySelector('body.engine-focus .default-content-wrapper');
-  const engineFocusH1 = document.querySelector('body.engine-focus .default-content-wrapper > h1:first-child');
+function decorateFocusPage(pageType) {
+  const parentElement = document.querySelector(`body.${pageType}-focus .default-content-wrapper`);
+  const focusH1 = document.querySelector(`body.${pageType}-focus .default-content-wrapper > h1:first-child`);
 
-  if (engineFocusH1) {
-    engineFocusH1.innerHTML = `Selected Spaceship: ${engineFocusH1.textContent}`;
+  if (!parentElement) {
+    return;
   }
 
-  if (parentElement) {
-    const groupElement = document.createElement('div');
-    const engineFocusH2 = parentElement.querySelector('h2');
-    const buttonSelect = document.createElement('button');
-    groupElement.classList.add('group');
-    buttonSelect.classList.add('btn-select');
-    buttonSelect.textContent = 'Select ';
-
-    const description = parentElement.querySelector('h2 + p');
-    groupElement.appendChild(engineFocusH2);
-    groupElement.appendChild(description);
-    groupElement.appendChild(buttonSelect);
-    parentElement.appendChild(groupElement);
+  if (focusH1) {
+    focusH1.innerHTML = `Selected Spaceship: ${focusH1.textContent}`;
   }
+
+  const groupElement = document.createElement('div');
+  const focusH2 = parentElement.querySelector('h2');
+  const buttonSelect = document.createElement('button');
+  groupElement.classList.add('group');
+  buttonSelect.classList.add('btn-select');
+  buttonSelect.textContent = 'Select ';
+
+  const description = parentElement.querySelector('h2 + p');
+  groupElement.appendChild(focusH2);
+  groupElement.appendChild(description);
+  groupElement.appendChild(buttonSelect);
+  parentElement.appendChild(groupElement);
 }
 
 function decorateGroups() {
@@ -782,7 +784,7 @@ export {
   decorateTemplateAndTheme,
   decorateSpaceshipFocusPageH1,
   decorateGroups,
-  decorateEngineFocusPage,
+  decorateFocusPage,
   fetchPlaceholders,
   getMetadata,
   loadBlock,
diff --git a/scripts/scripts.js b/scripts/scripts.js
index d69ebb2..2310ec7 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -13,7 +13,7 @@ import {
   loadBlocks,
   loadCSS,
   getMetadata,
-  decorateEngineFocusPage,
+  decorateFocusPage,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
@@ -128,7 +128,9 @@ export function decorateMain(main) {
   decorateBlocks(main);
   decorateGroups();
   decorateSpaceshipFocusPageH1();
-  decorateEngineFocusPage();
+  decorateFocusPage('engine');
+  decorateFocusPage('interior');
+  decorateFocusPage('accessory');
 }
 
 /**
diff --git a/styles/styles.css b/styles/styles.css
index 4b8a6be..fffec14 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -394,11 +394,15 @@ main .section.highlight {
   font-weight: 600;
 }
 
-body.engine-focus .section {
+body.engine-focus .section,
+body.interior-focus .section,
+body.accessory-focus .section {
   padding: 0;
 }
 
-body.engine-focus .default-content-wrapper { 
+body.engine-focus .default-content-wrapper,
+body.interior-focus .default-content-wrapper,
+body.accessory-focus .default-content-wrapper { 
   display: grid; 
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
@@ -407,7 +411,9 @@ body.engine-focus .default-content-wrapper {
   max-width: 100%;
 }
 
-body.engine-focus .default-content-wrapper h1 {
+body.engine-focus .default-content-wrapper h1,
+body.interior-focus .default-content-wrapper h1,
+body.accessory-focus .default-content-wrapper h1 {
   grid-row: 1 / 1;
   grid-column: 1 / 2;
   font-size: var(--paragraph-font-size);
@@ -415,25 +421,33 @@ body.engine-focus .default-content-wrapper h1 {
   margin: 64px 102px 0 56px;
 }
 
-body.engine-focus .default-content-wrapper .group {
+body.engine-focus .default-content-wrapper .group,
+body.interior-focus .default-content-wrapper .group,
+body.accessory-focus .default-content-wrapper .group {
   margin-right: 117px;
   margin-left: 56px;
   font-size: var(--paragraph-font-size);
 }
 
-body.engine-focus .default-content-wrapper .group h2 {
+body.engine-focus .default-content-wrapper .group h2,
+body.interior-focus .default-content-wrapper .group h2,
+body.accessory-focus .default-content-wrapper .group h2 {
   line-height: 26px;
   font-size: var(--paragraph-font-size);
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper .group h2 + p {
+body.engine-focus .default-content-wrapper .group h2 + p,
+body.interior-focus .default-content-wrapper .group h2 + p,
+body.accessory-focus .default-content-wrapper .group h2 + p {
   line-height: 27px;
   margin-top: 30px;
   margin-bottom: 35px;
 }
 
-body.engine-focus .default-content-wrapper .group .btn-select {
+body.engine-focus .default-content-wrapper .group .btn-select,
+body.interior-focus .default-content-wrapper .group .btn-select,
+body.accessory-focus .default-content-wrapper .group .btn-select {
   padding: 15px 45px 15px 25px;
   border-radius: 100px;
   background-color: var(--dark-teal);
@@ -443,7 +457,9 @@ body.engine-focus .default-content-wrapper .group .btn-select {
   margin: 0;
 }
 
-body.engine-focus .default-content-wrapper .group .btn-select::after {
+body.engine-focus .default-content-wrapper .group .btn-select::after,
+body.interior-focus .default-content-wrapper .group .btn-select::after,
+body.accessory-focus .default-content-wrapper .group .btn-select::after {
   content: url('../app/arrow-right-bold.svg');
   width: 20px;
   height: 20px;
@@ -452,7 +468,9 @@ body.engine-focus .default-content-wrapper .group .btn-select::after {
   padding-left: 5px;
 }
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper h1 + p {
+body.engine-focus .default-content-wrapper h1 + p,
+body.interior-focus .default-content-wrapper h1 + p,
+body.accessory-focus .default-content-wrapper h1 + p {
   grid-row: 1 / 4;
   grid-column: 2 / 3;
   margin: 0;
@@ -460,7 +478,9 @@ body.engine-focus .default-content-wrapper h1 + p {
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper h1 + p img {
+body.engine-focus .default-content-wrapper h1 + p img,
+body.interior-focus .default-content-wrapper h1 + p img,
+body.accessory-focus .default-content-wrapper h1 + p img {
   height: 100%;
 }
 

From 347589448698100cf0814547d14bf06032ba5264 Mon Sep 17 00:00:00 2001
From: Nagaraj Devendhiran <nagaraj.devendhiran@netcentric.biz>
Date: Fri, 1 Mar 2024 14:09:35 +0100
Subject: [PATCH 3/5] 30 - Updated focus page with image styling

---
 scripts/aem.js    | 20 ++++++------
 styles/styles.css | 78 +++++++++++++++++++----------------------------
 2 files changed, 41 insertions(+), 57 deletions(-)

diff --git a/scripts/aem.js b/scripts/aem.js
index 3623004..ec711b7 100644
--- a/scripts/aem.js
+++ b/scripts/aem.js
@@ -642,21 +642,21 @@ function decorateFocusPage(pageType) {
     return;
   }
 
+  const groupElement = document.createElement('div');
+  const subGroupElement = document.createElement('div');
+  const focusH2 = parentElement.querySelector('h2');
+  const description = parentElement.querySelector('h2 + p');
+
   if (focusH1) {
     focusH1.innerHTML = `Selected Spaceship: ${focusH1.textContent}`;
   }
 
-  const groupElement = document.createElement('div');
-  const focusH2 = parentElement.querySelector('h2');
-  const buttonSelect = document.createElement('button');
   groupElement.classList.add('group');
-  buttonSelect.classList.add('btn-select');
-  buttonSelect.textContent = 'Select ';
-
-  const description = parentElement.querySelector('h2 + p');
-  groupElement.appendChild(focusH2);
-  groupElement.appendChild(description);
-  groupElement.appendChild(buttonSelect);
+  subGroupElement.classList.add('sub-group');
+  groupElement.appendChild(focusH1);
+  subGroupElement.appendChild(focusH2);
+  subGroupElement.appendChild(description);
+  groupElement.appendChild(subGroupElement);
   parentElement.appendChild(groupElement);
 }
 
diff --git a/styles/styles.css b/styles/styles.css
index fffec14..849ae3a 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -403,85 +403,69 @@ body.accessory-focus .section {
 body.engine-focus .default-content-wrapper,
 body.interior-focus .default-content-wrapper,
 body.accessory-focus .default-content-wrapper { 
-  display: grid; 
-  grid-template-rows: 1fr 1fr;
-  grid-template-columns: 1fr 1fr;
-  gap: 0;
+  display: flex; 
   height: 100%;
   max-width: 100%;
+  flex-direction: row-reverse;
 }
 
 body.engine-focus .default-content-wrapper h1,
 body.interior-focus .default-content-wrapper h1,
 body.accessory-focus .default-content-wrapper h1 {
-  grid-row: 1 / 1;
-  grid-column: 1 / 2;
   font-size: var(--paragraph-font-size);
   line-height: 26px;
-  margin: 64px 102px 0 56px;
 }
 
 body.engine-focus .default-content-wrapper .group,
 body.interior-focus .default-content-wrapper .group,
 body.accessory-focus .default-content-wrapper .group {
-  margin-right: 117px;
-  margin-left: 56px;
   font-size: var(--paragraph-font-size);
+  display: flex;
+  justify-content: space-between;
+  margin: 64px 102px 40px 56px;
+  width: 50%;
+  flex-direction: column;
+}
+
+body.engine-focus .default-content-wrapper .sub-group,
+body.interior-focus .default-content-wrapper .sub-group,
+body.accessory-focus .default-content-wrapper .sub-group {
+  font-size: var(--paragraph-font-size);
+  display: flex;
+  flex-direction: column;
 }
 
-body.engine-focus .default-content-wrapper .group h2,
-body.interior-focus .default-content-wrapper .group h2,
-body.accessory-focus .default-content-wrapper .group h2 {
+body.engine-focus .default-content-wrapper .sub-group h2,
+body.interior-focus .default-content-wrapper .sub-group h2,
+body.accessory-focus .default-content-wrapper .sub-group h2 {
   line-height: 26px;
+  margin: 0;
   font-size: var(--paragraph-font-size);
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper .group h2 + p,
-body.interior-focus .default-content-wrapper .group h2 + p,
-body.accessory-focus .default-content-wrapper .group h2 + p {
+body.engine-focus .default-content-wrapper .sub-group h2 + p,
+body.interior-focus .default-content-wrapper .sub-group h2 + p,
+body.accessory-focus .default-content-wrapper .sub-group h2 + p {
   line-height: 27px;
   margin-top: 30px;
-  margin-bottom: 35px;
-}
-
-body.engine-focus .default-content-wrapper .group .btn-select,
-body.interior-focus .default-content-wrapper .group .btn-select,
-body.accessory-focus .default-content-wrapper .group .btn-select {
-  padding: 15px 45px 15px 25px;
-  border-radius: 100px;
-  background-color: var(--dark-teal);
-  line-height: 20px;
-  color: var(--midnight-blue-color);
-  font-size: var(--paragraph-font-size);
-  margin: 0;
 }
 
-body.engine-focus .default-content-wrapper .group .btn-select::after,
-body.interior-focus .default-content-wrapper .group .btn-select::after,
-body.accessory-focus .default-content-wrapper .group .btn-select::after {
-  content: url('../app/arrow-right-bold.svg');
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  position: absolute;
-  padding-left: 5px;
-}
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper h1 + p,
-body.interior-focus .default-content-wrapper h1 + p,
-body.accessory-focus .default-content-wrapper h1 + p {
-  grid-row: 1 / 4;
-  grid-column: 2 / 3;
+body.engine-focus .default-content-wrapper p:first-child,
+body.interior-focus .default-content-wrapper p:first-child,
+body.accessory-focus .default-content-wrapper p:first-child {
   margin: 0;
   height: 100vh;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper h1 + p img,
-body.interior-focus .default-content-wrapper h1 + p img,
-body.accessory-focus .default-content-wrapper h1 + p img {
-  height: 100%;
+body.engine-focus .default-content-wrapper p:first-child img,
+body.interior-focus .default-content-wrapper p:first-child img,
+body.accessory-focus .default-content-wrapper p:first-child img {
+  height: 100vh;
+  object-fit: cover;
+  object-position: 100% center;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */

From cfcb39a6320084c8f3f2c59e53da35e453f6a8a9 Mon Sep 17 00:00:00 2001
From: Nagaraj Devendhiran <nagaraj.devendhiran@netcentric.biz>
Date: Fri, 1 Mar 2024 14:54:26 +0100
Subject: [PATCH 4/5] 30 - make image position center

---
 styles/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index 849ae3a..1a9398a 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -422,7 +422,7 @@ body.accessory-focus .default-content-wrapper .group {
   font-size: var(--paragraph-font-size);
   display: flex;
   justify-content: space-between;
-  margin: 64px 102px 40px 56px;
+  padding: 64px 102px 40px 56px;
   width: 50%;
   flex-direction: column;
 }
@@ -457,6 +457,7 @@ body.interior-focus .default-content-wrapper p:first-child,
 body.accessory-focus .default-content-wrapper p:first-child {
   margin: 0;
   height: 100vh;
+  width: 50%;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
@@ -465,7 +466,6 @@ body.interior-focus .default-content-wrapper p:first-child img,
 body.accessory-focus .default-content-wrapper p:first-child img {
   height: 100vh;
   object-fit: cover;
-  object-position: 100% center;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */

From 1220b03199f930ee5a9a56d6a242a2e1577d4aa7 Mon Sep 17 00:00:00 2001
From: Nagaraj Devendhiran <nagaraj.devendhiran@netcentric.biz>
Date: Fri, 1 Mar 2024 14:57:26 +0100
Subject: [PATCH 5/5] 30 - update style

---
 styles/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles/styles.css b/styles/styles.css
index 1a9398a..ac91397 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -425,6 +425,7 @@ body.accessory-focus .default-content-wrapper .group {
   padding: 64px 102px 40px 56px;
   width: 50%;
   flex-direction: column;
+  box-sizing: border-box;
 }
 
 body.engine-focus .default-content-wrapper .sub-group,