{"version":3,"sources":["webpack://switch-website/./src/components/common/ProductHero.js","webpack://switch-website/./src/components/common/ProductPageContainer.js"],"names":["HeroContainer","colors","HeroContentContainer","ContentContainer","breakpoints","HeroInformationContainer","Hero","fontWeights","h5BaseStyle","h2BaseStyle","h6BaseStyle","SectionNameContainer","HeroCTAsContainer","HeroImageContainer","maxHeightInPx","ProductHero","section","sectionStr","hero","description","image","mobileImage","videoUrl","className","gaLabel","defaultProps","StyledProductPageContainer","maxWidth","children"],"mappings":"2LAmBMA,GAAa,wEAEKC,WAFL,4BAGYA,WAHZ,gBAObC,GAAuB,OAAOC,KAAP,qBAAH,6EAQDC,QARC,4CAcpBC,GAAwB,qIAOxBC,KAPwB,UAQbL,WARa,gBASPM,UATO,kCAcpBC,KAdoB,UAebP,gBAfa,gBAgBPM,aAhBO,wCAoBLH,QApBK,qBAoB8BA,QApB9B,KAqBpBE,KArBoB,IAsBhBG,KAtBgB,kBA0BhBC,KA1BgB,gBA2BHH,aA3BG,yBA+BLH,QA/BK,KAgCpBE,KAhCoB,kDA0CxBK,GAAoB,8MAeDP,QAfC,yBAoBpBQ,GAAiB,wLAgBER,QAhBF,kDAyBjBS,GAAkB,qEAEHC,GAFG,qCAWlBC,EAAc,SAAC,GAAD,IAAEC,EAAF,EAAEA,QAASC,EAAX,EAAWA,WAAYC,EAAvB,EAAuBA,KAAMC,EAA7B,EAA6BA,YAAaC,EAA1C,EAA0CA,MAAOC,EAAjD,EAAiDA,YAAjD,IAA8DC,gBAA9D,MAAyE,KAAzE,SAChB,QAACtB,EAAD,MACI,QAACE,EAAD,MACI,eAAKqB,UAAU,mBACX,QAAClB,EAAD,CAA0BkB,UAAU,oBAChC,oBACI,QAACZ,EAAD,MACI,QAAC,KAAD,KAAUK,IACV,eAAKO,UAAU,aACVF,KAIT,QAAC,KAAD,KAAOH,IAEP,aAAGK,UAAU,eAAeJ,KAGhC,QAACP,EAAD,MACI,QAAC,KAAD,MACCU,IAAY,QAAC,KAAD,CAAkBA,SAAUA,EAAUE,QAASP,OAIpE,eAAKM,UAAU,qDACX,QAACV,EAAD,KACKO,QAkBzBL,EAAYU,aAAe,CACvBH,SAAU,MAOd,O,kFCxLMI,GAA0B,0GAMZC,KANY,sEAYJ1B,WAZI,0EAkBGA,WAlBH,0DAsBWA,WAtBX,OA2ChC,IAd6B,SAAC,GAAD,IAAE2B,EAAF,EAAEA,SAAF,OACzB,QAACF,EAAD,MACI,eAAKH,UAAU,oCACf,eAAKA,UAAU,mBACVK,IAEL,eAAKL,UAAU","file":"929ff5f221c2ef372a6f3b35a26ee863e26930d4-56937cb91cad8b60ef91.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\n\nimport {breakpoints, colors, ContentContainer, fontWeights} from '../../styles/theme';\nimport {CTALink, h2BaseStyle, h5BaseStyle, h6BaseStyle, Hero} from './Typography';\nimport {ContactSalesButton, WatchVideoButton} from './Clickables';\n\n\n/*\n * Constants\n */\nconst maxHeightInPx = 650;\n\n\n/*\n * Private Elements\n */\nconst HeroContainer = styled.div`\n position: relative;\n background-color: ${colors.black};\n box-shadow: 1px 5px 10px ${colors.black};\n z-index: 41; // above the Product page margins\n`;\n\nconst HeroContentContainer = styled(ContentContainer)`\n padding-left: 25px;\n padding-right: 25px;\n\n .row {\n height: 100%;\n }\n\n @media (min-width: ${breakpoints.sm}) {\n padding-left: 65px;\n padding-right: 65px;\n }\n`;\n\nconst HeroInformationContainer = styled.header`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n padding-right: 0;\n\n ${Hero} {\n color: ${colors.white};\n font-weight: ${fontWeights.bold};\n margin-top: 20px;\n }\n\n .description {\n ${h5BaseStyle};\n color: ${colors.mediumGrey};\n font-weight: ${fontWeights.regular};\n margin-top: 25px;\n }\n\n @media (min-width: ${breakpoints.md}) and (max-width: ${breakpoints.lg}) {\n ${Hero} {\n ${h2BaseStyle};\n }\n\n .description {\n ${h6BaseStyle};\n font-weight: ${fontWeights.regular};\n }\n }\n\n @media (min-width: ${breakpoints.md}) {\n ${Hero} {\n margin-right: -50px;\n }\n\n .description {\n width: 70%;\n }\n }\n`;\n\nconst SectionNameContainer = styled.div`\n padding-top: 75px;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n justify-content: space-between;\n\n a {\n cursor: auto;\n }\n\n .gatsby-image-wrapper {\n width: 100px;\n }\n\n @media (min-width: ${breakpoints.md}) {\n padding-top: 120px;\n }\n`;\n\nconst HeroCTAsContainer = styled.div`\n margin-top: 40px;\n margin-bottom: 50px;\n\n button {\n &:first-of-type {\n margin-right: 16px;\n }\n }\n\n @media (max-width: 385px) {\n button {\n font-size: 12px;\n }\n }\n\n @media (min-width: ${breakpoints.sm}) {\n button {\n &:first-of-type {\n margin-right: 32px;\n }\n }\n }\n`;\n\nconst HeroImageContainer = styled.div`\n position: relative;\n top: min(10vh, ${maxHeightInPx * 0.1}px);\n margin-left: -50px;\n z-index: 41; // above the Product page margins\n`;\n\n\n/*\n * Public Elements\n */\nconst ProductHero = ({section, sectionStr, hero, description, image, mobileImage, videoUrl = null}) => (\n \n \n
\n \n
\n \n {section}\n
\n {mobileImage}\n
\n \n\n {hero}\n\n

{description}

\n
\n\n \n \n {videoUrl && }\n \n \n\n
\n \n {image}\n \n
\n
\n \n \n);\n\nProductHero.propTypes = {\n section: PropTypes.string.isRequired,\n sectionStr: PropTypes.string.isRequired,\n hero: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n image: PropTypes.node.isRequired,\n mobileImage: PropTypes.node.isRequired,\n videoUrl: PropTypes.string,\n};\n\nProductHero.defaultProps = {\n videoUrl: null,\n};\n\n\n/*\n * Exports\n */\nexport default ProductHero;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport styled from '@emotion/styled';\nimport {colors, maxWidth} from '../../styles/theme';\n\n\nconst StyledProductPageContainer = styled.div`\n display: flex;\n flex-direction: row;\n width: 100%;\n\n .product-content {\n flex: 0 1 ${maxWidth}px;\n max-width: 100%\n }\n\n .product-padding {\n flex: 1 0 auto;\n background-color: ${colors.black};\n }\n\n .product-shadow {\n z-index: 40;\n position: relative;\n box-shadow: 1px 5px 10px ${colors.black};\n }\n\n .product-shadow-clip {\n filter: drop-shadow(1px 5px 10px ${colors.black});\n }\n`;\n\n// Involves Product pages content with two divs.\n// Side divs are hidden on mobile; page content container grows until max width 1440px, then side divs start to appear\n// and cast shadows.\nconst ProductPageContainer = ({children}) => (\n \n
\n
\n {children}\n
\n
\n \n);\n\nProductPageContainer.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default ProductPageContainer;\n"],"sourceRoot":""}