From 341f0c54ed7faabbdd9a7e6c070028d259d94c83 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Tue, 25 Feb 2025 16:41:02 +0000
Subject: [PATCH] Merged in fix/SW-1733-start-page-enhancements-and-fixes (pull
 request #1415)

Fix/SW-1733 start page enhancements and fixes

* fix: simplify carousel navigation and grid layout styling and fix padding issue

* refactor(SW-1733): replace Preamble with Body component in JoinScandicFriends

* refactor(SW-1733): update FullWidthCampaign button width styling

* feat(SW-1733): Add gradient overlay to FullWidthCampaign component

* refactor(SW-1733): Simplify FullWidthCampaign button props

* refactor(SW-1733): Remove redundant button wrapper divs in FullWidthCampaign

* refactor(SW-1733): Adjust FullWidthCampaign button wrapper min-width responsively


Approved-by: Christian Andolf
---
 .../CarouselCards/carouselCards.module.css    |  2 +-
 .../fullWidthCampaign.module.css              | 26 +++++++++++++++++++
 components/Blocks/FullWidthCampaign/index.tsx | 11 +++++++-
 .../Blocks/JoinScandicFriends/index.tsx       |  3 +--
 .../joinScandicFriends.module.css             |  1 -
 components/Carousel/carousel.module.css       |  8 +++---
 6 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/components/Blocks/CarouselCards/carouselCards.module.css b/components/Blocks/CarouselCards/carouselCards.module.css
index ce54e5fe4..73175b9ad 100644
--- a/components/Blocks/CarouselCards/carouselCards.module.css
+++ b/components/Blocks/CarouselCards/carouselCards.module.css
@@ -1,3 +1,3 @@
 .navigationButton {
-  top: 30%;
+  top: 25%;
 }
diff --git a/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css b/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
index d67f53c63..7b332ad59 100644
--- a/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
+++ b/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
@@ -4,6 +4,20 @@
   height: 100vh;
 }
 
+.container::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.36) 50%,
+    rgba(0, 0, 0, 0.75) 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
 @media screen and (min-width: 768px) {
   .container {
     height: 880px;
@@ -21,6 +35,7 @@
   margin: 0 auto;
   gap: var(--Spacing-x1);
   padding: var(--Spacing-x4) var(--Spacing-x3);
+  z-index: 2;
 }
 
 .mainContent {
@@ -35,9 +50,20 @@
   gap: var(--Spacing-x1);
 }
 
+.buttonWrapper {
+  min-width: 180px;
+}
+
+@media screen and (max-width: 767px) {
+  .buttonWrapper:not(:only-child) {
+    min-width: 135px;
+  }
+}
+
 .image {
   max-width: 100%;
   height: 100%;
+  z-index: 0;
 }
 
 .scriptedText {
diff --git a/components/Blocks/FullWidthCampaign/index.tsx b/components/Blocks/FullWidthCampaign/index.tsx
index ff7ac7846..e4881c1ff 100644
--- a/components/Blocks/FullWidthCampaign/index.tsx
+++ b/components/Blocks/FullWidthCampaign/index.tsx
@@ -48,7 +48,14 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
           </Preamble>
           <div className={styles.buttons}>
             {content.has_primary_button ? (
-              <Button intent="inverted" size="small" theme="base" asChild>
+              <Button
+                intent="inverted"
+                size="small"
+                theme="base"
+                asChild
+                className={styles.buttonWrapper}
+                fullWidth
+              >
                 <Link
                   href={primary_button.href}
                   target={primary_button.openInNewTab ? "_blank" : undefined}
@@ -63,7 +70,9 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
                 intent="secondary"
                 size="small"
                 theme="primaryStrong"
+                className={styles.buttonWrapper}
                 asChild
+                fullWidth
               >
                 <Link
                   href={secondary_button.href}
diff --git a/components/Blocks/JoinScandicFriends/index.tsx b/components/Blocks/JoinScandicFriends/index.tsx
index b58a1020a..3fddc053d 100644
--- a/components/Blocks/JoinScandicFriends/index.tsx
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -6,7 +6,6 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./joinScandicFriends.module.css"
@@ -61,7 +60,7 @@ export default async function JoinScandicFriends({
             </header>
           ) : null}
 
-          <Preamble>{content.preamble}</Preamble>
+          <Body>{content.preamble}</Body>
 
           {show_usp && usp.length ? (
             <ul className={styles.usp}>
diff --git a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
index 0ec542e7a..3f0809b0a 100644
--- a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
+++ b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
@@ -78,7 +78,6 @@
 .usp li {
   display: flex;
   gap: var(--Spacing-x1);
-  padding-left: var(--Spacing-x1);
 }
 
 .usp li:before {
diff --git a/components/Carousel/carousel.module.css b/components/Carousel/carousel.module.css
index ea2f3cc05..ef10b75a9 100644
--- a/components/Carousel/carousel.module.css
+++ b/components/Carousel/carousel.module.css
@@ -34,11 +34,11 @@
 }
 
 .buttonPrev {
-  left: calc(-1 * var(--Spacing-x1));
+  left: -20px;
 }
 
 .buttonNext {
-  right: calc(-1 * var(--Spacing-x1));
+  right: -20px;
 }
 
 .prevIcon {
@@ -67,7 +67,7 @@
 
 @media (min-width: 768px) {
   .container {
-    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
+    grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
   }
 
   .button {
@@ -77,6 +77,6 @@
 
 @media (min-width: 1024px) {
   .container {
-    grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
+    grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
   }
 }