{"version":3,"file":"js/HeroCentered-HeroCentered-b94679ff5dc4d248effa.chunk.js","mappings":"4LAiFA,QAhEqB,SAAHA,GASJ,IARZC,EAAKD,EAALC,MACAC,EAAQF,EAARE,SACAC,EAAUH,EAAVG,WACAC,EAAUJ,EAAVI,WACAC,EAAGL,EAAHK,IACAC,EAAMN,EAANM,OACAC,EAASP,EAATO,UACAC,EAAmBR,EAAnBQ,oBAEQC,EAAeC,EAAAA,WAAiBC,EAAAA,GAAhCF,WAER,OACEC,EAAAA,cAAA,OAAKE,UAAU,yEACbF,EAAAA,cAAA,OAAKE,UAAU,uHACZH,IAAeI,EAAAA,EAAWC,IACzBJ,EAAAA,cAACK,EAAAA,GAAQ,CAACC,MAAI,GACZN,EAAAA,cAAA,OAAKE,UAAU,0BAA0BK,IAAKX,EAAQY,IAAI,oBAG9DR,EAAAA,cAAA,OAAKE,UAAU,yHACbF,EAAAA,cAAA,OAAKS,GAAG,gBAAgBP,UAAU,aAChCF,EAAAA,cAAA,MAAIE,UAAU,yFACXX,IAGLS,EAAAA,cAAA,OAAKE,UAAU,+IACbF,EAAAA,cAAA,eACEA,EAAAA,cAAA,UAAQU,KAAK,aAAaC,OAAQb,IAClCE,EAAAA,cAAA,OACEY,cAAc,OACdV,UAAU,0CACVK,IAAKZ,EACLa,IAAI,qBAIVR,EAAAA,cAAA,OAAKE,UAAU,uFACbF,EAAAA,cAAA,MAAIE,UAAU,qFACXX,GAEHS,EAAAA,cAAA,OAAKE,UAAU,4HACZV,GAEHQ,EAAAA,cAACa,EAAAA,EAAkB,CACjBX,UAAU,4BACVY,WAAW,OACXC,OAAQrB,EACRsB,MAAM,QAELvB,KAINM,IAAeI,EAAAA,EAAWC,IACzBJ,EAAAA,cAACK,EAAAA,GAAQ,CAACC,MAAI,GACZN,EAAAA,cAAA,OAAKE,UAAU,0BAA0BK,IAAKV,EAAWW,IAAI,qBAMzE,C","sources":["webpack://printivity/./client/app/bundles/App/pages/HomePage/HeroCentered/HeroCentered.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\nimport * as React from 'react';\nimport LazyLoad from 'react-lazyload';\nimport ButtonAsNativeLink from 'styleguide/components/Button/ButtonAsNativeLink';\nimport ScreenSizeContext, { ScreenSize } from 'contexts/ScreenSizeContext/ScreenSizeContext';\n\ninterface Props {\n  title: string;\n  subtitle?: string;\n  buttonText: string;\n  buttonLink: string;\n  img?: string;\n  backgroundImageWebp?: string;\n  imgTop?: string;\n  imgBottom?: string;\n}\n\nconst HeroCentered = ({\n  title,\n  subtitle,\n  buttonText,\n  buttonLink,\n  img,\n  imgTop,\n  imgBottom,\n  backgroundImageWebp,\n}: Props) => {\n  const { screenSize } = React.useContext(ScreenSizeContext);\n\n  return (\n    <div className=\"border-b border-solid border-gray-50 bg-gradient-to-b from-[#f8f8f8] \">\n      <div className=\"mx-auto flex max-w-base justify-center overflow-hidden sm:h-160 sm:!bg-none -sm:h-128 -sm:flex-col -sm:items-center\">\n        {screenSize === ScreenSize.SM && (\n          <LazyLoad once>\n            <img className=\"h-full w-full sm:hidden\" src={imgTop} alt=\"business cards\" />\n          </LazyLoad>\n        )}\n        <div className=\"flex w-full max-w-screen-3xl grow flex-col py-4 xs:py-12 sm:flex-row sm:py-0 -sm:h-72 -sm:justify-center -sm:bg-white\">\n          <div id=\"mobile-header\" className=\"sm:hidden\">\n            <h2 className=\"text-center font-hvBold text-4xl tracking-tight text-default sm:text-left lg:text-5xl\">\n              {title}\n            </h2>\n          </div>\n          <div className=\"relative h-64 overflow-hidden xs:h-80 sm:flex sm:h-full sm:basis-1/2 sm:flex-row sm:justify-center md:basis-[40%] lg:basis-[55%] -sm:hidden\">\n            <picture>\n              <source type=\"image/webp\" srcSet={backgroundImageWebp} />\n              <img\n                fetchpriority=\"high\"\n                className=\"h-full w-full object-cover object-right\"\n                src={img}\n                alt=\"business cards\"\n              />\n            </picture>\n          </div>\n          <div className=\"mr-4 flex w-full flex-col justify-center sm:basis-1/2 md:basis-[60%] lg:basis-[45%]\">\n            <h2 className=\"mb-4 hidden font-hvBold text-4xl tracking-tight text-default sm:block lg:text-5xl\">\n              {title}\n            </h2>\n            <div className=\"mb-4 px-10 text-center text-sm xs:mb-8 sm:mb-6 sm:mt-2 sm:max-w-md sm:px-0 sm:text-left sm:text-base md:pr-6 xl:max-w-lg\">\n              {subtitle}\n            </div>\n            <ButtonAsNativeLink\n              className=\"self-center sm:self-start\"\n              buttonType=\"link\"\n              target={buttonLink}\n              color=\"blue\"\n            >\n              {buttonText}\n            </ButtonAsNativeLink>\n          </div>\n        </div>\n        {screenSize === ScreenSize.SM && (\n          <LazyLoad once>\n            <img className=\"h-full w-full sm:hidden\" src={imgBottom} alt=\"business cards\" />\n          </LazyLoad>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default HeroCentered;\n"],"names":["_ref","title","subtitle","buttonText","buttonLink","img","imgTop","imgBottom","backgroundImageWebp","screenSize","React","ScreenSizeContext","className","ScreenSize","SM","LazyLoad","once","src","alt","id","type","srcSet","fetchpriority","ButtonAsNativeLink","buttonType","target","color"],"sourceRoot":""}