{"version":3,"sources":["webpack:///./src/sections/About/LeaderShip.tsx"],"names":["Wrapper","styled","section","Colors","softBlack","media","tabletLandscape","tablet","mobile","Title","HeadlineM","whiteSmoke","fullWidth","Image","div","props","big","Name","Body","NameTag","a","LeaderName","p","blueYonder","LeaderTitle","ImgWrapper","ImageSmall","final","someCardHovered","SmallCardsWrapper","Leadership","data","useState","setSomeCardHovered","rRLeaders","allContentfulEmployee","nodes","sort","b","name","split","map","leader","index","key","onMouseEnter","onMouseLeave","headshot","file","url","src","alt","jobTitle"],"mappings":"oNA4DMA,EAAUC,IAAOC,QAAV,yEAAGD,CAAH,yKAKGE,IAAOC,UAEnBC,IAAMC,gBAGND,IAAME,OAINF,IAAMG,QAMJC,EAAQR,YAAOS,KAAV,uEAAGT,CAAH,6OAMAE,IAAOQ,WACdN,IAAMO,UAINP,IAAMC,gBAGND,IAAME,OAKNF,IAAMG,QAOJK,EAAQZ,IAAOa,IAAV,uEAAGb,CAAH,iJAEC,SAACc,GAAD,OAAYA,EAAMC,IAAM,SAAW,WAK3CX,IAAME,QAEI,SAACQ,GAAD,OAAYA,EAAMC,IAAM,SAAW,WAE7CX,IAAMG,QAEI,SAACO,GAAD,OAAYA,EAAMC,IAAM,SAAW,YAI3CC,EAAOhB,YAAOiB,KAAV,sEAAGjB,CAAH,qLAGME,IAAOQ,YAIX,SAACI,GAAD,OAAYA,EAAMC,IAAM,SAAW,UAE3CX,IAAME,QACI,SAACQ,GAAD,OAAYA,EAAMC,IAAM,OAAS,WAG3CX,IAAMG,QAGC,SAACO,GAAD,OAAYA,EAAMC,IAAM,OAAS,YAyBtCG,GArBclB,IAAOmB,EAAV,6EAAGnB,CAAH,oOAKNY,EAMAI,EAKPZ,IAAME,QAKMN,IAAOa,IAAV,yEAAGb,CAAH,wLAEGE,IAAOQ,WAQnBN,IAAMC,kBAIJe,EAAapB,IAAOqB,EAAV,4EAAGrB,CAAH,qOAYHE,IAAOoB,YAIdC,EAAcvB,IAAOqB,EAAV,6EAAGrB,CAAH,yDAKXwB,EAAaxB,IAAOa,IAAV,4EAAGb,CAAH,wCAGVyB,EAAazB,IAAOa,IAAV,4EAAGb,CAAH,8RAGH,SAACc,GAAD,OAAYA,EAAMY,MAAQ,EAAI,KAOrCR,EAKAM,GACW,SAACV,GAAD,OAAYA,EAAMa,gBAAkB,GAAM,IAGvDvB,IAAMC,gBAEFmB,EAKJpB,IAAMC,gBAIND,IAAME,OAINF,IAAMG,QAMJqB,EAAoB5B,IAAOa,IAAV,oFAAGb,CAAH,6YAOnBI,IAAMC,gBAMND,IAAME,OAMNF,IAAMG,QAOKsB,UAzPqB,SAAC,GAAa,IAAXC,EAAW,EAAXA,KACrC,EAA8CC,oBAAS,GAAhDJ,EAAP,KAAwBK,EAAxB,KAYMC,EAVSH,EAAKI,sBAAsBC,MAAMC,MAAK,SAACjB,EAAQkB,GAC5D,OAAIlB,EAAEmB,KAAKC,MAAM,KAAK,GAAKF,EAAEC,KAAKC,MAAM,KAAK,IACnC,EAENpB,EAAEmB,KAAKC,MAAM,KAAK,GAAKF,EAAEC,KAAKC,MAAM,KAAK,GACpC,EAEF,KAGgBC,KAAI,SAACC,EAAQC,GAAT,eAC3B,kBAACjB,EAAD,CACEkB,IAAKD,EACLhB,OAAK,EACLC,gBAAiBA,EACjBiB,aAAc,kBAAMZ,GAAmB,IACvCa,aAAc,kBAAMb,GAAmB,KAEvC,kBAACR,EAAD,MACG,UAAAiB,EAAOK,gBAAP,mBAAiBC,YAAjB,eAAuBC,MACtB,yBAAKC,IAAKR,EAAOK,SAASC,KAAKC,IAAKE,IAAKT,EAAOH,QAGpD,kBAACpB,EAAD,KACE,kBAACE,EAAD,KAAaqB,EAAOH,MACpB,kBAACf,EAAD,KAAckB,EAAOU,eAK3B,OACE,kBAACpD,EAAD,KACE,kBAACS,EAAD,iBACA,kBAACoB,EAAD,KAAoBK","file":"sections-About-LeaderShip-9f7218009e3e55e9d1d1.js","sourcesContent":["import React, { useState } from 'react'\nimport styled from 'styled-components'\nimport Colors from 'styles/Colors'\nimport media from 'styles/media'\nimport { HeadlineM, Body } from 'components/Text'\n\ntype Props = {\n  data: {\n    allContentfulEmployee: {\n      nodes: [\n        {\n          name: string\n          jobTitle: string\n          headshot: { file: { url: string } }\n        }\n      ]\n    }\n  }\n}\nconst Leadership: React.FC<Props> = ({ data }) => {\n  const [someCardHovered, setSomeCardHovered] = useState(false)\n\n  const sorted = data.allContentfulEmployee.nodes.sort((a: any, b: any) => {\n    if (a.name.split(' ')[1] < b.name.split(' ')[1]) {\n      return -1\n    }\n    if (a.name.split(' ')[1] > b.name.split(' ')[1]) {\n      return 1\n    }\n    return 0\n  })\n\n  const rRLeaders = sorted.map((leader, index) => (\n    <ImageSmall\n      key={index}\n      final\n      someCardHovered={someCardHovered}\n      onMouseEnter={() => setSomeCardHovered(true)}\n      onMouseLeave={() => setSomeCardHovered(false)}\n    >\n      <ImgWrapper>\n        {leader.headshot?.file?.url && (\n          <img src={leader.headshot.file.url} alt={leader.name} />\n        )}\n      </ImgWrapper>\n      <NameTag>\n        <LeaderName>{leader.name}</LeaderName>\n        <LeaderTitle>{leader.jobTitle}</LeaderTitle>\n      </NameTag>\n    </ImageSmall>\n  ))\n\n  return (\n    <Wrapper>\n      <Title>Our team</Title>\n      <SmallCardsWrapper>{rRLeaders}</SmallCardsWrapper>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled.section`\n  padding: 5.7vw 11.7vw 5.7vw 5.7vw;\n  position: relative;\n  overflow: hidden;\n\n  background: ${Colors.softBlack};\n\n  ${media.tabletLandscape} {\n    padding: 5.7vw 9.4vw;\n  }\n  ${media.tablet} {\n    height: auto;\n    padding: 6.3vw;\n  }\n  ${media.mobile} {\n    /* height: 609.1vw; */\n    padding: 12.8vw 3.2vw;\n  }\n`\n\nconst Title = styled(HeadlineM)`\n  font-weight: 500;\n  font-size: 54px;\n  line-height: 104%;\n  margin-left: 0;\n  margin-bottom: 2.9vw;\n  color: ${Colors.whiteSmoke};\n  ${media.fullWidth} {\n    font-size: 3.2vw;\n  }\n\n  ${media.tabletLandscape} {\n    width: 353px;\n  }\n  ${media.tablet} {\n    font-size: 54px;\n    width: 80vw;\n    margin-bottom: 12.5vw;\n  }\n  ${media.mobile} {\n    font-size: 36px;\n    line-height: 100%;\n    width: 66.7vw;\n  }\n`\n\nconst Image = styled.div<{ big?: boolean }>`\n  width: 19.6vw;\n  height: ${(props) => (props.big ? '25.4vw' : '15.7vw')};\n  transform: scale(1);\n  z-index: 1;\n  transition: 0.4s;\n  border: none;\n  ${media.tablet} {\n    width: 42.2vw;\n    height: ${(props) => (props.big ? '55.5vw' : '34.4vw')};\n  }\n  ${media.mobile} {\n    width: 45.3vw;\n    height: ${(props) => (props.big ? '58.7vw' : '36.3vw')};\n  }\n`\n\nconst Name = styled(Body)<{ big?: boolean }>`\n  position: absolute;\n  padding: 0 24px 0 12px;\n  background: ${Colors.whiteSmoke};\n  z-index: 2;\n  opacity: 0;\n  right: 0;\n  bottom: ${(props) => (props.big ? '12.5vw' : '2.9vw')};\n  transition: 0.4s;\n  ${media.tablet} {\n    bottom: ${(props) => (props.big ? '32vw' : '10.9vw')};\n    opacity: 1;\n  }\n  ${media.mobile} {\n    font-size: 12px;\n    bottom: auto;\n    top: ${(props) => (props.big ? '32vw' : '26.1vw')};\n  }\n`\n\nconst CardWrapper = styled.a`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 5.7vw;\n  :hover ${Image} {\n    transition: 0.4s;\n    transform: scale(1.025);\n    transform-origin: 50% 50%;\n  }\n\n  :hover ${Name} {\n    right: -4px;\n    opacity: 1;\n    transition: 0.4s;\n  }\n  ${media.tablet} {\n    margin-bottom: 6.3vw;\n  }\n`\n\nconst NameTag = styled.div`\n  opacity: 0;\n  background: ${Colors.whiteSmoke};\n  padding: 0.5vw 0.7vw 0.5vw 1.5vw;\n  position: absolute;\n  left: 0.7vw;\n  top: 6.8vw;\n  white-space: nowrap;\n  transition: opacity 250ms ease-out;\n  z-index: 300;\n  ${media.tabletLandscape} {\n    display: none;\n  }\n`\nconst LeaderName = styled.p`\n  font-size: 0.7vw;\n  font-family: Maison Neue Mono;\n  line-height: 1.1vw;\n  position: relative;\n  ::before {\n    position: absolute;\n    content: '//';\n    font-size: 0.7vw;\n    font-weight: bold;\n    left: -0.8vw;\n    letter-spacing: 0.016em;\n    color: ${Colors.blueYonder};\n    font-family: Maison Neue;\n  }\n`\nconst LeaderTitle = styled.p`\n  font-size: 0.7vw;\n  font-weight: bold;\n  line-height: 1.1vw;\n`\nconst ImgWrapper = styled.div`\n  transition: opacity 250ms ease-out;\n`\nconst ImageSmall = styled.div<{ final: boolean; someCardHovered: boolean }>`\n  width: 9.1vw;\n  height: 9.1vw;\n  opacity: ${(props) => (props.final ? 1 : 0.5)};\n  border: none;\n  position: relative;\n  overflow: visible;\n  z-index: 0;\n  :hover {\n    z-index: 1;\n    ${NameTag} {\n      opacity: 1;\n    }\n  }\n  :not(:hover) {\n    ${ImgWrapper} {\n      opacity: ${(props) => (props.someCardHovered ? 0.5 : 1)};\n    }\n  }\n  ${media.tabletLandscape} {\n    :not(:hover) {\n      ${ImgWrapper} {\n        opacity: 1;\n      }\n    }\n  }\n  ${media.tabletLandscape} {\n    width: 15vw;\n    height: 15vw;\n  }\n  ${media.tablet} {\n    width: 20.5vw;\n    height: 20.5vw;\n  }\n  ${media.mobile} {\n    width: 30vw;\n    height: 30vw;\n  }\n`\n\nconst SmallCardsWrapper = styled.div`\n  display: grid;\n  width: 84vw;\n  margin-top: 45px;\n  grid-template-columns: repeat(8, 9.1vw);\n  grid-column-gap: 1.4vw;\n  grid-row-gap: 1.4vw;\n  ${media.tabletLandscape} {\n    width: 100%;\n    grid-template-columns: repeat(5, 15vw);\n    grid-column-gap: 1.5vw;\n    grid-row-gap: 1.5vw;\n  }\n  ${media.tablet} {\n    width: 100%;\n    grid-template-columns: repeat(4, 20.5vw);\n    grid-column-gap: 1.8vw;\n    grid-row-gap: 1.8vw;\n  }\n  ${media.mobile} {\n    grid-template-columns: repeat(3, 30vw);\n    grid-column-gap: 1.6vw;\n    grid-row-gap: 1.6vw;\n  }\n`\n\nexport default Leadership\n"],"sourceRoot":""}