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

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 {