{"version":3,"file":"component---src-pages-about-us-tsx-144ea1cd490c03f4cfb5.js","mappings":"oVAAA,EAAe,IAA0B,oDCMnCA,EAAU,GAGHC,EAAUC,EAAAA,GAAAA,IAAH,+KAIPF,GAGF,qBAAGG,MAAkBC,QAAQC,UAKlCC,EAAUJ,EAAAA,GAAAA,QAAH,kLAQF,qBAAGC,MAAkBC,QAAQC,UAO3BE,GAAeL,EAAAA,EAAAA,IAAOI,EAAPJ,CAAH,yNAEV,qBAAGC,MAAkBK,WAAWC,yBAWlCC,GAAeR,EAAAA,EAAAA,IAAOI,EAAPJ,CAAH,kHACV,qBAAGC,MAAkBK,WAAWG,uBAGpC,qBAAGR,MAAkBC,QAAQC,UAK3BO,EAAQV,EAAAA,GAAAA,GAAH,4OAYP,qBAAGC,MAAkBC,QAAQC,UAK3BQ,GAAiBX,EAAAA,EAAAA,IAAOI,EAAPJ,CAAH,yOAIvBU,GAIO,qBAAGT,MAAkBC,QAAQC,UACvB,qBAAGF,MAAkBK,WAAWC,wBAChCT,EAGXY,GAMOE,EAAcZ,EAAAA,GAAAA,GAAH,iEAKXa,EAAcb,EAAAA,GAAAA,GAAH,kaAQlB,qBAAGc,WACU,qBAAuB,8BAI1B,gBAAGA,EAAH,EAAGA,WAAYC,EAAf,EAAeA,SAAUC,EAAzB,EAAyBA,MAAzB,OACXF,IAAeE,GAAUD,EAAW,OAAS,QAGlC,qBAAGd,MAAkBgB,GAAGC,WAAW,UAIxC,qBAAGjB,MAAkBC,QAAQC,UACtB,qBAAGW,WAA+B,OAAS,QAMhDK,EAAcnB,EAAAA,GAAAA,KAAH,kRACT,qBAAGC,MAAkBmB,SAASC,QAIhC,qBAAGP,WAA+B,IAAM,SACpC,gBAAGA,EAAH,EAAGA,WAAYb,EAAf,EAAeA,MAAf,OACba,EAAab,EAAMqB,WAAWC,KAAOtB,EAAMqB,WAAWE,SAG1C,qBAAGvB,MAAkBgB,GAAGC,WAAW,UAExC,qBAAGjB,MAAkBC,QAAQC,UAK3BsB,EAAsBzB,EAAAA,GAAAA,IAAH,gFAMnB0B,GAAwB1B,EAAAA,GAAAA,IAAH,+ZAKZ,qBAAGC,MAAkB0B,QAAQC,QAEtC,qBAAGd,WAA+B,IAAM,OACjC,qBAAGA,WAA+B,MAAQ,UAC9C,qBAAGb,MAAkBgB,GAAGC,WAAW,cAIzC,qBAAGF,MAAqB,OAAS,OAChC,qBAAGA,MAAqB,mBAAqB,UAC7C,gEAAGa,YAAH,QAKA,qBAAG5B,MAAkBC,QAAQC,UAU3B,qBAAGF,MAAkBC,QAAQC,UAM7B2B,GAAe9B,EAAAA,GAAAA,GAAH,sKAGV,qBAAGC,MAAkBmB,SAASW,kBAElC,qBAAG9B,MAAkBC,QAAQC,UACvB,qBAAGF,MAAkBmB,SAASY,SAKlCC,IAAcjC,EAAAA,EAAAA,IAAOI,EAAPJ,CAAH,4KAKb,qBAAGC,MAAkBC,QAAQgC,QAEpBpC,GAIPqC,GAAcnC,EAAAA,GAAAA,IAAH,6GACb,qBAAGC,MAAkBC,QAAQgC,SAGvB,qBAAGjC,MAAkBK,WAAWC,yBAIpC6B,GAASpC,EAAAA,GAAAA,IAAH,swBAIRF,EAECA,GAID,qBAAGG,MAAkBC,QAAQC,UAQ7B,qBAAGF,MAAkBC,QAAQgC,QAMVG,GAsBjBC,GAAiBtC,EAAAA,GAAAA,IAAH,+RAIhB,qBAAGC,MAAkBC,QAAQgC,QAQlCxB,GAMO6B,GAAevC,EAAAA,GAAAA,IAAH,iuBAiBZF,EAECA,GAIH,qBAAGG,MAAkBC,QAAQgC,SAmB3BM,GAAYxC,EAAAA,GAAAA,IAAH,qkBAEXF,EAICA,EAOgBuC,GAmBjB,qBAAGpC,MAAkBC,QAAQgC,SAK3BO,IAAazC,EAAAA,EAAAA,IAAO0C,EAAAA,EAAP1C,CAAH,4FAGZ,qBAAGC,MAAkBC,QAAQgC,SAK3BS,IAAgB3C,EAAAA,EAAAA,IAAOI,EAAPJ,CAAH,sBAEb4C,GAAkB5C,EAAAA,GAAAA,IAAH,kIAIjB,qBAAGC,MAAkBC,QAAQ2C,SAM3BC,GAAiB9C,EAAAA,GAAAA,IAAH,kOAOhB,qBAAGC,MAAkBC,QAAQ2C,SAW3BE,GAAW/C,EAAAA,GAAAA,IAAH,wJAWRgD,GAAahD,EAAAA,GAAAA,EAAH,qEAKViD,GAAejD,EAAAA,GAAAA,IAAH,kHAOZkD,IAAclD,EAAAA,EAAAA,IAAOI,EAAPJ,CAAH,kHAOXmD,GAAMnD,EAAAA,GAAAA,IAAH,kQAWL,qBAAGC,MAAkBC,QAAQC,UAK3BiD,IAAWpD,EAAAA,EAAAA,IAAOqD,EAAAA,EAAPrD,CAAH,yDAKRsD,GAAgBtD,EAAAA,GAAAA,IAAH,sJC1X1B,GApDgB,SAAC,GAAuC,IAArCuD,EAAoC,EAApCA,KACjB,GAA0CC,EAAAA,EAAAA,UAASD,EAAKE,OAAS,GAA1DC,EAAP,KAAsBC,EAAtB,KACMC,GAAsBC,EAAAA,EAAAA,QAA6B,MACnDC,EAA4BP,EAC/BQ,KAEC,qBAAGC,eAEJC,MAAK,SAACC,EAAGC,GAAJ,OAAUD,EAAEE,MAAQD,EAAEC,SAE9B,OACE,gBAACzD,EAAD,KACE,gBAACD,EAAD,oBAEA,gBAACE,EAAD,KACGkD,EAAWC,KAAI,WAA6BM,GAAW,IAArCrC,EAAoC,EAApCA,MAAOsC,EAA6B,EAA7BA,MAAOC,EAAsB,EAAtBA,SACzBzD,EAAauD,IAAUX,EACvBc,EAAYV,EAAWL,OAAS,EAChCgB,EAAaD,EAAY,EACzBxD,EAAQqD,GAASI,EACjB1D,EACJsD,EAAQ,IAAMI,GAAcf,GAAiBe,EAE/C,OACE,gBAAC5D,EAAD,CACE6D,QAAS,kBAAMf,EAAiBU,IAChCM,IAAK3C,EACLqC,MAAOA,EACPO,IAAK9D,EAAa8C,EAAsB,KACxC5C,MAAOA,EACPF,WAAYA,EACZC,SAAUA,GAEV,gBAACI,EAAD,CAAaL,WAAYA,GAAakB,GACtC,gBAACP,EAAD,KACE,gBAACC,GAAD,CACEZ,WAAYA,EACZE,MAAOA,EACPa,YAAab,EAAQwD,EAAYH,EAAQA,GAEzC,gBAAC,IAAD,CAAKQ,MAAK,iBAAOP,EAAMQ,UAAUC,gBAAgBF,SACjD,gBAAC/C,GAAD,KAAeyC,YC3DjC,GAAe,IAA0B,yECAzC,GAAe,IAA0B,0ECqOzC,GA5LuB,WACrB,OAYIS,EAAAA,EAAAA,gBAAe,cAXjBC,EADF,EACEA,QACAC,EAFF,EAEEA,YAFF,IAGEC,KACEC,SACEC,EALN,EAKMA,aACAC,EANN,EAMMA,aACAC,EAPN,EAOMA,UACAC,EARN,EAQMA,gBACAC,EATN,EASMA,SAmEA3B,EAA+BoB,EAAYQ,MAC9C3B,KAAI,YAAmE,IAAjDmB,EAAgD,EAA/DS,cAA4B3D,EAAmC,EAAnCA,MAClC,OAAO,OAAP,UACKkD,EADL,CAEElD,MAAAA,OAIHiC,MAAK,SAACC,EAAQC,GAAT,OAAoBD,EAAEE,MAAQD,EAAEC,SAMxC,OACE,gBAACrE,EAAD,KACE,gBAACM,EAAD,KACE,yBAAOuF,UAAQ,EAACC,UAAQ,EAACC,MAAI,EAACC,OAAK,GACjC,0BAAQC,KAAK,aAAaC,IAAKC,KAC/B,0BAAQF,KAAK,YAAYC,IAAKE,OAGlC,gBAAC3F,EAAD,KACE,gBAACE,EAAD,KAAQ2E,GACR,qBAAGe,wBAAyB,CAAEC,OAAQf,MAGxC,gBAAC,GAAD,CAAS/B,KAAM0B,EAAQS,QAEvB,gBAACzD,GAAD,KACE,gBAACG,GAAD,MACA,gBAACD,GAAD,KACE,gBAACI,GAAD,KACE,gBAACC,GAAD,MACA,gBAAC,EAAA8D,EAAD,CACEL,IAAI,yDACJM,IAAI,GACJC,YAAY,UAHd,uBAMF,gBAAClE,GAAD,KACE,gBAAC5B,EAAD,CAAO+F,GAAG,MACR,8BAASjB,GACT,4BAAOD,IAET,yBAAIE,GACJ,gBAAChD,GAAD,CAAYgE,GAAIC,EAAAA,KAAMC,GAAIC,EAAAA,GAAAA,WAA1B,gBAON,gBAACjE,GAAD,KACE,gBAACjC,EAAD,wBAEA,gBAACkC,GAAD,KACE,gBAACE,GAAD,KACE,gBAACC,GAAD,KACE,gBAAC,EAAAuD,EAAD,CACEL,IAAI,iEACJM,IAAI,GACJC,YAAY,UAHd,uBAMF,gBAACxD,GAAD,uCACA,2GAKF,gBAACF,GAAD,KACE,gBAACC,GAAD,KACE,gBAAC,EAAAuD,EAAD,CACEL,IAAI,wDACJM,IAAI,GACJC,YAAY,UAHd,uBAMF,gBAACxD,GAAD,6BACA,2JAQN,gBAACE,GAAD,KACE,gBAACxC,EAAD,sBAEA,gBAACuC,GAAD,KACGa,EAAWC,KAAI,WAAwBY,GAAS,IAAD,IAA7BL,EAA6B,EAA7BA,MAAOuC,EAAsB,EAAtBA,IAAK7E,EAAiB,EAAjBA,MAC7B,OACE,gBAACmB,GAAD,CAAKwB,IAAK3C,EAAQ2C,GAChB,gBAACvB,GAAD,CACEyB,MAAOP,MAAAA,GAAF,UAAEA,EAAOQ,iBAAT,iBAAE,EAAkBC,uBAApB,aAAE,EAAmCF,MAC1C0B,IAAKvE,IAEP,qBAAG8E,KAAMD,EAAKE,OAAO,SAASC,IAAI,uBAChC,gBAAC1D,GAAD,eC7LlB,GAnBgB,WACd,IAAQ2D,GAAWjC,EAAAA,EAAAA,gBAAe,cAA1BiC,OAUR,OAFAA,EAAOC,IAAIC,aAAeP,EAAAA,GAAAA,QAGxB,gBAACQ,EAAA,EAAD,CAAQC,gBAAiBpH,EAAAA,GAAAA,QAAAA,MACvB,gBAACqH,EAAA,EAAD,CAAKC,SAAUN,GAAU,KACzB,gBAAC,GAAD,S","sources":["webpack://gatsby-starter-default/./src/images/about-us/sides.png","webpack://gatsby-starter-default/./src/components/AboutUs/styled.tsx","webpack://gatsby-starter-default/./src/components/AboutUs/History.tsx","webpack://gatsby-starter-default/./src/videos/Minebest_2021_Introduction.mp4","webpack://gatsby-starter-default/./src/videos/Minebest_2021_Introduction.webm","webpack://gatsby-starter-default/./src/components/AboutUs/AboutUsContent.tsx","webpack://gatsby-starter-default/./src/pages/about-us.tsx"],"sourcesContent":["export default __webpack_public_path__ + \"static/sides-89ed02a0f8ef86f697f5b11701b2b3c7.png\";","import styled from 'styles/styled';\nimport Img, { FluidObject } from 'gatsby-image';\n\nimport { Button } from 'components/UI/Button';\nimport sideImage from 'images/about-us/sides.png';\n\nconst PADDING = 18;\nconst itemWidth = '38px';\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 100px;\n  padding: ${PADDING}px;\n  width: 100%;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    padding: 60px 0 0;\n  }\n`;\n\nconst Section = styled.section`\n  margin-left: auto;\n  margin-right: auto;\n\n  & + & {\n    margin-top: 50px;\n  }\n\n  @media ${({ theme }) => theme.devices.medium} {\n    & + & {\n      margin-top: 90px;\n    }\n  }\n`;\n\nexport const VideoWrapper = styled(Section)`\n  box-shadow: 0 0 60px 0 rgba(0, 127, 226, 0.6);\n  max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n  margin: 0 auto;\n  width: 100%;\n\n  video {\n    max-width: 100%;\n    vertical-align: middle;\n    width: 100%;\n  }\n`;\n\nexport const IntroWrapper = styled(Section)`\n  max-width: ${({ theme }) => theme.dimensions.blogContentMaxWidth}px;\n  text-align: center;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    text-align: left;\n  }\n`;\n\nexport const Title = styled.h2`\n  font-size: 18px;\n  font-weight: 300;\n  margin-bottom: 20px;\n  text-align: center;\n  text-transform: uppercase;\n\n  span,\n  strong {\n    display: block;\n  }\n\n  @media ${({ theme }) => theme.devices.medium} {\n    font-size: 26px;\n  }\n`;\n\nexport const HistoryWrapper = styled(Section)`\n  overflow: hidden;\n  width: 100%;\n\n  ${Title} {\n    text-align: center;\n  }\n\n  @media ${({ theme }) => theme.devices.medium} {\n    max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n    padding: 0 ${PADDING}px;\n    width: 100%;\n\n    ${Title} {\n      text-align: left;\n    }\n  }\n`;\n\nexport const HistoryList = styled.ul`\n  display: flex;\n  position: relative;\n`;\n\nexport const HistoryItem = styled.li<{\n  isSelected: boolean;\n  openPrev: boolean;\n  right: boolean;\n  index: number;\n}>`\n  align-items: flex-start;\n  border-left: 2px solid\n    ${({ isSelected }) =>\n      isSelected ? 'rgb(255, 255, 255)' : 'rgba(255, 255, 255, 0.4)'};\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  flex-basis: ${({ isSelected, openPrev, right }) =>\n    (isSelected && !right) || openPrev ? '100%' : '0%'};\n  flex-grow: 0;\n  height: calc(50vw + 300px);\n  transition: ${({ theme }) => theme.ui.transition('all')};\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  -webkit-tap-highlight-color: transparent;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    flex-basis: ${({ isSelected }) => (isSelected ? '100%' : '0%')};\n    height: 600px;\n    padding: 0;\n  }\n`;\n\nexport const HistoryDate = styled.span<{ isSelected: boolean }>`\n  font-size: ${({ theme }) => theme.fontSize.base};\n  line-height: 1;\n  margin-bottom: 30px;\n  text-orientation: mixed;\n  opacity: ${({ isSelected }) => (isSelected ? '1' : '0.5')};\n  font-weight: ${({ isSelected, theme }) =>\n    isSelected ? theme.fontWeight.bold : theme.fontWeight.light};\n  padding: 0 10px;\n  writing-mode: vertical-rl;\n  transition: ${({ theme }) => theme.ui.transition('all')};\n\n  @media ${({ theme }) => theme.devices.medium} {\n    padding: 0 30px 0 10px;\n  }\n`;\n\nexport const HistoryContentOuter = styled.div`\n  flex-grow: 1;\n  position: relative;\n  width: 100%;\n`;\n\nexport const HistoryContentWrapper = styled.div<{\n  isSelected: boolean;\n  right: boolean;\n  widthFactor: number;\n}>`\n  background-color: ${({ theme }) => theme.palette.dark};\n  bottom: 0;\n  opacity: ${({ isSelected }) => (isSelected ? '1' : '0')};\n  pointer-events: ${({ isSelected }) => (isSelected ? 'all' : 'none')};\n  transition: ${({ theme }) => theme.ui.transition('opacity')};\n  position: absolute;\n  top: 0;\n  z-index: 1;\n  left: ${({ right }) => (right ? 'auto' : '0')};\n  right: ${({ right }) => (right ? 'calc(100% + 2px)' : 'auto')};\n  width: ${({ widthFactor }) =>\n    `calc(100vw - ${\n      PADDING * 2\n    }px - 2px - ${itemWidth} - (${itemWidth} * ${widthFactor}))`};\n\n  @media ${({ theme }) => theme.devices.medium} {\n    left: 0;\n    right: auto;\n    max-width: 100%;\n    width: 100%;\n  }\n\n  .gatsby-image-wrapper {\n    height: 50vw;\n\n    @media ${({ theme }) => theme.devices.medium} {\n      height: 300px;\n    }\n  }\n`;\n\nexport const HistoryTitle = styled.h3`\n  letter-spacing: 1px;\n  padding: 15px 7.5px 0;\n  font-size: ${({ theme }) => theme.fontSize.subtitleMobile};\n\n  @media ${({ theme }) => theme.devices.medium} {\n    font-size: ${({ theme }) => theme.fontSize.title};\n    padding: 20px 13.5px 0;\n  }\n`;\n\nexport const EyalWrapper = styled(Section)`\n  position: relative;\n  padding-bottom: 30px;\n  width: 100%;\n\n  @media ${({ theme }) => theme.devices.large} {\n    margin-top: 150px !important;\n    padding: 30px ${PADDING}px;\n  }\n`;\n\nexport const FlexWrapper = styled.div`\n  @media ${({ theme }) => theme.devices.large} {\n    display: flex;\n    margin: 0 auto;\n    max-width: ${({ theme }) => theme.dimensions.contentMaxWidthMedium}px;\n  }\n`;\n\nexport const EyalBg = styled.div`\n  background-color: #000e18;\n  bottom: 0;\n  content: '';\n  left: -${PADDING}px;\n  overflow: hidden;\n  right: -${PADDING}px;\n  top: 100px;\n  position: absolute;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    left: 50%;\n    right: auto;\n    transform: translateX(-50%);\n    max-width: 100%;\n    width: 100vw;\n  }\n\n  @media ${({ theme }) => theme.devices.large} {\n    top: 0;\n\n    &::after,\n    &::before {\n      content: '';\n      background-image: url(${sideImage});\n      background-size: cover;\n      height: 100%;\n      max-width: 100%;\n      position: absolute;\n      top: 0;\n      width: 50vw;\n    }\n\n    &::before {\n      background-position: 60% 100%;\n      left: 0;\n      transform: rotateZ(180deg);\n    }\n\n    &::after {\n      background-position: 80% 100%;\n      right: 0;\n    }\n  }\n`;\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  text-align: center;\n\n  @media ${({ theme }) => theme.devices.large} {\n    display: flex;\n    flex-basis: 55%;\n    flex-direction: column;\n    justify-content: center;\n    padding-left: 50px;\n    text-align: left;\n\n    ${Title} {\n      text-align: left;\n    }\n  }\n`;\n\nexport const ImageWrapper = styled.div`\n  overflow: hidden;\n  position: relative;\n\n  .gatsby-image-wrapper {\n    display: block;\n    margin: 0 auto 10px;\n    max-width: 400px;\n    position: relative;\n    z-index: 1;\n  }\n\n  &::after {\n    background-image: linear-gradient(rgba(0, 14, 24, 0), rgba(0, 14, 24, 1));\n    bottom: 0;\n    content: '';\n    height: 50px;\n    left: -${PADDING}px;\n    position: absolute;\n    right: -${PADDING}px;\n    z-index: 2;\n  }\n\n  @media ${({ theme }) => theme.devices.large} {\n    flex-basis: 45%;\n    overflow: initial;\n\n    .gatsby-image-wrapper {\n      bottom: -30px;\n      left: 0;\n      margin: 0;\n      max-width: none;\n      position: absolute !important;\n      right: 0;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n`;\n\nexport const EyalSides = styled.div`\n  bottom: 0;\n  left: -${PADDING}px;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  right: -${PADDING}px;\n  top: 100px;\n  z-index: 0;\n\n  &::after,\n  &::before {\n    content: '';\n    background-image: url(${sideImage});\n    background-size: cover;\n    height: 50vw;\n    position: absolute;\n    top: 0;\n    width: 50vw;\n  }\n\n  &::before {\n    background-position: 60% 100%;\n    left: 0;\n    transform: rotateZ(180deg);\n  }\n\n  &::after {\n    background-position: 80% 100%;\n    right: 0;\n  }\n\n  @media ${({ theme }) => theme.devices.large} {\n    display: none;\n  }\n`;\n\nexport const StyledLink = styled(Button)`\n  margin: 30px auto 0;\n\n  @media ${({ theme }) => theme.devices.large} {\n    margin-left: 0;\n  }\n`;\n\nexport const AwardsWrapper = styled(Section)``;\n\nexport const AwardsContainer = styled.div`\n  margin: 0 auto;\n  max-width: 300px;\n\n  @media ${({ theme }) => theme.devices.small} {\n    display: flex;\n    max-width: 550px;\n  }\n`;\n\nexport const AwardContainer = styled.div`\n  text-align: center;\n\n  & + & {\n    margin-top: 20px;\n  }\n\n  @media ${({ theme }) => theme.devices.small} {\n    flex-basis: 50%;\n    text-align: left;\n\n    & + & {\n      margin-top: 0;\n      margin-left: 30px;\n    }\n  }\n`;\n\nexport const AwardImg = styled.div`\n  border: 1px solid #fff;\n  margin-bottom: 10px;\n  padding: 20px;\n  text-align: center;\n\n  img {\n    height: 100px;\n  }\n`;\n\nexport const AwardTitle = styled.p`\n  font-weight: 700;\n  margin-bottom: 10px;\n`;\n\nexport const BoxesWrapper = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const ReadWrapper = styled(Section)`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n`;\n\nexport const Box = styled.div`\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 225px;\n  height: 126px;\n  padding: 44px 13px 43px;\n  margin: 5px;\n\n  @media ${({ theme }) => theme.devices.medium} {\n    margin: 10px;\n  }\n`;\n\nexport const BoxImage = styled(Img)<{ fluid: FluidObject }>`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const BoxBackground = styled.div`\n  position: absolute;\n  opacity: 0.1;\n  background-color: #d8d8d8;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n`;\n","import React, { useRef, useState } from 'react';\nimport Img from 'gatsby-image';\n\nimport { AboutUsTypes } from 'types';\n\nimport {\n  HistoryContentWrapper,\n  HistoryContentOuter,\n  HistoryDate,\n  HistoryItem,\n  HistoryList,\n  HistoryTitle,\n  HistoryWrapper,\n  Title,\n} from './styled';\n\ntype HistoryData = AboutUsTypes.HistoryInterface;\n\nconst History = ({ data }: { data: HistoryData[] }) => {\n  const [selectedIndex, setSelectedIndex] = useState(data.length - 1);\n  const historySelectedItem = useRef<HTMLLIElement | null>(null);\n  const mappedData: HistoryData[] = data\n    .map(\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ({ our_history }: any) => our_history,\n    )\n    .sort((a, b) => a.order - b.order);\n\n  return (\n    <HistoryWrapper>\n      <Title>Our history</Title>\n\n      <HistoryList>\n        {mappedData.map(({ title, image, subtitle }, index) => {\n          const isSelected = index === selectedIndex;\n          const lastIndex = mappedData.length - 1;\n          const rightLimit = lastIndex - 1;\n          const right = index >= rightLimit;\n          const openPrev =\n            index + 1 === rightLimit && selectedIndex >= rightLimit;\n\n          return (\n            <HistoryItem\n              onClick={() => setSelectedIndex(index)}\n              key={title}\n              index={index}\n              ref={isSelected ? historySelectedItem : null}\n              right={right}\n              isSelected={isSelected}\n              openPrev={openPrev}\n            >\n              <HistoryDate isSelected={isSelected}>{title}</HistoryDate>\n              <HistoryContentOuter>\n                <HistoryContentWrapper\n                  isSelected={isSelected}\n                  right={right}\n                  widthFactor={right ? lastIndex - index : index}\n                >\n                  <Img fluid={{ ...image.localFile.childImageSharp.fluid }} />\n                  <HistoryTitle>{subtitle}</HistoryTitle>\n                </HistoryContentWrapper>\n              </HistoryContentOuter>\n            </HistoryItem>\n          );\n        })}\n      </HistoryList>\n    </HistoryWrapper>\n  );\n};\n\nexport default History;\n","export default __webpack_public_path__ + \"static/Minebest_2021_Introduction-e555711210af9da3b161c11270d457a5.mp4\";","export default __webpack_public_path__ + \"static/Minebest_2021_Introduction-686b85377248a105342ae2335a747f31.webm\";","import React from 'react';\nimport { graphql, Link, useStaticQuery } from 'gatsby';\nimport { StaticImage } from 'gatsby-plugin-image';\n\nimport { AboutUsTypes } from 'types';\n\nimport { ROUTES } from 'constants/common';\nimport History from 'components/AboutUs/History';\nimport videoMP3 from 'videos/Minebest_2021_Introduction.mp4';\nimport videoWEBM from 'videos/Minebest_2021_Introduction.webm';\n\nimport {\n  Wrapper,\n  IntroWrapper,\n  Title,\n  EyalBg,\n  EyalSides,\n  EyalWrapper,\n  ContentWrapper,\n  ImageWrapper,\n  ReadWrapper,\n  BoxesWrapper,\n  Box,\n  BoxBackground,\n  BoxImage,\n  VideoWrapper,\n  StyledLink,\n  FlexWrapper,\n  AwardsWrapper,\n  AwardContainer,\n  AwardsContainer,\n  AwardImg,\n  AwardTitle,\n} from './styled';\n\ntype READ_MORE_DATA = AboutUsTypes.ReadMoreInterface;\ntype MAPPED_READ_MORE_DATA = {\n  read_about_us: READ_MORE_DATA;\n  title: Pick<READ_MORE_DATA, 'title'>;\n};\n\nconst AboutUsContent = () => {\n  const {\n    history,\n    readAboutUs,\n    page: {\n      about_us: {\n        aboutUsTitle,\n        aboutUsIntro,\n        eyalTitle,\n        eyalTitlePrefix,\n        eyalDesc,\n      },\n    },\n  } = useStaticQuery(graphql`\n    query AboutUs {\n      history: allWpPost(\n        filter: {\n          categories: { nodes: { elemMatch: { slug: { eq: \"history\" } } } }\n        }\n      ) {\n        nodes {\n          our_history {\n            image {\n              localFile {\n                childImageSharp {\n                  fluid(quality: 100) {\n                    ...GatsbyImageSharpFluid_withWebp\n                  }\n                  id\n                }\n              }\n            }\n            subtitle\n            title\n            order\n          }\n          date\n        }\n      }\n\n      readAboutUs: allWpPost(\n        filter: {\n          categories: {\n            nodes: { elemMatch: { slug: { eq: \"read-about-us\" } } }\n          }\n        }\n      ) {\n        nodes {\n          read_about_us {\n            url\n            order\n            image {\n              localFile {\n                childImageSharp {\n                  fluid(quality: 100) {\n                    ...GatsbyImageSharpFluid_withWebp\n                  }\n                }\n              }\n            }\n          }\n          title\n        }\n      }\n\n      page: wpPage(slug: { in: \"about-us\" }) {\n        about_us {\n          aboutUsIntro\n          aboutUsTitle\n          eyalDesc\n          eyalTitlePrefix\n          eyalTitle\n        }\n      }\n    }\n  `);\n\n  const mappedData: READ_MORE_DATA[] = readAboutUs.nodes\n    .map(({ read_about_us: readAboutUs, title }: MAPPED_READ_MORE_DATA) => {\n      return {\n        ...readAboutUs,\n        title,\n      };\n    })\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    .sort((a: any, b: any) => a.order - b.order);\n\n  // const sliderData = ourMiners.nodes.map(\n  //   ({ our_miners }: { our_miners: AboutUsTypes.OurMiners }) => our_miners,\n  // );\n\n  return (\n    <Wrapper>\n      <VideoWrapper>\n        <video autoPlay controls loop muted>\n          <source type=\"video/webm\" src={videoWEBM} />\n          <source type=\"video/mp4\" src={videoMP3} />\n        </video>\n      </VideoWrapper>\n      <IntroWrapper>\n        <Title>{aboutUsTitle}</Title>\n        <p dangerouslySetInnerHTML={{ __html: aboutUsIntro }} />\n      </IntroWrapper>\n\n      <History data={history.nodes} />\n\n      <EyalWrapper>\n        <EyalBg />\n        <FlexWrapper>\n          <ImageWrapper>\n            <EyalSides />\n            <StaticImage\n              src=\"../../images/about-us/eyal_avramovich_ceo_minebest.png\"\n              alt=\"\"\n              placeholder=\"blurred\"\n            />\n          </ImageWrapper>\n          <ContentWrapper>\n            <Title as=\"h1\">\n              <strong>{eyalTitlePrefix}</strong>\n              <span>{eyalTitle}</span>\n            </Title>\n            <p>{eyalDesc}</p>\n            <StyledLink as={Link} to={ROUTES.aboutEyal}>\n              READ MORE\n            </StyledLink>\n          </ContentWrapper>\n        </FlexWrapper>\n      </EyalWrapper>\n\n      <AwardsWrapper>\n        <Title>Business Awards</Title>\n\n        <AwardsContainer>\n          <AwardContainer>\n            <AwardImg>\n              <StaticImage\n                src=\"../../images/about-us/minebest_crypto_mining_company_award.png\"\n                alt=\"\"\n                placeholder=\"blurred\"\n              />\n            </AwardImg>\n            <AwardTitle>Best Reputation of Mining Farm</AwardTitle>\n            <p>\n              Winner of the International Digital Mining Summit (IDMS) in\n              Schenzhen, China.\n            </p>\n          </AwardContainer>\n          <AwardContainer>\n            <AwardImg>\n              <StaticImage\n                src=\"../../images/about-us/minebest_bitcoin_farm_award.png\"\n                alt=\"\"\n                placeholder=\"blurred\"\n              />\n            </AwardImg>\n            <AwardTitle>Top Ten Mining Farms</AwardTitle>\n            <p>\n              Winner for Professional Design and Excellent Construction of World\n              Digital Mining Summit 2019 (WDMS) in Frankfurt, Germany.\n            </p>\n          </AwardContainer>\n        </AwardsContainer>\n      </AwardsWrapper>\n\n      <ReadWrapper>\n        <Title>Read about us</Title>\n\n        <BoxesWrapper>\n          {mappedData.map(({ image, url, title }, key) => {\n            return (\n              <Box key={title + key}>\n                <BoxImage\n                  fluid={image?.localFile?.childImageSharp?.fluid}\n                  alt={title}\n                />\n                <a href={url} target=\"_blank\" rel=\"noreferrer noopener\">\n                  <BoxBackground />\n                </a>\n              </Box>\n            );\n          })}\n        </BoxesWrapper>\n      </ReadWrapper>\n    </Wrapper>\n  );\n};\n\nexport default AboutUsContent;\n","import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\n\nimport { theme } from 'styles/styled';\nimport { ROUTES } from 'constants/common';\n\nimport SEO from 'components/SEO';\nimport Layout from 'components/Layout';\nimport AboutUsContent from 'components/AboutUs';\n\nconst AboutUs = () => {\n  const { wpPage } = useStaticQuery(graphql`\n    query {\n      wpPage(slug: { in: \"about-us\" }) {\n        ...MetaData\n      }\n    }\n  `);\n\n  wpPage.seo.opengraphUrl = ROUTES.aboutUs;\n\n  return (\n    <Layout backgroundColor={theme.palette.dark}>\n      <SEO metadata={wpPage || {}} />\n      <AboutUsContent />\n    </Layout>\n  );\n};\n\nexport default AboutUs;\n"],"names":["PADDING","Wrapper","styled","theme","devices","medium","Section","VideoWrapper","dimensions","contentMaxWidthMedium","IntroWrapper","blogContentMaxWidth","Title","HistoryWrapper","HistoryList","HistoryItem","isSelected","openPrev","right","ui","transition","HistoryDate","fontSize","base","fontWeight","bold","light","HistoryContentOuter","HistoryContentWrapper","palette","dark","widthFactor","HistoryTitle","subtitleMobile","title","EyalWrapper","large","FlexWrapper","EyalBg","sideImage","ContentWrapper","ImageWrapper","EyalSides","StyledLink","Button","AwardsWrapper","AwardsContainer","small","AwardContainer","AwardImg","AwardTitle","BoxesWrapper","ReadWrapper","Box","BoxImage","Img","BoxBackground","data","useState","length","selectedIndex","setSelectedIndex","historySelectedItem","useRef","mappedData","map","our_history","sort","a","b","order","index","image","subtitle","lastIndex","rightLimit","onClick","key","ref","fluid","localFile","childImageSharp","useStaticQuery","history","readAboutUs","page","about_us","aboutUsTitle","aboutUsIntro","eyalTitle","eyalTitlePrefix","eyalDesc","nodes","read_about_us","autoPlay","controls","loop","muted","type","src","videoWEBM","videoMP3","dangerouslySetInnerHTML","__html","S","alt","placeholder","as","Link","to","ROUTES","url","href","target","rel","wpPage","seo","opengraphUrl","Layout","backgroundColor","SEO","metadata"],"sourceRoot":""}