From: nael <nael@cubedesigners.com>
Date: Tue, 19 Mar 2019 15:43:55 +0000 (+0100)
Subject: WIP #2591 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e80a47be52500fd886e3c932a429bace84d6efc4;p=sandvik-service-selector.git

WIP #2591 @5
---

diff --git a/src/App.vue b/src/App.vue
index bd260f8..f4a08c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,5 @@
 <template>
   <div id="app">
-      <button @click.prevent="$i18n.locale = 'fr'">FR</button>
-      <button @click.prevent="$i18n.locale = 'en'">EN</button>
-
       <forms :questions="$t('questions')" :possible-responses="$t('responses')"></forms>
   </div>
 </template>
@@ -22,9 +19,11 @@ export default {
     * {
         padding: 0;
         margin: 0;
-        font-family: "Aktiv Grotesk Corp Light"; }
+        font-family:  Aktiv, sans-serif; }
+    body {
+        background-color: #000;
+    }
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/src/components/Forms.vue b/src/components/Forms.vue
index af95a64..196ff54 100644
--- a/src/components/Forms.vue
+++ b/src/components/Forms.vue
@@ -3,37 +3,35 @@
         <div class="container__head">
             <h1 class="container__head--title">{{ $t("mainTitle") }}</h1>
             <p class="container__head--description">
-                Find the financing option that matches your needs
+                {{$t("mainDescription")}}
             </p>
         </div>
-        <div class="container__body">
+        <div class="container__body" :class="`step-${step}`">
             <div class="container__body--form">
                 <div  v-if="step === 1">
                         <form class="container__form" action="">
-                            <label class="container__form--label" for="country">Select your country :</label>
+                            <label class="container__form--label" for="country">{{$t("selectCountry")}}</label>
                             <span class="container__form--wrap">
+                                <img class="container__form--arrow" src="../assets/arrow.svg" alt="">
                                 <select class="container__form--select" name="country" id="country" v-model="country">
                                     <option v-for="(capabilities, countryCode) in countries" :value="countryCode" :key="countryCode">{{ $t('countries.' + countryCode) }}</option>
                                 </select>
-                                <button class="container__form--btn" type="submit" @click.prevent="selectCountry()">OK</button>
+                                <button class="container__form--btn btn" type="submit" @click.prevent="selectCountry()">{{ $t("OK") }}</button>
                             </span>
-                            <p class="container__form--info"> ( Depending on country of commissioning we offer different financial services )</p>
+                            <p class="container__form--info">{{$t("countryInfo")}}</p>
                         </form>
                 </div>
 
                 <div class="step2" v-if="step === 2">
-
                         <p class="container__questions">{{ questions[questionsToAsk[this.currentQuestion]] }}</p>
                     <div class="container__buttons">
-                        <button class="container__buttons--btn" @click.prevent="handleAnswer('yes')">{{ $t("yes") }}</button>
-                        <button class="container__buttons--btn" @click.prevent="handleAnswer('no')">{{ $t("no") }}</button>
+                        <button class="container__buttons--btn btn" @click.prevent="handleAnswer('yes')">{{ $t("yes") }}</button>
+                        <button class="container__buttons--btn btn" @click.prevent="handleAnswer('no')">{{ $t("no") }}</button>
                     </div>
-
-
                 </div>
 
                 <div class="answer" v-if="step === 3">
-                    <h1 class="answer__title">Based on your answers.<br/>This is what we propose:</h1>
+                    <h1 class="answer__title">{{$t("answerTitle")}}<br/>{{$t("answerProposal")}}</h1>
                     <ul class="answer__list">
                         <li class="answer__list--item" v-for="(responseID, index) in responses" :key="responseID">
 
@@ -41,12 +39,11 @@
                                 <span v-if="responses.length > 1">{{ $t('Proposal') }} {{index + 1}} : </span>
                                 {{possibleResponses[responseID].title}}.
                             </h3>
-
-                            <div v-html="possibleResponses[responseID].content"></div>
+                            <div class="answer__content" v-html="possibleResponses[responseID].content"></div>
                         </li>
                     </ul>
 
