{"version":3,"file":"component---src-pages-equipement-js-c7f669a53fadbda522e4.js","mappings":"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","sources":["webpack://attractif-website/./src/components/svgs/plus.js","webpack://attractif-website/./src/layouts/Hardware/modal.js","webpack://attractif-website/./src/layouts/Hardware/list.js","webpack://attractif-website/./src/layouts/Hardware/index.js","webpack://attractif-website/./src/layouts/Home/HomeContentSection/index.js","webpack://attractif-website/./src/pages/equipement.js"],"sourcesContent":["import React from \"react\";\n\nconst Plus = (props) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32.79 32.79\">\n      <circle cx=\"16.4\" cy=\"16.4\" r=\"15.4\" fill=\"none\" stroke={props.color} strokeMiterlimit=\"10\" strokeWidth=\"2px\"/>\n      <line x1=\"16.29\" y1=\"24.47\" x2=\"16.29\" y2=\"8.32\" fill=\"none\" stroke={props.color} strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2px\"/>\n      <line x1=\"24.37\" y1=\"16.4\" x2=\"8.22\" y2=\"16.4\" fill=\"none\" stroke={props.color} strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2px\"/>\n    </svg>\n  );\n}\n\nexport default Plus;\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport Plus from '../../components/svgs/plus';\nimport {colors} from '../../style/constants';\n\nconst useStyles = makeStyles((theme) => ({\n  active: {\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n    top: 0,\n    left: 0,\n    background: 'rgba(255,255,255,0.97)',\n    display: 'flex',\n    padding: 40,\n    boxSizing: 'border-box',\n    textAlign: 'left',\n    '& h5': {\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: 10,\n      '& span': {\n        display: 'flex',\n        alignItems: 'center',\n        '& svg': {\n          height: '1.25em',\n          marginLeft: 10,\n        }\n      }\n    },\n    '& ul': {\n      borderTop: colors.TURQUOISE + ' 2px solid',\n      paddingTop: 20,\n      marginTop: 20,\n      flexWrap: 'wrap',\n      display: 'flex',\n      '& li': {\n        marginRight: 15,\n        marginBottom: 5\n      }\n    },\n    '& button': {\n      width: 35,\n      height: 35,\n      padding: 0,\n      borderRadius: '50%',\n      marginTop: 15,\n      backgroundColor: 'transparent',\n      '& svg': {\n        width: '100%',\n        transform: 'rotate(45deg)'\n      }\n    }\n  },\n  inactive: {\n    display: 'none',\n    zIndex: -1\n  },\n}));\n\nconst Modal = (props) => {\n  const renderFeatures = () => {\n    return props.device.features.map((feature, index) => {\n      return (\n        <li key={index}>{feature}</li>\n      );\n    });\n  }\n\n  const renderRating = (value) => {    \n    let ratingColor\n    if (value === 1) {\n      ratingColor = [colors.TURQUOISE, colors.GREY, colors.GREY, colors.GREY, colors.GREY] \n    }\n    if (value === 2) {\n      ratingColor = [colors.TURQUOISE, colors.TURQUOISE, colors.GREY, colors.GREY, colors.GREY] \n    }\n    if (value === 3) {\n      ratingColor = [colors.TURQUOISE, colors.TURQUOISE, colors.TURQUOISE, colors.GREY, colors.GREY] \n    }\n    if (value === 4) {\n      ratingColor = [colors.TURQUOISE, colors.TURQUOISE, colors.TURQUOISE, colors.TURQUOISE, colors.GREY] \n    }\n    if (value === 5) {\n      ratingColor = [colors.TURQUOISE, colors.TURQUOISE, colors.TURQUOISE, colors.TURQUOISE, colors.TURQUOISE] \n    }\n    return (\n      <>\n        <Plus color={ratingColor[0]}/>\n        <Plus color={ratingColor[1]}/>\n        <Plus color={ratingColor[2]}/>\n        <Plus color={ratingColor[3]}/>\n        <Plus color={ratingColor[4]}/>\n      </>\n    )\n  }\n\n  const handleClosingClick = () => {\n    props.onClick();\n  }\n\n  const classes = useStyles();\n  return (\n    <div className={props.index === props.active ? classes.active : classes.inactive}>\n      <Grid container>\n        <Grid item xs={12}>\n          <h5>Performance <span>{renderRating(props.device.performance)}</span></h5>\n          <h5>{props.lang === 'en-CA' ? 'Stability' : 'Stabilité'} <span>{renderRating(props.device.stability)}</span></h5>\n          {props.device.quality ? <h5>{props.lang === 'en-CA' ? 'Image quality' : 'Qualité d\\'image'} <span>{renderRating(props.device.quality)}</span></h5> : \"\"}\n          <h5>{props.lang === 'en-CA' ? 'Cost' : 'Coût'} <span>{renderRating(props.device.cost)}</span></h5>\n          <ul>\n            {renderFeatures()}\n          </ul>\n          <Grid container justifyContent='center'>\n            <button aria-label=\"closeModal\" onClick={handleClosingClick}>\n              <Plus color={colors.TURQUOISE}/>\n            </button>\n          </Grid>\n        </Grid>\n      </Grid>\n    </div>\n  );\n}\n\nexport default Modal;","import React, {useState} from 'react';\nimport Container from '@material-ui/core/Container';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport InnerLinkButton from '../../components/svgs/buttons/InnerLinkButton';\nimport Modal from './modal';\nimport {Link} from 'gatsby';\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    textAlign: 'center',\n    '& h2': {\n      marginBottom: 30\n    },\n    '& p': {\n      marginTop: -20,\n      marginBottom: 30,\n    },\n    '& h3': {\n      margin: '30px 0'\n    },\n    '& .gatsby-image-wrapper': {\n      width: '100%'\n    }\n  },\n  os: {\n    '& .gatsby-image-wrapper': {\n      height: 90,\n      [theme.breakpoints.down('xs')]: {\n        height: 60,\n      },\n      '& img': {\n        objectFit: 'contain!important'\n      }\n    }\n  },\n  item: {\n    position: 'relative'\n  }\n}));\n\nconst List = (props) => {\n  const [active, setActive] = useState('');\n\n  const renderListItems = () => {\n    return props.items.map((item, index) => {\n      const handleButtonClick = () => {\n        setActive(index);\n      }\n      const handleClose = () => {\n        setActive('')\n      }\n      return (\n        props.noDetails ? \n        <Grid className={classes.os} item key={index} xs={4}>\n          <GatsbyImage image={item.node.logo.gatsbyImageData} alt=\"\"/>\n        </Grid> : \n        <Grid className={classes.item} item container key={index} xs={12} sm={4} direction='column' alignItems='center'>\n          <GatsbyImage image={item.node.image.gatsbyImageData} alt=\"\"/>\n          <h3>{item.node.name}</h3>\n          <InnerLinkButton plus text={props.lang === 'en-CA' ? 'Show more' : 'En savoir plus'} onClick={handleButtonClick}/>\n          <Modal lang={props.lang} device={item.node} index={index} active={active} onClick={handleClose}/>\n        </Grid>  \n      );\n    });\n  }\n\n  const classes = useStyles();\n  return (\n    <>\n      <section id={props.id} className={classes.wrapper}>\n        <Container>\n          <Grid container direction='column' alignItems='center'>\n            <h2>{props.title}</h2>\n            {props.subtitle ? <p>{props.subtitle}</p> : ''}\n            {props.items  ? '' : <Link to={props.lang === 'en-CA' ? '/en/contact-us' : '/nous-parler'}><InnerLinkButton text={props.lang === 'en-CA' ? 'Request a quote' : 'Demandez une soumission'} /></Link>}\n            <Grid item container md={props.noDetails ? 6 : 12} spacing={5}>\n              {props.items ? renderListItems() : ''}\n            </Grid>\n          </Grid>\n        </Container>\n      </section>\n    </>\n  );\n}\n\nexport default List;","import React from 'react';\nimport HomeContentSection from '../Home/HomeContentSection/';\nimport List from './list';\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {MagnetoLito} from '../../components/svgs/magneto-lito';\n\nconst useStyles = makeStyles((theme) => ({\n  banner: {\n    background: 'linear-gradient(to left, rgba(255,255,0,1) 0%,rgba(255,181,0,1) 100%)',\n    marginTop: -60,\n    padding: '90px 0!important',\n    [theme.breakpoints.down('xs')]: {\n      padding: '45px 0!important',\n    },\n    '& > div': {\n      display: 'flex',\n      alignItems: 'center',\n      '& > svg': {\n        width: 200,\n        marginRight: 30,\n        [theme.breakpoints.down('sm')]: {\n          display: 'none'\n        },\n      },\n      '& h2': {\n        marginTop: 20\n      }\n    }\n  },\n}));\n\nconst Hardware = (props) => {\n  const classes = useStyles();\n  return (\n    <>\n      <section className={classes.banner + ' clipped'}>\n        <Container>\n          <MagnetoLito/><h2>{props.lang === 'en-CA' ? 'No matter where you are in Canada, we have installers for you!' : 'Un réseau d\\'installateurs qui s\\'étend partout au Canada!'}</h2>\n        </Container>\n      </section>\n      <List noDetails items={props.os} lang={props.lang} title={props.lang === 'en-CA' ? 'We develop on these platforms' : 'Nous développons sur ces plateformes'}/>\n      <List id='screens' items={props.smartTv} lang={props.lang} title={props.lang === 'en-CA' ? 'You have no screen?' : 'Vous n\\'avez pas d\\'écran?'} subtitle={props.lang === 'en-CA' ? 'Here are our recommendations' : 'Voici nos recommandations'}/>\n      <List id='players' items={props.miniPc} lang={props.lang} title={props.lang === 'en-CA' ? 'You have a screen?' : 'Vous avez un écran?'} subtitle={props.lang === 'en-CA' ? 'Here are our recommendations' : 'Voici nos recommandations'}/>\n      <List id='videowalls-and-touchscreens' lang={props.lang} title={props.lang === 'en-CA' ? 'Touch project or videowall?' : 'Projet tactile ou mur vidéo?'} subtitle={props.lang === 'en-CA' ? 'Contact us so that we can suggest the best equipment for you!' : 'Contactez-nous directement afin qu\\'on vous suggère le meilleur équipement!'}/>\n      <HomeContentSection lang={props.lang}/>\n    </>\n  );\n}\n\nexport default Hardware;","import React from 'react';\nimport {colors} from '../../../style/constants';\nimport InnerLinkButton from '../../../components/svgs/buttons/InnerLinkButton';\nimport { Link } from \"gatsby\";\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Grid from '@material-ui/core/Grid';\nimport {graphql, useStaticQuery} from 'gatsby';\nimport { GatsbyImage } from \"gatsby-plugin-image\";\n\nconst useStyles = makeStyles((theme) => ({\n  wrapper: {\n    background: colors.ATT_BLUE,\n    '& p': {\n      margin: '30px 0'\n    },\n    '& h2, p': {\n      paddingRight: 60,\n      color: colors.WHITE\n    },\n    '& .gatsby-image-wrapper': {\n      width: '100%',\n    },\n    '& a': {\n      marginRight: 30,\n      [theme.breakpoints.down('xs')]: {\n        marginBottom: 15,\n      }\n    },\n    [theme.breakpoints.down('sm')]: {\n      '& > div > div': {\n        flexFlow: 'column-reverse',\n        '& > :last-child': {\n          justifyContent: 'flex-start',\n          marginBottom: 30,\n        }\n      }\n    }\n  },\n}));\n\nconst HomeContentSection = (props) => {\n  const data = useStaticQuery(graphql`\n    query contentImage {\n      image: file(relativePath: { eq: \"home/Attractif-Content.png\"}) {\n        id\n        childImageSharp {\n          gatsbyImageData(layout: FULL_WIDTH)\n        }\n      }\n    }\n  `)\n\n  const classes = useStyles();\n  return (\n    <section className={classes.wrapper + \" clipped\"}>\n      <Container id=\"home-content-manager\">\n        <Grid container alignItems='center'>\n          <Grid item sm={12} md={6}>\n            <h2>{props.lang === 'en-CA' ? 'We are content driven' : 'Nous sommes axés sur le contenu'}</h2>\n            <p>{props.lang === 'en-CA' ? 'Use our designed and animated templates that you can customize in seconds or save time with our turnkey content.' : 'Personnalisez facilement nos gabarits infographiés et animés. Épargnez du temps avec du contenu clé en main.'}</p>\n            {props.lang === 'en-CA' ? <Grid container><Link to=\"/en/content#templates\"><InnerLinkButton text=\"Templates\" /></Link><Link to=\"/en/content##turnkey-content\"><InnerLinkButton text=\"Turnkey content\" /></Link></Grid> : <Grid container><Link to=\"/contenu#templates\"><InnerLinkButton text=\"Gabarits\" /></Link><Link to=\"/contenu#turnkey-content\"><InnerLinkButton text=\"Clé en main\" /></Link></Grid>}\n          </Grid>\n          <Grid container justifyContent=\"flex-end\" item sm={12} md={6}>\n            <GatsbyImage image={data.image.childImageSharp.gatsbyImageData}  alt=\"Content driven - Axés sur le contenu\"/>\n          </Grid>\n        </Grid>\n      </Container>\n    </section>\n  );\n}\n\nexport default HomeContentSection;","import React from \"react\";\nimport Seo from \"../components/seo\";\nimport Layout from \"../components/layout\";\nimport Hardware from '../layouts/Hardware'; \nimport {graphql, useStaticQuery} from 'gatsby';\n\nconst HardwarePageFr = () => {\n\n  const data = useStaticQuery(graphql`\n    query HardwareDatasFr {\n      allContentfulOs(filter: {node_locale: {eq: \"fr-CA\"}}, sort: {fields: name, order: DESC}) {\n        edges {\n          node {\n            name\n            logo {\n              gatsbyImageData(layout: CONSTRAINED)\n            }\n          }\n        }\n      }\n      allContentfulSmartTv(sort: {order: ASC, fields: cost}, filter: {node_locale: {eq: \"fr-CA\"}}) {\n        edges {\n          node {\n            name\n            image {\n              gatsbyImageData(layout: CONSTRAINED)\n            }\n            performance\n            quality\n            stability\n            cost\n            features\n          }\n        }\n      }\n\n      allContentfulMiniPc(sort: {order: ASC, fields: cost}, filter: {node_locale: {eq: \"fr-CA\"}}) {\n        edges {\n          node {\n            name\n            image {\n              gatsbyImageData(layout: CONSTRAINED)\n            }\n            performance\n            stability\n            cost\n            features\n          }\n        }\n      }    \n    }\n  `)\n\n  return (\n    <Layout \n    lang=\"fr-CA\" \n    switchLink='/en/hardware' \n    slider={false} \n    title='affichage dynamique'\n    subTitle={'L\\'équipement que vous cherchez pour votre'}>\n      <Seo \n        title=\"Écrans, ordinateurs, tableaux et boîtiers d'affichage dynamique\"\n        description=\"Que vous souhaitiez une installation complète ou que vos équipements d'affichage actuels soient mis à niveau, Attractif vous accompagne dans la transformation numérique de votre affichage.\"\n       />\n      <Hardware lang='fr-CA' os={data.allContentfulOs.edges} smartTv={data.allContentfulSmartTv.edges} miniPc={data.allContentfulMiniPc.edges}/>\n    </Layout>\n  )\n}\n\nexport default HardwarePageFr\n"],"names":["props","React","xmlns","viewBox","cx","cy","r","fill","stroke","color","strokeMiterlimit","strokeWidth","x1","y1","x2","y2","strokeLinecap","strokeLinejoin","useStyles","makeStyles","theme","active","position","width","height","top","left","background","display","padding","boxSizing","textAlign","justifyContent","marginBottom","alignItems","marginLeft","borderTop","colors","TURQUOISE","paddingTop","marginTop","flexWrap","marginRight","borderRadius","backgroundColor","transform","inactive","zIndex","renderRating","value","ratingColor","GREY","Plus","classes","className","index","Grid","container","item","xs","device","performance","lang","stability","quality","cost","features","map","feature","key","onClick","handleClosingClick","wrapper","margin","os","breakpoints","down","objectFit","setActive","useState","id","Container","direction","title","subtitle","items","Link","to","InnerLinkButton","text","md","noDetails","spacing","GatsbyImage","image","node","logo","gatsbyImageData","alt","sm","name","plus","handleButtonClick","Modal","handleClose","banner","MagnetoLito","List","smartTv","miniPc","HomeContentSection","ATT_BLUE","paddingRight","WHITE","flexFlow","data","useStaticQuery","childImageSharp","HardwarePageFr","Layout","switchLink","slider","subTitle","Seo","description","Hardware","allContentfulOs","edges","allContentfulSmartTv","allContentfulMiniPc"],"sourceRoot":""}