{"version":3,"sources":["webpack://switch-website/./src/pages/404.js"],"names":["FullPageAnimatedBackground","AnimatedBackground","PageContentContainer","ContentContainer","colors","P","LinkAsPrimaryButton","breakpoints","useContext","ContrastContext","setContrast","t","useTranslation","title","className","Trans","as","to","S","src","alt"],"mappings":"gmCAiBA,IAAMA,GAA6B,OAAOC,IAAP,sBAAH,4CAI1BC,GAAuB,OAAOC,KAAP,sBAAH,uGAQbC,WARa,sFAkBhBC,IAlBgB,4EA2BhBC,KA3BgB,qHAuCDC,QAvCC,uVAyG1B,UA5BqB,YACGC,gBAAWC,KAC/BC,EAAY,GACZ,IAAOC,GAAKC,sBAALD,EAEP,OACI,yBACI,QAAC,IAAD,CAAKE,MAAOF,EAAE,qBACd,QAACX,EAAD,MACI,QAACE,EAAD,MACI,eAAKY,UAAU,mBACX,cAAIA,UAAU,oBAAkB,QAAC,EAAAC,MAAD,yBAChC,QAAC,KAAD,CAAMC,GAAG,OAAK,QAAC,EAAAD,MAAD,qDACd,QAAC,EAAAV,EAAD,MAAG,QAAC,EAAAU,MAAD,kDACH,eAAKD,UAAU,sBACX,QAAC,KAAD,CAAqBG,GAAG,MAAI,QAAC,EAAAF,MAAD,yBAC5B,QAAC,KAAD,CAAuBE,GAAG,mBAAiB,QAAC,EAAAF,MAAD,uBAGnD,eAAKD,UAAU,oBACX,QAAC,EAAAI,EAAD,CAAaC,IAAI,oBAAoBC,IAAI,GAAzC","file":"component---src-pages-404-js-943cbd18341fa538e7df.js","sourcesContent":["import React, {useContext} from 'react';\nimport {StaticImage} from 'gatsby-plugin-image';\n\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport SEO from '../components/common/SEO';\nimport {breakpoints, colors, ContentContainer} from '../styles/theme';\nimport AnimatedBackground from '../components/common/AnimatedBackground';\nimport {Hero, P} from '../components/common/Typography';\nimport {LinkAsPrimaryButton, LinkAsSecondaryButton} from '../components/common/Clickables';\nimport {ContrastContext} from '../helpers/context';\n\n\n/*\n * Private Elements\n */\nconst FullPageAnimatedBackground = styled(AnimatedBackground)`\n    min-height: 100vh;\n`;\n\nconst PageContentContainer = styled(ContentContainer)`\n    min-height: 100vh;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    color: ${colors.white};\n\n    .text-container,\n    .image-container {\n        max-width: 500px;\n    }\n\n    .text-container {\n        margin-top: 64px;\n\n        ${P} {\n            margin-top: 24px;\n        }\n\n        .buttons-container {\n            margin-top: 64px;\n            margin-bottom: 64px;\n        }\n\n        ${LinkAsPrimaryButton} {\n            margin-right: 10px;\n            margin-bottom: 16px;\n        }\n    }\n\n    .image-container {\n        order: -1;\n        margin-top: 124px;\n        width: 100%;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        flex-direction: row;\n        justify-content: space-evenly;\n\n        padding-left: 25px;\n        padding-right: 25px;\n\n        .text-container,\n        .image-container {\n            max-width: 600px;\n        }\n\n        .text-container {\n            margin-top: 0;\n\n              .buttons-container {\n                    margin-bottom: 0;\n              }\n        }\n\n        .image-container {\n            order: revert;\n            margin-top: 0;\n        }\n    }\n\n    // Hidden visually, but seen by screen readers, etc.\n    .visually-hidden {\n        position: absolute !important;\n        top: -9999px !important;\n        left: -9999px !important;\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst NotFoundPage = () => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n\n    return (\n        <>\n            <SEO title={t('404: Not found')} />\n            <FullPageAnimatedBackground>\n                <PageContentContainer>\n                    <div className=\"text-container\">\n                        <h1 className=\"visually-hidden\"><Trans>404: Not Found</Trans></h1>\n                        <Hero as=\"h2\"><Trans>Seems like you&apos;re lost on the abstraction.</Trans></Hero>\n                        <P><Trans>We can&apos;t find what  you&apos;re looking for.</Trans></P>\n                        <div className=\"buttons-container\">\n                            <LinkAsPrimaryButton to=\"/\"><Trans>Go to Homepage</Trans></LinkAsPrimaryButton>\n                            <LinkAsSecondaryButton to=\"/about/contact\"><Trans>Contact us</Trans></LinkAsSecondaryButton>\n                        </div>\n                    </div>\n                    <div className=\"image-container\">\n                        <StaticImage src=\"../images/404.png\" alt=\"\" />\n                    </div>\n                </PageContentContainer>\n            </FullPageAnimatedBackground>\n        </>\n    );\n};\n\nexport default NotFoundPage;\n"],"sourceRoot":""}