-                    <button class="restart" @click.prevent="restart()">Restart</button>
+                    <button class="restart btn" @click.prevent="restart()">{{$t("restart")}}</button>
                 </div>
             </div>
         </div>
@@ -57,18 +54,7 @@
 
 <script>
     export default {
-        // mounted () {
-        //     this.questions = this.$t('questions');
-        //     this.possibleResponses = this.$t('responses');
-        // },
-        // computed: {
-        //     questions() {
-        //         return this.$t('questions');
-        //     },
-        //     possibleResponses() {
-        //         return this.$t('responses');
-        //     }
-        // },
+
         props: {
             questions: Object,
             possibleResponses: Object,
@@ -336,17 +322,19 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style >
 
-    * {
-        padding: 0;
-        margin: 0;
-        font-family: "Aktiv Grotesk Corp Light"; }
-
+    @font-face {
+        font-family: Aktiv;
+        src: url(../assets/Aktiv.woff);
+    }
     .container {
         max-width: 792px;
-        height: 550px; }
+        height: 100%;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+    }
     .container__head {
-        max-width: 792px;
-        padding: 1em 0 1em 1em;
+        padding: 1.875em;
         background: white;
         text-align: left;
     }
@@ -361,19 +349,22 @@
         padding: 1em 0 0 0; }
     .container__body {
         background: #0099ff;
-        max-width: 792px;
         min-height: 400px;
         display: flex;
         justify-content: center;
         align-items: center
     }
+    .container__body.step-3 {
+        min-height: 0;
+        padding: 1em 0;
+    }
     .container__body--form {
         width: 792px;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-        margin: 0 1em 0 1em; }
+        margin: 0 1.75em; }
     .container__form {
         text-align: center; }
     .container__form--label {
@@ -381,13 +372,26 @@
         font-size: 24px; }
     .container__form--wrap {
         white-space: nowrap; }
+    select::-ms-expand {
+        display: none;
+    }
     .container__form--select {
         width: 130px;
         height: 30px;
         border: 0px;
         color: #0099ff;
         padding-left: 5px;
-        margin: 0 5px 0 5px; }
+        -webkit-appearance: none;
+        margin: 0 5px 0 5px;
+        padding-right: 2.4em;
+    }
+    .container__form--arrow{
+        width: 12px;
+        position: relative;
+        left: 126px;
+        top: 2px;
+        pointer-events: none;
+    }
     .container__form--btn {
         width: 30px;
         height: 30px;
@@ -406,8 +410,9 @@
     }
     .container__buttons{
         display: flex;
-        justify-content: space-around;
-        margin-top: 2em;
+        justify-content: space-between;
+        max-width: 295px;
+        margin: 4em auto 0;
     }
     .container__buttons--btn{
         width: 75px;
@@ -417,10 +422,18 @@
         color: white;
         font-size: 24px;
     }
+    .btn {
+        cursor: pointer;
+        transition: 300ms all ease-in-out;
+    }
+    .btn:hover {
+        background-color: rgba(0,0,0,0.1);
+    }
     .answer{
         display: flex;
         flex-direction: column;
         padding: 1em 0 1em 0;
+        flex-basis: 100%;
     }
     .answer__title{
         color: white;
@@ -434,19 +447,43 @@
         list-style: none;
     }
     .answer__list--item{
-        margin: 1em 0 1em 0;
+        margin: 1em 0 3em 0;
     }
     .answer__list--subtitle{
         margin-bottom: 1em;
+        font-weight: lighter;
     }
