Merge pull request #455 from MetaMask/add-home-hero-portfolio-ab-test

Add home hero portfolio ab test
MetaMask · Dec 16, 2024 · a14b8a5 · a14b8a5
2 parents bbd66dd + 221694c
commit a14b8a5
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 13 deletions.
diff --git a/src/components/CTA.js b/src/components/CTA.js
@@ -138,26 +138,30 @@ const CTA = props => {
     const trackableClasses = ['ld-portfolio-link', 'ld-download-link']
 
     if (flagName === 'mm-download-cta-home-hero') {
+      ldClient?.track('home-hero-cta-click')
       ldClient?.track('home-hero-download-cta-click')
       ldClient?.flush()
     }
 
     if (flagName === 'mm-download-cta-header') {
       const currentPath = removeLanguageCode(location?.pathname)
       if (currentPath === '/') {
+        ldClient?.track('home-header-cta-click')
         ldClient?.track('home-header-download-cta-click')
         ldClient?.flush()
       }
     }
 
     if (flagName === 'mm-portfolio-cta-home-hero') {
+      ldClient?.track('home-hero-cta-click')
       ldClient?.track('home-hero-portfolio-cta-click')
       ldClient?.flush()
     }
 
     if (flagName === 'mm-portfolio-cta-header') {
       const currentPath = removeLanguageCode(location?.pathname)
       if (currentPath === '/') {
+        ldClient?.track('home-header-cta-click')
         ldClient?.track('home-header-portfolio-cta-click')
         ldClient?.flush()
       }

diff --git a/src/components/HeroContainer.js b/src/components/HeroContainer.js
@@ -13,6 +13,8 @@ import Loadable from '@loadable/component'
 import ParseMD from './ParseMD'
 import GatsbyBackgroundImage from './GatsbyBackgroundImage'
 import { MetaMaskContext } from '../Context/MetaMaskContextProvider'
+import { useLaunchDarklyFlag } from '../Context/LaunchDarklyFlagContext'
+import { useMediaQuery } from 'react-responsive'
 
 const FoxAnimation = Loadable(() => import('./FoxAnimation/'))
 
@@ -50,6 +52,7 @@ const HeroContainerComponent = props => {
     previewMode = false,
   } = props
 
+  const { getLaunchDarklyFlag } = useLaunchDarklyFlag()
   const { isMetaMaskInstalled } = useContext(MetaMaskContext)
   const { darkMode: darkModeContextValue } = useContext(ContextClientSide)
   const { isDarkMode } = darkModeContextValue || {}
@@ -62,6 +65,10 @@ const HeroContainerComponent = props => {
   const isInstitutionalChild = customClass?.includes('page-institutional-child')
   const isThankYou = customClass?.includes('page-thank-you')
 
+  const isMobile = useMediaQuery({
+    query: '(max-width: 767px)',
+  })
+
   let hubspotWrapper
   if (hubSpotForm) {
     hubspotWrapper = (
@@ -92,21 +99,48 @@ const HeroContainerComponent = props => {
 
   const sdkRef = useRef(null)
   const [height, setHeight] = useState(0)
+  const [headerHeight, setHeaderHeight] = useState(0)
+  const [isHomeTreatment, setIsHomeTreatment] = useState(false)
 
   useEffect(() => {
-    if (isSDK && sdkRef.current) {
-      handleWindowSizeChange()
-      window.addEventListener('resize', handleWindowSizeChange)
-      return () => {
-        window.removeEventListener('resize', handleWindowSizeChange)
-      }
+    handleWindowSizeChange()
+    window.addEventListener('resize', handleWindowSizeChange)
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange)
     }
   }, [isSDK, sdkRef])
 
   const handleWindowSizeChange = () => {
-    setHeight(sdkRef.current.clientHeight + 48)
+    if (isSDK && sdkRef.current) {
+      setHeight(sdkRef.current.clientHeight + 48)
+    }
+
+    const headerElement = document.querySelector('header')
+    if (headerElement) {
+      setHeaderHeight(headerElement.clientHeight)
+    }
   }
 
+  useEffect(() => {
+    if (!isHome || !isMetaMaskInstalled || isMobile) {
+      setIsHomeTreatment(false)
+      return
+    }
+
+    const init = async () => {
+      const value = await getLaunchDarklyFlag('home-hero-cta-test')
+      setIsHomeTreatment(value === 'treatment')
+    }
+
+    init()
+  }, [
+    getLaunchDarklyFlag,
+    setIsHomeTreatment,
+    isHome,
+    isMetaMaskInstalled,
+    isMobile,
+  ])
+
   return (
     <>
       {showFavIcon ? (
@@ -120,6 +154,7 @@ const HeroContainerComponent = props => {
       ) : null}
       <HeroContainer
         $isThankYou={isThankYou}
+        isHomeTreatment={isHomeTreatment}
         sectionPadding={sectionPadding || ''}
         headlineBorderBottom={headlineBorderBottom}
         isStyleCenterSimple={isStyleCenterSimple}
@@ -130,9 +165,11 @@ const HeroContainerComponent = props => {
             ? backgroundImageDarkMode
             : backgroundImage)
         }
+        headerHeight={headerHeight}
         ref={heroContainerRef}
         className={classnames({
-          [`bg-${backgroundColor}`]: backgroundColor,
+          [`bg-${backgroundColor}`]: backgroundColor && !isHomeTreatment,
+          [`bg-lighter-blue`]: isHomeTreatment,
           [`custom-${customClass}`]: customClass,
         })}
       >
@@ -164,6 +201,7 @@ const HeroContainerComponent = props => {
               isSDK={isSDK}
               isInstitutionalChild={isInstitutionalChild}
               $isThankYou={isThankYou}
+              isHomeTreatment={isHomeTreatment}
             >
               <GatsbyBackgroundImage
                 image={
@@ -189,6 +227,7 @@ const HeroContainerComponent = props => {
                   center={!sideImageFlex && !isHome}
                   sideImageFlex={sideImageFlex}
                   isSDK={isSDK}
+                  isHomeTreatment={isHomeTreatment}
                 >
                   {eyebrowLogo ? (
                     <EyebrowWrapper
@@ -261,6 +300,7 @@ const HeroContainerComponent = props => {
                       <HeroSideImage
                         sideImageFlex={sideImageFlex}
                         isSDK={isSDK}
+                        isHomeTreatment={isHomeTreatment}
                         ref={sdkRef}
                       >
                         <Image
@@ -291,7 +331,7 @@ const HeroContainerComponent = props => {
                     </HeroDescription>
                   )}
                   {!isEmpty(ctas) && !isFlask ? (
-                    <HeroCTA>
+                    <HeroCTA isHomeTreatment={isHomeTreatment}>
                       {ctas.map(cta =>
                         contentfulModuleToComponent({
                           ...cta,
@@ -310,6 +350,7 @@ const HeroContainerComponent = props => {
                     isStyleHubspot={isStyleHubspot}
                     sideImageFoxAnimation={sideImageFoxAnimation}
                     isFlask={isFlask}
+                    isHomeTreatment={isHomeTreatment}
                   >
                     {sideImageFoxAnimation ? <FoxAnimation /> : null}
                     {!sideImageFoxAnimation &&
@@ -330,7 +371,7 @@ const HeroContainerComponent = props => {
                   </HeroSideImage>
                 ) : null}
                 {!isEmpty(ctas) && isFlask ? (
-                  <HeroCTA>
+                  <HeroCTA isHomeTreatment={isHomeTreatment}>
                     {ctas.map(cta =>
                       contentfulModuleToComponent({
                         ...cta,
@@ -345,7 +386,7 @@ const HeroContainerComponent = props => {
           </ContentWrapper>
         </GatsbyBackgroundImage>
       </HeroContainer>
-      {learnMoreText && isMetaMaskInstalled ? (
+      {learnMoreText && isMetaMaskInstalled && !isHomeTreatment ? (
         <ContentWrapper>
           <LearnMoreWrapper>
             <LearnMoreInner className="text-block">
@@ -395,6 +436,14 @@ const HeroContainer = styled(Section)`
     padding-bottom: 0;
   }
 
+  ${({ isHomeTreatment, headerHeight }) =>
+    isHomeTreatment
+      ? `
+      height: calc(100vh - ${headerHeight}px);
+      justify-content: flex-start;
+  `
+      : ``}
+
   ${({ $isThankYou }) =>
     $isThankYou
       ? `
@@ -499,6 +548,17 @@ const HeroContentContainer = styled.div`
   `
       : ''}
 
+    ${({ isHomeTreatment }) =>
+      isHomeTreatment
+        ? `
+      flex-direction: column;
+      gap: 70px;
+      & > * {
+        width: 544px;
+      }
+  `
+        : ``}
+
   ${({ contentAlignment }) =>
     contentAlignment === 'center'
       ? `
@@ -661,8 +721,8 @@ const HeroImageTextContainer = styled.div`
   min-width: 0;
   `
       : ''}
-  ${({ isHome, theme }) =>
-    isHome
+  ${({ isHome, isHomeTreatment, theme }) =>
+    isHome && !isHomeTreatment
       ? `
   @media (min-width: ${theme.device.miniDesktop}){
     margin-top: 50px;
@@ -708,6 +768,13 @@ const HeroImageTextContainer = styled.div`
     position: inherit
   `
       : ''}
+
+  ${({ isHomeTreatment }) =>
+    isHomeTreatment
+      ? `
+    text-align: center;
+  `
+      : ''}
 `
 
 const HeroTitle = styled.h1`
@@ -905,6 +972,14 @@ const HeroSideImage = styled.div`
   `
       : ''}
 
+  ${({ isHomeTreatment }) =>
+    isHomeTreatment
+      ? `
+    height: auto;
+    width: 950px;
+  `
+      : ''}
+
   .sideImageOverflow &,
   .sideImageOverflowRight & {
     img {
@@ -1039,6 +1114,17 @@ const HeroCTA = styled.div`
   display: flex;
   flex-flow: wrap;
 
+  ${({ isHomeTreatment }) =>
+    isHomeTreatment
+      ? `
+        justify-content: center;
+
+        > *:not(:last-child) {
+          margin: 0 16px 16px 0 !important;
+        }
+    `
+      : ''}
+
   .button {
     margin: 0 16px 16px 0;
   }

diff --git a/src/components/layout.scss b/src/components/layout.scss
@@ -1141,6 +1141,10 @@ $sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15;
   color: #fff;
 }
 
+.bg-lighter-blue {
+  background-color: #f2f9fd;
+}
+
 .bg-pink {
   background-color: #ffa4d1;
 }
@@ -1338,6 +1342,10 @@ body.dark-mode {
     background-color: #393e46;
   }
 
+  .bg-lighter-blue {
+    background-color: #23272a;
+  }
+
   .bg-pink {
     background-color: #393e46;
   }