Merge pull request #463 from MetaMask/metamask-card-eu-giveaway

Prod deploy

src/components/Contentful/ContentfulLayoutHeader.js

@@ -14,6 +14,7 @@ const ContentfulLayoutHeader = props => {
       downloadButton,
       previewMode = false,
       popupAnnouncement,
+      popupAnnouncementEu,
       popupAnnouncementTreatment,
       launchDarklyFlag,
       isSticky,
@@ -31,6 +32,7 @@ const ContentfulLayoutHeader = props => {
       downloadButton={downloadButton}
       hideDownloadBtn={hideDownloadBtn}
       popupAnnouncement={popupAnnouncement}
+      popupAnnouncementEu={popupAnnouncementEu}
       popupAnnouncementTreatment={popupAnnouncementTreatment}
       isSticky={isSticky}
       launchDarklyFlag={launchDarklyFlag}

src/components/Header.js

@@ -2,6 +2,7 @@ import { contentfulModuleToComponent } from '../lib/utils/moduleToComponent'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import {
   DEFAULT_LOCALE_CODE,
+  EU_COUNTRY_CODES,
   GB_BLOCKED_PATHS,
   GB_DISCLAIMER_PATHS,
   LOCALES,
@@ -33,6 +34,7 @@ const StyledHeader = props => {
     menus,
     downloadButton,
     popupAnnouncement,
+    popupAnnouncementEu,
     popupAnnouncementTreatment,
     hideDownloadBtn,
     isSticky,
@@ -66,6 +68,7 @@ const StyledHeader = props => {
     usePopupAnnouncementTreatment,
     setUsePopupAnnouncementTreatment,
   ] = useState(false)
+  const [usePopupAnnouncementEu, setUsePopupAnnouncementEu] = useState(false)
 
   const ldClient = useLDClient()
   const country = useCountry()
@@ -93,6 +96,14 @@ const StyledHeader = props => {
     init()
   }, [getLaunchDarklyFlag, launchDarklyFlag, country])
 
+  useEffect(() => {
+    if (EU_COUNTRY_CODES.includes(country)) {
+      setUsePopupAnnouncementEu(true)
+    } else {
+      setUsePopupAnnouncementEu(false)
+    }
+  }, [country])
+
   useEffect(() => {
     if (!menus && isDarkMode) {
       toggleTheme()
@@ -193,7 +204,9 @@ const StyledHeader = props => {
     <HeaderElement ref={headerRef} className={classnames({ sticky: isSticky })}>
       <Announcement>
         {contentfulModuleToComponent({
-          ...(usePopupAnnouncementTreatment
+          ...(usePopupAnnouncementEu && popupAnnouncementEu
+            ? popupAnnouncementEu
+            : usePopupAnnouncementTreatment && popupAnnouncementTreatment
             ? popupAnnouncementTreatment
             : popupAnnouncement),
           previewMode,

src/components/Landing/card-giveaway/banner/Banner.js

@@ -0,0 +1,14 @@
+import LinkButton from '../link-button/LinkButton'
+import * as styles from './banner.module.scss'
+import React from 'react'
+
+const Banner = ({ children, image }) => {
+  return (
+    <section className={styles.banner}>
+      <div className={styles.imageWrapper}>{image}</div>
+      <div className={styles.content}>{children}</div>
+    </section>
+  )
+}
+
+export default Banner

src/components/Landing/card-giveaway/banner/banner.module.scss

@@ -0,0 +1,63 @@
+@import '../../../../styles/card-giveaway/mixins.scss';
+
+.banner {
+  position: relative;
+  overflow: hidden;
+  color: #013330;
+  width: 100%;
+  max-width: 1200px;
+  margin-inline: auto;
+  background-color: #e5ffc3;
+  clip-path: polygon(
+    50px 0,
+    100% 0,
+    100% calc(100% - 50px),
+    calc(100% - 50px) 100%,
+    0 100%,
+    0 50px
+  );
+
+  padding: 20px 20px 60px 20px;
+  @include desktop {
+    padding: 100px 0 124px 88px;
+  }
+
+  .content {
+    width: 100%;
+    @include desktop {
+      max-width: 423px;
+    }
+
+    h2 {
+      font-family: 'MM Sans';
+      font-size: 32px;
+      line-height: 1.25;
+      font-weight: 400;
+      margin-bottom: 24px;
+    }
+
+    p {
+      font-family: 'CentraNo1';
+      margin-bottom: 32px;
+    }
+  }
+
+  .imageWrapper {
+    height: auto;
+    width: 100%;
+    margin-bottom: 25px;
+
+    @include desktop {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: auto;
+    }
+
+    img {
+      height: 100%;
+      width: auto;
+    }
+  }
+}

src/components/Landing/card-giveaway/container/Container.js

@@ -0,0 +1,13 @@
+import clsx from 'clsx'
+import * as styles from './container.module.scss'
+import React from 'react'
+
+const Container = ({ width = 'narrow', children }) => {
+  return (
+    <section className={clsx(styles.container, styles[width])}>
+      {children}
+    </section>
+  )
+}
+
+export default Container

src/components/Landing/card-giveaway/container/container.module.scss

@@ -0,0 +1,15 @@
+@import '../../../../styles/card-giveaway/mixins.scss';
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-inline: 20px;
+  @include desktop {
+    padding-inline: 0;
+  }
+
+  &.narrow {
+    max-width: 687px;
+  }
+}

src/components/Landing/card-giveaway/content/Content.js

@@ -0,0 +1,8 @@
+import * as styles from './content.module.scss'
+import React from 'react'
+
+const Content = ({ children }) => {
+  return <section className={styles.content}>{children}</section>
+}
+
+export default Content

src/components/Landing/card-giveaway/content/content.module.scss

@@ -0,0 +1,27 @@
+.content {
+  --text-color: #393d46;
+  --title-color: #0a0a0a;
+
+  font-family: var(--font-centra-no-1);
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--text-color);
+
+  h2 {
+    font-family: var(--font-mm-sans);
+    font-size: 24px;
+    line-height: 1.3;
+    font-weight: 400;
+    color: var(--title-color);
+  }
+
+  > * a {
+    color: var(--text-color);
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-block: 60px;
+  }
+}

src/components/Landing/card-giveaway/geoblock-overlay/GeoblockOverlay.js

@@ -0,0 +1,22 @@
+import * as styles from './geoblock-overlay.module.scss'
+import React, { useEffect } from 'react'
+
+const GeoblockOverlay = ({ children }) => {
+  useEffect(() => {
+    document.body.classList.add('scroll-block')
+
+    return () => {
+      document.body.classList.remove('scroll-block')
+    }
+  }, [])
+
+  return (
+    <section className={styles.overlay}>
+      <div className={styles.dialog}>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </section>
+  )
+}
+
+export default GeoblockOverlay

src/components/Landing/card-giveaway/geoblock-overlay/geoblock-overlay.module.scss

@@ -0,0 +1,48 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+
+  .dialog {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    padding-inline: 10px;
+
+    .content {
+      width: 100%;
+      max-width: 800px;
+      margin-inline: auto;
+      padding: 32px;
+      background-color: #fff;
+
+      h2 {
+        font-family: var(--font-mm-sans);
+        font-size: 24px;
+        line-height: 1.4;
+        font-weight: 400;
+        margin-bottom: 24px;
+      }
+
+      p {
+        color: #393d46;
+        font-family: var(--font-centra-no-1);
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+        margin-bottom: 24px;
+
+        a {
+          color: #393d46;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}

src/components/Landing/card-giveaway/hero/Hero.js

@@ -0,0 +1,18 @@
+import * as styles from './hero.module.scss'
+import React from 'react'
+
+const Hero = ({ title, description, buttons }) => {
+  return (
+    <section className={styles.hero}>
+      <div className={styles.container}>
+        <div className={styles.wrapper}>
+          <h1 className={styles.title}>{title}</h1>
+          <p className={styles.description}>{description}</p>
+          <div className={styles.actions}>{buttons}</div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero

src/components/Landing/card-giveaway/hero/hero.module.scss

@@ -0,0 +1,70 @@
+@import '../../../../styles/card-giveaway/mixins.scss';
+
+.hero {
+  height: 730px;
+  @include desktop {
+    height: 760px;
+  }
+  background-color: #661800;
+  background-image: url('/images/landing/card-giveaway/hero.png');
+  background-size: auto 100%;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+
+  @include desktop {
+    background-position: right;
+  }
+
+  @include mobile {
+    background-size: auto 320px;
+    background-position: bottom right;
+  }
+
+  .container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    padding: 43px 16px;
+    @include desktop {
+      padding: 0;
+      max-width: 1200px;
+    }
+
+    .wrapper {
+      width: 100%;
+      max-width: 540px;
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+
+      @include desktop {
+        justify-content: center;
+      }
+
+      .title {
+        font-family: 'MM Poly Variable';
+        color: #ff5c16;
+        text-transform: uppercase;
+        font-weight: normal;
+        font-size: 4.25rem;
+        line-height: 1;
+        font-variation-settings: 'wdth' 25, 'RESO' 4;
+        @include desktop {
+          font-size: 6.75rem;
+        }
+      }
+
+      .description {
+        font-family: 'CentraNo1';
+        color: #ff5c16;
+        font-size: 1rem;
+        line-height: 1.5;
+        @include desktop {
+          font-size: 1.25rem;
+          line-height: 1.2;
+        }
+      }
+    }
+  }
+}

src/components/Landing/card-giveaway/link-button/LinkButton.js

@@ -0,0 +1,22 @@
+import * as styles from './link-button.module.scss'
+import React from 'react'
+import clsx from 'clsx'
+
+const LinkButton = ({
+  color = 'primary',
+  href = '#',
+  target = '_self',
+  children = '',
+}) => {
+  return (
+    <a
+      href={href}
+      target={target}
+      className={clsx(styles.button, styles[color])}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default LinkButton