{"version":3,"sources":["webpack:////src/components/item-subject.vue","webpack:////src/components/item-subject.vue?9228","webpack:////src/components/item-subject.vue?4d4e","webpack:////src/views/Hosting.vue?508f","webpack:////src/views/Hosting.vue","webpack:////src/components/utils/SectionMain.vue","webpack:////src/components/utils/SectionMain.vue?bb3e","webpack:////src/views/Hosting.vue?ba67","webpack:////src/components/utils/SectionMain.vue?b3e1"],"names":["class","data","color","icon","className","title","text","components","Svg","props","render","content","hero","how","header","item","services","s","logo","size","i","id","links","subtitle","__scopeId","SectionMain","Hero","ItemSubject","setup","background","deco","svg","cta","target","label","scroll"],"mappings":"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","file":"js/hosting.81843a06.js","sourcesContent":["<template>\n    <div class=\"sub\" :class=\"`sub--${data.color}`\">\n            <div class=\"sub__logo\">\n                <Svg :icon=\"data.icon\" className=\"sub__logo--svg\"/>\n            </div>\n            <h4>\n                {{data.title}}\n            </h4>\n            <p>\n                {{data.text}}\n            </p>\n        </div>\n</template>\n\n<script>\nimport Svg from '@/components/utils/Svg';\nexport default {\n    components:{\n        Svg\n    },\n    props:['data']\n}\n</script>\n\n<style lang='scss'>\n@import '@/style/main';\n\n\n.sub{\n    // flex: 0 0 31%;\n    padding:  4rem 3rem;\n    color:$color-white;\n\n    @include respond(phone){\n        &:not(:last-child){\n            margin-bottom: 2rem;\n        }\n    }\n\n    & h4{\n        margin-bottom: 1.6rem;\n        text-transform: uppercase;\n        letter-spacing: .1rem;\n        font-weight: 400;\n        font-size: 1.6rem;\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    &__logo{\n        width: 8rem;\n        height: 8rem;\n        border-radius: 50%;\n        background-color: rgba(255,255,255,.4);\n        margin-bottom: 3rem;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        &--svg{\n            @include svg(4rem);\n        }\n    }\n}\n\n</style>","import { render } from \"./item-subject.vue?vue&type=template&id=bcd103c2\"\nimport script from \"./item-subject.vue?vue&type=script&lang=js\"\nexport * from \"./item-subject.vue?vue&type=script&lang=js\"\n\nimport \"./item-subject.vue?vue&type=style&index=0&id=bcd103c2&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!./item-subject.vue?vue&type=style&index=0&id=bcd103c2&lang=scss\"","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!./Hosting.vue?vue&type=style&index=0&id=6c0f2ef0&lang=scss\"","<template>\n<Hero :content=\"hero\"/>\n <section-main :data=\"how.header\" class=\"hosting\">\n     <div class=\"hosting__text\">\n        <p>\n            Deploying your website is generally easy because they are included inside the solution you are using to develop your website. \n            Creating a website today is accessible thanks to a lot of  tools that enable anyone to create quickly a beautiful website without any previous knowledge. \n        </p> \n        <p>\n            However every seems nice at the beginning, it can, with time become a nightmare. You are dependant on the hosting service, if it fails, you fail with them. If the price rises, you are stuck \n            with them as long as you are afraid to move to another platform.\n\n        </p>\n        <p> \n            To prevent that, we build for you a strong hosting foundation for your web applications that removes all the dependance on other services. \n            This method will bring you the following advantages !\n        </p>    \n     </div>\n   \n\n    <div class=\"hosting__why\">\n        <item-subject v-for=\"item of how.data\" :data=\"item\" class=\"hosting__why--item\"></item-subject>\n    </div>\n </section-main>\n\n <section-main :data=\"services.header\">\n     <div class=\"serv\">\n         <div v-for=\"s of services.data\" class=\"serv__item\">\n              <div class=\"serv__logo\" :class=\"s.color ?  'serv__logo--'+s.color :''\">\n                    <Svg :icon=\"s.logo\" className=\"serv__logo--svg\" size=\"4\"/>\n                </div>\n                <h3>\n                    {{s.title}}\n                </h3>\n                <div v-for=\"i of s.content\" class=\"serv__section\">\n                    <h4>\n                        {{i.title}}\n                    </h4>\n                    <p v-html=\"i.text\">\n                    </p>\n                </div>\n                <button class=\"btn btn--blue serv__cta\">\n                    Get a free quote\n                </button>\n         </div>\n        \n     </div>\n </section-main>\n\n</template>\n\n<script>\nimport Hero from '@/components/Hero';\nimport SectionMain from '@/components/utils/SectionMain'\nimport ItemSubject from '@/components/item-subject.vue';\n\n\nimport Svg from '@/components/utils/Svg';\n\nexport default {\n    components:{SectionMain, Hero, ItemSubject, Svg},\n    setup(){\n\n        const hero={\n            background: false,\n            title:\"<strong>Professional database and website hosting</strong>\",\n            subtitle:\"We automate your backups and configure your web servers and databases for you such as you don't have issues anymore.\",\n            deco:[\n                {\n                    svg: \"server\",\n                },\n                {\n                    svg:\"docker\"\n                },\n                {\n                    svg:\"database\"\n                }\n            ],\n            cta:[\n                {\n                    target:\"\",\n                    label:\"\"\n                }\n            ],\n            scroll:{\n                color:'blue',\n                target:'why-hosting'\n            }\n        }\n\n        const how = {\n            header:{\n                title:\"Why a professionnal hosting setup is important ?\",\n                subtitle:\"A powerful foundation of your digital assets is key to run your business properly !\",\n                color:'white',\n                id:'why-hosting'\n            },\n            data:[\n                {\n                    icon:\"independance\",\n                    title:\"Independance\",\n                    text:\"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis asperiores optio beatae, maxime, dolore officia et labore consectetur sequi ut deleniti voluptatem quasi a totam fugiat natus. Vel a libero totam qui exercitationem, rem, ea, sit illo corporis fugiat similique labore quod dolorum autem optio officia sint commodi culpa? Vero.\",\n                    color:\"blue\"\n                },\n                  {\n                    icon:\"performance\",\n                    title:\"Performances\",\n                    text:\"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis asperiores optio beatae, maxime, dolore officia et labore consectetur sequi ut deleniti voluptatem quasi a totam fugiat natus. Vel a libero totam qui exercitationem, rem, ea, sit illo corporis fugiat similique labore quod dolorum autem optio officia sint commodi culpa? Vero.\",\n                    color:\"blue-dark\"\n                },\n                  {\n                    icon:\"maintenance\",\n                    title:\"Maintenance free\",\n                    text:\"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis asperiores optio beatae, maxime, dolore officia et labore consectetur sequi ut deleniti voluptatem quasi a totam fugiat natus. Vel a libero totam qui exercitationem, rem, ea, sit illo corporis fugiat similique labore quod dolorum autem optio officia sint commodi culpa? Vero.\",\n                    color:\"blue-grey\"\n                }\n            ]\n        }\n\n        const services = {\n            header:{\n                title:\"Our services\",\n                subtitle:\"We propose different offers to improve your server side development\",\n                color:'blue-light',\n                id:'services'\n            },\n            data:[\n                {\n                    title:\"Build the hosting foundation of your application/website\",\n                    logo:\"docker\",\n                    content:[\n                        {\n                            title:\"For who ?\",\n                            text:\"Any business that wants a reliable and easy-to-manage website that doesn’t depend on a specific provider.\"\n                        },\n                        {\n                            title:\"Technology\",\n                            text:`We use an open-source platform, called Docker, that helps to create virutal servers for your application. Thanks to a simple script, we will be able to tell the machine what specific programs needs to run in the background to support your application on any server that supports Docker.\n                            <br><br>\n                            In other terms, you will be able to deploy your application in a few seconds on any hosting platform without having to worry about compatibilty, versioning, updates, ...\n                            <br><br>\n                            Howerver this has an inital cost, it will save you hours in the future of maintenance and services.`\n                        },\n                        {\n                            title:\"Pricing\",\n                            text:\"Price vary in function of the complexity of the application such as : front-end and back-end configuration, databases, backups, reverse proxy, ... and the desired workflow in order to update your website.\"\n                        }\n                    ]\n                },\n                 {\n                    title:\"Shared private hosting\",\n                    logo:\"server\",\n                    color:\"blue-dark\",\n                    content:[\n                        {\n                            title:\"For who ?\",\n                            text:\"Anyone that wants to entrust the hosting of its website/application \"\n                        },\n                        {\n                            title:\"Technology\",\n                            text:`We have setup a network of powerful servers around the world which hosts our websites and applications. Because those servers are private, we can report exactly what they are doing and provide the right amount of calculation power to satisfy all of our applications.`\n                        },\n                        {\n                            title:\"Pricing\",\n                            text:\"Price vary in function of the traffic on your website and the complexity of the requests asked by your application. Hosting small but important websites with us will make you save money and give instant website access to your customers.\"\n                        }\n                    ]\n                }\n            ]\n        }\n\n        return{\n            hero,\n            how,\n            services\n        }\n    }\n\n}\n</script>\n\n<style lang=\"scss\">\n@import '@/style/main';\n\n.hosting{\n\n    &__text{\n        margin-bottom: 2rem;\n         & p {\n            font-size: 1.6rem;\n            &:not(:last-child){\n                margin-bottom: .8rem;\n            }\n        }\n    }\n   \n\n    &__why{\n        display: flex;\n        justify-content: space-between;\n        width: 100%;\n\n        &--item{\n            flex: 0 0 31%;\n            width: 100%;\n        }\n    }\n}\n\n.serv{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    \n    &__item{\n        background-color: $color-white;\n        box-shadow: $shadow;\n        \n        border:1px solid $color-blue-main;\n\n        position:relative;\n        padding: 4rem;\n        &:not(:last-child){\n            margin-bottom: 8rem;\n        }\n\n\n        & h3{\n            font-size: 2.4rem;\n            text-transform: uppercase;\n            letter-spacing: .1rem;\n            margin-bottom: 2rem;\n        }\n\n        \n    }\n\n    &__section{\n        & h4{\n            font-size: 1.6rem;\n            text-transform: uppercase;\n            color:$color-blue-main;\n            font-weight: 700;\n            margin-bottom: .6rem;\n        }\n            \n        margin-bottom: 1.5rem;\n    }\n\n    &__cta{\n        margin-top: 2rem;\n    }\n\n    &__logo{\n        position: absolute;\n        top: 0;\n        left: 0;\n        background-color: $color-blue-main;\n        transform: translate(-50%, -50%);\n        height: 7rem;\n        width: 7rem;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-radius: 50%;\n\n        &--blue-dark{\n            background-color: $color-blue-dark;\n        }\n\n\n        &--svg{\n            color:$color-white;\n            \n        }\n    }\n}\n\n</style>","<template>\n  <section :id=\"data.id\" class=\"container\" :class=\"data.color ? 'container__'+data.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=\"data.title\">\n              <h2>\n                  {{data.title}}\n              </h2>\n              <h3 v-if=\"data.subtitle\">\n                  {{data.subtitle}}\n              </h3>\n          </div>\n          <slot/>\n      </div>\n  </section>\n</template>\n\n<script>\nexport default {\n    props:['data']\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\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 \"./SectionMain.vue?vue&type=template&id=64ced642&scoped=true\"\nimport script from \"./SectionMain.vue?vue&type=script&lang=js\"\nexport * from \"./SectionMain.vue?vue&type=script&lang=js\"\n\nimport \"./SectionMain.vue?vue&type=style&index=0&id=64ced642&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-64ced642\"\n\nexport default script","import { render } from \"./Hosting.vue?vue&type=template&id=6c0f2ef0\"\nimport script from \"./Hosting.vue?vue&type=script&lang=js\"\nexport * from \"./Hosting.vue?vue&type=script&lang=js\"\n\nimport \"./Hosting.vue?vue&type=style&index=0&id=6c0f2ef0&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!./SectionMain.vue?vue&type=style&index=0&id=64ced642&lang=scss&scoped=true\""],"sourceRoot":""}