{"version":3,"sources":["webpack://switch-website/./src/pages/about/company.js"],"names":["FullHeightImageBackground","colors","NoiseBackground","NoiseBackgroundImage","breakpoints","Row","timelinePointCss","css","TimelineMarker","TimelineSmallMarker","timelineCurveContainerCss","TimelineCurve","className","StyledYear","fonts","fontWeights","yearColumnCss","YearColumn","year","text","contentColumnCss","P","ContentColumn","children","Trans","boxCss","rowBoxesCss","RowBoxesDescriptionList","list","customBoxCss","map","item","key","label","H2","as","value","defaultProps","teamBoxCss","hexToRgba","TeamOffersLink","Link","partnersListCss","Partners","partnersList","partner","name","G","image","getImage","logo","localFile","alt","to","PhotosCarouselFullWidthContainer","ToggleableContentDisplayContainer","props","active","spaceshipContainerCss","PageContentContainer","ContentContainer","data","useContext","ContrastContext","setContrast","t","useTranslation","heroImage","companyData","strapiAboutCompany","productStats","product_stats","teamStats","team_stats","stat","team","lisbonOfficePhotos","lisbon_office_photos","portoOfficePhotos","porto_office_photos","OFFICES","useState","office","setOffice","title","ogTitle","description","H1","partners","group","selectedValue","onClick","images","S","src","placeholder"],"mappings":"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","file":"4ef8e8f7-8b52c80d722a9e70550b.js","sourcesContent":["/** @jsx jsx */\nimport React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {graphql} from 'gatsby';\nimport {GatsbyImage, getImage, StaticImage} from 'gatsby-plugin-image';\n\nimport {jsx, css} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\nimport {BgImage} from 'gbimage-bridge';\n\nimport {ContrastContext} from '../../helpers/context';\nimport SEO from '../../components/common/SEO';\nimport {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport {H1, H2, Hero, Link, P} from '../../components/common/Typography';\nimport {CTA, LinkAsPrimaryButton} from '../../components/common/Clickables';\nimport NoiseBackgroundImage from '../../images/product/analytics/noise.png';\nimport {RadioInput, RadioToggleSwitch} from '../../components/common/ToggleSwitch';\nimport CompanyPhotosCarousel from '../../components/about/company/CompanyPhotosCarousel';\nimport {hexToRgba} from '../../helpers/utils';\n\n\n/*\n * Private Elements\n */\n\n// Backgrounds\nconst FullHeightImageBackground = styled.div`\n    .content {\n        min-height: 100vh;\n\n        display: grid;\n        place-content: center;\n        text-align: center;\n        color: ${colors.white};\n\n        h1 {\n            max-width: 640px;\n        }\n    }\n`;\n\nconst NoiseBackground = styled.div`\n    background: repeat url(${NoiseBackgroundImage}), linear-gradient(45deg, #000000 0%, ${colors.darkPurple} 250%);\n    color: ${colors.white};\n\n    width: 95%;\n    margin-left: auto;\n    padding: 30px;\n\n    @media (min-width: ${breakpoints.md}) {\n        width: calc(100% + 60px);\n        margin-right: -60px;\n        margin-left: 0;\n        padding: 70px;\n    }\n`;\n\n\n// Row for year and corresponding content\nconst Row = styled.div`\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n\n    @media (min-width: ${breakpoints.md}) {\n        flex-direction: row;\n    }\n`;\n\n\n// Timeline lines and points\nconst timelinePointCss = css`\n    height: 10px;\n    width: 10px;\n    border-radius: 100%;\n    background-color: ${colors.darkPurple};\n`;\n\nconst TimelineMarker = styled.div`\n    ${timelinePointCss};\n\n    position: relative;\n    left: 50%;\n    margin-top: 110px;\n    margin-bottom: 36px;\n\n    @media (max-width: ${breakpoints.md}) {\n        &:before {\n            position: absolute;\n            content: '';\n            height: 110px;\n            top: -110px;\n            left: 4.5px;\n            border-right: 1px dashed ${colors.darkPurple};\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        left: 98.5%;\n        top: 30px;\n        margin: 0 0 0 22px;\n    }\n`;\n\nconst TimelineSmallMarker = styled(TimelineMarker)`\n    margin-top: 50px;\n    margin-bottom: 30px;\n\n    &:before {\n        height: 50px;\n        top: -50px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        display: none;\n    }\n`;\n\nconst timelineCurveContainerCss = css`\n    margin-left: 330px;\n    width: calc(50% - 340px);\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n\n    @media (max-width: ${breakpoints.md}) {\n        display: none;\n    }\n\n    .curve-first-half {\n        width: 100%;\n        padding-top: 100%;\n        border-radius: 0 0 0 50%;\n        border-left: 1px dashed ${colors.darkPurple};\n        border-bottom:1px dashed ${colors.darkPurple};\n        margin: 0 0 -1px -1px;\n    }\n\n    .curve-second-half {\n        grid-column: 2;\n        grid-row: 2;\n        width: 100%;\n        padding-top: 100%;\n        border-radius: 0 50% 0 0;\n        border-right: 1px dashed ${colors.darkPurple};\n        border-top: 1px dashed ${colors.darkPurple};\n    }\n\n    .point {\n        grid-column: 2;\n        grid-row: 2;\n        align-self: end;\n        justify-self: end;\n        margin-right: -5px;\n        margin-bottom: -10px;\n    }\n`;\n\nconst TimelineCurve = () => (\n    <div css={timelineCurveContainerCss}>\n        <div className=\"curve-first-half\" />\n        <div className=\"curve-second-half\" />\n        <div className=\"point\" css={timelinePointCss} />\n    </div>\n);\n\n\n// Year text\nconst StyledYear = styled.h2`\n    font-family: ${fonts.monospace};\n    font-weight: ${fontWeights.bold};\n    font-size: 56px;\n    line-height: 38px;\n    color: #E3E3F6;\n`;\n\n// Year column in row\nconst yearColumnCss = css`\n    padding: 15px 22px;\n\n    p {\n        font-family: ${fonts.monospace};\n        font-weight: ${fontWeights.bold};\n        margin-top: 20px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 50px 22px;\n        min-width: 330px;\n        width: 25%;\n        text-align: right;\n        border-right: 1px dashed ${colors.darkPurple};\n    }\n`;\n\nconst YearColumn = ({year, text}) => (\n    <div css={yearColumnCss}>\n        <TimelineMarker />\n        <StyledYear className=\"year\">{year}</StyledYear>\n        <p>{text}</p>\n    </div>\n);\n\nYearColumn.propTypes = {\n    year: PropTypes.string.isRequired,\n    text: PropTypes.string.isRequired,\n};\n\n\n// Year corresponding content column in row\nconst contentColumnCss = css`\n    ${P} {\n        font-weight: ${fontWeights.semiBold};\n        font-size: 20px;\n        line-height: 30px;\n\n        padding: 0 20px;\n        margin-top: 30px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 50px 60px 50px 180px;\n\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n\n        .now {\n            // Hidden visually, but seen by screen readers, etc.\n            position: absolute !important;\n            top: -9999px !important;\n            left: -9999px !important;\n        }\n\n        ${P} {\n            max-width: 640px;\n        }\n    }\n\n    ${StyledYear} {\n        margin-bottom: 30px;\n    }\n`;\n\nconst ContentColumn = ({children}) => (\n    <div css={contentColumnCss}>\n        <TimelineSmallMarker />\n        <StyledYear className=\"now\"><Trans>now</Trans></StyledYear>\n        {children}\n    </div>\n);\n\nContentColumn.propTypes = {\n    children: PropTypes.node.isRequired,\n};\n\n\n// Description list boxes\nconst boxCss = css`\n    height: 140px;\n    width: clamp(135px, 20%, 255px);\n    border-radius: 3px;\n\n    padding: 25px 5px;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    background-color: ${colors.white};\n    box-shadow: -7px 13px 17px 0 #DEDFE9;\n\n    dt,\n    dl {\n        font-family: ${fonts.sansSerif};\n        margin-bottom: 0;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        width: clamp(135px, 20%, 160px);\n    }\n`;\n\nconst rowBoxesCss = css`\n    width: 100%;\n    padding: 0 15px;\n    margin: 45px 0;\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n    justify-items: center;\n    gap: 10px;\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 0;\n    }\n`;\n\nconst RowBoxesDescriptionList = ({list, customBoxCss, children}) => (\n    <dl css={rowBoxesCss}>\n        {list.map(item => (\n            <div css={[boxCss, customBoxCss]} key={item.key ? item.key : item.label}>\n                <dt>{item.label}</dt>\n                <H2 as=\"dl\">{item.value}</H2>\n            </div>\n        ))}\n        {children}\n    </dl>\n);\n\nRowBoxesDescriptionList.propTypes = {\n    list: PropTypes.array.isRequired,\n    customBoxCss: PropTypes.object,\n    children: PropTypes.node,\n};\n\nRowBoxesDescriptionList.defaultProps = {\n    customBoxCss: null,\n    children: null,\n};\n\n// Team description list boxes\nconst teamBoxCss = css`\n    :not(.link) {\n        background: linear-gradient(0deg, ${colors.darkPurple} 0%, ${hexToRgba(colors.darkPurple, 0.29)} 100%);\n    }\n`;\n\nconst TeamOffersLink = styled(Link)`\n    justify-content: center !important;\n    font-family: ${fonts.sansSerif};\n    font-weight: ${fontWeights.semiBold};\n    color: ${colors.darkPurple};\n    cursor: pointer;\n\n    &:hover {\n        color: ${colors.darkPurple};\n    }\n`;\n\n\n// Partners list\nconst partnersListCss = css`\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));\n    justify-items: center;\n    gap: 30px;\n    padding: 0;\n\n    li {\n        list-style: none;\n        \n        height: 110px;\n        width: 100%;\n        \n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n        gap: 40px;\n\n        li {\n            height: 160px;\n        }\n    }\n`;\n\nconst Partners = ({partnersList}) => (\n    <ul css={partnersListCss}>\n        {partnersList.map(partner => (\n            <li key={partner.name}>\n                <GatsbyImage image={getImage(partner.logo.localFile)} alt={`${partner.name} logo`} />\n            </li>\n        ))}\n        <li key=\"learn-more\"><CTA to=\"/use-cases/merchants\"><Trans>Learn More</Trans></CTA></li>\n    </ul>\n);\n\nPartners.propTypes = {\n    partnersList: PropTypes.array.isRequired,\n};\n\n\n// Office photos containers\nconst PhotosCarouselFullWidthContainer = styled.div`\n    margin: 0;\n    padding-top: 65px;\n    min-height: 350px;\n\n    @media (min-width: ${breakpoints.md}) {\n        width: 100vw;\n        max-width: 1440px;\n        // remove the size of the YearColumn and the padding of the ContentColumn\n        margin-left: calc(-330px + -180px);\n\n        min-height: 700px;\n    }\n`;\n\n/* eslint-disable i18next/no-literal-string */\nconst ToggleableContentDisplayContainer = styled.div`\n    display: ${props => (props.active ? 'initial' : 'none')};\n`;\n/* eslint-enable i18next/no-literal-string */\n\n\n// Spaceship container\nconst spaceshipContainerCss = css`\n    text-align: center;\n    margin-bottom: 60px;\n\n    p {\n        font-family: ${fonts.monospace};\n        font-weight: bold;\n        margin: 26px 0;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${TimelineMarker} {\n            display: none;\n        }\n    }\n`;\n\n\n// Page content container\nconst PageContentContainer = styled(ContentContainer)`\n    padding: 0;\n\n    .sticky {\n        position: sticky;\n        top: 50vh;\n        margin-left: max(350px, 25%);\n\n        width: 0;\n\n        z-index: 5;\n        user-select: none;\n\n        @media (max-width: ${breakpoints.md}) {\n            display: none;\n        }\n    }\n\n    .full-width-container-container {\n        overflow-x: hidden;\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst CompanyPage = ({data}) => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n\n    // Get images from query\n    const {heroImage} = data;\n\n    // Get the Company data\n    const companyData = data.strapiAboutCompany;\n    const productStats = companyData.product_stats;\n    const teamStats = companyData.team_stats.map(stat => ({label: stat.team, value: stat.value, key: stat.team}));\n    const lisbonOfficePhotos = companyData.lisbon_office_photos;\n    const portoOfficePhotos = companyData.porto_office_photos;\n\n    // Office values\n    const OFFICES = {\n        LISBON: 'lisbon',\n        PORTO: 'porto',\n    };\n\n    const [office, setOffice] = useState(OFFICES.PORTO);\n\n    return (\n        <>\n            <SEO\n                title={t('Company')}\n                ogTitle={t('About Us - Switch')}\n                description={t('Switch works with merchants, acquirers, ISVs and PSPs to provide added flexibility in '\n                    + 'payments via a single PCI compliant platform.')}\n                image=\"/website/metatags/about-company.png\"\n            />\n\n            <FullHeightImageBackground>\n                <BgImage image={getImage(heroImage)}>\n                    <div className=\"content\">\n                        <Hero as=\"h1\"><Trans>We&apos;re evolving value exchange.</Trans></Hero>\n                    </div>\n                </BgImage>\n            </FullHeightImageBackground>\n\n            <PageContentContainer>\n                <StyledYear className=\"sticky\"><Trans>now</Trans></StyledYear>\n\n                <Row>\n                    <YearColumn year=\"2014\" text={t('Switch was founded.')} />\n                    <ContentColumn>\n                        <P>\n                            <Trans>\n                                At Switch we&apos;ve been working with some of the largest online businesses in the\n                                world to help them scale their payment operations by connecting with relevant\n                                financial institutions across multiple geographies, rolling out innovative products\n                                and developing enterprise-level financial applications.\n                            </Trans>\n                        </P>\n                    </ContentColumn>\n                </Row>\n\n                <Row>\n                    <YearColumn\n                        year=\"2015\"\n                        text={t('Our first product launch came with a promise we\\'ve kept ever since: one single '\n                            + 'integration, access to the entire payments value chain.')}\n                    />\n                    <ContentColumn>\n                        <H1 as=\"h2\"><Trans>Product Stats</Trans></H1>\n                        <RowBoxesDescriptionList list={productStats} />\n                        <LinkAsPrimaryButton to=\"/channels\"><Trans>Learn More</Trans></LinkAsPrimaryButton>\n                    </ContentColumn>\n                </Row>\n\n                <Row>\n                    <YearColumn\n                        year=\"2016\"\n                        text={t('Our first clients came on board the next year. Our journey started off with '\n                            + 'merchants, nowadays we also help acquirers and providers manage their services.')}\n                    />\n                    <ContentColumn>\n                        <NoiseBackground>\n                            <H1 as=\"h2\"><Trans>Our Partners</Trans></H1>\n                            <Partners partnersList={companyData.partners} />\n                        </NoiseBackground>\n                    </ContentColumn>\n                </Row>\n\n                <Row>\n                    <YearColumn\n                        year=\"2017\"\n                        text={t('We started off with a small team of three. Now we’re a small crowd, but our '\n                            + 'mindset remains the same: help our staff reach their full potential.')}\n                    />\n                    <ContentColumn>\n                        <H1 as=\"h2\"><Trans>Team Stats</Trans></H1>\n                        <RowBoxesDescriptionList list={teamStats} customBoxCss={teamBoxCss}>\n                            <TeamOffersLink css={[boxCss, teamBoxCss]} className=\"link\" to=\"/about/careers\">\n                                <Trans>See current offers</Trans>\n                            </TeamOffersLink>\n                        </RowBoxesDescriptionList>\n                    </ContentColumn>\n                </Row>\n\n                <Row className=\"full-width-container-container\">\n                    <YearColumn\n                        year=\"2019\"\n                        text={t('Our first office was located in Matosinhos. We outgrew it in a year. Nowadays you '\n                            + 'can find us in Porto and Lisbon.')}\n                    />\n                    <ContentColumn>\n                        <div>\n                            <H1 as=\"h2\"><Trans>Our Office</Trans></H1>\n                            <RadioToggleSwitch>\n                                {/* eslint-disable i18next/no-literal-string */}\n                                <RadioInput\n                                    group=\"office\"\n                                    value={OFFICES.LISBON}\n                                    label={t('Lisbon')}\n                                    selectedValue={office}\n                                    onClick={setOffice}\n                                />\n                                <RadioInput\n                                    group=\"office\"\n                                    value={OFFICES.PORTO}\n                                    label={t('Porto')}\n                                    selectedValue={office}\n                                    onClick={setOffice}\n                                />\n                            </RadioToggleSwitch>\n                            {/* eslint-enable i18next/no-literal-string */}\n                        </div>\n                        <PhotosCarouselFullWidthContainer>\n                            <ToggleableContentDisplayContainer active={office === 'lisbon'}>\n                                <CompanyPhotosCarousel images={lisbonOfficePhotos} />\n                            </ToggleableContentDisplayContainer>\n                            <ToggleableContentDisplayContainer active={office === 'porto'}>\n                                <CompanyPhotosCarousel images={portoOfficePhotos} />\n                            </ToggleableContentDisplayContainer>\n                        </PhotosCarouselFullWidthContainer>\n                    </ContentColumn>\n                </Row>\n            </PageContentContainer>\n\n            <PageContentContainer css={spaceshipContainerCss}>\n                <TimelineCurve />\n                <TimelineMarker />\n\n                <p><Trans>Interplanetary Payments</Trans></p>\n                <StaticImage src=\"../../images/about/company/spaceship.png\" placeholder=\"tracedSVG\" alt=\"\" />\n            </PageContentContainer>\n        </>\n    );\n};\n\nCompanyPage.propTypes = {\n    data: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default CompanyPage;\nexport const query = graphql`\n    query {\n        heroImage: file(relativePath: { eq: \"about/company/about-hero.jpg\" }) {\n            childImageSharp {\n                gatsbyImageData(\n                    placeholder: BLURRED\n                    width: 1400\n                    quality: 95\n                )\n            }\n        }\n        \n        strapiAboutCompany {\n            product_stats {\n                label\n                value\n            }\n            team_stats {\n                team\n                value\n            }\n            partners {\n                name\n                logo {\n                    localFile {\n                        childImageSharp {\n                            gatsbyImageData(\n                                placeholder: TRACED_SVG\n                                height: 160\n                            )\n                        }\n                    }\n                }\n            }\n            porto_office_photos {\n                localFile {\n                    childImageSharp {\n                        gatsbyImageData(\n                            placeholder: BLURRED\n                            height: 640\n                        )\n                    }\n                }\n            }\n            lisbon_office_photos {\n                localFile {\n                    childImageSharp {\n                        gatsbyImageData(\n                            placeholder: BLURRED\n                            height: 640\n                        )\n                    }\n                }\n            }\n        }\n    }\n`;\n"],"sourceRoot":""}