{"version":3,"sources":["webpack://tribal-cabane/./src/components/pages/indexWrapper.js","webpack://tribal-cabane/./src/pages/index.js"],"names":["CoverImage","styled","Img","attrs","className","down","FullHeightWrapper","up","p","theme","heights","footer","data","useStaticQuery","backgroundSources","backgroundTablet","fluid","media","sizes","backgroundLaptop","backgroundDesktop","SEO","title","description","isHomescreen","fixed","logo"],"mappings":"0PAKMA,GAAaC,QAAOC,KAAKC,MAAM,CACnCC,UAAW,eADG,8EAAGH,CAAH,iEAMZI,UAAK,OAOHC,EAAoBL,oBAAH,0EAAGA,CAAH,2cACnBM,QAAG,OAGsB,SAAAC,GAAC,OAAIA,EAAEC,MAAMC,QAAQC,UAwB9CN,UAAK,OAILA,UAAK,O,SCuBT,EAhEkB,WAEhB,IAAMO,GAAOC,oBAAe,cAwBtBC,EAAoB,CAAC,OAAD,UAEnBF,EAAKG,iBAAiBC,MAFH,CAGtBC,MAAO,6CACPC,MAAO,qCAJe,iBAOnBN,EAAKO,iBAAiBH,MAPH,CAQtBC,MAAO,4CACPC,MAAO,qCATe,iBAYnBN,EAAKQ,kBAAkBJ,MAZJ,CAatBC,MAAO,qBACPC,MAAO,sCAIX,OACE,gBAAC,IAAD,KACE,gBAACG,EAAA,EAAD,CAAKC,MAAM,0BAA0BC,YAAY,gVACjD,gBAAC,IAAD,CAAcC,cAAc,IAC5B,gBAAClB,EAAD,KACE,uBAAKF,UAAU,uBACb,gBAAC,IAAD,CAAKA,UAAU,YAAYqB,MAAOb,EAAKc,KAAKD,QAC5C,uBAAKrB,UAAU,eACb,gBAACJ,EAAD,CAAYgB,MAAOF,MAGvB,gBAAC,IAAD","file":"component---src-pages-index-js-2612dfef0c265c94a358.js","sourcesContent":["import styled from 'styled-components'\r\nimport {down, up} from 'styled-breakpoints'\r\nimport BackgroundImage from 'gatsby-background-image'\r\nimport Img from 'gatsby-image'\r\n\r\nconst CoverImage = styled(Img).attrs({\r\n  className: 'coverImage'\r\n})`\r\n  flex: 1;\r\n  height: 100%;\r\n  top: 0;\r\n  ${down('sm')}{\r\n    margin: 20px;\r\n    min-height: unset;\r\n  }\r\n  \r\n`\r\n\r\nconst FullHeightWrapper = styled.div`\r\n  ${up('md')}{\r\n    height: 100vh;\r\n    .cover-image-wrapper, .coverImage{\r\n      height: calc(100vh - ${p => p.theme.heights.footer});      \r\n    }\r\n    .cover-image{\r\n      position: absolute;\r\n      height: 100%;\r\n      width: 100%;\r\n      top: 0;\r\n      z-index:0\r\n    }\r\n   \r\n \r\n    .cover-image-wrapper{\r\n      position: relative;\r\n     .home-logo{\r\n        position: absolute;\r\n        top: 30px;\r\n        left: calc(50% - 150px); \r\n        right: 50%;\r\n        z-index: 1;\r\n        \r\n      }\r\n      \r\n    }\r\n  }\r\n  ${down('md')}{\r\n    min-height: 100vh;\r\n    \r\n  }\r\n  ${down(\"sm\")}{\r\n    .cover-image-wrapper{\r\n      display: flex;\r\n      justify-content: center;\r\n      margin-top: 100px;\r\n      margin-bottom: 100px;\r\n    }\r\n    .cover-image{\r\n      display:none;\r\n    }\r\n  }\r\n  \r\n  display: flex;\r\n  flex-direction: column;\r\n \r\n\r\n`\r\nexport {CoverImage, FullHeightWrapper}","import React from \"react\"\r\nimport Footer from '../components/footer/footer'\r\nimport SEO from '../components/utils/SEO'\r\nimport { useStaticQuery, graphql } from \"gatsby\"\r\nimport MobileNavbar from \"../components/navbar/mobileNavbar\"\r\nimport {FullHeightWrapper, CoverImage} from '../components/pages/indexWrapper'\r\nimport DefaultLayout from \"../components/layouts/defaultLayout\"\r\nimport Img from \"gatsby-image\"\r\n\r\nconst IndexPage = () => {\r\n\r\n  const data = useStaticQuery(graphql`\r\n    query HomeLayout {\r\n      logo : imageSharp(fluid: {originalName: {eq: \"logo_x2.png\"}}){\r\n        fixed(quality: 100, width:300){\r\n          ...GatsbyImageSharpFixed\r\n        }\r\n      }\r\n      backgroundDesktop : imageSharp(fluid: {originalName: {eq: \"home-original.jpg\"}}) {\r\n        fluid(quality:100, srcSetBreakpoints:[1920, 2560]) {\r\n          ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n        }\r\n      }\r\n      backgroundLaptop : imageSharp(fluid: {originalName: {eq: \"home-1024.jpg\"}}){\r\n        fluid(quality:100, maxWidth:1440, srcSetBreakpoints:[1024,1440]) {\r\n          ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n        }\r\n      }\r\n      backgroundTablet : imageSharp(fluid: {originalName: {eq: \"home-768.jpg\"}}){\r\n        fluid (maxWidth:1024, srcSetBreakpoints:[768]){\r\n          ...GatsbyImageSharpFluid_withWebp_tracedSVG\r\n        }\r\n      }\r\n    }\r\n  `)\r\n  const backgroundSources = [\r\n    {\r\n      ...data.backgroundTablet.fluid,\r\n      media: \"(min-width: 769px) and (max-width: 1024px)\",\r\n      sizes: \"(max-width:1024px) 1024px, 100vw\"\r\n    },\r\n    {\r\n      ...data.backgroundLaptop.fluid,\r\n      media: \"(min-width:1025px) and (max-width:1440px)\",\r\n      sizes: \"(max-width:1440px) 1440px, 100vw\"\r\n    },\r\n    {\r\n      ...data.backgroundDesktop.fluid,\r\n      media: \"(min-width:1441px)\",\r\n      sizes: \"(min-width:1441px) 100vw, 1441px\"\r\n    }\r\n  ]\r\n  \r\n  return (\r\n    <DefaultLayout>\r\n      <SEO title=\"Acceuil - Tribal Cabane\" description=\"Tribal Cabane est un collectif d'artistes-décorateurs qui s'exprime à l'aide d'éléments issus de la nature pour réaliser des cabanes, décortions, sculptures, décors et ateliers.Nous cultivons et souhaitons partager une créativité intuitive aliée à la nature à l'aide de moyens d'expressions primitifs et simples à mettre en oeuvre.\"></SEO>\r\n      <MobileNavbar isHomescreen={true} />\r\n      <FullHeightWrapper>\r\n        <div className=\"cover-image-wrapper\">\r\n          <Img className=\"home-logo\" fixed={data.logo.fixed} />\r\n          <div className=\"cover-image\">\r\n            <CoverImage fluid={backgroundSources} />\r\n          </div>\r\n        </div>\r\n        <Footer />\r\n      </FullHeightWrapper>\r\n    </DefaultLayout>\r\n\r\n  )\r\n}\r\n\r\n\r\n\r\nexport default IndexPage\r\n"],"sourceRoot":""}