{"version":3,"sources":["webpack:////src/components/Container.vue","webpack:////src/components/Container.vue?f6d5","webpack:////src/components/Method.vue?0e49","webpack:////src/components/Method.vue","webpack:////src/components/Method.vue?cd33","webpack:////src/components/Container.vue?1a88"],"names":["class","color","links","title","subtitle","props","render","__scopeId","id","t","method","item","j","key","icon","className","text","p","i","components","Container","Svg","setup","messages","en","fr"],"mappings":"qNAEwBA,MAAM,uC,GACnBA,MAAM,sB,SACFA,MAAM,oB,kFAHnB,eAaM,OAbDA,MAAK,CAAC,YAAoB,EAAAC,MAAK,cAAiB,EAAAA,MAAK,K,CAC3C,EAAAC,O,iBAAX,eAAoE,MAApE,I,sBACA,eAUM,MAVN,EAUM,CATkC,EAAAC,O,iBAApC,eAOM,MAPN,EAOM,CANF,eAEK,yBADC,EAAAA,OAAK,GAED,EAAAC,U,iBAAV,eAEK,sBADC,EAAAA,UAAQ,I,+CAGlB,eAAO,uB,MAMF,GACXC,MAAM,CAAC,QAAS,QAAS,WAAY,U,UCdzC,EAAOC,OAASA,EAChB,EAAOC,UAAY,kBAEJ,U,oCCRf,W,qFCEaP,MAAM,U,GAEEA,MAAM,gB,0GAHvB,eAeY,GAfDQ,GAAG,SAAUL,MAAO,EAAAM,EAAC,SAAYR,MAAM,aAAcG,SAAU,EAAAK,EAAC,YAAcP,MAAM,Q,yBAC3F,iBAYM,CAZN,eAYM,MAZN,EAYM,E,mBAXF,eAUM,2BAVmB,EAAAQ,QAAM,SAAlBC,EAAMC,G,wBAAnB,eAUM,OAV4BC,IAAKF,EAAKG,KAAMd,MAAK,CAAC,eAAD,wBAAyCW,EAAKV,S,CACjG,eAEM,MAFN,EAEM,CADF,eAAsD,GAAhDa,KAAMH,EAAKG,KAAMC,UAAU,qB,mBAErC,eAEK,yBADCJ,EAAKR,OAAK,I,mBAEhB,eAEI,2BAFgBQ,EAAKK,MAAI,SAAlBC,EAAGC,G,wBAAd,eAEI,KAF4BL,IAAKK,GAAC,eAChCD,GAAC,M,8FAcR,GACXE,WAAW,CACPC,YAAA,KACAC,MAAA,MAEJC,MALW,WAKJ,MACS,eAAQ,CAChBC,SAAS,CACLC,GAAI,EAAQ,QACZC,GAAI,EAAQ,WAHbhB,EADJ,EACIA,EAODC,EAAS,gBAAS,iBAAM,CAC1B,CACIP,MAAOM,EAAE,mBACTO,KAAK,CACDP,EAAE,sBAENR,MAAM,OACNa,KAAK,UAET,CACIX,MAAOM,EAAE,mBACTO,KAAK,CACDP,EAAE,sBAENR,MAAM,YACNa,KAAK,UAET,CACIX,MAAOM,EAAE,mBACTO,KAAK,CACDP,EAAE,sBAENR,MAAM,YACNa,KAAK,UAET,CACIX,MAAOM,EAAE,mBACTO,KAAK,CACDP,EAAE,sBAENR,MAAM,OACNa,KAAK,gBAIb,MAAO,CAACJ,SAAQD,O,UCpExB,EAAOH,OAASA,EAED,gB,kCCPf,W","file":"js/chunk-0d15036b.59d43245.js","sourcesContent":["<template>\n  <div class=\"container\" :class=\"color ? 'container__'+color : ''\">\n      <div v-if=\"links\" class=\"container__link container__link--up\"></div>\n      <div class=\"container__content\">\n          <div class=\"container__title\" v-if=\"title\">\n              <h2>\n                  {{title}}\n              </h2>\n              <h3 v-if=\"subtitle\">\n                  {{subtitle}}\n              </h3>\n          </div>\n          <slot/>\n      </div>\n  </div>\n</template>\n\n<script>\nexport default {\n    props:['color', 'title', 'subtitle', 'links']\n}\n</script>\n\n<style lang=\"scss\" scoped>\n    @import '@/style/main';\n    .container{\n       position: relative;\n        \n        &__content{\n             max-width: $page-width;\n            margin: 0 auto;\n            padding: 6rem 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n\n            @include respond(tab-land){\n                width: 95%;\n            }\n            @include respond(phone){\n                width: 92%;\n            }\n            @include respond(large-desktop){\n                max-width: $page-width-large;\n            }\n        }\n\n        &__title{\n            text-align: center;\n            margin-bottom: 4rem;\n\n            & h2{\n                text-transform: uppercase;\n                font-weight: 700;\n                font-size: 2.4rem;\n                letter-spacing: .2rem;\n                margin-bottom: 1.4rem;\n            }\n\n            & h3{\n                font-weight: 300;\n                font-size: 1.8rem;\n                letter-spacing: .1rem;\n                margin-bottom: 2rem;\n            }\n        }\n\n        &__blue-dark{\n            background-color: $color-blue-dark;\n            color:$color-white;\n        }\n\n        &__blue-light{\n            background-color: $color-bck-blue-light;\n        }\n\n        &__blue{\n            background-color: $color-blue-main;\n            color: $color-white;\n        }\n\n        &__link{\n            position: absolute;\n            left: 50%;\n            width: 2px;\n            height: 4rem;\n            background-color: $color-text;\n            z-index: 5;\n\n            &--up{\n                top: 0;\n                transform: translateY(-50%);\n            }\n        }\n    }\n</style>","import { render } from \"./Container.vue?vue&type=template&id=60ee86de&scoped=true\"\nimport script from \"./Container.vue?vue&type=script&lang=js\"\nexport * from \"./Container.vue?vue&type=script&lang=js\"\n\nimport \"./Container.vue?vue&type=style&index=0&id=60ee86de&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-60ee86de\"\n\nexport default script","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Method.vue?vue&type=style&index=0&id=cd3bc7ce&lang=scss\"","<template>\n    <container id=\"method\" :title=\"t('title')\"  color=\"blue-light\" :subtitle=\"t('subtitle')\" links=\"true\">\n        <div class=\"method\">\n            <div v-for=\"(item, j) in method\" :key=\"item.icon\" class=\"method__item\" :class=\"`method__item--${item.color}`\">\n                <div class=\"method__icon\">\n                    <Svg :icon=\"item.icon\" className=\"method__icon--svg\"/>\n                </div>\n                <h3>\n                    {{item.title}}\n                </h3>\n                <p v-for=\"(p, i) in item.text\" :key=\"i\">\n                    {{p}}                \n                </p>\n            </div>\n        </div>\n\n    </container>\n  \n</template>\n\n<script>\nimport { computed } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport Container from './Container'\nimport Svg from './utils/Svg';\nexport default {\n    components:{\n        Container,\n        Svg\n    },\n    setup(){\n        const {t} = useI18n({\n            messages:{\n                en: require('../locales/en/method.json'),\n                fr: require('../locales/fr/method.json')\n            },\n        })\n\n        const method = computed(() => [\n            {\n                title: t('method[0].title'),\n                text:[\n                    t('method[0].text[0]')\n                ],\n                color:\"blue\",\n                icon:\"target\"\n            },\n            {\n                title: t('method[1].title'),\n                text:[\n                    t('method[1].text[0]')\n                ],\n                color:\"blue-dark\",\n                icon:\"design\"\n            },\n            {\n                title: t('method[2].title'),\n                text:[\n                    t('method[2].text[0]')\n                ],\n                color:\"blue-grey\",\n                icon:\"coding\"\n            },\n            {\n                title: t('method[3].title'),\n                text:[\n                    t('method[3].text[0]')\n                ],\n                color:\"rose\",\n                icon:\"optimize\"\n            }\n        ]);\n\n        return {method, t}\n    }\n}\n</script>\n\n<style lang=\"scss\">\n\n@import '../style/main';\n.method{\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    \n    width: 100%;\n\n    @include respond(tab-port){\n        flex-direction: column;\n    }\n    &__item{\n        padding: 4rem;\n        color:$color-white;\n        flex: 0 0 49%;\n        margin-bottom: 2%;\n\n         @include respond(tab-port){\n            margin-bottom: 2rem;\n        }\n        \n\n        & h3{\n             text-transform: uppercase;\n            letter-spacing: .1rem;\n            font-weight: 700;\n            font-size: 1.8rem;\n            margin-bottom: 1.6rem;\n\n        }\n\n        & p {\n            font-weight: 300;\n            text-align: justify;\n        }\n        &--blue{\n            background-color: $color-blue-main;\n        }\n\n         &--blue-dark{\n            background-color: $color-blue-dark;\n        }\n\n        &--blue-grey{\n            background-color: $color-blue-grey;\n        }\n         &--rose{\n            background-color: $color-rose;\n        }\n\n        \n    }\n\n    &__icon{\n        width: 8rem;\n        height: 8rem;\n        border-radius: 50%;\n        background-color: rgba(255,255,255,.4);\n        margin-bottom: 2rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n\n        &--svg{\n            @include svg(4rem);\n        }\n    }\n}\n\n</style>","import { render } from \"./Method.vue?vue&type=template&id=cd3bc7ce\"\nimport script from \"./Method.vue?vue&type=script&lang=js\"\nexport * from \"./Method.vue?vue&type=script&lang=js\"\n\nimport \"./Method.vue?vue&type=style&index=0&id=cd3bc7ce&lang=scss\"\nscript.render = render\n\nexport default script","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Container.vue?vue&type=style&index=0&id=60ee86de&lang=scss&scoped=true\""],"sourceRoot":""}