From 4f878b709ef40c7bf5691a9f7ba5a514c2a08032 Mon Sep 17 00:00:00 2001 From: blaiseup Date: Wed, 11 Dec 2024 13:08:29 +0100 Subject: [PATCH 1/2] feat: implement the first iteration of the homepage hero ab test --- src/components/CTA.js | 4 ++ src/components/HeroContainer.js | 106 +++++++++++++++++++++++++++----- src/components/layout.scss | 8 +++ 3 files changed, 103 insertions(+), 15 deletions(-) diff --git a/src/components/CTA.js b/src/components/CTA.js index 1a793ae6d25..d8eb454ef43 100644 --- a/src/components/CTA.js +++ b/src/components/CTA.js @@ -138,6 +138,7 @@ 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() } @@ -145,12 +146,14 @@ const CTA = props => { 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() } @@ -158,6 +161,7 @@ const CTA = props => { 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 index f20bfff07fd..5080b67e8d0 100644 --- a/src/components/HeroContainer.js +++ b/src/components/HeroContainer.js @@ -13,6 +13,7 @@ import Loadable from '@loadable/component' import ParseMD from './ParseMD' import GatsbyBackgroundImage from './GatsbyBackgroundImage' import { MetaMaskContext } from '../Context/MetaMaskContextProvider' +import { useLaunchDarklyFlag } from '../Context/LaunchDarklyFlagContext' const FoxAnimation = Loadable(() => import('./FoxAnimation/')) @@ -50,6 +51,7 @@ const HeroContainerComponent = props => { previewMode = false, } = props + const { getLaunchDarklyFlag } = useLaunchDarklyFlag() const { isMetaMaskInstalled } = useContext(MetaMaskContext) const { darkMode: darkModeContextValue } = useContext(ContextClientSide) const { isDarkMode } = darkModeContextValue || {} @@ -92,21 +94,41 @@ 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) { + return + } + + const init = async () => { + const value = await getLaunchDarklyFlag('home-hero-cta-test') + setIsHomeTreatment(value === 'treatment') + } + + init() + }, [getLaunchDarklyFlag, isHome, setIsHomeTreatment]) + return ( <> {showFavIcon ? ( @@ -120,6 +142,7 @@ const HeroContainerComponent = props => { ) : null} { ? backgroundImageDarkMode : backgroundImage) } + headerHeight={headerHeight} ref={heroContainerRef} className={classnames({ - [`bg-${backgroundColor}`]: backgroundColor, + [`bg-${backgroundColor}`]: backgroundColor && !isHomeTreatment, + [`bg-lighter-blue`]: isHomeTreatment, [`custom-${customClass}`]: customClass, })} > @@ -164,6 +189,7 @@ const HeroContainerComponent = props => { isSDK={isSDK} isInstitutionalChild={isInstitutionalChild} $isThankYou={isThankYou} + isHomeTreatment={isHomeTreatment} > { center={!sideImageFlex && !isHome} sideImageFlex={sideImageFlex} isSDK={isSDK} + isHomeTreatment={isHomeTreatment} > {eyebrowLogo ? ( { { )} {!isEmpty(ctas) && !isFlask ? ( - + {ctas.map(cta => contentfulModuleToComponent({ ...cta, @@ -310,16 +338,19 @@ const HeroContainerComponent = props => { isStyleHubspot={isStyleHubspot} sideImageFoxAnimation={sideImageFoxAnimation} isFlask={isFlask} + isHomeTreatment={isHomeTreatment} > {sideImageFoxAnimation ? : null} {!sideImageFoxAnimation && (isStyleHubspot || sideImageFlex || isFlask) ? ( { ) : null} {!isEmpty(ctas) && isFlask ? ( - + {ctas.map(cta => contentfulModuleToComponent({ ...cta, @@ -345,7 +376,7 @@ const HeroContainerComponent = props => { - {learnMoreText && isMetaMaskInstalled ? ( + {learnMoreText && isMetaMaskInstalled && !isHomeTreatment ? ( @@ -395,6 +426,14 @@ const HeroContainer = styled(Section)` padding-bottom: 0; } + ${({ isHomeTreatment, headerHeight }) => + isHomeTreatment + ? ` + height: calc(100vh - ${headerHeight}px); + justify-content: flex-start; + ` + : ``} + ${({ $isThankYou }) => $isThankYou ? ` @@ -499,6 +538,17 @@ const HeroContentContainer = styled.div` ` : ''} + ${({ isHomeTreatment }) => + isHomeTreatment + ? ` + flex-direction: column; + gap: 70px; + & > * { + width: 544px; + } + ` + : ``} + ${({ contentAlignment }) => contentAlignment === 'center' ? ` @@ -661,8 +711,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 +758,13 @@ const HeroImageTextContainer = styled.div` position: inherit ` : ''} + + ${({ isHomeTreatment }) => + isHomeTreatment + ? ` + text-align: center; + ` + : ''} ` const HeroTitle = styled.h1` @@ -905,6 +962,14 @@ const HeroSideImage = styled.div` ` : ''} + ${({ isHomeTreatment }) => + isHomeTreatment + ? ` + height: auto; + width: 950px; + ` + : ''} + .sideImageOverflow &, .sideImageOverflowRight & { img { @@ -1039,6 +1104,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 index 8bab6bc8a0e..ed1d8b6133c 100644 --- 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; } From 221694c46d0af22c98862eda22428bff839b4da4 Mon Sep 17 00:00:00 2001 From: blaiseup Date: Mon, 16 Dec 2024 11:15:07 +0100 Subject: [PATCH 2/2] feat: restrict experiment to wallet installed and desktop screens --- src/components/HeroContainer.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/HeroContainer.js b/src/components/HeroContainer.js index 5080b67e8d0..7c413c91a92 100644 --- a/src/components/HeroContainer.js +++ b/src/components/HeroContainer.js @@ -14,6 +14,7 @@ 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/')) @@ -64,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 = ( @@ -117,7 +122,8 @@ const HeroContainerComponent = props => { } useEffect(() => { - if (!isHome) { + if (!isHome || !isMetaMaskInstalled || isMobile) { + setIsHomeTreatment(false) return } @@ -127,7 +133,13 @@ const HeroContainerComponent = props => { } init() - }, [getLaunchDarklyFlag, isHome, setIsHomeTreatment]) + }, [ + getLaunchDarklyFlag, + setIsHomeTreatment, + isHome, + isMetaMaskInstalled, + isMobile, + ]) return ( <> @@ -345,12 +357,10 @@ const HeroContainerComponent = props => { (isStyleHubspot || sideImageFlex || isFlask) ? (