From 0cd7216c467390befa6a69ef91a1bfae23ff4c6f Mon Sep 17 00:00:00 2001 From: Manu Salmeron Date: Tue, 14 Nov 2023 09:33:15 -0300 Subject: [PATCH] Newsletter Component Update --- src/components/Shared/Hero/Hero.module.scss | 24 +- src/components/Shared/Hero/index.tsx | 1 + .../NewsletterFormComponent.module.scss | 31 +- .../Shared/NewsletterFormComponent/index.tsx | 307 +++++++++--------- src/pages/index.tsx | 9 + src/stylesheets/_global.scss | 24 +- 6 files changed, 202 insertions(+), 194 deletions(-) diff --git a/src/components/Shared/Hero/Hero.module.scss b/src/components/Shared/Hero/Hero.module.scss index 6b168e0..864e73e 100644 --- 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 index b7e245d..0d8d0fb 100644 --- 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 (
{background_image && } diff --git a/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss b/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss index cbd1e9c..76689f4 100644 --- a/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss +++ b/src/components/Shared/NewsletterFormComponent/NewsletterFormComponent.module.scss @@ -2,6 +2,7 @@ .newsletterContainer { position: relative; + background: var(--casperBlack); &::after { position: absolute; content: ""; @@ -9,35 +10,27 @@ 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; diff --git a/src/components/Shared/NewsletterFormComponent/index.tsx b/src/components/Shared/NewsletterFormComponent/index.tsx index 3142c3f..8a62e3e 100644 --- a/src/components/Shared/NewsletterFormComponent/index.tsx +++ b/src/components/Shared/NewsletterFormComponent/index.tsx @@ -3,7 +3,7 @@ import * as styles from "./NewsletterFormComponent.module.scss"; import Select from "react-select"; import { icons } from "../../../svg/Icons"; import Section from "../Section"; -import { StaticImage } from "gatsby-plugin-image"; +import { GatsbyImage, IGatsbyImageData, StaticImage } from "gatsby-plugin-image"; export default function NewsletterFormComponent({ newsletterData }: any) { const [countries, setCountries] = useState([]); @@ -15,6 +15,8 @@ export default function NewsletterFormComponent({ newsletterData }: any) { const [submitError, setSubmitError] = useState(""); const [submitSuccess, setSubmitSuccess] = useState(""); + const backgroundImage = newsletterData.background_image?.imageFile?.childImageSharp?.gatsbyImageData; + useEffect(() => { const getData = async () => { const res = await fetch(`${process.env.GATSBY_DIRECTUS_URL}/newsletter/landing`); @@ -185,167 +187,182 @@ export default function NewsletterFormComponent({ newsletterData }: any) { if (e.key != "Enter") return; handleAgreeChange(); } + return ( -
-
+
- {submitSuccess && ( -
-
-
-
-

{submitSuccess}

+ {backgroundImage && ( +
+ {" "} + +
+ )} +
+ {submitSuccess && ( +
+
+
+
+

{submitSuccess}

+
-
- )} - {!submitSuccess && newsletterData && ( -
-
-
-
- {submitError && ( -
- {icons.error} -

{submitError}

-
- )} - -
- - - {emailError && ( - + )} + {!submitSuccess && newsletterData && ( +
+
+
+ + {submitError && ( +
+ {icons.error} +

{submitError}

+
)} -
-
- - - {firstNameError && ( - - )} -
+
+ + + {emailError && ( + + )} +
- {renderSelect({ - label: newsletterData.i_am_label, - options: iamOptions, - isMulti: false, - key: "i_am_label", - required: true, - defaultError: "I am is required" - })} +
+ + + {firstNameError && ( + + )} +
- {renderSelect({ - label: newsletterData.country_label, - options: countries, - isMulti: false, - key: "country_label", - required: true, - defaultError: "Country is required" - })} + {renderSelect({ + label: newsletterData.i_am_label, + options: iamOptions, + isMulti: false, + key: "i_am_label", + required: true, + defaultError: "I am is required" + })} - {renderSelect({ - label: newsletterData.preferred_language_label, - options: languageOptions, - isMulti: true, - key: "preferred_language_label", - required: false - })} + {renderSelect({ + label: newsletterData.country_label, + options: countries, + isMulti: false, + key: "country_label", + required: true, + defaultError: "Country is required" + })} - {renderSelect({ - label: newsletterData.blockchain_familiarity_label, - options: blockchainOptions, - isMulti: false, - key: "blockchain_familiarity_label", - required: false - })} + {renderSelect({ + label: newsletterData.preferred_language_label, + options: languageOptions, + isMulti: true, + key: "preferred_language_label", + required: false + })} - {renderSelect({ - label: newsletterData.interests_label, - options: interestsOptions, - isMulti: true, - key: "interests_label", - required: false - })} + {renderSelect({ + label: newsletterData.blockchain_familiarity_label, + options: blockchainOptions, + isMulti: false, + key: "blockchain_familiarity_label", + required: false + })} -
-
- - + {renderSelect({ + label: newsletterData.interests_label, + options: interestsOptions, + isMulti: true, + key: "interests_label", + required: false + })} - {newsletterData.agree_label} -
- {agreeError && ( - - )} -
+
+
+ + -
-
-
-
- -
- + {agreeError && ( + + )} +
+ +
+
+
+
+ +
+ +
-
- )} -
- - {" "} -
-
-
+ )} + {!backgroundImage && ( +
+ + +
+ )} +
+ + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 35eb8a3..0ca1b69 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -132,6 +132,15 @@ export const query = graphql` preferred_language_label blockchain_familiarity_label interests_label + gradient + background_image { + id + imageFile { + childImageSharp { + gatsbyImageData + } + } + } } } } diff --git a/src/stylesheets/_global.scss b/src/stylesheets/_global.scss index f29935c..3050d6d 100644 --- a/src/stylesheets/_global.scss +++ b/src/stylesheets/_global.scss @@ -214,6 +214,14 @@ a { --gradient: 28deg, #2a5208 0%, #002008 52.6%, #000 89.06%, #000 97.4%; @include mixins.gradient_before(linear-gradient(53.9deg, #53e075 -0.61%, #a2eeb5 12.89%, #f4f4f4 51.69%)); } + &.variant9 { + --gradient: 94.07deg, rgba(159, 44, 155, 0.8) 2.67%, rgb(0 9 148 / 70%) 29.84%, #000000 84.6%, #000000 92.52%; + @include mixins.gradient_before(linear-gradient(94deg, rgba(246, 34, 230, 0.45) 9.62%, rgba(67, 79, 242, 0.65) 52.95%, #fff 95.9%)); + } + &.variant10 { + --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%; + @include mixins.gradient_before(linear-gradient(146.71deg, #e387e0db 0.43%, #747acde6 40.97%, #f4f4f4d4 85.81%, #f4f4f478 94.61%)); + } } // Color @@ -291,7 +299,13 @@ body.light { opacity: 1; } } - + .variant9 { + &[class*="Hero"] { + &::after { + opacity: 0; + } + } + } p { strong { --casperYellow: var(--casperBlue); @@ -551,13 +565,7 @@ body.light { --mainColor: #bcfc07; } } - .variant9 { - &[class*="Hero"] { - &::after { - opacity: 0; - } - } - } + @media (max-width: 996px) { [class*="NavBarDropdown"] { border: none !important;