{"version":3,"sources":["webpack://switch-website/./src/components/common/SEO.js","webpack://switch-website/./src/components/use-cases/Features.js","webpack://switch-website/./src/components/use-cases/List.js","webpack://switch-website/./src/components/use-cases/PageHero.js","webpack://switch-website/./src/components/use-cases/Testimony.js","webpack://switch-website/./src/components/use-cases/PageComponent.js","webpack://switch-website/./src/helpers/hooks/useSiteMetaData.js"],"names":["SEO","title","ogTitle","description","image","isArticle","lang","pathname","useLocation","siteMetadata","useSiteMetadata","defaultTitle","titleTemplate","defaultDescription","defaultImage","siteUrl","seo","url","Helmet","name","content","property","defaultProps","FeaturesContainer","PMono","fontWeights","colors","P","H2","H6","breakpoints","features","useState","activeFeatureIdx","setActiveFeatureIdx","activeFeature","items","map","feature","idx","activeClass","className","key","onClick","logoImg","to","link","text","StyledList","Clickable","P2","useCases","activeUseCaseIdx","setActiveUseCaseIdx","companies","useCase","company","lgBreakpoint","parseInt","HeroContainer","Hero","H5","PrimaryButton","background","subject","quantifier","screenSize","useContext","ScreenSizeContext","styles","backgroundSize","width","css","Trans","dark","StyledBackground","Background","imageUrl","src","alt","StyledTestimony","ContentContainer","P2Mono","LinkAsPrimaryButton","authorName","author_name","authorTitle","author_title","caseStudyId","case_study","id","quote","localFile","publicURL","H1","UseCasesContainer","data","subtitle","metatags","ContrastContext","setContrast","t","useTranslation","normalizedUseCases","allStrapiUseCase","edges","channel","node","length","linkText","useStaticQuery","site"],"mappings":"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","file":"ac93fb29f178da784c80bc959149e0947089fcbb-1cbcd21fd299a61d7afd.js","sourcesContent":["/* eslint-disable i18next/no-literal-string */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {Helmet} from 'gatsby-plugin-react-i18next';\nimport {useLocation} from '@gatsbyjs/reach-router';\nimport useSiteMetadata from '../../helpers/hooks/useSiteMetaData';\n\n\nfunction SEO({title, ogTitle = null, description, image = null, isArticle = false, lang = 'en'}) {\n    const {pathname} = useLocation();\n    const siteMetadata = useSiteMetadata();\n\n    const {\n        defaultTitle,\n        titleTemplate,\n        defaultDescription,\n        defaultImage,\n        siteUrl,\n    } = siteMetadata;\n\n    const seo = {\n        title: title || defaultTitle,\n        ogTitle: ogTitle || title || defaultTitle,\n        description: description || defaultDescription,\n        image: `${siteUrl}${image || defaultImage}`,\n        url: `${siteUrl}${pathname}`,\n    };\n\n    // Since Twitter also looks for Open Graph (Facebook) tags instead of only its own, we can avoid duplicated tags\n    // See: https://css-tricks.com/essential-meta-tags-social-media/#reconciling-meta-tags\n    return (\n        <Helmet\n            title={seo.title}\n            titleTemplate={titleTemplate}\n        >\n            <html lang={lang} />\n\n            <meta name=\"description\" content={seo.description} />\n            <meta name=\"image\" content={seo.image} />\n\n            {seo.ogTitle && <meta property=\"og:title\" content={seo.ogTitle} />}\n            {seo.description && <meta property=\"og:description\" content={seo.description} />}\n            {seo.image && <meta property=\"og:image\" content={seo.image} />}\n            {seo.url && <meta property=\"og:url\" content={seo.url} />}\n            {seo.image && <meta name=\"twitter:card\" content=\"summary_large_image\" />}\n            {isArticle && <meta property=\"og:type\" content=\"article\" />}\n        </Helmet>\n    );\n}\n\nSEO.defaultProps = {\n    ogTitle: null,\n    description: null,\n    lang: 'en',\n    image: null,\n    isArticle: false,\n};\n\nSEO.propTypes = {\n    title: PropTypes.string.isRequired,\n    ogTitle: PropTypes.string,\n    description: PropTypes.string,\n    lang: PropTypes.string,\n    image: PropTypes.string,\n    isArticle: PropTypes.bool,\n};\n\n\nexport default SEO;\n","import React, {useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\n\nimport {Clickable, LinkAsPrimaryButton} from '../common/Clickables';\nimport {PMono, P, H2, H6} from '../common/Typography';\nimport {breakpoints, colors, fontWeights} from '../../styles/theme';\n\n\n/*\n * Private Elements\n */\nconst FeaturesContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    padding-top: 30px;\n    padding-bottom: 85px;\n\n    .items {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n\n        .item {\n            cursor: pointer;\n            margin: 0;\n            opacity: 50%;\n            text-align: left;\n\n            &:last-of-type {\n                margin-bottom: 0;\n            }\n\n            &.active {\n                opacity: 1;\n            }\n\n            .logo {\n                flex: 0 0 50px;\n                margin: auto;\n            }\n\n            ${PMono} {\n                font-weight: ${fontWeights.bold};\n                margin: 0 0 0 15px;\n            }\n        }\n    }\n\n    .mobile-feature-title {\n        padding: 25px;\n        text-align: center;\n        font-weight: ${fontWeights.bold};\n    }\n\n    .detail {\n        background-color: ${colors.black};\n        padding: 20px 25px 40px 5px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        box-shadow: 0 8px 27px 0 ${colors.darkPurple};\n\n        .logo {\n            display: flex;\n            flex-direction: row;\n            width: 100%;\n            align-items: center;\n            justify-content: space-between;\n\n            .gatsby-image-wrapper {\n                flex: 0 1 auto;\n                width: 40%\n            }\n\n            ${P} {\n                text-align: right;\n            }\n        }\n\n        .content {\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            align-items: flex-start;\n            color: ${colors.white};\n            padding-left: 20px;\n            height: 100%;\n\n            ${H2} {\n                margin-bottom: 15px;\n            }\n\n            ${H6} {\n                margin-bottom: 100px;\n                font-weight: ${fontWeights.regular};\n            }\n        }\n\n        ${P} {\n            &.title {\n              text-transform: uppercase;\n              color: ${colors.mediumGrey};\n              font-size: 12px;\n              line-height: 20px;\n              font-weight: ${fontWeights.medium};\n              letter-spacing: 2px;\n              margin-bottom: 0;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        padding-top: 85px;\n        flex-direction: row;\n\n        .items {\n            flex-direction: column;\n            justify-content: start;\n            flex: 0 0 40%;\n            align-items: flex-start;\n            padding-left: max(calc(40vw - (0.4 * 1400px) + 150px), 65px);\n            padding-right: 35px;\n\n            .item {\n                margin-bottom: 5rem;\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n                width: auto;\n                height: auto;\n\n                .logo {\n                    margin: initial;\n                }\n            }\n        }\n      \n        .detail {\n            padding: 50px max(calc(60vw - (0.6 * 1400px)), 65px) 50px 20px;\n            min-height: 500px;\n            flex-direction: row;\n\n            .logo {\n                flex: 0 0 120px;\n\n                .gatsby-image-wrapper {\n                    width: 120px;\n                    flex-basis: unset;\n                    flex-grow: unset;\n                }\n            }\n\n            ${P} {\n                &.title {\n                    margin-bottom: 1rem;\n                }\n            }\n\n            .content {\n                ${H6} {\n                    margin-bottom: 35px;\n                    max-width: 500px;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        .detail {\n            flex: 0 0 60%;\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst Features = ({features}) => {\n    const [activeFeatureIdx, setActiveFeatureIdx] = useState(0);\n\n    const activeFeature = features[activeFeatureIdx];\n    const items = features.map((feature, idx) => {\n        // eslint-disable-next-line i18next/no-literal-string\n        const activeClass = activeFeatureIdx === idx ? 'active' : '';\n        return (\n            <Clickable className={`item ${activeClass}`} key={feature.key} onClick={() => setActiveFeatureIdx(idx)}>\n                <div className=\"logo\">\n                    {feature.logoImg}\n                </div>\n                <PMono className=\"d-none d-md-block\">{feature.title}</PMono>\n            </Clickable>\n        );\n    });\n\n    return (\n        <FeaturesContainer>\n            <div className=\"items\">\n                {items}\n            </div>\n            <PMono className=\"d-block d-md-none mobile-feature-title\">{activeFeature.title}</PMono>\n\n            <div className=\"detail\">\n                <div className=\"logo\">\n                    {activeFeature.logoImg}\n                    <P className=\"title d-md-none\">{activeFeature.name}</P>\n                </div>\n\n                <div className=\"content\">\n                    <div>\n                        <P className=\"title d-none d-md-block\">{activeFeature.name}</P>\n                        <H2>{activeFeature.title}</H2>\n                        <H6>{activeFeature.content}</H6>\n                    </div>\n                    <LinkAsPrimaryButton to={activeFeature.link.url}>{activeFeature.link.text}</LinkAsPrimaryButton>\n                </div>\n            </div>\n        </FeaturesContainer>\n    );\n};\n\nFeatures.propTypes = {\n    features: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default Features;\n","/** @jsx jsx */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {jsx} from '@emotion/react';\nimport styled from '@emotion/styled';\n\nimport {Clickable} from '../common/Clickables';\nimport {P2} from '../common/Typography';\nimport {breakpoints, colors, fontWeights} from '../../styles/theme';\n\n\n/*\n * Public Elements\n */\nconst StyledList = styled.div`\n    margin-bottom: 80px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n\n    .company {\n        margin-top: 5px;\n        border-bottom: 1px solid #D8D8FF;\n        width: 100%;\n\n        ${Clickable} {\n            margin: auto auto -2px auto;\n            width: fit-content;\n\n            ${P2} {\n                font-weight: ${fontWeights.bold};\n                text-transform: uppercase;\n                letter-spacing: 3px;\n                font-size: 12px;\n                line-height: 15px;\n                margin: 0;\n                padding: 0 20px 7px 20px;\n            }\n\n            &.active {\n                color: ${colors.darkPurple};\n\n                ${P2} {\n                    border-bottom: 3px solid ${colors.darkPurple};\n                    padding-bottom: 4px;\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        border-bottom: 1px solid #D8D8FF;\n        flex-direction: row;\n        padding-left: 65px;\n        padding-right: 65px;\n\n        .company {\n            width: auto;\n            border-bottom: 0;\n\n            ${Clickable} {\n                ${P2} {\n                    padding: 0 0 7px 0;\n                }\n\n                &.active {\n                    ${P2} {\n                        border-color: #D8D8FF;\n                    }\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        width: 65%;\n        padding-left: max(calc(40vw - (0.4 * 1400px) + 150px), 65px);\n        padding-right: 0;\n    }\n`;\n\nconst List = ({useCases, activeUseCaseIdx, setActiveUseCaseIdx}) => {\n    const companies = useCases.map((useCase, idx) => {\n        // eslint-disable-next-line i18next/no-literal-string\n        const className = activeUseCaseIdx === idx ? 'active' : '';\n        return (\n            <span className=\"company\" key={useCase.company}>\n                <Clickable className={className} onClick={() => setActiveUseCaseIdx(idx)}>\n                    <P2>{useCase.company}</P2>\n                </Clickable>\n            </span>\n        );\n    });\n\n    return (\n        <StyledList>\n            {companies}\n        </StyledList>\n    );\n};\n\nList.propTypes = {\n    useCases: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,\n    activeUseCaseIdx: PropTypes.number.isRequired,\n    setActiveUseCaseIdx: PropTypes.func.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default List;\n","/** @jsx jsx */\nimport React, {useContext} from 'react';\nimport PropTypes from 'prop-types';\n\nimport {jsx} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {Trans} from 'gatsby-plugin-react-i18next';\n\nimport {ContactSalesButton, PrimaryButton} from '../common/Clickables';\nimport {Hero, Highlighted, H5} from '../common/Typography';\nimport {breakpoints, colors, fontWeights} from '../../styles/theme';\nimport {ScreenSizeContext} from '../../helpers/context';\n\n\n/*\n * Constants\n */\nconst lgBreakpoint = parseInt(breakpoints.lg.replace('px', ''), 10);\n\n\n/*\n * Private Elements\n */\nconst HeroContainer = styled.div`\n    min-height: 100vh;\n    display: flex;\n\n    .content {\n        display: flex;\n        flex-direction: column;\n        max-width: 850px;\n        margin: auto;\n        text-align: center;\n        align-items: center;\n        padding: 120px 25px 30px;\n        justify-content: space-between;\n\n        ${Hero} {\n            margin-bottom: 40px;\n            color: ${colors.white};\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.regular};\n            color: ${colors.mediumGrey};\n            margin-bottom: 40px;\n            max-width: 650px;\n        }\n\n        ${PrimaryButton} {  // for the ContactSalesButton\n            width: fit-content;\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst PageHero = ({background, subject, quantifier, content}) => {\n    const screenSize = useContext(ScreenSizeContext);\n    const styles = {\n        background: `${colors.black} url(${background}) no-repeat left bottom`,\n        backgroundSize: screenSize.width > lgBreakpoint ? '65%' : '100%',\n    };\n\n    return (\n        <HeroContainer css={styles}>\n            <div className=\"content\">\n                <Hero>\n                    <Trans>\n                        Join\n                        {' '}\n                        <span>{{quantifier}}</span>\n                        {' '}\n                        of\n                        {' '}\n                        <Highlighted dark><span>{{subject}}</span></Highlighted>\n                        {' '}\n                        in the evolution of value exchange.\n                    </Trans>\n                </Hero>\n\n                <H5>{content}</H5>\n\n                <ContactSalesButton />\n            </div>\n        </HeroContainer>\n    );\n};\n\nPageHero.propTypes = {\n    background: PropTypes.string.isRequired,\n    subject: PropTypes.string.isRequired,\n    quantifier: PropTypes.string.isRequired,\n    content: PropTypes.string.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default PageHero;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {Trans} from 'gatsby-plugin-react-i18next';\n\nimport {LinkAsPrimaryButton} from '../common/Clickables';\nimport {BlockQuote, H1, PMono, P2Mono} from '../common/Typography';\nimport {breakpoints, colors, ContentContainer, fontWeights} from '../../styles/theme';\n\n\n/*\n * Private Elements\n */\nconst StyledBackground = styled.div`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        filter: grayscale(100%) opacity(20%);\n    }\n`;\n\nconst Background = ({imageUrl}) => (\n    <StyledBackground>\n        <img src={imageUrl} alt=\"\" />\n    </StyledBackground>\n);\n\nBackground.propTypes = {\n    imageUrl: PropTypes.string.isRequired,\n};\n\n\n/*\n * Public Elements\n */\nconst StyledTestimony = styled.div`\n    ${ContentContainer} {\n        margin: 0;\n\n        .testimonies {\n            padding-bottom: 100px;\n\n            .extra-info {\n                display: flex;\n                flex-direction: column;\n                justify-content: space-between;\n                margin-top: 20px;\n\n                .signature {\n                    display: flex;\n                    flex-direction: column;\n                    align-items: baseline;\n                    margin-left: 22px;\n\n                    ${P2Mono} {\n                        margin-bottom: 50px;\n                    }\n\n                    .author-name {\n                        color: ${colors.darkPurple};\n                        font-weight: ${fontWeights.bold};\n                    }\n                }\n\n                ${LinkAsPrimaryButton} {\n                    width: fit-content;\n                    margin-left: 22px;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            margin-top: 2rem;\n            padding-left: max(calc(40vw - (0.4 * 1400px) + 150px), 65px);\n            padding-right: 65px;\n\n            .testimonies {\n                padding-bottom: 150px;\n\n                .extra-info {\n                    flex-direction: row;\n\n                    .signature {\n                        flex-direction: row;\n\n                        ${PMono}, ${P2Mono} {\n                            margin: 0;\n                        }\n\n                        .author-name {\n                            font-size: 20px;\n                            margin-right: 20px;\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            .testimonies {\n                width: 80%;\n\n                .extra-info {\n                    .signature {\n                        margin-left: 32px;\n                    }\n                }\n            }\n        }\n    }\n`;\n\nconst Testimony = ({useCase}) => {\n    const {\n        author_name: authorName,\n        author_title: authorTitle,\n        background,\n        case_study: {\n            id: caseStudyId,\n        },\n        company,\n        quote,\n    } = useCase;\n\n    return (\n        <>\n            {background && (\n                <Background imageUrl={background.localFile.publicURL} />\n            )}\n\n            <StyledTestimony>\n                <ContentContainer>\n                    <div className=\"testimonies\">\n                        <BlockQuote><H1>{quote}</H1></BlockQuote>\n\n                        <div className=\"extra-info\">\n                            <div className=\"signature\">\n                                <PMono className=\"author-name\">{authorName}</PMono>\n                                <P2Mono className=\"author-title\">\n                                    <Trans>\n                                        {{authorTitle}}\n                                        {' '}\n                                        at\n                                        {' '}\n                                        {{company}}\n                                    </Trans>\n                                </P2Mono>\n                            </div>\n\n                            <LinkAsPrimaryButton to={`/learn/${caseStudyId}`}>\n                                <Trans>View Case Study</Trans>\n                            </LinkAsPrimaryButton>\n                        </div>\n                    </div>\n                </ContentContainer>\n            </StyledTestimony>\n        </>\n    );\n};\n\nTestimony.propTypes = {\n    useCase: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default Testimony;\n","import React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport Features from './Features';\nimport List from './List';\nimport PageHero from './PageHero';\nimport Testimony from './Testimony';\nimport {EndOfPageCTA} from '../common/Clickables';\nimport SEO from '../common/SEO';\nimport {H2} from '../common/Typography';\nimport {fontWeights} from '../../styles/theme';\nimport {ContrastContext} from '../../helpers/context';\n\n\n/*\n * Private Elements\n */\nconst UseCasesContainer = styled.div`\n    position: relative;\n\n    .cta-content {\n        margin-right: 50px;\n        font-weight: ${fontWeights.regular};\n\n        .strong {\n            font-weight: ${fontWeights.semiBold};\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst PageComponent = ({data, image, title, quantifier, subtitle, features, metatags}) => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n    const [activeUseCaseIdx, setActiveUseCaseIdx] = useState(0);\n\n    // Get the data\n    const normalizedUseCases = data.allStrapiUseCase.edges.map(channel => channel.node);\n\n    return (\n        <>\n            <SEO\n                title={`${t('Use Cases')} - ${title}`}\n                ogTitle={metatags.title}\n                description={metatags.description}\n                image={metatags.image}\n            />\n\n            <PageHero background={image} subject={title} quantifier={quantifier} content={subtitle} />\n\n            <UseCasesContainer>\n                <Features features={features} />\n\n                {normalizedUseCases.length > 0 && (\n                    <Testimony useCase={normalizedUseCases[activeUseCaseIdx]} />\n                )}\n\n                <List\n                    useCases={normalizedUseCases}\n                    activeUseCaseIdx={activeUseCaseIdx}\n                    setActiveUseCaseIdx={setActiveUseCaseIdx}\n                />\n\n                <EndOfPageCTA link=\"/learn?type=CASE_STUDY\" linkText={t('View All Case Studies')}>\n                    <H2 className=\"cta-content\">\n                        <Trans>\n                            Discover how\n                            {' '}\n                            <span className=\"strong\">we help</span>\n                            {' '}\n                            some of the\n                            {' '}\n                            <span className=\"strong\">world&apos;s leading companies.</span>\n                        </Trans>\n                    </H2>\n                </EndOfPageCTA>\n            </UseCasesContainer>\n        </>\n    );\n};\n\nPageComponent.propTypes = {\n    data: PropTypes.object.isRequired,\n    image: PropTypes.node.isRequired,\n    title: PropTypes.string.isRequired,\n    quantifier: PropTypes.string.isRequired,\n    subtitle: PropTypes.string.isRequired,\n    features: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,\n    metatags: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default PageComponent;\n","import {useStaticQuery, graphql} from 'gatsby';\n\nconst useSiteMetadata = () => {\n    const {site} = useStaticQuery(graphql`\n        query {\n            site {\n                siteMetadata {\n                    defaultTitle: title\n                    titleTemplate\n                    defaultDescription: description\n                    defaultImage: image\n                    author\n                    siteUrl\n                }\n            }\n        }\n    `);\n    return site.siteMetadata;\n};\n\nexport default useSiteMetadata;\n"],"sourceRoot":""}