{"version":3,"sources":["webpack:///./src/hooks/useTranslated.js","webpack:///./src/components/Pages/HowItWorks/styled.js","webpack:///./src/components/Pages/HowItWorks/index.js","webpack:///./src/pages/how-it-works.de.js","webpack:///./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js"],"names":["useTranslated","data","pageContext","translatedData","useMemo","localiseData","getLanguage","Background","styled","div","props","src","Image","img","Section","TextContainer","HowItWorks","lng","background","publicURL","Container","narrow","padding","white","marginBottom","title","description","label","button","href","primary","section","map","key","id","gutter","justify","xs","sm","icon","alt","HowItWorksComponent","rest","path","location","pathname","langKey","hasContainer","showOurCustomers","metatags","strapiHowItWorks","_objectWithoutPropertiesLoose","source","excluded","i","target","sourceKeys","Object","keys","length","indexOf"],"mappings":"4FAAA,8DAKe,SAASA,EAAcC,EAAMC,GAMxC,MAAO,CAAEC,eALcC,mBAAQ,kBAAMC,YAAaJ,EAAMK,YAAYJ,MAAe,CAC/ED,EACAC,O,mFCNKK,EAAaC,IAAOC,IAAV,yEAAGD,CAAH,oRACD,SAAAE,GAAK,OAAIA,EAAMC,OAwBxBC,EAAQJ,IAAOK,IAAV,oEAAGL,CAAH,MAELM,EAAUN,IAAOC,IAAV,sEAAGD,CAAH,+EAOPO,EAAgBP,IAAOC,IAAV,4EAAGD,CAAH,oP,oCCsCXQ,IAjEI,SAAC,GAAmB,IAAjBf,EAAgB,EAAhBA,KAAMgB,EAAU,EAAVA,IACxB,OACI,oCACI,kBAACV,EAAD,CAAYI,IAAKV,EAAKiB,WAAWC,WAC7B,kBAACC,EAAA,EAAD,CAAWC,QAAM,EAACC,QAAQ,gBACtB,kBAAC,IAAD,CAAUC,OAAK,EAACC,aAAa,QACxBvB,EAAKwB,OAEV,kBAAC,IAAD,CAAWF,OAAK,EAACC,aAAa,QACzBvB,EAAKyB,aAEV,kBAAC,IAAD,CACIC,MAAO1B,EAAK2B,OAAOD,MACnBE,KAAM5B,EAAK2B,OAAOC,KAClBZ,IAAKA,EACLa,QAAS,MAIrB,kBAACV,EAAA,EAAD,CAAWC,QAAM,GACZpB,EAAK8B,QAAQC,KAAI,SAAAD,GAAO,OACrB,kBAACjB,EAAD,CAASmB,IAAKF,EAAQG,IAClB,kBAAC,MAAD,CAAKC,OAAQ,GAAIC,QAAQ,WACrB,kBAAC,MAAD,CAAKC,GAAI,GAAIC,GAAI,GACb,kBAACvB,EAAD,KACI,kBAACH,EAAD,CAAOD,IAAKoB,EAAQQ,KAAKpB,UAAWqB,IAAI,oBAGhD,kBAAC,MAAD,CAAKH,GAAI,GAAIC,GAAI,GACb,kBAACvB,EAAD,KACI,kBAAC,IAAD,KAAWgB,EAAQL,wB,kHCLxCe,UAvBa,SAAC,GAAuB,IAArBxC,EAAoB,EAApBA,KAASyC,EAAW,wBACvCvC,EAAmBH,YAAcC,EAAMyC,EAAKxC,aAA5CC,eAER,OACI,kBAAC,IAAD,CACIwC,KAAMD,EAAKE,SAASC,SACpB5B,IAAKyB,EAAKxC,YAAY4C,QACtBC,cAAc,EACdC,kBAAkB,EAClBC,SAAU9C,EAAe+C,iBAAiBD,SAC1CpB,KAAK,kBAEL,kBAAC,IAAD,CAAY5B,KAAME,EAAe+C,iBAAkBjC,IAAKyB,EAAKxC,YAAY4C,a,kCCvBtE,SAASK,EAA8BC,EAAQC,GAC5D,GAAc,MAAVD,EAAgB,MAAO,GAC3B,IAEInB,EAAKqB,EAFLC,EAAS,GACTC,EAAaC,OAAOC,KAAKN,GAG7B,IAAKE,EAAI,EAAGA,EAAIE,EAAWG,OAAQL,IACjCrB,EAAMuB,EAAWF,GACbD,EAASO,QAAQ3B,IAAQ,IAC7BsB,EAAOtB,GAAOmB,EAAOnB,IAGvB,OAAOsB,EAZT","file":"component---src-pages-how-it-works-de-js-6d1ee3604850310b2463.js","sourcesContent":["import { useMemo } from 'react';\r\n\r\n// helpers\r\nimport { localiseData, getLanguage } from '../utils/helpers';\r\n\r\nexport default function useTranslated(data, pageContext) {\r\n    const translatedData = useMemo(() => localiseData(data, getLanguage(pageContext)), [\r\n        data,\r\n        pageContext,\r\n    ]);\r\n\r\n    return { translatedData };\r\n}\r\n","import styled from 'styled-components';\r\n\r\nexport const Background = styled.div`\r\n    background: url(${props => props.src});\r\n    padding: 200px 0;\r\n    background-size: cover;\r\n\r\n    margin-bottom: 130px;\r\n\r\n    @media all and (max-width: 1366px) {\r\n        padding: 160px 0;\r\n    }\r\n\r\n    @media all and (max-width: 1024px) {\r\n        padding: 100px 0;\r\n    }\r\n\r\n    @media all and (max-width: 768px) {\r\n        margin-bottom: 28px;\r\n        padding: 60px 0;\r\n\r\n        p {\r\n            margin-bottom: 30px;\r\n        }\r\n    }\r\n`;\r\n\r\nexport const Image = styled.img``;\r\n\r\nexport const Section = styled.div`\r\n    margin-bottom: 120px;\r\n    @media all and (max-width: 768px) {\r\n        margin-bottom: 28px;\r\n    }\r\n`;\r\n\r\nexport const TextContainer = styled.div`\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    @media all and (max-width: 768px) {\r\n        margin-bottom: 20px;\r\n        text-align: center;\r\n\r\n        img {\r\n            margin: 0 auto;\r\n            max-width: 70%;\r\n            max-width: 140px;\r\n        }\r\n    }\r\n\r\n    @media all and (max-width: 601px) {\r\n        img {\r\n            max-width: 100px;\r\n        }\r\n\r\n        h3 {\r\n            font-size: 1rem;\r\n        }\r\n    }\r\n`;\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { Col, Row } from 'react-simple-flex-grid';\r\n\r\nimport { Background, Image, Section, TextContainer } from './styled';\r\nimport Container from '../../global/Container';\r\nimport Button from '../../global/ButtonLink';\r\nimport { Heading1, Heading3, Paragraph } from '../../global/Typography';\r\n\r\nconst HowItWorks = ({ data, lng }) => {\r\n    return (\r\n        <>\r\n            <Background src={data.background.publicURL}>\r\n                <Container narrow padding=\"0 15% 0 20px\">\r\n                    <Heading1 white marginBottom=\"24px\">\r\n                        {data.title}\r\n                    </Heading1>\r\n                    <Paragraph white marginBottom=\"24px\">\r\n                        {data.description}\r\n                    </Paragraph>\r\n                    <Button\r\n                        label={data.button.label}\r\n                        href={data.button.href}\r\n                        lng={lng}\r\n                        primary={1}\r\n                    />\r\n                </Container>\r\n            </Background>\r\n            <Container narrow>\r\n                {data.section.map(section => (\r\n                    <Section key={section.id}>\r\n                        <Row gutter={12} justify=\"stretch\">\r\n                            <Col xs={12} sm={4}>\r\n                                <TextContainer>\r\n                                    <Image src={section.icon.publicURL} alt=\"section image\" />\r\n                                </TextContainer>\r\n                            </Col>\r\n                            <Col xs={12} sm={8}>\r\n                                <TextContainer>\r\n                                    <Heading3>{section.description}</Heading3>\r\n                                </TextContainer>\r\n                            </Col>\r\n                        </Row>\r\n                    </Section>\r\n                ))}\r\n            </Container>\r\n        </>\r\n    );\r\n};\r\n\r\nHowItWorks.propTypes = {\r\n    data: PropTypes.shape({\r\n        section: PropTypes.arrayOf(\r\n            PropTypes.shape({\r\n                id: PropTypes.string.isRequired,\r\n                icon: PropTypes.shape({\r\n                    publicURL: PropTypes.string.isRequired,\r\n                }),\r\n                description: PropTypes.string.isRequired,\r\n            })\r\n        ),\r\n        background: PropTypes.shape({\r\n            publicURL: PropTypes.string.isRequired,\r\n        }),\r\n        button: PropTypes.shape({\r\n            label: PropTypes.string.isRequired,\r\n            href: PropTypes.string.isRequired,\r\n        }),\r\n        title: PropTypes.string.isRequired,\r\n        description: PropTypes.string.isRequired,\r\n    }).isRequired,\r\n    lng: PropTypes.string.isRequired,\r\n};\r\n\r\nexport default HowItWorks;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { graphql } from 'gatsby';\r\n\r\n// components\r\nimport Layout from '../components/Layout';\r\nimport HowItWorks from '../components/Pages/HowItWorks';\r\n\r\n// hooks\r\nimport useTranslated from '../hooks/useTranslated';\r\n\r\nconst HowItWorksComponent = ({ data, ...rest }) => {\r\n    const { translatedData } = useTranslated(data, rest.pageContext);\r\n\r\n    return (\r\n        <Layout\r\n            path={rest.location.pathname}\r\n            lng={rest.pageContext.langKey}\r\n            hasContainer={false}\r\n            showOurCustomers={false}\r\n            metatags={translatedData.strapiHowItWorks.metatags}\r\n            href=\"/how-it-works/\"\r\n        >\r\n            <HowItWorks data={translatedData.strapiHowItWorks} lng={rest.pageContext.langKey} />\r\n        </Layout>\r\n    );\r\n};\r\n\r\nHowItWorksComponent.propTypes = {\r\n    data: PropTypes.shape({\r\n        strapiHowItWorks: PropTypes.shape({}).isRequired,\r\n    }).isRequired,\r\n};\r\n\r\nexport default HowItWorksComponent;\r\n\r\nexport const query = graphql`\r\n    query HowItWorksDe {\r\n        strapiHowItWorks {\r\n            metatags {\r\n                description_de\r\n                description_en\r\n                title_de\r\n                title_en\r\n            }\r\n            background {\r\n                publicURL\r\n            }\r\n            button {\r\n                label_en\r\n                label_de\r\n                href\r\n            }\r\n            description_en\r\n            description_de\r\n            section {\r\n                description_en\r\n                description_de\r\n                icon {\r\n                    publicURL\r\n                }\r\n                id\r\n            }\r\n            title_en\r\n            title_de\r\n        }\r\n    }\r\n`;\r\n","export default function _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n\n  return target;\n}"],"sourceRoot":""}