Newsletter Component Update

casper-network · Nov 14, 2023 · 0cd7216 · 0cd7216
1 parent 1ae5a95
commit 0cd7216
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 194 deletions.
diff --git a/src/components/Shared/Hero/Hero.module.scss b/src/components/Shared/Hero/Hero.module.scss
@@ -16,37 +16,17 @@
         right: 0;
         bottom: 0;
         left: 0;
-        background: linear-gradient(94.07deg, rgba(159, 44, 155, 0.8) 2.67%, rgb(0 9 148 / 70%) 29.84%, #000000 84.6%, #000000 92.52%);
+        background: linear-gradient(var(--gradient));
         transition: opacity 0.2s ease-in;
         z-index: -1;
         opacity: 1;
     }
 
-    &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(
-            94.07deg,
-            rgb(241 38 234 / 45%) 7.67%,
-            rgba(29, 42, 255, 0.46) 40.84%,
-            rgba(244, 244, 244, 0.5294117647) 84.6%,
-            rgba(255, 255, 255, 0.95) 92.52%
-        );
-
-        transition: opacity 0.2s ease-in;
-        z-index: 0;
-        opacity: 0;
-    }
-
     > [class*="gatsby-image-wrapper"] {
         width: 100%;
         height: 100%;
         position: absolute;
-        z-index: -1;
+        z-index: -2;
         object-fit: cover;
     }
 

diff --git a/src/components/Shared/Hero/index.tsx b/src/components/Shared/Hero/index.tsx
@@ -19,6 +19,7 @@ function Hero({ buttons, title, image, image_title, gradient, description, backg
         const regexForStripHTML = /<\/?[^>]+(>|$)/g;
         return text.replaceAll(regexForStripHTML, "");
     };
+
     return (
         <section className={`${styles.hero} gradient ${gradient} container`}>
             {background_image && <GatsbyImage image={background_image} alt={`Hero background`}></GatsbyImage>}

diff --git a/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss b/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss
@@ -2,42 +2,35 @@
 
 .newsletterContainer {
     position: relative;
+    background: var(--casperBlack);
     &::after {
         position: absolute;
         content: "";
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        background: linear-gradient(
-            146.71deg,
-            rgba(106, 35, 104, 1) 0.43%,
-            rgb(36 41 104 / 90%) 42.97%,
-            rgb(0, 0, 0) 85.81%,
-            rgb(0, 0, 0) 94.61%
-        );
+        background: linear-gradient(var(--gradient));
         transition: opacity 0.2s ease-in;
         z-index: 0;
         opacity: 1;
     }
-
-    &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(146.71deg, #e387e0db 0.43%, #747acde6 40.97%, #f4f4f4d4 85.81%, #f4f4f478 94.61%);
-        transition: opacity 0.2s ease-in;
-        z-index: 1;
-        opacity: 0;
+    .backgroundImage {
+        > [class*="gatsby-image-wrapper"] {
+            position: absolute;
+            z-index: -1;
+            height: 100%;
+            width: 100%;
+        }
     }
+
     section {
         background: none;
+        position: relative;
         .indexForm {
             z-index: 1;
         }
+
         .imgContainer {
             position: absolute;
             top: 0;