{"version":3,"sources":["webpack:///./src/modules/home/components/perks/PerksContainer.vue?ce96","webpack:///./src/modules/home/components/perks/PerksContainer.vue","webpack:///src/modules/home/components/perks/PerksContainer.vue","webpack:///./src/modules/home/components/perks/PerksContainer.vue?6a33","webpack:///./src/modules/home/components/perks/PerksContainer.vue?cc1b"],"names":["render","_vm","this","_c","_self","sliderLoaded","staticClass","_l","perks","name","type","icon","size","index","key","class","tag","attrs","_v","_s","$t","small","item","staticStyle","_m","staticRenderFns","components","IconTrolley","IconLocation","IconHeadset","IconWallet","props","Boolean","data","mounted","viewPort","component"],"mappings":"kHAAA,W,yCCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAQF,EAAII,aAAcF,EAAG,UAAU,CAACG,YAAY,2BAA2B,CAACL,EAAIM,GAAIN,EAAIO,OAAO,UAAS,KAACC,EAAI,KAAEC,EAAI,KAAEC,EAAI,KAAEC,GAAMC,GAAO,MAAO,CAAU,QAARH,EAAgBP,EAAG,MAAM,CAACW,IAAID,EAAMP,YAAY,2CAA2CS,MAAM,QAAQF,GAAS,CAACV,EAAGQ,EAAK,CAACK,IAAI,YAAYV,YAAY,gBAAgBW,MAAM,CAAC,KAAOL,KAAQT,EAAG,MAAM,CAACA,EAAG,KAAK,CAACG,YAAY,gBAAgB,CAACL,EAAIiB,GAAGjB,EAAIkB,GAAGlB,EAAImB,GAAG,cAAcX,OAAYN,EAAG,IAAI,CAACY,MAAM,CAACM,MAAiB,IAAVR,IAAe,CAACZ,EAAIiB,GAAGjB,EAAIkB,GAAGlB,EAAImB,GAAG,cAAcX,wBAA2B,GAAGN,EAAG,MAAM,CAACW,IAAI,WAAWD,EAAQP,YAAY,iBAAiBS,MAAgB,IAAVF,EAAc,aAAa,cAAc,CAACV,EAAG,cAAa,GAAGA,EAAG,UAAU,CAACG,YAAY,2BAA2B,CAACL,EAAIM,GAAI,GAAG,SAASe,EAAKT,GAAO,MAAO,CAAEA,EAAQ,IAAM,EAAGV,EAAG,MAAM,CAACW,IAAID,EAAMP,YAAY,qDAAqD,CAACH,EAAG,MAAM,CAACG,YAAY,eAAeiB,YAAY,CAAC,MAAQ,OAAO,OAAS,OAAO,gBAAgB,UAAU,mBAAmB,wBAAwB,cAAc,OAAOtB,EAAIuB,GAAG,GAAE,KAAQrB,EAAG,MAAM,CAACW,IAAI,WAAWD,EAAQP,YAAY,iBAAiBS,MAAgB,IAAVF,EAAc,aAAa,cAAc,CAACV,EAAG,MAAM,CAACoB,YAAY,CAAC,eAAe,4CAA2C,IAEnxCE,EAAkB,CAAC,WAAY,IAAIxB,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACoB,YAAY,CAAC,MAAQ,QAAQ,CAACpB,EAAG,MAAM,CAACG,YAAY,YAAYiB,YAAY,CAAC,MAAQ,OAAO,gBAAgB,MAAM,OAAS,OAAO,mBAAmB,2BAA2BpB,EAAG,MAAM,CAACG,YAAY,YAAYiB,YAAY,CAAC,MAAQ,OAAO,gBAAgB,MAAM,OAAS,OAAO,mBAAmB,+BC8BzW,GACfd,KAAA,iBACAiB,WAAA,CACAC,gBAAA,gDACAC,iBAAA,4CACAC,gBAAA,gDACAC,eAAA,iDAEAC,MAAA,CACA1B,aAAA,CACAK,KAAAsB,UAGAC,OACA,OACAzB,MAAA,CACA,CACAE,KAAA,OACAC,KAAA,cACAF,KAAA,aACAG,KAAA,IAEA,CACAF,KAAA,UACAD,KAAA,IAEA,CACAC,KAAA,OACAC,KAAA,cACAF,KAAA,OACAG,KAAA,IAEA,CACAF,KAAA,UACAD,KAAA,IAEA,CACAC,KAAA,OACAC,KAAA,eACAF,KAAA,iBACAG,KAAA,IAEA,CACAF,KAAA,UACAD,KAAA,IAEA,CACAC,KAAA,OACAC,KAAA,aACAF,KAAA,GACAG,KAAA,OAKAsB,UACA,KAAA1B,MAAA,GAAAC,KAAA,YAAA0B,WAAA,6CCxFoY,I,wBCQhYC,EAAY,eACd,EACApC,EACAyB,GACA,EACA,KACA,WACA,MAIa,aAAAW,E","file":"js/chunk-14cfd680.42184e2a.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PerksContainer.vue?vue&type=style&index=0&id=c70c245e&prod&scoped=true&lang=css\"","var render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.sliderLoaded)?_c('section',{staticClass:\"perks home-section mx-0\"},[_vm._l((_vm.perks),function({name, type, icon, size},index){return [(type == 'perk')?_c('div',{key:index,staticClass:\"perk-container d-flex align-items-center\",class:`perk-${index}`},[_c(icon,{tag:\"component\",staticClass:\"flex-shrink-0\",attrs:{\"size\":size}}),_c('div',[_c('h4',{staticClass:\"mb-0 mb-md-1\"},[_vm._v(_vm._s(_vm.$t(`home.perks.${name}`)))]),_c('p',{class:{small: index === 6 }},[_vm._v(_vm._s(_vm.$t(`home.perks.${name}_description`)))])])],1):_c('div',{key:`divider-${index}`,staticClass:\"divider d-none\",class:index === 3 ? 'd-xl-block':'d-md-block'},[_c('div')])]})],2):_c('section',{staticClass:\"perks home-section mx-0\"},[_vm._l((7),function(item,index){return [(index % 2 === 0)?_c('div',{key:index,staticClass:\"perk-container skeleton d-flex align-items-center\"},[_c('div',{staticClass:\"mx-auto mb-3\",staticStyle:{\"width\":\"60px\",\"height\":\"60px\",\"border-radius\":\"3.12rem\",\"background-color\":\"var(--light-gray-501)\",\"flex-shrink\":\"0\"}}),_vm._m(0,true)]):_c('div',{key:`divider-${index}`,staticClass:\"divider d-none\",class:index === 3 ? 'd-xl-block':'d-md-block'},[_c('div',{staticStyle:{\"border-right\":\"1px solid var(--light-gray-501)\"}})])]})],2)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticStyle:{\"width\":\"70%\"}},[_c('div',{staticClass:\"ms-0 mb-2\",staticStyle:{\"width\":\"100%\",\"border-radius\":\"4px\",\"height\":\"20px\",\"background-color\":\"var(--light-gray-501)\"}}),_c('div',{staticClass:\"ms-0 mb-0\",staticStyle:{\"width\":\"100%\",\"border-radius\":\"4px\",\"height\":\"45px\",\"background-color\":\"var(--light-gray-501)\"}})])\n}]\n\nexport { render, staticRenderFns }","<template>\n    <section v-if=\"sliderLoaded\" class=\"perks home-section mx-0\" >\n        <template v-for=\"({name, type, icon, size}, index) in perks\">\n            <div v-if=\"type == 'perk'\" class=\"perk-container d-flex align-items-center\" :class=\"`perk-${index}`\" :key=\"index\">\n                <component :is=\"icon\" :size=\"size\" class=\"flex-shrink-0\" />\n                <div>\n                    <h4 class=\"mb-0 mb-md-1\">{{$t(`home.perks.${name}`)}}</h4>\n                    <p :class=\"{small: index === 6 }\">{{$t(`home.perks.${name}_description`)}}</p>\n                </div>\n            </div>\n            <div v-else class=\"divider d-none\" :class=\"index === 3 ? 'd-xl-block':'d-md-block'\" :key=\"`divider-${index}`\">\n                <div />\n            </div>\n        </template>\n    </section>\n    <section v-else class=\"perks home-section mx-0\">\n        <template v-for=\"(item, index) of 7\">\n            <div v-if=\"index % 2 === 0\" class=\"perk-container skeleton d-flex align-items-center\" :key=\"index\">\n                <div class=\"mx-auto mb-3\" style=\"width: 60px; height: 60px; border-radius: 3.12rem; background-color: var(--light-gray-501); flex-shrink: 0;\" />\n                <div style=\"width: 70%;\">\n                    <div class=\"ms-0 mb-2\" style=\"width: 100%; border-radius: 4px; height: 20px; background-color: var(--light-gray-501);\"></div>\n                    <div class=\"ms-0 mb-0\" style=\"width: 100%; border-radius: 4px; height: 45px; background-color: var(--light-gray-501);\"></div>\n                </div>\n            </div>\n            <div v-else class=\"divider d-none\" :class=\"index === 3 ? 'd-xl-block':'d-md-block'\" :key=\"`divider-${index}`\">\n                <div style=\"border-right: 1px solid var(--light-gray-501)\"/>\n            </div>\n        </template>\n    </section>\n</template>\n\n<script>\nexport default {\n    name: 'PerksContainer',\n    components: {\n        IconTrolley: () => import('@/modules/home/assets/svg/iconTrolley.vue'),\n        IconLocation: () => import('@/common/svg/iconLocation.vue'),\n        IconHeadset: () => import('@/modules/home/assets/svg/iconHeadset.vue'),\n        IconWallet: () => import('@/modules/home/assets/svg/IconWallet.vue')\n    },\n    props: {\n        sliderLoaded: {\n            type: Boolean\n        }\n    },\n    data(){\n        return {\n            perks: [\n                {\n                    type: 'perk',\n                    icon: 'IconTrolley',\n                    name: 'deliveries',\n                    size: 50\n                },\n                {\n                    type: 'divider',\n                    name: ''\n                },\n                {\n                    type: 'perk',\n                    icon: 'IconHeadset',\n                    name: '24/7',\n                    size: 50\n                },\n                {\n                    type: 'divider',\n                    name: '',\n                },\n                {\n                    type: 'perk',\n                    icon: 'IconLocation',\n                    name: 'track_packages',\n                    size: 50\n                },\n                {\n                    type: 'divider',\n                    name: '',\n                },\n                {\n                    type: 'perk',\n                    icon: 'IconWallet',\n                    name: '',\n                    size: 46\n                }\n            ]\n        }\n    },\n    mounted() {\n        this.perks[6].name = this.viewPort() === 'xl' ? 'security_payments_xl':'security_payments' \n    },\n}\n</script>\n\n<style scoped>\n@keyframes slide-from-bottom {\n    from {\n        opacity: 0;\n        transform: translateY(120px);\n    }\n    to {\n        transform: translateY(0px);\n    }\n}\n.perks {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    grid-auto-rows: 120px;\n    justify-content: center;\n}\n.perk-container {\n    padding-left: 0 !important;\n    animation: 800ms cubic-bezier(0.33, 1.13, 0.6, 0.99) slide-from-bottom;\n    animation-fill-mode: both;\n}\n.perk-2 {\n    animation-delay: 50ms;\n}\n.perk-4 {\n    animation-delay: 150ms;\n}\n.perk-6 {\n    animation-delay: 200ms;\n}\n.perk-container:hover h4 {\n    color: var(--main-red)\n}\n.perk-container:hover svg {\n    fill: var(--dark-main-navy) !important;\n    transform: rotateY(360deg);\n    transform-origin: center;\n    transition: 1s ease;\n}\n.perk-container div {\n    margin-left: 30px;\n}\n.perk-container svg {\n    min-width: 40px;\n    margin-bottom: 5px;\n\n    fill: var(--main-red) !important;\n    transition: fill 0.15s ease-in-out;\n}\n.perk-container h4 {\n    font-size: 20px;\n    font-weight: 600;\n    color: #334056;\n    margin-bottom: 7px;\n    transition: var(--transition-1);\n}\n.perk-container p {\n    font-size: 16px;\n    color: #a5b2b7;\n    margin-bottom: 0;\n}\n@media (max-width: 576px) {\n    .perks{\n        grid-auto-rows: auto;\n        gap: 20px;\n    }\n    .perk-container h4{\n        font-size: 16px;\n    }\n    .perk-container p{\n        font-size: 14px;\n    }\n    .perk-container svg{\n        width: 40px;\n    }\n    .perk-container svg{\n        margin-bottom: 0px;\n    }\n}\n@media (min-width: 768px) {\n    .perks {\n        grid-template-columns: 300px 80px 300px;\n        grid-auto-rows: 150px;\n    }\n    .perk-container div {\n        margin-left: 35px;\n    }\n    .perks .divider div {\n        width: 40px;\n        height: 100%;\n        border-right: 1px solid #c6d4db;\n    }\n    .perk-container svg {\n        margin-bottom: 40px;\n    }\n}\n@media (min-width: 768px) and (max-width: 991px) { .perk-container p.small {max-width: 200px;}}\n@media (min-width: 992px) {\n    .perks {\n        grid-template-columns: 430px 80px 430px;\n    }\n    .perk-container svg {\n        margin-bottom: 20px;\n    } \n}\n@media (min-width: 1200px) {\n    .perks {\n        grid-template-columns: 209px 38px 250px 38px 280px 38px 262px;\n    }\n    .perk-container div {\n        margin-left: 27px;\n    }\n    .perks .divider div {\n        width: 19.5px;\n    }\n}\n@media (min-width: 1400px) {\n    .perks {\n        grid-template-columns: 222px 70px 285px 70px 290px 70px 286px;\n    }\n    .perk-container div {\n        margin-left: 28px;\n    }\n    .perks .divider div {\n        width: 35px;\n    }\n    .perk-container p.small {\n        max-width: 200px;\n    }\n    .container {\n        max-width: 1320px !important;\n    }\n}\n</style>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PerksContainer.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PerksContainer.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./PerksContainer.vue?vue&type=template&id=c70c245e&scoped=true\"\nimport script from \"./PerksContainer.vue?vue&type=script&lang=js\"\nexport * from \"./PerksContainer.vue?vue&type=script&lang=js\"\nimport style0 from \"./PerksContainer.vue?vue&type=style&index=0&id=c70c245e&prod&scoped=true&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"c70c245e\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}