{"version":3,"sources":["webpack:///./src/pages/preview.js"],"names":["AppsWrapper","styled","div","AppWrapper","Layoutbox","Row","PreviewPage","images","useStaticQuery","className","smallHeader","title","image","header","childImageSharp","fluid","description","id","src","target","href"],"mappings":"4FAAA,4FAQMA,EAAcC,IAAOC,IAAV,2EAAGD,CAAH,0CAKXE,EAAaF,IAAOC,IAAV,0EAAGD,CAAH,+TA+BVG,EAAYH,IAAOC,IAAV,yEAAGD,CAAH,+CAMTI,EAAMJ,IAAOC,IAAV,mEAAGD,CAAH,uDA6DMK,UAvDK,WAChB,IAAMC,EAASC,yBAAe,cAY9B,OACI,kBAAC,IAAD,CACIC,UAAW,aACXC,aAAa,EACbC,MAAO,mBACPC,MAAOL,EAAOM,OAAOC,gBAAgBC,OAErC,kBAACX,EAAD,CAAWK,UAAW,cAClB,kBAAC,IAAD,CAAKE,MAAM,eACNK,YAAa,iIAClB,kBAAChB,EAAD,KACI,kBAACG,EAAD,KACI,yBAAKM,UAAU,0BACX,yBAAKA,UAAU,SACX,yBAAKA,UAAU,WACf,yBAAKA,UAAU,aAEnB,yBAAKA,UAAU,YACf,yBAAKA,UAAU,UACf,yBAAKA,UAAU,eACf,yBAAKA,UAAU,WACf,yBAAKA,UAAU,YACX,yBAAKA,UAAU,sBACf,yBAAKA,UAAU,sBACf,yBAAKA,UAAU,sBACf,yBAAKA,UAAU,uBAEnB,yBAAKA,UAAU,iBACf,yBAAKA,UAAU,UACX,4BAAQQ,GAAG,SAASN,MAAM,cAClBO,IAAK,2CAK7B,kBAACb,EAAD,KAAK,uBAAGc,OAAO,SAASC,KAAM,sCAAsC,kBAAC,IAAD","file":"component---src-pages-preview-js-d45ede6dc7cb4d33d3f8.js","sourcesContent":["import React from \"react\"\nimport {graphql, Link, useStaticQuery} from \"gatsby\"\n\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport styled from \"styled-components\"\nimport {Button} from \"../components/button\";\n\nconst AppsWrapper = styled.div`\n  display: flex;\n    justify-content: center;\n\n`;\nconst AppWrapper = styled.div`\n  padding: 40px;\n  display: flex;\n  .marvel-device {\n  .screen {\n  background: #f1f1f1;\n  }\n    iframe {\n    padding-top:20px;\n    width: 100%;\n    height: calc(100% - 30px);\n    }\n  }\n  \n  @media (max-width: 768px){\n    .marvel-device {\n      transform: scale(0.9);\n      margin-top: -50px;\n    }\n  }\n  \n  @media (max-width: 385px){\n    .marvel-device {\n    margin-top: -150px;\n      transform: scale(0.7);\n      margin-bottom: -180px;\n    }\n  }\n  \n`;\n\nconst Layoutbox = styled.div`\n      @media(max-width: 768px){ \n        overflow: hidden;\n      }\n`;\n\nconst Row = styled.div`\n  display: flex;\n  padding: 40px;\n  justify-content: center;\n`;\n\nconst PreviewPage = () => {\n    const images = useStaticQuery(graphql`\n        query {\n            header: file(relativePath: { eq: \"preview-background.png\" }) {\n                childImageSharp {\n                    fluid(maxWidth: 1440) {\n                        ...GatsbyImageSharpFluid_withWebp\n                    }\n                }\n            }\n        }\n    `);\n\n    return (\n        <Layout\n            className={\"layout-box\"}\n            smallHeader={true}\n            title={\"BLICK IN DIE APP\"}\n            image={images.header.childImageSharp.fluid}\n        >\n            <Layoutbox className={\"layout-box\"}>\n                <SEO title=\"App Vorschau\"\n                     description={\"Machen Sie sich selbst ein Bild. So könnte ihre App aussehen - flexibel in allen Kategorien, genau wie Sie es sich wünschen.\"}/>\n                <AppsWrapper>\n                    <AppWrapper>\n                        <div className=\"marvel-device iphone-x\">\n                            <div className=\"notch\">\n                                <div className=\"camera\"></div>\n                                <div className=\"speaker\"></div>\n                            </div>\n                            <div className=\"top-bar\"></div>\n                            <div className=\"sleep\"></div>\n                            <div className=\"bottom-bar\"></div>\n                            <div className=\"volume\"></div>\n                            <div className=\"overflow\">\n                                <div className=\"shadow shadow--tr\"></div>\n                                <div className=\"shadow shadow--tl\"></div>\n                                <div className=\"shadow shadow--br\"></div>\n                                <div className=\"shadow shadow--bl\"></div>\n                            </div>\n                            <div className=\"inner-shadow\"></div>\n                            <div className=\"screen\">\n                                <iframe id=\"iframe\" title=\"iPhone Demo\"\n                                        src={\"https://apps.mainorder.de/da-toni/\"}></iframe>\n                            </div>\n                        </div>\n                    </AppWrapper>\n                </AppsWrapper>\n                <Row><a target=\"_blank\" href={\"https://apps.mainorder.de/da-toni/\"}><Button>im Vollbild darstellen</Button></a></Row>\n\n            </Layoutbox>\n        </Layout>\n    )\n};\n\nexport default PreviewPage\n"],"sourceRoot":""}