{"version":3,"file":"component---src-pages-contenu-js-0ec4e6a75dad0186b669.js","mappings":"kNAIA,MAAMA,GAAYC,EAAAA,EAAAA,IAAYC,IAAK,CACjCC,QAAS,CACPC,UAAW,OACX,CAACF,EAAMG,YAAYC,KAAK,OAAQ,CAC9BC,QAAS,OACTC,eAAgB,SAChBC,SAAU,OACVC,aAAc,IAEhB,OAAQ,CACNA,aAAc,GACd,CAACR,EAAMG,YAAYC,KAAK,OAAQ,CAC9BK,MAAO,OACPC,QAAS,GACTF,aAAc,GAEhB,WAAY,CACVN,UAAW,OACXS,SAAU,UACVC,WAAY,IACZC,MAAOC,EAAAA,EAAOC,KACdC,OAAQ,UACRC,WAAY,sBACZC,WAAY,OACZR,QAAS,aACT,CAACV,EAAMG,YAAYC,KAAK,OAAQ,CAC9Be,OAAQL,EAAAA,EAAOC,KAAO,aACtBL,QAAS,GACTU,aAAc,OAKtBC,OAAQ,CACNR,MAAOC,EAAAA,EAAOQ,SAAW,aACzB,CAACtB,EAAMG,YAAYC,KAAK,OAAQ,CAC9BmB,YAAaT,EAAAA,EAAOQ,SAAW,mBA0BrC,MArBcE,IACZ,MAAMC,EAAU3B,IAahB,OACE4B,EAAAA,cAAA,MAAIC,UAAWF,EAAQxB,SAXhBuB,EAAMI,WAAWC,MAAMC,KAAI,CAACC,EAAUC,IAKzCN,EAAAA,cAAA,MAAIO,IAAKD,GAAON,EAAAA,cAAA,UAAQC,UAAWH,EAAMH,SAAWW,EAAQP,EAAQJ,OAAS,GAAIa,QAJvDC,KAC1BX,EAAMU,QAAQF,EAAM,GAG4FD,EAASK,KAAKC,SAQ7H,E,4BCvDT,MAAMvC,GAAYC,EAAAA,EAAAA,IAAYC,IAAK,CACjCC,QAAS,CACPe,OAAQ,UACRN,QAAS,GACT,0BAA2B,CACzB4B,OAAQ,IACRC,MAAO,OACPnB,aAAc,gBACd,CAACpB,EAAMG,YAAYC,KAAK,OAAQ,CAC9BkC,OAAQ,KAGZ,qBAAsB,CACpBE,mBAAoB,QACpBC,UAAW,OACX,wBAAyB,CACvBA,UAAW,QAEb,0BAA2B,CACzBC,QAAS,GAEX,kBAAmB,CACjBxB,WAAYJ,EAAAA,EAAO6B,MACnBvB,aAAc,gBACdV,QAAS,GACTkC,UAAW,aACXN,OAAQ,GACRjC,QAAS,OACTwC,WAAY,SACZvC,eAAgB,SAChB,CAACN,EAAMG,YAAYC,KAAK,OAAQ,CAC9BkC,OAAQ,KAGZ,UAAW,CACTQ,UAAW,cACXN,mBAAoB,eAsB5B,MAhBchB,IACZ,MAAMC,EAAU3B,IAChB,OACE4B,EAAAA,cAACqB,EAAAA,EAAI,CAACb,QAASV,EAAMU,QAASP,UAAYF,EAAQxB,QAAS+C,MAAI,EAACC,GAAI,EAAGC,GAAI,GACzExB,EAAAA,cAACyB,IAAU,CAACC,OAAO,MAAMC,KAAK,aAC5B3B,EAAAA,cAAA,OAAKC,UAAU,aACbD,EAAAA,cAAC4B,EAAAA,EAAW,CAAC3B,UAAU,YAAY4B,MAAO/B,EAAMgC,KAAKC,SAAS,GAAGC,gBAAiBC,IAAI,KACtFjC,EAAAA,cAAA,OAAKC,UAAU,aACbD,EAAAA,cAAA,UAAKF,EAAMgC,KAAKnB,SAIjB,ECvDX,MAAMvC,GAAYC,EAAAA,EAAAA,IAAYC,IAAK,CACjC4D,YAAa,CACXzC,OAAQ,kBACRC,aAAc,EACdmB,MAAO,sBACP,0BAA2B,CACzBA,MAAO,SAGXlC,QAAS,CACPG,aAAc,GACdW,OAAQ,mBACRsB,UAAW,sCACXG,UAAW,aACXxB,aAAc,GACd,0BAA2B,CACzBmB,MAAO,QAET,CAACvC,EAAMG,YAAYC,KAAK,OAAQ,CAC9Be,OAAQ,kBACRC,aAAc,EACdqB,UAAW,wCAGfoB,MAAO,CACLC,YAAa,GACb,CAAC9D,EAAMG,YAAYC,KAAK,OAAQ,CAC9B0D,YAAa,EACbC,UAAW,IAEb,OAAQ,CACNA,UAAW,IAEb,0BAA2B,CACzB3C,aAAc,GACdmB,MAAO,QAET,MAAO,CACLwB,UAAW,GACXC,WAAY,SAiDlB,MA5CsBxC,IACpB,MAAMC,EAAU3B,KAEV,EAACmE,EAAW,EAACC,IAAiBC,EAAAA,EAAAA,UAAS,KAe7C,OACEzC,EAAAA,cAAA,WAAS0C,GAAI5C,EAAM6C,MACjB3C,EAAAA,cAAC4C,EAAAA,EAAS,KACR5C,EAAAA,cAACqB,EAAAA,EAAI,CAACwB,WAAS,EAACjE,eAAe,cAC7BoB,EAAAA,cAACqB,EAAAA,EAAI,CAACC,MAAI,EAACuB,WAAS,EAACtB,GAAI,GAAIC,GAAI,EAAG5C,eAAe,aAAakE,UAAU,SAAS3B,WAAW,cAC5FnB,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAWF,EAAQpB,QAASkE,WAAS,GACzC7C,EAAAA,cAAC4B,EAAAA,EAAW,CAACC,MAAO/B,EAAMiD,MAAMhB,SAASQ,GAAYP,gBAAiBC,IAAI,MAE3EnC,EAAMiD,MAAMhB,SAASiB,OAAS,EAC/BhD,EAAAA,cAACqB,EAAAA,EAAI,CAACwB,WAAS,EAACjE,eAAe,iBArBhCkB,EAAMiD,MAAMhB,SAASkB,MAAM,EAAG,GAAG7C,KAAI,CAAC8C,EAAS5C,IAKlDN,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAWF,EAAQmC,YAAa3B,IAAKD,EAAOgB,MAAI,EAAC6B,aAJrCC,KAClBZ,EAAclC,EAAM,GAIlBN,EAAAA,cAAC4B,EAAAA,EAAW,CAACC,MAAOqB,EAAQlB,gBAAiBC,IAAI,SAkB7C,IAEJjC,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAWF,EAAQoC,MAAOU,WAAS,EAACvB,MAAI,EAACC,GAAI,GAAIC,GAAI,EAAGsB,UAAU,UACtE9C,EAAAA,cAACqB,EAAAA,EAAI,CAACwB,WAAS,EAACC,UAAU,UACxB9C,EAAAA,cAAA,UAAKF,EAAMiD,MAAMpC,OAEnBX,EAAAA,cAAA,SAAIF,EAAMiD,MAAMM,YAAYA,gBAI1B,ECjFd,MAAMjF,GAAYC,EAAAA,EAAAA,IAAYC,IAAK,CACjCC,QAAS,CACPiB,WAAYJ,EAAAA,EAAOkE,WACnB9E,UAAW,SACX,MAAO,CACL6D,UAAW,KAGfkB,UAAW,CACTvE,QAAS,SACT,CAACV,EAAMG,YAAYC,KAAK,OAAQ,CAC9BM,QAAS,eAyDf,MApDmBc,IACjB,MAAM,EAAC0D,EAAM,EAACC,IAAYhB,EAAAA,EAAAA,UAAS,CACjCiB,eAAgB,EAChBC,gBAAgB,IAwBZ5D,EAAU3B,IAChB,OACE4B,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAAA,WAAS0C,GAAG,YAAYzC,UAAWF,EAAQxB,QAAU,YACnDyB,EAAAA,cAAC4C,EAAAA,EAAS,KACR5C,EAAAA,cAACqB,EAAAA,EAAI,CAACwB,WAAS,EAACC,UAAU,SAAS3B,WAAW,UAC5CnB,EAAAA,cAAA,UAAoB,UAAfF,EAAM8D,KAAmB,kCAAoC,wCAClE5D,EAAAA,cAAA,SAAmB,UAAfF,EAAM8D,KAAmB,oHAAsH,gIACnJ5D,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAWF,EAAQwD,UAAWV,WAAS,GAC3C7C,EAAAA,cAACqB,EAAAA,EAAI,CAACC,MAAI,EAACC,GAAI,GAAIC,GAAI,GACrBxB,EAAAA,cAAC6D,EAAI,CAAClE,OAAQ6D,EAAME,eAAgBxD,WAAYJ,EAAMI,WAAYM,QA/BnDsD,IAC3BL,EAAS,CACPC,eAAgBI,EAChBH,gBAAgB,GAChB,KA6BQ3D,EAAAA,cAACqB,EAAAA,EAAI,CAACwB,WAAS,EAACvB,MAAI,EAACC,GAAI,GAAIC,GAAI,GAzBpC1B,EAAMI,WAAWC,MAAMqD,EAAME,gBAAgBhD,KAAK6C,UAAUnD,KAAI,CAAC0B,EAAMxB,IAQ1EN,EAAAA,cAAC+D,EAAI,CAACxD,IAAKD,EAAOwB,KAAMA,EAAMtB,QAPJwD,KAC1BP,EAAS,CACPC,eAAgBF,EAAME,eACtBC,eAAgBrD,GAChB,YA2BsB,IAAzBkD,EAAMG,eAA2B3D,EAAAA,cAACiE,EAAY,CAAClB,MAAOjD,EAAMI,WAAWC,MAAMqD,EAAME,gBAAgBhD,KAAK6C,UAAUC,EAAMG,gBAAiBhB,KAAK,aAC3I3C,EAAAA,cAAA,OAAK0C,GAAG,aACX,E,UCnEP,MAAMtE,GAAYC,EAAAA,EAAAA,IAAYC,IAAK,CACjCC,QAAS,CACPe,OAAQ,UACRN,QAAS,GACT,mBAAoB,CAClB+B,UAAW,OACXD,mBAAoB,QACpB,QAAS,CACP9B,QAAS,GACTU,aAAc,GACdkB,OAAQ,IACR,CAACtC,EAAMG,YAAYC,KAAK,OAAQ,CAC9BkC,OAAQ,KAGZ,mBAAoB,CAClBpB,WAAYJ,EAAAA,EAAO8E,UACnBxE,aAAc,gBACd,UAAW,CACTmB,MAAO,GACPD,OAAQ,GACR,CAACtC,EAAMG,YAAYC,KAAK,OAAQ,CAC9BmC,MAAO,GACPD,OAAQ,IAEV,QAAS,CAACuD,KAAM/E,EAAAA,EAAO6B,MAAQ,gBAGnC,kBAAmB,CACjBvB,aAAc,gBACdF,WAAYJ,EAAAA,EAAO6B,QAGvB,yBAA0B,CACxBG,UAAW,eACXN,mBAAoB,cA4B1B,MAvBchB,IACZ,MAAMC,EAAU3B,IAChB,OACE4B,EAAAA,cAACqB,EAAAA,EAAI,CAACb,QAASV,EAAMU,QAASP,UAAYF,EAAQxB,QAAS+C,MAAI,EAACC,GAAI,GAAI6C,GAAI,GAClC,2BAAtCtE,EAAMuE,SAAS3D,KAAK4D,cACtBtE,EAAAA,cAAA,KAAG,aAAW,SAAS2B,KAAK,yBAAyB4C,OAAO,SAASC,IAAI,uBACvExE,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAU,YAAY4C,WAAS,EAAC1B,WAAW,UAC/CnB,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAU,YAAY4C,WAAS,EAACvB,MAAI,EAACC,GAAI,EAAG6C,GAAI,EAAGjD,WAAW,UAAUrB,EAAM2E,MACpFzE,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAU,YAAY4C,WAAS,EAACvB,MAAI,EAACC,GAAI,EAAG6C,GAAI,GAAIjD,WAAW,UAASnB,EAAAA,cAAA,UAAKF,EAAMuE,SAAS3D,KAAKC,SAI3GX,EAAAA,cAAC0E,EAAAA,KAAI,CAACC,GAAI7E,EAAMuE,SAAS3D,KAAKkE,WAC5B5E,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAU,YAAY4C,WAAS,EAAC1B,WAAW,UAC/CnB,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAU,YAAY4C,WAAS,EAACvB,MAAI,EAACC,GAAI,EAAG6C,GAAI,EAAGjD,WAAW,UAAUrB,EAAM2E,MACpFzE,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAU,YAAY4C,WAAS,EAACvB,MAAI,EAACC,GAAI,EAAG6C,GAAI,GAAIjD,WAAW,UAASnB,EAAAA,cAAA,UAAKF,EAAMuE,SAAS3D,KAAKC,SAItG,E,SCzDX,MAAMvC,GAAYC,EAAAA,EAAAA,IAAYC,IAAK,CACjCC,QAAS,CACPiB,WAAYJ,EAAAA,EAAOkE,WACnB9E,UAAW,SACX,MAAO,CACL6D,UAAW,KAGfwC,SAAU,CACR7F,QAAS,SACT,CAACV,EAAMG,YAAYC,KAAK,OAAQ,CAC9BM,QAAS,eA+Cf,MA1CkBc,IAChB,MAuBMC,EAAU3B,IAChB,OACE4B,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAAA,WAAS0C,GAAG,kBAAkBzC,UAAWF,EAAQxB,QAAU,YACzDyB,EAAAA,cAAC4C,EAAAA,EAAS,KACR5C,EAAAA,cAACqB,EAAAA,EAAI,CAACwB,WAAS,EAACC,UAAU,SAAS3B,WAAW,UAC5CnB,EAAAA,cAAA,UAAoB,UAAfF,EAAM8D,KAAmB,uCAAyC,4CACvE5D,EAAAA,cAAA,SAAmB,UAAfF,EAAM8D,KAAmB,8FAAgG,2GAC7H5D,EAAAA,cAACqB,EAAAA,EAAI,CAACpB,UAAWF,EAAQ8E,SAAUhC,WAAS,GA9B7C/C,EAAM+E,SAAS1E,MAAMC,KAAI,CAACiE,EAAU/D,IAiBvCN,EAAAA,cAAC+D,EAAI,CAACxD,IAAKD,EAAO+D,SAAUA,EAAUI,KAfF,0BAAhCJ,EAAS3D,KAAK4D,cACTtE,EAAAA,cAAC8E,EAAAA,GAAU,MAEgB,2BAAhCT,EAAS3D,KAAK4D,cACTtE,EAAAA,cAAC+E,EAAAA,GAAO,MAEmB,2BAAhCV,EAAS3D,KAAK4D,cACTtE,EAAAA,cAACgF,EAAAA,GAAS,MAEiB,2BAAhCX,EAAS3D,KAAK4D,cACTtE,EAAAA,cAACiF,EAAAA,GAAO,WADjB,UAyBD,ECjDP,MATiBnF,GAEbE,EAAAA,cAAAA,EAAAA,SAAA,KACCA,EAAAA,cAACkF,EAAS,CAACtB,KAAM9D,EAAM8D,KAAM1D,WAAYJ,EAAMqF,qBAC/CnF,EAAAA,cAACoF,EAAQ,CAACxB,KAAM9D,EAAM8D,KAAMiB,SAAU/E,EAAM+E,W,oFC2DjD,UA5DsBQ,KACpB,MAAMC,GAAOC,EAAAA,EAAAA,gBAAe,YAoC5B,OACEvF,EAAAA,cAACwF,EAAAA,EAAM,CACP5B,KAAK,QACL6B,WAAW,cACXC,QAAQ,EACRC,YAAaL,EAAKzD,MAAM+D,gBACxBC,eAAe,6CACfC,MAAM,4DACNC,SAAU,iKACVC,WAAW,aACXC,eAAe,WACfC,YAAY,mBACZC,gBAAgB,eAEdnG,EAAAA,cAACoG,EAAAA,EAAG,CACJN,MAAM,4DACNzC,YAAY,qLAEZrD,EAAAA,cAACqG,EAAAA,EAAO,CAACzC,KAAK,QAAQuB,mBAAoBG,EAAKgB,gCAAiCzB,SAAUS,EAAKiB,wBACxF,C","sources":["webpack://attractif-website/./src/layouts/Content/Templates/list.js","webpack://attractif-website/./src/layouts/Content/Templates/card.js","webpack://attractif-website/./src/layouts/Content/presentation.js","webpack://attractif-website/./src/layouts/Content/Templates/index.js","webpack://attractif-website/./src/layouts/Content/Channels/card.js","webpack://attractif-website/./src/layouts/Content/Channels/index.js","webpack://attractif-website/./src/layouts/Content/index.js","webpack://attractif-website/./src/pages/contenu.js"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { colors } from '../../../style/constants';\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    textAlign: 'left',\n    [theme.breakpoints.down('sm')]: {\n      display: 'flex',\n      justifyContent: 'center',\n      flexWrap: 'wrap',\n      marginBottom: 10,\n    },\n    '& li': {\n      marginBottom: 10,\n      [theme.breakpoints.down('sm')]: {\n        float: \"left\",\n        padding: 10,\n        marginBottom: 0,\n      },\n      '& button': {\n        textAlign: 'left',\n        fontSize: '1.375em',\n        fontWeight: 500,\n        color: colors.GREY,\n        cursor: 'pointer',\n        fontFamily: 'Poppins, sans-serif',\n        background: 'none',\n        padding: '0 10px 0 0',\n        [theme.breakpoints.down('sm')]: {\n          border: colors.GREY + ' solid 1px',\n          padding: 10,\n          borderRadius: 10,\n        },\n      }\n    }\n  },\n  active: {\n    color: colors.ATT_BLUE + '!important',\n    [theme.breakpoints.down('sm')]: {\n      borderColor: colors.ATT_BLUE + '!important'\n    },\n  }\n}));\n\nconst List = (props) => {\n  const classes = useStyles();\n\n  const renderListItem = () => {\n    return props.categories.edges.map((category, index) => {\n      const handleCategoryClick = () => {\n        props.onClick(index);\n      }\n      return(\n        <li key={index}><button className={props.active === index ? classes.active : ''} onClick={handleCategoryClick}>{category.node.name}</button></li>\n      )\n    })\n  };\n  \n  return (\n    <ul className={classes.wrapper}>\n      {renderListItem()}\n    </ul>\n  );\n}\n\nexport default List;","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport {colors} from '../../../style/constants';\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport AnchorLink from 'react-anchor-link-smooth-scroll';\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    cursor: 'pointer',\n    padding: 10,\n    '& .gatsby-image-wrapper': {\n      height: 144,\n      width: '100%',\n      borderRadius: '10px 10px 0 0',\n      [theme.breakpoints.down('xs')]: {\n        height: 80,\n      },\n    },\n    '& > a > .clickable': {\n      transitionDuration: '0.25s',\n      boxShadow: 'none',\n      '&:active > .clickable': {\n        boxShadow: 'none',\n      },\n      '& .gatsby-image-wrapper': {\n        zIndex: -1,\n      },\n      '& > :last-child': {\n        background: colors.WHITE,\n        borderRadius: '0 0 10px 10px',\n        padding: 20,\n        boxSizing: 'border-box',\n        height: 72,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        [theme.breakpoints.down('xs')]: {\n          height: 60,\n        },\n      },\n      '&:hover': {\n        transform: 'scale(1.05)',\n        transitionDuration: '0.25s'\n      }\n    } \n  },\n}));\n\nconst Card = (props) => {\n  const classes = useStyles();\n  return (\n    <Grid onClick={props.onClick} className ={classes.wrapper} item xs={6} md={4}>\n      <AnchorLink offset='160' href='#template'>\n        <div className='clickable'>\n          <GatsbyImage className='clickable' image={props.card.examples[0].gatsbyImageData} alt=\"\"/>\n          <div className='clickable'>\n            <h4>{props.card.name}</h4>\n          </div>\n        </div>\n      </AnchorLink>\n    </Grid>\n  );\n}\n\nexport default Card;","import React, {useState} from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Container from '@material-ui/core/Container';\nimport Grid from '@material-ui/core/Grid';\nimport { GatsbyImage } from \"gatsby-plugin-image\";\n\nconst useStyles = makeStyles((theme) => ({\n  screenshots: {\n    border: '3px black solid',\n    borderRadius: 3,\n    width: 'calc(100%/3 - 15px)',\n    '& .gatsby-image-wrapper': {\n      width: '100%'\n    },\n  },\n  display: {\n    marginBottom: 30,\n    border: '10px black solid',\n    boxShadow: '-20px 20px 20px 0px rgba(0,0,0,0.5)',\n    boxSizing: 'border-box',\n    borderRadius: 10,\n    '& .gatsby-image-wrapper': {\n      width: '100%'\n    },\n    [theme.breakpoints.down('xs')]: {\n      border: '5px black solid',\n      borderRadius: 5,\n      boxShadow: '-10px 10px 10px 0px rgba(0,0,0,0.5)',\n    },\n  },\n  infos: {\n    paddingLeft: 30,\n    [theme.breakpoints.down('sm')]: {\n      paddingLeft: 0,\n      marginTop: 30,\n    },\n    '& h2': {\n      marginTop: 15\n    },\n    '& .gatsby-image-wrapper': {\n      borderRadius: 10,\n      width: '90px'\n    },\n    '& p': {\n      marginTop: 30,\n      marginLeft: 15\n    }\n  }\n}));\n\nconst Presentation = (props) => {\n  const classes = useStyles();\n  \n  const [screenshot, setScreenshot] = useState('0');\n\n  const renderExamples = () => {\n    return props.datas.examples.slice(0, 3).map((example, index) => {\n      const handleHover = () => {\n        setScreenshot(index);\n      }\n      return(\n        <Grid className={classes.screenshots} key={index} item onMouseEnter={handleHover}>\n          <GatsbyImage image={example.gatsbyImageData} alt=\"\"/>\n        </Grid>\n      )\n    })\n  }\n\n  return (\n    <section id={props.type}>\n      <Container>\n        <Grid container justifyContent='flex-start'>\n          <Grid item container xs={12} md={6} justifyContent='flex-start' direction='column' alignItems='flex-start'>\n            <Grid className={classes.display} container>\n              <GatsbyImage image={props.datas.examples[screenshot].gatsbyImageData} alt=\"\"/>\n            </Grid>\n            {props.datas.examples.length > 1 ?\n            <Grid container justifyContent='space-between'>\n              {renderExamples()}\n            </Grid>\n            : ''}\n          </Grid>\n          <Grid className={classes.infos} container item xs={12} md={6} direction='column'>\n            <Grid container direction='column'>\n              <h2>{props.datas.name}</h2>\n            </Grid>\n            <p>{props.datas.description.description}</p>\n          </Grid>\n        </Grid>\n      </Container>\n    </section>\n  );\n}\n\nexport default Presentation;","import React, {useState} from 'react';\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport {colors} from '../../../style/constants';\nimport List from './list';\nimport Card from './card';\nimport Presentation from '../presentation';\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    background: colors.LIGHT_GREY,\n    textAlign: 'center',\n    '& p': {\n      marginTop: 15\n    }\n  },\n  templates: {\n    padding: '60px 0',\n    [theme.breakpoints.down('xs')]: {\n      padding: '30px 0',\n    },\n  }\n}));\n\nconst Templates = (props) => {\n  const [state, setState] = useState({\n    activeCategory: 0,\n    activeTemplate: false\n  })\n\n  const handleCategoryClick = (newActiveCategory) => {\n    setState({\n      activeCategory: newActiveCategory,\n      activeTemplate: false,\n    })\n  }\n\n  const renderCards = () => {\n    return props.categories.edges[state.activeCategory].node.templates.map((card, index) => {\n      const handleTemplateClick = () => {\n        setState({\n          activeCategory: state.activeCategory,\n          activeTemplate: index,\n        })\n      }\n      return(\n        <Card key={index} card={card} onClick={handleTemplateClick}/>\n      )\n    })\n  }\n\n  const classes = useStyles();\n  return (\n    <>\n      <section id='templates' className={classes.wrapper + ' clipped'}>\n        <Container>\n          <Grid container direction='column' alignItems='center'>\n            <h2>{props.lang === 'en-CA' ? 'Templates simplifying your life' : 'Des gabarits vous simplifiant la vie'}</h2>\n            <p>{props.lang === 'en-CA' ? 'Choose from our wide range of choices to distribute your content. \\n Here are a few with different uses for each.' : 'Choisissez parmi notre gamme de gabarits afin de diffuser votre contenu. \\n En voici quelques-uns avec différentes utilités.'}</p>\n            <Grid className={classes.templates} container>\n              <Grid item xs={12} md={3}>\n                <List active={state.activeCategory} categories={props.categories} onClick={handleCategoryClick}/>\n              </Grid>\n              <Grid container item xs={12} md={9}>\n                {renderCards()}\n              </Grid>\n            </Grid>\n          </Grid>\n        </Container>\n      </section>\n      {state.activeTemplate !== false ? <Presentation datas={props.categories.edges[state.activeCategory].node.templates[state.activeTemplate]} type='template'/>\n        : <div id='template'></div>}\n    </>\n  );\n}\n\nexport default Templates;","import React from 'react';\nimport {Link} from 'gatsby';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport {colors} from '../../../style/constants';\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    cursor: 'pointer',\n    padding: 10,\n    '& a > .clickable': {\n      boxShadow: 'none',\n      transitionDuration: '0.25s',\n      '& > *': {\n        padding: 20,\n        borderRadius: 10,\n        height: 100,\n        [theme.breakpoints.down('xs')]: {\n          height: 75,\n        },\n      },\n      '& > :first-child': {\n        background: colors.TURQUOISE,\n        borderRadius: '10px 0 0 10px',\n        '& > svg': {\n          width: 60,\n          height: 60,\n          [theme.breakpoints.down('xs')]: {\n            width: 35,\n            height: 35,\n          },\n          '& > *': {fill: colors.WHITE + '!important'}\n        }\n      },\n      '& > :last-child': {\n        borderRadius: '0 10px 10px 0',\n        background: colors.WHITE\n      }\n    },\n    '& a > .clickable:hover': {\n      transform: 'scale(1.025)',\n      transitionDuration: '0.25s'\n    }\n  },\n}));\n\nconst Card = (props) => {\n  const classes = useStyles();\n  return (\n    <Grid onClick={props.onClick} className ={classes.wrapper} item xs={12} sm={6}>\n      { props.industry.node.contentful_id === \"2ucuM8w25zf95SjOxURGBL\" ? \n      <a aria-label=\"MicoTV\" href=\"https://www.micotv.ca/\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <Grid className='clickable' container alignItems='center'>\n          <Grid className='clickable' container item xs={3} sm={2} alignItems='center'>{props.icon}</Grid>\n          <Grid className='clickable' container item xs={9} sm={10} alignItems='center'><h4>{props.industry.node.name}</h4></Grid>\n        </Grid>\n      </a>\n      :\n      <Link to={props.industry.node.permalink}>\n        <Grid className='clickable' container alignItems='center'>\n          <Grid className='clickable' container item xs={3} sm={2} alignItems='center'>{props.icon}</Grid>\n          <Grid className='clickable' container item xs={9} sm={10} alignItems='center'><h4>{props.industry.node.name}</h4></Grid>\n        </Grid>\n      </Link>\n      }\n    </Grid>\n  );\n}\n\nexport default Card;","import React from 'react';\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport {colors} from '../../../style/constants';\nimport Card from './card';\nimport {Pharmacies, Finance, Factories, Glasses} from '../../../components/svgs/industries';\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    background: colors.LIGHT_GREY,\n    textAlign: 'center',\n    '& p': {\n      marginTop: 15\n    }\n  },\n  channels: {\n    padding: '50px 0',\n    [theme.breakpoints.down('xs')]: {\n      padding: '20px 0',\n    },\n  }\n}));\n\nconst Channels = (props) => {\n  const renderCards = () => {\n    return props.channels.edges.map((industry, index) => {\n      const renderIcon = () => {\n        if (industry.node.contentful_id === \"PWF1ScawoaaxnKIgjOtuc\") {\n          return <Pharmacies />\n        }\n        if (industry.node.contentful_id === \"6ZaDyyZZ4mBcj8sAQtdw4s\") {\n          return <Finance />\n        }\n        if (industry.node.contentful_id === \"626he1WN2uKETazng2SuCd\") {\n          return <Factories />\n        }\n        if (industry.node.contentful_id === \"2ucuM8w25zf95SjOxURGBL\") {\n          return <Glasses />\n        }\n      }\n\n      return(\n        <Card key={index} industry={industry} icon={renderIcon()}/>\n      )\n    })\n  }\n\n  const classes = useStyles();\n  return (\n    <>\n      <section id='turnkey-content' className={classes.wrapper + ' clipped'}>\n        <Container>\n          <Grid container direction='column' alignItems='center'>\n            <h2>{props.lang === 'en-CA' ? 'Turnkey content for these industries' : 'Du contenu clé en main pour ces secteurs'}</h2>\n            <p>{props.lang === 'en-CA' ? 'Our editorial team takes care of providing new and varied content directly to your screens.' : 'Notre équipe de rédaction s\\'occupe de vous offrir du contenu nouveau et varié directement à vos écrans.'}</p>\n            <Grid className={classes.channels} container>\n              {renderCards()}\n            </Grid>\n          </Grid>\n        </Container>\n      </section>\n    </>\n  );\n}\n\nexport default Channels;","import React from 'react';\nimport Templates from './Templates/';\nimport Channels from './Channels/';\n\nconst Content = (props) => {\n  return (\n    <>\n     <Templates lang={props.lang} categories={props.templateCategories}/>\n     <Channels lang={props.lang} channels={props.channels} />\n    </>\n  );\n}\n\nexport default Content;","import React from \"react\"\n\nimport Layout from \"../components/layout\"\nimport Seo from \"../components/seo\"\nimport {graphql, useStaticQuery} from 'gatsby';\nimport Content from '../layouts/Content/';\n\nconst ContentPageFr = () => {\n  const data = useStaticQuery(graphql`\n    query contentPageDataFr {\n      image: file(relativePath: { eq: \"content/header.jpg\"}) {\n        id\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH)\n        }\n      }\n      allContentfulCategorieDeGabarit(sort: {fields: name, order: ASC}, filter: {node_locale: {eq: \"fr-CA\"}}) {\n        edges {\n          node {\n            name\n            templates {\n              name\n              description {\n                description\n              }\n              examples {\n                gatsbyImageData(layout: CONSTRAINED)\n              }\n            }\n          }\n        }\n      }\n      allContentfulSecteurs(filter: {handkeyContent: {eq: true}, node_locale: {eq: \"fr-CA\"}}, sort: {fields: createdAt}) {\n        edges {\n          node {\n            name\n            permalink\n            contentful_id\n          }\n        }\n      }\n    }\n  `)\n\n  return (\n    <Layout \n    lang=\"fr-CA\" \n    switchLink='/en/content' \n    slider={true} \n    headerImage={data.image.childImageSharp} \n    headerImageAlt=\"Contenu Attractif pour Affichage dynamique\"\n    title=\"Des gabarits prêts à personnaliser et contenu clé en main\" \n    subTitle={\"Choisissez des gabarits selon vos besoins ou adaptez-les aux couleurs de votre entreprise. Optez aussi pour du contenu clé en main via nos canaux spécialisés.\"}\n    anchorLink=\"#templates\"\n    anchorLinkText=\"Gabarits\"\n    anchorLink2=\"#turnkey-content\"\n    anchorLinkText2=\"Clé en main\"\n    >\n      <Seo \n      title=\"Gabarits offerts dans l'application d'affichage dynamqiue\"\n      description=\"Choisissez des gabarits d'affichage selon vos besoins ou adaptez-les aux couleurs de votre entreprise. Grande gamme de choix afin de diffuser votre contenu de manière optimale.\"\n       />\n      <Content lang=\"fr-CA\" templateCategories={data.allContentfulCategorieDeGabarit} channels={data.allContentfulSecteurs} />\n    </Layout>\n  )\n}\n\nexport default ContentPageFr\n"],"names":["useStyles","makeStyles","theme","wrapper","textAlign","breakpoints","down","display","justifyContent","flexWrap","marginBottom","float","padding","fontSize","fontWeight","color","colors","GREY","cursor","fontFamily","background","border","borderRadius","active","ATT_BLUE","borderColor","props","classes","React","className","categories","edges","map","category","index","key","onClick","handleCategoryClick","node","name","height","width","transitionDuration","boxShadow","zIndex","WHITE","boxSizing","alignItems","transform","Grid","item","xs","md","AnchorLink","offset","href","GatsbyImage","image","card","examples","gatsbyImageData","alt","screenshots","infos","paddingLeft","marginTop","marginLeft","screenshot","setScreenshot","useState","id","type","Container","container","direction","datas","length","slice","example","onMouseEnter","handleHover","description","LIGHT_GREY","templates","state","setState","activeCategory","activeTemplate","lang","List","newActiveCategory","Card","handleTemplateClick","Presentation","TURQUOISE","fill","sm","industry","contentful_id","target","rel","icon","Link","to","permalink","channels","Pharmacies","Finance","Factories","Glasses","Templates","templateCategories","Channels","ContentPageFr","data","useStaticQuery","Layout","switchLink","slider","headerImage","childImageSharp","headerImageAlt","title","subTitle","anchorLink","anchorLinkText","anchorLink2","anchorLinkText2","Seo","Content","allContentfulCategorieDeGabarit","allContentfulSecteurs"],"sourceRoot":""}