Skip to content

Commit

Permalink
Merge pull request #458 from MetaMask/add-homepage-hero-abc-test
Browse files Browse the repository at this point in the history 
Add homepage hero abc test
  • Loading branch information
@blaiseup
blaiseup authored Dec 19, 2024
2 parents a36742d + caafa34 commit 292b685
Showing 1 changed file with 135 additions and 29 deletions.
164 changes: 135 additions & 29 deletions src/components/HeroContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
import React, { useContext, useEffect, useRef, useState } from 'react'
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
import styled, { withTheme } from 'styled-components'
import ContentWrapper from './ContentWrapper'
import { contentfulModuleToComponent } from '../lib/utils/moduleToComponent'
Expand Down Expand Up @@ -100,7 +100,18 @@ const HeroContainerComponent = props => {
const sdkRef = useRef(null)
const [height, setHeight] = useState(0)
const [headerHeight, setHeaderHeight] = useState(0)
const [isHomeTreatment, setIsHomeTreatment] = useState(false)

const [homeTreatmentStyle, setHomeTreatmentStyle] = useState('')
const isHomeColumn = useMemo(() => homeTreatmentStyle === 'column', [
homeTreatmentStyle,
])
const isHomeWide = useMemo(
() => homeTreatmentStyle === 'wide' || homeTreatmentStyle === 'colorful',
[homeTreatmentStyle]
)
const isHomeColorful = useMemo(() => homeTreatmentStyle === 'colorful', [
homeTreatmentStyle,
])

useEffect(() => {
handleWindowSizeChange()
Expand All @@ -123,19 +134,19 @@ const HeroContainerComponent = props => {

useEffect(() => {
if (!isHome || !isMetaMaskInstalled || isMobile) {
setIsHomeTreatment(false)
setHomeTreatmentStyle('')
return
}

const init = async () => {
const value = await getLaunchDarklyFlag('home-hero-cta-test')
setIsHomeTreatment(value === 'treatment')
const value = await getLaunchDarklyFlag('home-hero-style')
setHomeTreatmentStyle(value)
}

init()
}, [
getLaunchDarklyFlag,
setIsHomeTreatment,
setHomeTreatmentStyle,
isHome,
isMetaMaskInstalled,
isMobile,
Expand All @@ -154,7 +165,9 @@ const HeroContainerComponent = props => {
) : null}
<HeroContainer
$isThankYou={isThankYou}
isHomeTreatment={isHomeTreatment}
isHomeColumn={isHomeColumn}
isHomeWide={isHomeWide}
isHomeColorful={isHomeColorful}
sectionPadding={sectionPadding || ''}
headlineBorderBottom={headlineBorderBottom}
isStyleCenterSimple={isStyleCenterSimple}
Expand All @@ -168,9 +181,10 @@ const HeroContainerComponent = props => {
headerHeight={headerHeight}
ref={heroContainerRef}
className={classnames({
[`bg-${backgroundColor}`]: backgroundColor && !isHomeTreatment,
[`bg-lighter-blue`]: isHomeTreatment,
[`bg-${backgroundColor}`]: backgroundColor && !homeTreatmentStyle,
[`bg-lighter-blue`]: isHomeColumn || isHomeWide,
[`custom-${customClass}`]: customClass,
[`wider-container`]: isHomeWide,
})}
>
<GatsbyBackgroundImage
Expand Down Expand Up @@ -201,7 +215,8 @@ const HeroContainerComponent = props => {
isSDK={isSDK}
isInstitutionalChild={isInstitutionalChild}
$isThankYou={isThankYou}
isHomeTreatment={isHomeTreatment}
isHomeColumn={isHomeColumn}
isHomeWide={isHomeWide}
>
<GatsbyBackgroundImage
image={
Expand All @@ -227,7 +242,8 @@ const HeroContainerComponent = props => {
center={!sideImageFlex && !isHome}
sideImageFlex={sideImageFlex}
isSDK={isSDK}
isHomeTreatment={isHomeTreatment}
isHomeColumn={isHomeColumn}
isHomeWide={isHomeWide}
>
{eyebrowLogo ? (
<EyebrowWrapper
Expand Down Expand Up @@ -300,7 +316,8 @@ const HeroContainerComponent = props => {
<HeroSideImage
sideImageFlex={sideImageFlex}
isSDK={isSDK}
isHomeTreatment={isHomeTreatment}
isHomeColumn={isHomeColumn}
isHomeWide={isHomeWide}
ref={sdkRef}
>
<Image
Expand All @@ -312,7 +329,7 @@ const HeroContainerComponent = props => {
</HeightSlide>
) : null}
{description && (
<HeroDescription isFaq={isFaq}>
<HeroDescription isFaq={isFaq} isHomeWide={isHomeWide}>
{previewMode ? (
<ParseMD>
{isMetaMaskInstalled
Expand All @@ -331,7 +348,10 @@ const HeroContainerComponent = props => {
</HeroDescription>
)}
{!isEmpty(ctas) && !isFlask ? (
<HeroCTA isHomeTreatment={isHomeTreatment}>
<HeroCTA
isHomeColumn={isHomeColumn}
isHomeWide={isHomeWide}
>
{ctas.map(cta =>
contentfulModuleToComponent({
...cta,
Expand All @@ -350,7 +370,8 @@ const HeroContainerComponent = props => {
isStyleHubspot={isStyleHubspot}
sideImageFoxAnimation={sideImageFoxAnimation}
isFlask={isFlask}
isHomeTreatment={isHomeTreatment}
isHomeColumn={isHomeColumn}
isHomeWide={isHomeWide}
>
{sideImageFoxAnimation ? <FoxAnimation /> : null}
{!sideImageFoxAnimation &&
Expand All @@ -371,7 +392,7 @@ const HeroContainerComponent = props => {
</HeroSideImage>
) : null}
{!isEmpty(ctas) && isFlask ? (
<HeroCTA isHomeTreatment={isHomeTreatment}>
<HeroCTA isHomeColumn={isHomeColumn} isHomeWide={isHomeWide}>
{ctas.map(cta =>
contentfulModuleToComponent({
...cta,
Expand All @@ -386,7 +407,7 @@ const HeroContainerComponent = props => {
</ContentWrapper>
</GatsbyBackgroundImage>
</HeroContainer>
{learnMoreText && isMetaMaskInstalled && !isHomeTreatment ? (
{learnMoreText && isMetaMaskInstalled && !homeTreatmentStyle ? (
<ContentWrapper>
<LearnMoreWrapper>
<LearnMoreInner className="text-block">
Expand Down Expand Up @@ -436,14 +457,71 @@ const HeroContainer = styled(Section)`
padding-bottom: 0;
}
${({ isHomeTreatment, headerHeight }) =>
isHomeTreatment
${({ isHomeColorful, theme }) =>
isHomeColorful &&
`
z-index: 0;
border: 2px solid ${theme.black};
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f9e37a;
body.dark-mode & {
background-color: #24292e;
}
z-index: -2;
}
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 44%;
height: 100%;
background-color: #89C3F8;
body.dark-mode & {
background-color: #000000;
}
z-index: -1;
border-left: 2px solid ${theme.black};
}
.button {
border: 2px solid ${theme.black};
}
`}
${({ isHomeColumn, headerHeight }) =>
isHomeColumn
? `
height: calc(100vh - ${headerHeight}px);
justify-content: flex-start;
`
: ``}
${({ isHomeWide, headerHeight }) =>
isHomeWide
? `
height: calc(100vh - ${headerHeight}px);
padding-top: 88px;
`
: ``}
@media (min-width: ${({ theme }) => theme.device.tabletMediaMax}) {
${({ isHomeWide }) =>
isHomeWide
? `
justify-content: flex-start;
`
: ''}
}
${({ $isThankYou }) =>
$isThankYou
? `
Expand Down Expand Up @@ -548,8 +626,8 @@ const HeroContentContainer = styled.div`
`
: ''}
${({ isHomeTreatment }) =>
isHomeTreatment
${({ isHomeColumn }) =>
isHomeColumn
? `
flex-direction: column;
gap: 70px;
Expand Down Expand Up @@ -721,8 +799,14 @@ const HeroImageTextContainer = styled.div`
min-width: 0;
`
: ''}
${({ isHome, isHomeTreatment, theme }) =>
isHome && !isHomeTreatment
${({ isHomeWide }) =>
isHomeWide
? `
min-width: 50%;
`
: ''}
${({ isHome, isHomeColumn, isHomeWide, theme }) =>
isHome && !isHomeColumn && !isHomeWide
? `
@media (min-width: ${theme.device.miniDesktop}){
margin-top: 50px;
Expand Down Expand Up @@ -769,8 +853,8 @@ const HeroImageTextContainer = styled.div`
`
: ''}
${({ isHomeTreatment }) =>
isHomeTreatment
${({ isHomeColumn }) =>
isHomeColumn
? `
text-align: center;
`
Expand Down Expand Up @@ -923,6 +1007,13 @@ const HeroDescription = styled.div`
color: #727272;
`
: ''}
${({ isHomeWide }) =>
isHomeWide
? `
margin-bottom: 44px;
`
: ''}
`

const HeroSideImage = styled.div`
Expand Down Expand Up @@ -972,14 +1063,22 @@ const HeroSideImage = styled.div`
`
: ''}
${({ isHomeTreatment }) =>
isHomeTreatment
${({ isHomeColumn }) =>
isHomeColumn
? `
height: auto;
width: 950px;
`
: ''}
${({ isHomeWide }) =>
isHomeWide
? `
height: auto;
width: calc(55% + 113px);
`
: ''}
.sideImageOverflow &,
.sideImageOverflowRight & {
img {
Expand Down Expand Up @@ -1063,6 +1162,13 @@ const HeroSideImage = styled.div`
@media (min-width: ${({ theme }) => theme.device.desktop}) {
padding: 0 !important;
${({ isHomeWide }) =>
isHomeWide
? `
margin-left: 27px;
margin-right: -113px;
`
: ''}
}
@media (max-width: ${({ theme }) => theme.device.tabletMediaMax}) {
Expand Down Expand Up @@ -1114,8 +1220,8 @@ const HeroCTA = styled.div`
display: flex;
flex-flow: wrap;
${({ isHomeTreatment }) =>
isHomeTreatment
${({ isHomeColumn }) =>
isHomeColumn
? `
justify-content: center;
Expand Down

0 comments on commit 292b685

Please sign in to comment.