-    .answer__list--description{
-        margin-bottom: 1em;
+    .answer__content p {
+        margin-bottom: 1.3em;
+        font-size: 16px;
+        line-height: 1.5;
     }
+    .answer__content ul{
+        margin-left: 1.75em;
+        list-style: none;
+    }
+    .answer__content li{
+        margin-bottom: 1.2em;
+        position: relative;
+    }
+    .answer__content ul li::before{
+        content: '';
+        display: block;
+        width: 10px;
+        height: 1px;
+        background: white;
+        position: absolute;
+        left: -1.6em;
+        top: 10px;
+    }
+
+    button:focus {outline:0;}
     .restart{
         color: white;
         background: transparent;
         border: 1px solid white;
         width: 100px;
         height: 30px;
+        position: relative;
     }
 </style>
diff --git a/src/main.js b/src/main.js
index 616a799..5b806e0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,9 +11,15 @@ Vue.config.productionTip = false;
 const messages = {
     en: {
         mainTitle: "Invest 365 service selector the easy way to choose the right financing",
+        mainDescription: "Find the financing option that matches your needs",
+        selectCountry:"Select your country:",
+        countryInfo :"( Depending on country of commissioning we offer different financial services )",
         yes: "Yes",
         no: "No",
         Proposal: "Proposal",
+        answerTitle: "Based on your answers.",
+        answerProposal: "This is what we propose:",
+        restart: "Restart",
         questions: {
             O: "Do you want to own your equipment from day 1?",
             G: "Would you prefer to own the equipment at the end of the term, like a Hire Purchase agreement?",
@@ -22,7 +28,7 @@ const messages = {
         responses: {
             O: {
                 "title": "OwnIt",
-                "content": `<p>lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front.</p>
+                "content": ` <p>lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front.</p>
 
                 <p>Making regular repayments without investing all of your capital at once is the smart way to plan better and stream-line your operations more cost-effectively.</p>
                     <ul>  
@@ -36,27 +42,48 @@ const messages = {
             },
             G: {
                 "title": "GainIt",
-                "content": "GGGGGGG"
+                "content": `<p> is an easy “pay as you operate” way to own Sandvik equipment. Just like a Hire Purchase agreement, you pay an agreed monthly fee until the equipment is paid for, then you take over full ownership. </p>
+
+                <p>Fixed monthly payments help you budget better, plan operations more cost-effectively, spread risks and enjoy higher profits.</p>
+                    <ul>  
+                        <li>You own equipment at the end of the leasing period</li>
+                        <li>Reduce upfront costs and use equipment quickly from order to installation</li>
+                        <li>Payment holidays and balloon payments available</li>
+                        <li>Easily combined with Sandvik’s service expertise and protection services</li>
+                    </ul>
+                <p>Fixed payments for less risk and greater profit.</p>
+                <p>Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs.</p>`
             },
             R: {
                 "title": "RunIt",
-                "content": "RR"
+                "content": `<p> is your way to get the rewards of using the industry’s best equipment without the risks of ownership.</p>
+
+                <p>Enter into a rental agreement from just a few months to up to four years, leasing either new, reborn or overhauled equipment. </p>
+                
+                <p>Fixed monthly payments help you budget better, plan operations more cost-effectively, spread risks and enjoy higher profits.</p>
+                    <ul>  
+                        <li>Low capital outlay</li>
+                        <li>Fixed payments</li>
+                        <li>Invest new or reborn/overhaul equipment</li>
+                        <li>Easily combined with Sandvik’s service expertise and protection services</li>
+                    </ul>
+                <p>Removes the cost of owning and running your equipment</p>
+                <p>Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs.</p>`
             },
             T: {
                 "title": "",
-                "content": "traditional"
+                "content": ` <p> You selected a country where we offer trade finance. Reach out to your local Sandvik contact, they will investigate the best possible financing solution for your needs. Thank you.</p>`
             },
             NotAvailable: {
                 "title": "",
-                "content": "Not available :("
+                "content": `<p>You selected a country we don´t offer group-wide financing solution to yet. Reach out to your closest Sandvik contact, they will investigate the best possible financing solution for your needs. Thank you.</p>`
             },
             NoMatch: {
                 "title": "",
-                "content": "No match :("
+                "content": `<p> We can´t match your needs with a financing solution applicable for the selected country, please restart the product selector.</p>`
             },
         },
         countries: {
-            "PACIFIC_ISLANDS": "Pacific Islands",
             "AF": "Afghanistan",
             "AL": "Albania",
             "DZ": "Algeria",
@@ -309,319 +336,6 @@ const messages = {
             "XK": "Kosovo"
         }
     },
-    fr: {
-        mainTitle: "Bonjour !!! Invest 365 service selector the easy way to choose the right financing",
-        yes: "Oui",
-        no: "Non",
-        Proposal: "Proposition",
-        questions: {
-            O: "FR == Do you want to own your equipment from day 1?",
-            G: "FR == Would you prefer to own the equipment at the end of the term, like a Hire Purchase agreement?",
-            R: "FR == Do you want to use the equipment of periods of less than four years and never own the equipment? "
-        },
-        responses: {
-            O: {
-                "title": "OwnIt",
-                "content": `<p>FR lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front.</p>
-
-                <p>Making regular repayments without investing all of your capital at once is the smart way to plan better and stream-line your operations more cost-effectively.</p>
-                    <ul>  
-                        <li>You own the equipment from day 1</li>
-                        <li>Structure payments to your performance predictions</li>
-                        <li>Invest in new or reborn/overhaul equipment</li>
-                        <li>Easily combined with Sandvik’s service expertise and protection services</li>
-                    </ul>
-                <p>Own it now. Pay it over time.</p>
-                <p>Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs.</p>`
-            },
-            G: {
-                "title": "GainIt",
-                "content": "GGGGGGG"
-            },
-            R: {
-                "title": "RunIt",
-                "content": "RR"
-            },
-            T: {
-                "title": "",
-                "content": "FR traditional"
-            },
-            NotAvailable: {
-                "title": "",
-                "content": " FR Not available :("
-            },
-            NoMatch: {
-                "title": "",
-                "content": "FR No match :("
-            },
-
-            // OwnIt: "<p class='answer__list--description'>"+"lets you own equipment and it becomes an asset on your balance sheet from day 1. And you don’t have to pay the total cost up front. \n" + "</p>"+
-            //     "\n" +
-            //     "<p class='answer__list--description'>"+"Making regular repayments without investing all of your capital at once is the smart way to plan better and stream-line your operations more cost-effectively. \n" + "</p>"+
-            //     "<ul>" +
-            //         "<li>You own the equipment from day 1</li>" +
-            //         "<li>Structure payments to your performance predictions </li>" +
-            //         "<li>Invest in new or reborn/overhaul equipment</li>" +
-            //         "<li>Easily combined with Sandvik’s service expertise and protection services</li>" +
-            //     "</ul>" +
-            //     "<p class='answer__list--description'>"+ "Own it now. Pay it over time. \n" +"</p>"+
-            //     "\n" +
-            //     "<p class='answer__list--description' >"+"Reach out to your local Sandvik contact, to get the equipment / services you want with the financing solution that fits your needs. "+"<p>",
-        },
-        countries: {
-            "PACIFIC_ISLANDS": "Pacific Islands",
-            "AF": "Afghanistan",
-            "AL": "Albanie",
-            "DZ": "Algérie",
-            "AS": "Samoa américaine",
-            "AD": "Andorre",
-            "AO": "Angola",
-            "AI": "Anguilla",
-            "AQ": "Antarctique",
-            "AG": "Antigua et Barbuda",
-            "AR": "Argentine",
-            "AM": "Arménie",
-            "AW": "Aruba",
-            "AU": "Australie",
-            "AT": "Autriche",
-            "AZ": "Azerbaidjan",
-            "BS": "Bahamas",
-            "BH": "Bahrein",
-            "BD": "Bangladesh",
-            "BB": "Barbade",
-            "BY": "Bielorussie",
-            "BE": "Belgique",
-            "BZ": "Belize",
-            "BJ": "Bénin",
-            "BM": "Bermudes",
-            "BT": "Bhoutan",
-            "BO": "Bolivie",
-            "BA": "Bosnie-Herzégovine",
-            "BW": "Botswana",
-            "BV": "Île Bouvet",
-            "BR": "Brésil",
-            "IO": "Océan Indien Britannique",
-            "BN": "Brunei Darussalam",
-            "BG": "Bulgarie",
-            "BF": "Burkina Faso",
-            "BI": "Burundi",
-            "KH": "Cambodge",
-            "CM": "Cameroun",
-            "CA": "Canada",
-            "CV": "Cap-Vert",
-            "KY": "Caïmanes",
-            "CF": "Centrafricaine, République",
-            "TD": "Tchad",
-            "CL": "Chili",
-            "CN": "Chine",
-            "CX": "Île Christmas",
-            "CC": "Cocos",
-            "CO": "Colombie",
-            "KM": "Comores",
-            "CG": "Congo, République populaire",
-            "CD": "Congo, République démocratique",
-            "CK": "Îles Cook",
-            "CR": "Costa Rica",
-            "CI": "Côte-d'Ivoire",
-            "HR": "Croatie",
-            "CU": "Cuba",
-            "CY": "Chypre",
-            "CZ": "Tchéquie",
-            "DK": "Danemark",
-            "DJ": "Djibouti",
-            "DM": "Dominique",
-            "DO": "République Dominicaine",
-            "EC": "Équateur",
-            "EG": "Égypte",
-            "SV": "El Salvador",
-            "GQ": "Guinée équatoriale",
-            "ER": "Érythrée",
-            "EE": "Estonie",
-            "ET": "Éthiopie",
-            "FK": "Îles Malouines",
-            "FO": "Îles Féroé",
-            "FJ": "Fidji",
-            "FI": "Finlande",
-            "FR": "France",
-            "GF": "Guyane française",
-            "PF": "Polynésie française",
-            "TF": "Terres australes françaises",
-            "GA": "Gabon",
-            "GM": "Gambie",
-            "GE": "Géorgie",
-            "DE": "Allemagne",
-            "GH": "Ghana",
-            "GI": "Gibraltar",
-            "GR": "Grèce",
-            "GL": "Groenland",
-            "GD": "Grenada",
-            "GP": "Guadeloupe",
-            "GU": "Guam",
-            "GT": "Guatemala",
-            "GN": "Guinée",
-            "GW": "Guinée-Bissau",
-            "GY": "Guyana",
-            "HT": "Haïti",
-            "HM": "Îles Heard-et-MacDonald",
-            "VA": "Saint-Siège",
-            "HN": "Honduras",
-            "HK": "Hong Kong",
-            "HU": "Hongrie",
-            "IS": "Islande",
-            "IN": "Inde",
-            "ID": "Indonésie",
-            "IR": "Iran",
-            "IQ": "Irak",
-            "IE": "Irlande",
-            "IL": "Israël",
-            "IT": "Italie",
-            "JM": "Jamaïque",
-            "JP": "Japon",
-            "JO": "Jordanie",
-            "KZ": "Kazakhstan",
-            "KE": "Kenya",
-            "KI": "Kiribati",
-            "KP": "Corée du Nord, République populaire démocratique",
-            "KR": "Corée du Sud, République",
-            "KW": "Koweit",
-            "KG": "Kirghistan",
-            "LA": "Laos",
-            "LV": "Lettonie",
-            "LB": "Liban",
-            "LS": "Lesotho",
-            "LR": "Libéria",
-            "LY": "Libye",
-            "LI": "Liechtenstein",
-            "LT": "Lituanie",
-            "LU": "Luxembourg, Grand-Duché",
-            "MO": "Macao",
-            "MK": "Macédoine, Ex-République yougoslave",
-            "MG": "Madagascar",
-            "MW": "Malawi",
-            "MY": "Malaisie",
-            "MV": "Maldives",
-            "ML": "Mali",
-            "MT": "Malte",
-            "MH": "Îles Marshall",
-            "MQ": "Martinique",
-            "MR": "Mauritanie",
-            "MU": "Maurice",
-            "YT": "Mayotte",
-            "MX": "Mexique",
-            "FM": "Micronésie",
-            "MD": "Moldavie",
-            "MC": "Monaco",
-            "MN": "Mongolie",
-            "MS": "Montserrat",
-            "MA": "Maroc",
-            "MZ": "Mozambique",
-            "MM": "Myanmar",
-            "NA": "Namibie",
-            "NR": "Nauru",
-            "NP": "Népal",
-            "NL": "Pays-Bas",
-            "NC": "Nouvelle-Calédonie",
-            "NZ": "Nouvelle-Zélande",
-            "NI": "Nicaragua",
-            "NE": "Niger",
-            "NG": "Nigéria",
-            "NU": "Niué",
-            "NF": "Île Norfolk",
-            "MP": "Mariannes du Nord",
-            "NO": "Norvège",
-            "OM": "Oman",
-            "PK": "Pakistan",
-            "PW": "Palau",
-            "PS": "Palestine",
-            "PA": "Panama",
-            "PG": "Papouasie-Nouvelle-Guinée",
-            "PY": "Paraguay",
-            "PE": "Pérou",
-            "PH": "Philippines",
-            "PN": "Pitcairn",
-            "PL": "Pologne",
-            "PT": "Portugal",
-            "PR": "Porto Rico",
-            "QA": "Qatar",
-            "RE": "Réunion",
-            "RO": "Roumanie",
-            "RU": "Russie",
-            "RW": "Rwanda",
-            "SH": "Sainte-Hélène",
-            "KN": "Saint-Christophe-et-Niévès",
-            "LC": "Sainte-Lucie",
-            "PM": "Saint Pierre and Miquelon",
-            "VC": "Saint-Vincent et les Grenadines",
-            "WS": "Samoa",
-            "SM": "Saint-Marin",
-            "ST": "São Tomé et Principe",
-            "SA": "Arabie Saoudite",
-            "SN": "Sénégal",
-            "SC": "Seychelles",
-            "SL": "Sierra Leone",
-            "SG": "Singapour",
-            "SK": "Slovaquie",
-            "SI": "Slovénie",
-            "SB": "Salomon",
-            "SO": "Somalie",
-            "ZA": "Afrique du Sud",
-            "GS": "Géorgie du Sud-et-les Îles Sandwich du Sud",
-            "ES": "Espagne",
-            "LK": "Sri Lanka",
-            "SD": "Soudan",
-            "SR": "Suriname",
-            "SJ": "Svalbard et Île Jan Mayen",
-            "SZ": "Ngwane, Royaume du Swaziland",
-            "SE": "Suède",
-            "CH": "Suisse",
-            "SY": "Syrie",
-            "TW": "Taïwan",
-            "TJ": "Tadjikistan",
-            "TZ": "Tanzanie, République unie",
-            "TH": "Thaïlande",
-            "TL": "Timor Leste",
-            "TG": "Togo",
-            "TK": "Tokelau",
-            "TO": "Tonga",
-            "TT": "Trinidad et Tobago",
-            "TN": "Tunisie",
-            "TR": "Turquie",
-            "TM": "Turkménistan",
-            "TC": "Îles Turques-et-Caïques",
-            "TV": "Tuvalu",
-            "UG": "Ouganda",
-            "UA": "Ukraine",
-            "AE": "Émirats Arabes Unis",
-            "GB": "Royaume-Uni",
-            "US": "États-Unis d'Amérique",
-            "UM": "Îles mineures éloignées des États-Unis",
-            "UY": "Uruguay",
-            "UZ": "Ouzbékistan",
-            "VU": "Vanuatu",
-            "VE": "Venezuela",
-            "VN": "Vietnam",
-            "VG": "Îles vierges britanniques",
-            "VI": "Îles vierges américaines",
-            "WF": "Wallis et Futuna",
-            "EH": "Sahara occidental",
-            "YE": "Yémen",
-            "ZM": "Zambie",
-            "ZW": "Zimbabwe",
-            "AX": "Åland",
-            "BQ": "Bonaire, Saint-Eustache et Saba",
-            "CW": "Curaçao",
-            "GG": "Guernesey",
-            "IM": "Île de Man",
-            "JE": "Jersey",
-            "ME": "Monténégro",
-            "BL": "Saint-Barthélemy",
-            "MF": "Saint-Martin (partie française)",
-            "RS": "Serbie",
-            "SX": "Saint-Martin (partie néerlandaise)",
-            "SS": "Sud-Soudan",
-            "XK": "Kosovo"
-        }
-    }
 };
 
 // Create VueI18n instance with options
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..2342b7a
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    publicPath: './' // Use relative paths for assets
+};
\ No newline at end of file