menu along with animation added, partial ui completion

6 jaren geleden · 6b4e127dee
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

 const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: '', redirectTo: 'malls', pathMatch: 'full' },
  { path: 'onboarding', loadChildren: './onboarding/onboarding.module#OnboardingPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'malls', loadChildren: './malls/malls.module#MallsPageModule' },
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,20 +6,23 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';

 import { MallService } from './services/mall.service';

 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
    providers: [
        StatusBar,
        SplashScreen,
        MallService,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
 })
 export class AppModule {}
 export class AppModule { }
--- a/src/app/malls/malls.page.html
+++ b/src/app/malls/malls.page.html
@@ -1,14 +1,19 @@
 <ion-content>

    <section class="header-bar">
        <h2> Find malls near you </h2>
        <button> <ion-icon name="search"></ion-icon> </button>
    </section>
    <div class="tabs-holder">
        <button (click)="selected_tab = 'you'" class="tab" [ngClass]="{'active' : selected_tab === 'you'}"> For you </button>
        <button (click)="selected_tab = 'recomended'" class="tab" [ngClass]="{'active' : selected_tab === 'recomended'}"> Recommended </button>
        <button (click)="selected_tab = 'trendy'" class="tab" [ngClass]="{'active' : selected_tab === 'trendy'}"> Trendy </button>
        <button (click)="selected_tab = 'recent'" class="tab" [ngClass]="{'active' : selected_tab === 'recent'}"> Recent </button>
    <div class="overlay" [ngClass]="{ 'active' : show_menu }"></div>

    <div class="top-bar-holder">
        <section class="header-bar">
            <h2> Find malls near you </h2>
            <button> <ion-icon src="assets/custom/search.svg"></ion-icon> </button>
        </section>

        <div class="tabs-holder">
            <button (click)="selected_tab = 'you'" class="tab" [ngClass]="{'active' : selected_tab === 'you'}"> For you </button>
            <button (click)="selected_tab = 'recomended'" class="tab" [ngClass]="{'active' : selected_tab === 'recomended'}"> Recommended </button>
            <button (click)="selected_tab = 'trendy'" class="tab" [ngClass]="{'active' : selected_tab === 'trendy'}"> Trendy </button>
            <button (click)="selected_tab = 'recent'" class="tab" [ngClass]="{'active' : selected_tab === 'recent'}"> Recent </button>
        </div>
    </div>

    <div class="results-utilities-holder">
@@ -63,4 +68,21 @@
        <a> Know More </a>
    </section>

    <div class="menu-icon-holder" (click)="show_menu = true" [ngClass]="{'inactive' : show_menu }">
        <ion-icon name="menu"></ion-icon>
    </div>

    <div class="close-icon-holder" [ngClass]="{'active' : show_menu }"
    (click)="show_menu = false">
        <ion-icon name="close"></ion-icon>
    </div>

    <div class="menu-items-holder" [ngClass]="{'active' : show_menu }">
        <button> <ion-icon src="assets/custom/001-house.svg"></ion-icon> </button>
        <button> <ion-icon src="assets/custom/002-bookmark.svg"></ion-icon> </button>
        <button> <ion-icon src="assets/custom/003-shop.svg"></ion-icon> </button>
        <button> <ion-icon src="assets/custom/004-map.svg"></ion-icon> </button>
        <button> <ion-icon src="assets/custom/005-boss.svg"></ion-icon> </button>
    </div>

 </ion-content>
--- a/src/app/malls/malls.page.scss
+++ b/src/app/malls/malls.page.scss
@@ -1,5 +1,11 @@
 .top-bar-holder {
    background-image: url('../../assets/custom/background-2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
 }

 .header-bar {
    background-color: var(--brand-blue);
    color: white;
    display: flex;
    justify-content: space-between;
@@ -18,12 +24,11 @@
        width: 40px;
        height: 40px;
        background-color: white;
        font-size: 20px;
        font-size: 14px;
    }
 }

 .tabs-holder {
    background-color: var(--brand-blue);
    width: 100%;
    padding: 0 20px 20px;
    overflow: scroll;
@@ -150,11 +155,11 @@
 }

 .advertisement {
    position: sticky;
    bottom: 0;
    left: 0;
    height: 150px;
    background-color: var(--brand-blue);
    background-image: url('../../assets/custom/background-2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    color: white;
    padding: 15px;
    width: 100%;
@@ -198,3 +203,126 @@
        color: white;
    }
 }


 .menu-icon-holder {
    background-color: #005cbe;
    color: white;
    position: fixed;
    bottom: -60px;
    box-shadow: 0px 0px 5px var(--brand-blue);
    width: 100px;
    height: 100px;
    text-align: center;
    left: calc((100% - 100px)/2);
    border-radius: 50%;
    padding-top: 7px;
    z-index: 1;
    transition: transform 0.5s;
    transform: translateY(0);

    &.inactive {
        transform: translateY(100px);
    }

    ion-icon {
        font-size: 30px;
    }
 }

 .close-icon-holder {
    background-color: white;
    width: 70%;
    position: fixed;
    left: calc((100% - 70%) / 2);
    height: 100px;
    border-radius: 50%;
    color: var(--brand-blue);
    text-align: center;
    z-index: 2;
    bottom: -60px;
    padding-top: 10px;
    transition: transform 0.5s;
    transform: scale(0);
    transition-delay: 1s;

    &.active {
        transform: scale(1);
    }

    ion-icon {
        font-size: 25px;
    }
 }

 .menu-items-holder {
    background-image: url('../../assets/custom/background-2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    border-radius: 50%;
    position: fixed;
    left: calc((100% - 150%) / 2);
    bottom: -150px;
    z-index: 1;
    height: 300px;
    width: 150%;
    padding: 20px 30%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: transform 0.5s;
    transform: scale(0);
    transition-delay: 0.3s;

    &.active {
        transform: scale(1);
    }

    button {
        background-color: white;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        font-size: 20px;
        position: relative;

        &:first-child {
            transform: translateY(40px);
        }

        &:nth-child(2) {
            transform: translateY(20px);
        }

        &:nth-child(3) {
            transform: translateY(10px);
        }

        &:last-child {
            transform: translateY(40px);
        }

        &:nth-child(4) {
            transform: translateY(20px);
        }
    }
 }

 .overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
    background-color: black;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s;

    &.active {
        pointer-events: all;
        opacity: 0.5;
    }
 }
--- a/src/app/malls/malls.page.ts
+++ b/src/app/malls/malls.page.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MallService } from '../services/mall.service';

@Component({
    selector: 'app-malls',
@@ -7,75 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MallsPage implements OnInit {
    selected_tab = 'you';
    show_menu = false;
    malls = [];

    malls = [{
        id: '00001',
        name: 'Gopalan Mall',
        is_bookmarked: false,
        image_url: 'https://images.jdmagicbox.com/comp/chennai/s2/044pxx44.xx44.171122071536.w6s2/catalogue/v-r-mall-anna-nagar-chennai-malls-jwyyh0m5kq-t.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        offers_collection: [{
            name: 'Food',
            offer: [{
                name: 'McDonalds Offer',
                description: 'Get 25% offer on you first meal',
                cupon_code: 'MCD25F'
            }]
        }, {
            name: 'Shopping',
            offer: []
        }],
        rating: 4.3,
        distance: 2,
        location: {
            latitude: 12.903903292,
            longitude: 34.940349039
        }
    },
    {
        id: '00002',
        name: 'Gopalan Mall 2',
        is_bookmarked: false,
        image_url: 'https://images.jdmagicbox.com/comp/chennai/s2/044pxx44.xx44.171122071536.w6s2/catalogue/v-r-mall-anna-nagar-chennai-malls-jwyyh0m5kq-t.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        offers_collection: [{
            name: 'Food',
            offer: []
        }, {
            name: 'Shopping',
            offer: []
        }],
        rating: 4.3,
        distance: 2,
        location: {
            latitude: 12.903903292,
            longitude: 34.940349039
        }
    },
    {
        id: '00003',
        name: 'Gopalan Mall 3',
        is_bookmarked: false,
        image_url: 'https://images.jdmagicbox.com/comp/chennai/s2/044pxx44.xx44.171122071536.w6s2/catalogue/v-r-mall-anna-nagar-chennai-malls-jwyyh0m5kq-t.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        offers_collection: [{
            name: 'Food',
            offer: []
        }, {
            name: 'Shopping',
            offer: []
        }],
        rating: 4.3,
        distance: 2,
        location: {
            latitude: 12.903903292,
            longitude: 34.940349039
        }
    }]

    constructor() { }
    constructor(private mallService: MallService) { }

    ngOnInit() {
    }

    ionViewDidEnter() {
        this.mallService.getAllMalls().then((data: Array<object>) => {
            this.malls = data;
        });
    }

 }
--- a/src/app/onboarding/onboarding.page.scss
+++ b/src/app/onboarding/onboarding.page.scss
@@ -258,7 +258,7 @@ ion-slide {
 }

 .page7 {
    background-image: url('../../assets/custom/background.svg');
    background-image: url('../../assets/custom/background-2.svg');
    background-size: cover;
    background-repeat: no-repeat;

--- a/src/app/services/mall.service.spec.ts
+++ b/src/app/services/mall.service.spec.ts
@@ -0,0 +1,12 @@
 import { TestBed } from '@angular/core/testing';

 import { MallService } from './mall.service';

 describe('MallService', () => {
  beforeEach(() => TestBed.configureTestingModule({}));

  it('should be created', () => {
    const service: MallService = TestBed.get(MallService);
    expect(service).toBeTruthy();
  });
 });
--- a/src/app/services/mall.service.ts
+++ b/src/app/services/mall.service.ts
@@ -0,0 +1,79 @@
 import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
 })
 export class MallService {
    malls = [{
        id: '00001',
        name: 'Gopalan Mall',
        is_bookmarked: false,
        image_url: 'https://images.jdmagicbox.com/comp/chennai/s2/044pxx44.xx44.171122071536.w6s2/catalogue/v-r-mall-anna-nagar-chennai-malls-jwyyh0m5kq-t.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        offers_collection: [{
            name: 'Food',
            offer: [{
                name: 'McDonalds Offer',
                description: 'Get 25% offer on you first meal',
                cupon_code: 'MCD25F'
            }]
        }, {
            name: 'Shopping',
            offer: []
        }],
        rating: 4.3,
        distance: 2,
        location: {
            latitude: 12.903903292,
            longitude: 34.940349039
        }
    },
    {
        id: '00002',
        name: 'Gopalan Mall 2',
        is_bookmarked: false,
        image_url: 'https://images.jdmagicbox.com/comp/chennai/s2/044pxx44.xx44.171122071536.w6s2/catalogue/v-r-mall-anna-nagar-chennai-malls-jwyyh0m5kq-t.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        offers_collection: [{
            name: 'Food',
            offer: []
        }, {
            name: 'Shopping',
            offer: []
        }],
        rating: 4.3,
        distance: 2,
        location: {
            latitude: 12.903903292,
            longitude: 34.940349039
        }
    },
    {
        id: '00003',
        name: 'Gopalan Mall 3',
        is_bookmarked: false,
        image_url: 'https://images.jdmagicbox.com/comp/chennai/s2/044pxx44.xx44.171122071536.w6s2/catalogue/v-r-mall-anna-nagar-chennai-malls-jwyyh0m5kq-t.jpg',
        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        offers_collection: [{
            name: 'Food',
            offer: []
        }, {
            name: 'Shopping',
            offer: []
        }],
        rating: 4.3,
        distance: 2,
        location: {
            latitude: 12.903903292,
            longitude: 34.940349039
        }
    }];

    constructor() { }

    getAllMalls() {
        return new Promise((resolve, reject) => {
            resolve(this.malls);
        });
    }
 }
--- a/src/assets/custom/001-house.svg
+++ b/src/assets/custom/001-house.svg
@@ -0,0 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512" height="512" class=""><g><g><rect x="382.933" y="73.6" style="fill:#415A6B" width="58.667" height="102.4" data-original="#40A7F0" class="active-path" data-old_color="#40A7F0"></rect><rect x="360.533" y="21.333" style="fill:#344A5E" width="103.467" height="55.467" data-original="#5AD0F3" class="" data-old_color="#5AD0F3"></rect><path style="fill:#2196F3" d="M44.8,276.267V512h418.133V276.267c-82.133-82.133-128-128-209.067-209.067l0,0  C172.8,149.333,126.933,195.2,44.8,276.267z" data-original="#4651E9" class="" data-old_color="#4651E9"></path><path style="fill:#1D89DF" d="M464,276.267c-82.133-82.133-128-128-209.067-209.067c-41.6,40.533-73.6,72.533-105.6,104.533  s-64,64-104.533,104.533v48c82.133-82.133,128-128,209.067-209.067c82.133,82.133,128,128,209.067,209.067v6.4l0,0v-54.4H464z" data-original="#3D41D5" class="" data-old_color="#3D41D5"></path><path style="fill:#415A6B;" d="M216.533,512H90.667V388.267c0-35.2,28.8-62.933,62.933-62.933l0,0c35.2,0,62.933,28.8,62.933,62.933  V512z" data-original="#415A6B" class=""></path><rect x="253.867" y="325.333" style="fill:#344A5E;" width="164.267" height="144" data-original="#344A5E" class=""></rect><g>
 	<rect x="270.933" y="342.4" style="fill:#8AD7F8" width="56.533" height="109.867" data-original="#8AD7F8" class=""></rect>
 	<rect x="344.533" y="342.4" style="fill:#8AD7F8" width="56.533" height="109.867" data-original="#8AD7F8" class=""></rect>
 </g><path style="fill:#344A5E" d="M502.4,232.533L279.467,9.6c-12.8-12.8-35.2-12.8-48,0L9.6,232.533c-12.8,12.8-12.8,35.2,0,48  c12.8,12.8,35.2,12.8,48,0L256,82.133l198.4,198.4c12.8,12.8,35.2,12.8,48,0C515.2,266.667,515.2,245.333,502.4,232.533z" data-original="#5AD0F3" class="" data-old_color="#5AD0F3"></path></g></g> </svg>
--- a/src/assets/custom/002-bookmark.svg
+++ b/src/assets/custom/002-bookmark.svg
@@ -0,0 +1,41 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 <path style="fill:#2196F3;" d="M384,0H149.333c-41.237,0-74.667,33.429-74.667,74.667v426.667c0.001,4.316,2.603,8.207,6.592,9.856
 	c1.291,0.538,2.676,0.813,4.075,0.811c2.831,0.005,5.548-1.115,7.552-3.115l120.448-120.619
 	C260.48,434.795,325.44,499.2,332.416,507.136c3.261,4.906,9.882,6.24,14.788,2.979c1.775-1.18,3.155-2.864,3.964-4.835
 	c0.687-1.195,0.978-2.576,0.832-3.947v-448c0-17.673,14.327-32,32-32c5.891,0,10.667-4.776,10.667-10.667S389.891,0,384,0z"/>
 <path style="fill:#1976D2;" d="M394.667,0L394.667,0c23.564,0,42.667,19.103,42.667,42.667v32c0,5.891-4.776,10.667-10.667,10.667
 	H352l0,0V42.667C352,19.103,371.103,0,394.667,0z"/>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/003-shop.svg
+++ b/src/assets/custom/003-shop.svg
@@ -0,0 +1,80 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 504.517 504.517" style="enable-background:new 0 0 504.517 504.517;" xml:space="preserve">
 <path style="fill:#E4E7E7;" d="M47.262,63.212h409.6v393.846h-409.6C47.262,457.058,47.262,63.212,47.262,63.212z"/>
 <path style="fill:#CDCFCF;" d="M47.262,169.157h409.6v20.086h-409.6C47.262,189.243,47.262,169.157,47.262,169.157z"/>
 <path style="fill:#E4E7E7;" d="M504.123,130.166l-40.172-39.385H39.778L0,130.166v26.388c0,7.089,5.908,12.997,13.391,12.997
 	h477.735c7.483,0,13.391-5.908,13.391-12.997L504.123,130.166z"/>
 <path style="fill:#CDCFCF;" d="M502.942,128.985l-38.991-38.203H39.778L1.182,128.985H502.942z"/>
 <path style="fill:#CCD0D2;" d="M74.043,35.643h355.643l27.175,27.569h-409.6C47.262,63.212,74.043,35.643,74.043,35.643z"/>
 <path style="fill:#2EA9D3;" d="M74.831,433.428h90.585V169.551H74.831V433.428z M192.985,457.058h118.154V169.551H192.985V457.058z
 	 M338.708,169.551v263.877h90.585V169.551H338.708z M74.831,433.428h90.585V169.551H74.831V433.428z M192.985,457.058h118.154
 	V169.551H192.985V457.058z M338.708,169.551v263.877h90.585V169.551H338.708z"/>
 <path style="fill:#3DB39E;" d="M229.612,232.566h45.292c7.089,0,12.997,5.908,12.997,13.391v20.086
 	c0,7.483-5.908,13.391-12.997,13.391h-45.292c-7.089,0-12.997-5.908-12.997-13.391v-20.086
 	C216.615,238.474,222.523,232.566,229.612,232.566z"/>
 <path style="fill:#E4E7E7;" d="M274.511,244.382c0.394,0,1.182,0.788,1.182,1.575v20.086c0,1.182-0.788,1.575-1.182,1.575h-44.898
 	c-0.394,0-1.182-0.788-1.182-1.575v-20.086c0-1.182,0.788-1.575,1.182-1.575H274.511 M274.511,232.566h-44.898
 	c-7.089,0-12.997,5.908-12.997,13.391v20.086c0,7.483,5.908,13.391,12.997,13.391h45.292c7.089,0,12.997-5.908,12.997-13.391
 	v-20.086C287.508,238.474,281.6,232.566,274.511,232.566z"/>
 <path style="fill:#2998BD;" d="M165.415,334.966h-35.446v-43.323H74.831v141.785h90.585v-98.462H165.415z M192.985,334.966h47.262
 	v122.092h-47.262L192.985,334.966L192.985,334.966z M338.708,295.582h90.585v137.846h-90.585V295.582z M279.631,362.535h31.508
 	v94.523h-31.508V362.535z"/>
 <path style="fill:#3DB39E;" d="M395.815,410.585c6.302,0,12.209,1.969,17.329,5.514c3.545-21.662,22.449-37.809,45.292-37.809
 	c25.206,0,46.08,20.086,46.08,45.292s-20.48,45.292-46.08,45.292h-62.228c-16.148,0-29.538-12.997-29.538-29.145
 	C366.277,423.582,379.668,410.585,395.815,410.585z M108.308,410.585c-6.302,0-12.209,1.969-17.329,5.514
 	c-3.545-21.662-22.449-37.809-45.292-37.809C20.48,378.289,0,398.769,0,423.582c0,25.206,20.48,45.292,46.08,45.292h62.228
 	c16.148,0,29.538-12.997,29.538-29.145C137.846,423.582,124.455,410.585,108.308,410.585z"/>
 <path style="fill:#37A18E;" d="M108.308,457.058H46.08c-23.237,0-42.535-17.329-45.292-39.385C0,419.643,0,421.612,0,423.582
 	c0,25.206,20.48,45.292,46.08,45.292h62.228c16.148,0,29.538-12.997,29.538-29.145c0-1.969-0.394-3.938-0.788-5.908
 	C134.302,447.212,122.486,457.058,108.308,457.058z M458.043,457.058h-62.228c-14.178,0-25.994-9.846-28.751-23.237
 	c-0.394,1.969-0.788,3.938-0.788,5.908c0,16.148,13.391,29.145,29.538,29.145h62.228c25.206,0,46.08-20.086,46.08-45.292
 	c0-1.969,0-3.938-0.394-5.908C500.578,439.729,481.674,457.058,458.043,457.058z"/>
 <path style="fill:#2998BD;" d="M338.708,169.551h90.585v19.298h-90.585V169.551z M74.831,169.551h90.585v19.298H74.831V169.551z
 	 M192.985,169.551h118.154v19.298H192.985V169.551z"/>
 <path style="fill:#E2574C;" d="M463.951,90.782h-22.843l35.446,39.385v39.385h14.178c7.483,0,13.391-5.908,13.391-12.997v-26.388
 	l-0.394-0.394C503.729,129.772,463.951,90.782,463.951,90.782z M133.514,128.985l15.754-38.203h-22.843l-20.086,38.203v40.566
 	h27.175V128.985z M51.2,169.551h27.175v-39.385l27.963-39.385H79.951L51.2,130.166V169.551z M240.246,129.772l3.938-38.991h-27.569
 	l-3.545,38.597v40.172h27.175L240.246,129.772L240.246,129.772z M188.652,169.157v-40.172l8.271-38.203h-25.6l-9.846,38.203v40.172
 	H188.652z M397.785,169.551v-40.566l-20.086-37.809h-22.843l15.36,37.809v40.566H397.785z M452.923,169.551v-39.385l-28.751-39.385
 	h-26.388l27.963,39.385v39.385H452.923z M13.391,169.551h14.178v-39.385l35.446-39.385H39.778L0,130.166v25.994
 	C0,163.643,5.908,169.551,13.391,169.551z M291.052,169.551v-39.778l-3.545-38.991h-27.569l3.938,38.991v39.778H291.052z
 	 M315.471,128.985v40.172h27.175v-40.172L332.8,90.782h-25.6L315.471,128.985z"/>
 <path style="fill:#CB4E44;" d="M377.698,91.175h-22.843l15.36,37.809h27.175L377.698,91.175z M287.508,90.782h-27.569l3.938,38.203
 	h27.175L287.508,90.782z M463.951,90.782h-22.843l34.265,38.203h27.569L463.951,90.782z M424.172,90.782h-26.388l26.782,38.203
 	h27.175L424.172,90.782z M332.406,90.782H307.2l8.271,38.203h27.175L332.406,90.782z M161.477,128.985h27.175l8.271-38.203h-25.6
 	L161.477,128.985z M106.338,90.782H79.951l-27.963,38.203h27.175L106.338,90.782z M213.071,128.985h27.175l3.938-38.203h-27.569
 	L213.071,128.985z M1.182,128.985h27.569l34.265-38.203H39.778L1.182,128.985z M106.338,128.985h27.175l15.754-38.203h-22.843
 	L106.338,128.985z"/>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/004-map.svg
+++ b/src/assets/custom/004-map.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512" height="512" class=""><g><polygon style="fill:#2196F3" points="512,128.819 512,512 384,466.489 349.867,274.898 384,83.308 " data-original="#FEE191" class="" data-old_color="#FEE191"></polygon><polygon style="fill:#1D89DF" points="384,83.308 384,466.489 256,512 233.244,320.41 256,128.819 " data-original="#FFD24D" class="active-path" data-old_color="#FFD24D"></polygon><polygon style="fill:#2196F3" points="256,128.819 256,512 128,466.489 93.867,274.898 128,83.308 " data-original="#FEE191" class="" data-old_color="#FEE191"></polygon><polygon style="fill:#1D89DF" points="128,83.308 128,466.489 0,512 0,128.819 " data-original="#FFD24D" class="active-path" data-old_color="#FFD24D"></polygon><path style="fill:#F14742;" d="M435.61,115.61c0,92.573-104.507,178.309-104.507,178.309c-6.106,5.01-16.1,5.01-22.206,0  c0,0-104.507-85.736-104.507-178.309C204.389,51.761,256.15,0,320,0S435.61,51.761,435.61,115.61z" data-original="#F14742"></path><path style="fill:#FFFFFF;" d="M320,173.774c-32.072,0-58.164-26.093-58.164-58.164S287.928,57.446,320,57.446  s58.164,26.093,58.164,58.164S352.072,173.774,320,173.774z" data-original="#FFFFFF" class=""></path></g> </svg>
--- a/src/assets/custom/005-boss.svg
+++ b/src/assets/custom/005-boss.svg
@@ -0,0 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve" width="512" height="512" class=""><g><polygon style="fill:#CDCDCD" points="335.446,361.939 335.446,300.15 176.558,300.15 176.558,361.939 256.002,432.556 " data-original="#E6AF78" class="" data-old_color="#E6AF78"></polygon><path style="fill:#1B85D9" d="M458.286,390.843l-109.229-25.701c-1.65-0.388-3.167-1.047-4.587-1.846l-88.469,51.607L170.982,360.8  c-2.201,2.072-4.933,3.612-8.036,4.343L53.717,390.844c-15.95,3.753-27.222,17.985-27.222,34.37v69.134  c0,9.751,7.904,17.654,17.654,17.654h423.702c9.751,0,17.654-7.904,17.654-17.654v-69.134  C485.507,408.828,474.235,394.595,458.286,390.843z" data-original="#EFF2FA" class="" data-old_color="#EFF2FA"></path><path style="fill:#D7D7D7" d="M176.558,300.15v65.193c100.078,36.057,158.888-54.185,158.888-54.185v-11.009H176.558V300.15z" data-original="#D29B6E" class="" data-old_color="#D29B6E"></path><path style="fill:#EDEDED" d="M141.249,97.127l7.692,169.228c0.718,15.809,8.47,30.47,21.13,39.965l36.498,27.374  c9.168,6.875,20.318,10.593,31.778,10.593h35.309c11.46,0,22.61-3.717,31.778-10.593l36.498-27.374  c12.66-9.496,20.412-24.155,21.13-39.965l7.692-169.228C370.753,97.127,141.249,97.127,141.249,97.127z" data-original="#F0C087" class="" data-old_color="#F0C087"></path><path style="fill:#CDCDCD" d="M229.521,132.435c35.309,0,88.271-8.827,100.833-35.309H141.249l7.692,169.228  c0.718,15.809,8.47,30.469,21.131,39.965l36.498,27.374c9.168,6.875,20.318,10.593,31.778,10.593h17.654  c-17.654,0-52.963-35.309-52.963-79.444c0-21.586,0-79.444,0-105.926C203.039,150.089,211.866,132.435,229.521,132.435z" data-original="#E6AF78" class="" data-old_color="#E6AF78"></path><g>
 	<path style="fill:#1A7DCB" d="M91.3,454.714l-57.199-51.382c-4.793,6.069-7.603,13.706-7.603,21.882v69.134   c0,9.751,7.904,17.654,17.654,17.654h61.79v-24.454C105.941,475.021,100.618,463.084,91.3,454.714z" data-original="#E4EAF6" class="active-path" data-old_color="#E4EAF6"></path>
 	<path style="fill:#1A7DCB" d="M420.705,454.714l57.199-51.382c4.793,6.069,7.603,13.706,7.603,21.882v69.134   c0,9.751-7.904,17.654-17.654,17.654h-61.79v-24.454C406.063,475.021,411.386,463.084,420.705,454.714z" data-original="#E4EAF6" class="active-path" data-old_color="#E4EAF6"></path>
 </g><polygon style="fill:#5B5D6E;" points="278.07,512.001 233.934,512.001 239.451,432.556 272.553,432.556 " data-original="#5B5D6E" class=""></polygon><path style="fill:#515262;" d="M278.07,414.902h-44.136v16.613c0,5.451,4.418,9.869,9.869,9.869H268.2  c5.451,0,9.869-4.418,9.869-9.869v-16.613H278.07z" data-original="#515262" class=""></path><g>
 	<path style="fill:#1A7DCB" d="M175.319,342.287l80.684,72.615c0,0-22.596,11.407-50.48,34.398   c-5.752,4.742-14.453,2.821-17.538-3.966l-37.907-83.394l11.992-17.987C165.054,339.473,171.318,338.687,175.319,342.287z" data-original="#E4EAF6" class="active-path" data-old_color="#E4EAF6"></path>
 	<path style="fill:#1A7DCB" d="M336.686,342.287l-80.684,72.615c0,0,22.596,11.407,50.48,34.398   c5.752,4.742,14.453,2.821,17.538-3.966l37.907-83.394l-11.992-17.987C346.95,339.473,340.686,338.687,336.686,342.287z" data-original="#E4EAF6" class="active-path" data-old_color="#E4EAF6"></path>
 </g><path style="fill:#785550;" d="M309.516,38.647l8.275,58.48c37.775,7.555,43.219,66.837,44.003,83.769  c0.142,3.073,1.123,6.04,2.79,8.625l14.413,22.358c0,0-4.933-36.964,17.654-61.79C396.652,150.089,404.408,3.338,309.516,38.647z" data-original="#785550" class=""></path><path style="fill:#EDEDED" d="M387.851,208.115l-9.965,39.861c-1.181,4.725-5.425,8.038-10.296,8.038l0,0  c-5.353,0-9.867-3.985-10.531-9.296l-5.097-40.77c-1.364-10.913,7.144-20.551,18.142-20.551h0.008  C382.008,185.398,390.736,196.575,387.851,208.115z" data-original="#F0C087" class="" data-old_color="#F0C087"></path><path style="fill:#694B4B;" d="M149.709,22.831l13.056,8.919c-59.031,43.584-47.998,118.339-47.998,118.339  c17.654,17.654,17.654,61.79,17.654,61.79l17.654-17.654c0,0-6.813-50.998,26.481-70.617c30.895-18.206,57.928-8.827,85.513-8.827  c73.927,0,94.616-27.861,91.03-61.79c-1.856-17.556-28.698-54.126-97.098-52.963C228.397,0.497,176.558,8.855,149.709,22.831z" data-original="#694B4B"></path><path style="fill:#5A4146;" d="M144.559,107.057c0,0-9.379-36.964,18.206-75.306c-59.031,43.584-47.998,118.339-47.998,118.339  c17.654,17.654,17.654,61.79,17.654,61.79l17.654-17.654c0,0-6.813-50.998,26.481-70.617c30.895-18.206,57.928-8.827,85.513-8.827  c12.023,0,22.5-0.805,31.832-2.185C236.969,114.505,203.408,71.38,144.559,107.057z" data-original="#5A4146" class=""></path><path style="fill:#CDCDCD" d="M124.153,208.115l9.965,39.861c1.181,4.725,5.425,8.038,10.296,8.038l0,0  c5.353,0,9.867-3.985,10.531-9.296l5.097-40.77c1.364-10.913-7.144-20.551-18.142-20.551h-0.008  C129.996,185.398,121.268,196.575,124.153,208.115z" data-original="#E6AF78" class="" data-old_color="#E6AF78"></path><path style="fill:#1A7DCB" d="M370.755,494.346h-61.79c-4.875,0-8.827,3.952-8.827,8.827v8.827h79.444v-8.827  C379.582,498.299,375.629,494.346,370.755,494.346z" data-original="#E4EAF6" class="active-path" data-old_color="#E4EAF6"></path></g> </svg>
--- a/src/assets/custom/CrispyChickenSandwichMeal435X320-V1.png
+++ b/src/assets/custom/CrispyChickenSandwichMeal435X320-V1.png
--- a/src/assets/custom/account.svg
+++ b/src/assets/custom/account.svg
@@ -0,0 +1 @@
 <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m512 256c0-141.488281-114.496094-256-256-256-141.488281 0-256 114.496094-256 256 0 140.234375 113.539062 256 256 256 141.875 0 256-115.121094 256-256zm-256-226c124.617188 0 226 101.382812 226 226 0 45.585938-13.558594 89.402344-38.703125 126.515625-100.96875-108.609375-273.441406-108.804687-374.59375 0-25.144531-37.113281-38.703125-80.929687-38.703125-126.515625 0-124.617188 101.382812-226 226-226zm-168.585938 376.5c89.773438-100.695312 247.421876-100.671875 337.167969 0-90.074219 100.773438-247.054687 100.804688-337.167969 0zm0 0"/><path d="m256 271c49.625 0 90-40.375 90-90v-30c0-49.625-40.375-90-90-90s-90 40.375-90 90v30c0 49.625 40.375 90 90 90zm-60-120c0-33.085938 26.914062-60 60-60s60 26.914062 60 60v30c0 33.085938-26.914062 60-60 60s-60-26.914062-60-60zm0 0"/></svg>
--- a/src/assets/custom/background-2.svg
+++ b/src/assets/custom/background-2.svg
--- a/src/assets/custom/big-bookmark.svg
+++ b/src/assets/custom/big-bookmark.svg
@@ -0,0 +1,39 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 70.015 70.015" style="enable-background:new 0 0 70.015 70.015;" xml:space="preserve">
 <g id="_x37_7_Essential_Icons_3_">
 	<path id="Bookmark" d="M54.008,0h-38c-1.1,0-2,0.9-2,2v66c0,1.8,2.1,2.7,3.4,1.4l17.6-17.6l17.6,17.6c1,1,3.4,0.7,3.4-1.4V2
 		C56.008,0.9,55.108,0,54.008,0z M52.008,63.2l-15.6-15.6c-0.8-0.8-2-0.8-2.8,0l-15.6,15.6V4h34V63.2z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/bookmark.svg
+++ b/src/assets/custom/bookmark.svg
@@ -0,0 +1,45 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="431.972px" height="431.972px" viewBox="0 0 431.972 431.972" style="enable-background:new 0 0 431.972 431.972;"
 	 xml:space="preserve">
 <g>
 	<path d="M393.146,14.279c-3.713-5.333-8.713-9.233-14.989-11.707c-3.997-1.711-8.186-2.568-12.565-2.568V0H66.378
 		c-4.377,0-8.562,0.857-12.56,2.568c-6.28,2.472-11.278,6.377-14.989,11.707c-3.71,5.33-5.568,11.228-5.568,17.701v368.019
 		c0,6.475,1.858,12.371,5.568,17.706c3.711,5.329,8.709,9.233,14.989,11.704c3.994,1.711,8.183,2.566,12.56,2.566
 		c8.949,0,16.844-3.142,23.698-9.418l125.91-121.062l125.91,121.065c6.663,6.081,14.562,9.127,23.695,9.127
 		c4.76,0,8.948-0.756,12.565-2.279c6.276-2.471,11.276-6.375,14.989-11.711c3.71-5.328,5.564-11.225,5.564-17.699V31.98
 		C398.71,25.507,396.852,19.609,393.146,14.279z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/cake
+++ b/src/assets/custom/cake
@@ -0,0 +1,20 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g><path style="fill:#E1DDF6" d="M4.339,234.305h503.322l0,0v225.627c0,28.759-23.309,52.068-52.068,52.068l0,0H4.339l0,0V234.305  L4.339,234.305z" data-original="#E1DDF6" class="" data-old_color="#F0DBC2"/><path id="SVGCleanerId_0" style="fill:#9C9DB9" d="M4.339,286.373h425.22c14.379,0,26.034,11.654,26.034,26.034v121.492  c0,14.379-11.655,26.034-26.034,26.034H4.339l0,0V286.373L4.339,286.373z" data-original="#9C9DB9" class="" data-old_color="#F2B9B8"/><g>
 	<path id="SVGCleanerId_0_1_" style="fill:#9C9DB9" d="M4.339,286.373h425.22c14.379,0,26.034,11.654,26.034,26.034v121.492   c0,14.379-11.655,26.034-26.034,26.034H4.339l0,0V286.373L4.339,286.373z" data-original="#9C9DB9" class="" data-old_color="#F2B9B8"/>
 </g><path style="fill:#534870" d="M4.339,234.305L308.068,52.068l0,0c103.32,0.017,189.7,78.562,199.515,181.413l0.078,0.824H4.339z" data-original="#534870" class="" data-old_color="#F29C9B"/><circle style="fill:#F0614A;" cx="403.525" cy="95.458" r="52.068" data-original="#F0614A" class=""/><path style="fill:#EA5242;" d="M429.438,50.332c-1.25,38.704-32.334,69.788-71.038,71.038  c14.267,24.967,46.071,33.644,71.038,19.387c24.966-14.267,33.644-46.071,19.387-71.038  C444.208,61.64,437.517,54.949,429.438,50.332z" data-original="#EA5242" class=""/><g>
 	<path style="fill:#F0A64A" d="M412.203,78.102h-17.356C394.9,34.99,429.837,0.052,472.949,0v17.356   C439.418,17.391,412.238,44.57,412.203,78.102z" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="303.725" y="81.39" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 603.8752 -50.5331)" style="fill:#F0A64A" width="17.356" height="36.82" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="198.557" y="143.181" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 477.7672 105.8207)" style="fill:#F0A64A" width="36.82" height="17.356" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="242.982" y="168.176" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 561.5469 140.5714)" style="fill:#F0A64A" width="17.356" height="36.82" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="276.641" y="143.208" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 611.083 50.6533)" style="fill:#F0A64A" width="36.82" height="17.356" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="424.161" y="177.894" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 887.4422 5.5531)" style="fill:#F0A64A" width="36.82" height="17.356" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="328.709" y="177.901" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 724.4998 73.06)" style="fill:#F0A64A" width="36.82" height="17.356" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 	
 		<rect x="137.792" y="177.937" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 398.6099 208.121)" style="fill:#F0A64A" width="36.82" height="17.356" data-original="#F0A64A" class="active-path" data-old_color="#965735"/>
 </g><path style="fill:#E1DDF6" d="M322.681,286.373h106.878c14.379,0,26.034,11.654,26.034,26.034v121.492  c0,14.379-11.655,26.034-26.034,26.034H121.717L61.431,512h394.162c28.759,0,52.068-23.309,52.068-52.068l0,0V234.305H382.976  L322.681,286.373z" data-original="#E1DDF6" class="" data-old_color="#EBD3B7"/><path style="fill:#9C9DB9" d="M429.559,459.932c14.379,0,26.034-11.654,26.034-26.034V312.407  c0-14.379-11.655-26.034-26.034-26.034H322.681L121.717,459.932H429.559z" data-original="#9C9DB9" class="" data-old_color="#F2AEAC"/><rect x="4.339" y="364.475" style="fill:#E1DDF6" width="451.254" height="17.356" data-original="#E1DDF6" class="" data-old_color="#F28685"/></g></g> </svg>
--- a/src/assets/custom/compass.svg
+++ b/src/assets/custom/compass.svg
@@ -0,0 +1,39 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 490.735 490.735" style="enable-background:new 0 0 490.735 490.735;" xml:space="preserve">
 <g>
 	<path d="M254.464,470.039l-59.5-174.2l-174.3-59.6c-26.7-9.1-27.8-46.4-1.7-57.1l429.5-176.7c25.1-10.3,50.2,14.8,39.9,39.9
 		l-176.8,429.4C300.864,497.839,263.564,496.639,254.464,470.039z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/cook.svg
+++ b/src/assets/custom/cook.svg
@@ -0,0 +1,49 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="45.943px" height="45.943px" viewBox="0 0 45.943 45.943" style="enable-background:new 0 0 45.943 45.943;"
 	 xml:space="preserve">
 <g>
 	<g>
 		<path d="M26.089,12.498c0.211-0.447,0.33-0.952,0.33-1.479c0-1.904-1.543-3.45-3.447-3.45c-1.904,0-3.448,1.542-3.448,3.446
 			c0,0.527,0.118,1.037,0.33,1.483C11.152,13.942,4.461,21.33,4.089,30.362h37.765C41.482,21.33,34.791,13.941,26.089,12.498z
 			 M7.953,29.063c-0.586,0-1.062-0.476-1.062-1.062s0.475-1.062,1.062-1.062s1.062,0.474,1.062,1.062
 			C9.014,28.588,8.54,29.063,7.953,29.063z M19.776,15.971c-0.073,0.021-7.329,2.011-10.094,9.48
 			c-0.15,0.402-0.532,0.651-0.937,0.651c-0.116,0-0.233-0.021-0.347-0.063c-0.518-0.191-0.782-0.767-0.59-1.283
 			c3.137-8.47,11.127-10.629,11.465-10.717c0.534-0.142,1.08,0.182,1.217,0.716C20.629,15.289,20.309,15.833,19.776,15.971z"/>
 		<path d="M42.947,32.354H2.996C1.341,32.354,0,33.711,0,35.364c0,1.654,1.341,3.011,2.996,3.011h39.951
 			c1.654,0,2.996-1.355,2.996-3.011S44.602,32.354,42.947,32.354z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/eye.svg
+++ b/src/assets/custom/eye.svg
@@ -0,0 +1,62 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="511.626px" height="511.627px" viewBox="0 0 511.626 511.627" style="enable-background:new 0 0 511.626 511.627;"
 	 xml:space="preserve">
 <g>
 	<g>
 		<path d="M361.161,291.652c15.037-21.796,22.56-45.922,22.56-72.375c0-7.422-0.76-15.417-2.286-23.984l-79.938,143.321
 			C326.235,329.101,346.125,313.438,361.161,291.652z"/>
 		<path d="M372.872,94.221c0.191-0.378,0.28-1.235,0.28-2.568c0-3.237-1.522-5.802-4.571-7.715c-0.568-0.38-2.423-1.475-5.568-3.287
 			c-3.138-1.805-6.14-3.567-8.989-5.282c-2.854-1.713-5.989-3.472-9.422-5.28c-3.426-1.809-6.375-3.284-8.846-4.427
 			c-2.479-1.141-4.189-1.713-5.141-1.713c-3.426,0-6.092,1.525-7.994,4.569l-15.413,27.696c-17.316-3.234-34.451-4.854-51.391-4.854
 			c-51.201,0-98.404,12.946-141.613,38.831C70.998,156.08,34.836,191.385,5.711,236.114C1.903,242.019,0,248.586,0,255.819
 			c0,7.231,1.903,13.801,5.711,19.698c16.748,26.073,36.592,49.396,59.528,69.949c22.936,20.561,48.011,37.018,75.229,49.396
 			c-8.375,14.273-12.562,22.556-12.562,24.842c0,3.425,1.524,6.088,4.57,7.99c23.219,13.329,35.97,19.985,38.256,19.985
 			c3.422,0,6.089-1.529,7.992-4.575l13.99-25.406c20.177-35.967,50.248-89.931,90.222-161.878
 			C322.908,183.871,352.886,130.005,372.872,94.221z M158.456,362.885C108.97,340.616,68.33,304.93,36.547,255.822
 			c28.931-44.921,65.19-78.518,108.777-100.783c-11.61,19.792-17.417,41.206-17.417,64.237c0,20.365,4.661,39.68,13.99,57.955
 			c9.327,18.274,22.27,33.4,38.83,45.392L158.456,362.885z M265.525,155.887c-2.662,2.667-5.906,3.999-9.712,3.999
 			c-16.368,0-30.361,5.808-41.971,17.416c-11.613,11.615-17.416,25.603-17.416,41.971c0,3.811-1.336,7.044-3.999,9.71
 			c-2.668,2.667-5.902,3.999-9.707,3.999c-3.809,0-7.045-1.334-9.71-3.999c-2.667-2.666-3.999-5.903-3.999-9.71
 			c0-23.79,8.52-44.206,25.553-61.242c17.034-17.034,37.447-25.553,61.241-25.553c3.806,0,7.043,1.336,9.713,3.999
 			c2.662,2.664,3.996,5.901,3.996,9.707C269.515,149.992,268.181,153.228,265.525,155.887z"/>
 		<path d="M505.916,236.114c-10.853-18.08-24.603-35.594-41.255-52.534c-16.646-16.939-34.022-31.496-52.105-43.68l-17.987,31.977
 			c31.785,21.888,58.625,49.87,80.51,83.939c-23.024,35.782-51.723,65-86.07,87.648c-34.358,22.661-71.712,35.693-112.065,39.115
 			l-21.129,37.688c42.257,0,82.18-9.038,119.769-27.121c37.59-18.076,70.668-43.488,99.216-76.225
 			c13.322-15.421,23.695-29.219,31.121-41.401c3.806-6.476,5.708-13.046,5.708-19.702
 			C511.626,249.157,509.724,242.59,505.916,236.114z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/food
+++ b/src/assets/custom/food
@@ -0,0 +1,2 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 505.304 505.304" style="enable-background:new 0 0 505.304 505.304;" xml:space="preserve" width="512px" height="512px" class=""><g><path style="fill:#E1DDF6" d="M252.849,0.59C113.822,0.59,0.788,113.624,0.788,252.651S113.822,504.714,252.85,504.714  S504.911,391.68,504.911,252.651C505.305,113.624,392.271,0.59,252.849,0.59z M252.849,347.174  c-52.382,0-94.523-42.142-94.523-94.523s42.142-94.523,94.523-94.523s94.523,42.142,94.523,94.523  C347.766,305.034,305.231,347.174,252.849,347.174z" data-original="#E89C25" class="" data-old_color="#E89C25"/><path style="fill:#9C9DB9" d="M276.874,488.96c-143.36,0-259.545-116.185-259.545-259.545c0-44.505,11.028-86.252,30.72-122.486  C18.511,147.888,1.181,198.3,1.181,252.651c0,139.028,113.034,252.062,252.062,252.062c54.745,0,105.157-17.329,146.117-46.868  C362.732,477.538,320.985,488.96,276.874,488.96z" data-original="#CC8921" class="" data-old_color="#CC8921"/><path style="fill:#9C9DB9" d="M252.849,138.436c-63.015,0-114.215,51.2-114.215,114.215s51.2,114.215,114.215,114.215  s114.215-51.2,114.215-114.215S316.258,138.436,252.849,138.436z M252.849,347.174c-52.382,0-94.523-42.142-94.523-94.523  s42.142-94.523,94.523-94.523s94.523,42.142,94.523,94.523C347.766,305.034,305.231,347.174,252.849,347.174z" data-original="#D69022" class="" data-old_color="#D69022"/><path style="fill:#534870" d="M503.335,283.766c1.182-10.24,1.969-20.48,1.969-30.72c0-40.566-9.452-78.769-26.782-112.64  C437.169,57.697,351.705,0.984,253.243,0.984C114.215,0.984,1.182,114.017,1.182,253.046l0.394,15.36  c10.634-0.394,21.662-1.182,31.902-3.151c70.892-12.997,77.588-33.477,133.12-50.018c14.572-33.083,48.049-56.32,86.646-56.32  c52.382,0,94.523,42.142,94.523,94.523v2.363C391.089,280.221,487.975,283.372,503.335,283.766z" data-original="#F8BEB6" class="" data-old_color="#F8BEB6"/><path style="fill:#26A6D1;" d="M105.551,150.645l-30.326,8.271c-5.514,1.575-8.665,7.877-7.089,14.178  c1.575,6.302,7.483,10.24,12.997,8.665l30.326-8.271c5.514-1.575,8.665-7.877,7.089-14.178  C116.972,153.008,111.065,149.07,105.551,150.645z M434.018,190.424c0-7.089-5.12-12.603-11.815-12.603s-11.815,5.514-11.815,12.603  v29.932c0,7.089,5.12,12.603,11.815,12.603s11.815-5.514,11.815-12.603V190.424z" data-original="#26A6D1"/><path style="fill:#53BCA9;" d="M184.714,65.181c-5.12-3.151-11.422-1.575-14.178,3.545l-14.572,28.751  c-2.757,5.12-0.788,12.209,4.332,15.36s11.422,1.575,14.178-3.545l14.572-28.751C191.409,75.421,189.834,68.725,184.714,65.181z" data-original="#53BCA9"/><path style="fill:#E2574C;" d="M356.825,121.501l28.751-16.542c5.12-3.151,12.209-1.182,15.36,4.332  c3.151,5.514,1.182,12.209-3.938,15.36l-28.751,16.542c-5.12,3.151-12.209,1.182-15.36-4.332  C349.735,131.348,351.705,124.257,356.825,121.501z" data-original="#E2574C"/><path style="fill:#FFFFFF;" d="M288.689,89.993l-26.782-16.935c-4.726-3.151-6.695-9.846-3.938-15.36  c2.757-5.514,9.058-7.089,14.178-3.938l26.782,16.935c4.726,3.151,6.695,9.846,3.938,15.36  C300.111,91.174,293.809,92.75,288.689,89.993z" data-original="#FFFFFF" class=""/><path style="fill:#534870" d="M366.671,263.68c0.394-3.545,0.394-7.089,0.394-11.028c0-63.015-51.2-114.215-114.215-114.215  c-52.775,0-97.28,35.84-110.277,84.677c7.089-2.757,14.572-5.514,23.631-8.271c14.572-33.083,48.049-56.32,86.646-56.32  c52.382,0,94.523,42.142,94.523,94.523v2.363C353.28,258.165,359.582,261.316,366.671,263.68z M1.575,268.012l18.117-1.182  c-1.969-12.209-2.757-24.812-2.757-37.809c0-44.505,11.028-86.252,30.72-122.486c-7.089,10.24-13.785,20.874-19.298,31.902  l-0.394,1.182l-3.545,7.483l-0.788,1.575c-3.545,7.483-6.695,15.36-9.452,23.237l-1.182,3.545l-1.969,5.908  c-0.394,1.575-0.788,3.151-1.575,5.12l-1.575,5.513l-1.575,6.302c-0.394,1.575-0.788,3.151-1.182,4.332l-1.969,10.634  c-0.394,1.182-0.394,2.757-0.394,3.938c-0.394,2.757-0.788,5.12-0.788,7.877l-0.394,4.332c-0.394,2.757-0.394,5.514-0.788,7.877  c0,1.182,0,2.363-0.394,3.938L0,253.046c0,3.545,0,6.695,0.394,10.24C1.182,264.467,1.575,266.437,1.575,268.012z" data-original="#DAA7A0" class="active-path" data-old_color="#DAA7A0"/></g> </svg>
--- a/src/assets/custom/food
+++ b/src/assets/custom/food
@@ -0,0 +1,22 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve" width="512px" height="512px" class=""><g><g><g>
 	<path style="fill:#534870" d="M46.5,40.153h-44c-1.375,0-2.5-1.125-2.5-2.5v0c0-1.375,1.125-2.5,2.5-2.5h44   c1.375,0,2.5,1.125,2.5,2.5v0C49,39.028,47.875,40.153,46.5,40.153z" data-original="#534870" class="" data-old_color="#6A3311"/>
 	<path style="fill:#6D5D96" d="M46.5,36.153h-44c-1.375,0-2.5-1.125-2.5-2.5v0c0-1.375,1.125-2.5,2.5-2.5h44   c1.375,0,2.5,1.125,2.5,2.5v0C49,35.028,47.875,36.153,46.5,36.153z" data-original="#6D5D96" class="" data-old_color="#A8431A"/>
 	<path style="fill:#ED3F32;" d="M6.5,29.153c-2.75,0-2.384-1.008-2.5-2c-2.642,0.501-4,2.004-4,3.5c0,1.933,3.134,3.5,7,3.5   s7-1.567,7-3.5c0-0.538-0.25-1.045-0.683-1.5H6.5z" data-original="#ED3F32" class=""/>
 	<path style="fill:#F9EA80;" d="M13.298,29.153c0.437,0.456,0.702,0.961,0.702,1.5c0,0.816-0.563,1.565-1.5,2.16   c1.282,0.815,3.266,1.34,5.5,1.34c3.866,0,7-1.567,7-3.5c0-0.538-0.25-1.045-0.683-1.5H13.298z" data-original="#F9EA80" class=""/>
 	<rect x="3" y="23.153" style="fill:#9C9DB9" width="42" height="6" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<polygon style="fill:#E1DDF6" points="45,23.153 3,23.153 24,2.153  " data-original="#E1DDF6" class="active-path" data-old_color="#FDE3AA"/>
 	<path style="fill:#F9EA80;" d="M45,28.692v0.46h-9.207c-0.117,0.056-0.226,0.114-0.332,0.174C35.799,29.736,36,30.181,36,30.653   c0,0.712-0.428,1.374-1.159,1.927c1.184,0.937,3.498,1.573,6.159,1.573c3.866,0,7-1.343,7-3C48,30.134,46.812,29.235,45,28.692z" data-original="#F9EA80" class=""/>
 	<path style="fill:#ED3F32;" d="M24.305,29.153c0.437,0.455,0.695,0.961,0.695,1.5c0,0.658-0.369,1.27-1,1.796   c1.223,1.019,3.449,1.704,6,1.704c3.866,0,7-1.567,7-3.5c0-0.538-0.25-1.045-0.683-1.5H24.305z" data-original="#ED3F32" class=""/>
 	<circle style="fill:#9C9DB9" cx="34" cy="19.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="23" cy="10.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="14" cy="19.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="27" cy="16.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="21" cy="17.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<rect x="1.224" y="40.153" style="fill:#E1DDF6" width="45.776" height="6.695" data-original="#E1DDF6" class="active-path" data-old_color="#FDE3AA"/>
 	<circle style="fill:#9C9DB9" cx="31" cy="42.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="39" cy="44.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="7" cy="44.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="24" cy="44.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 	<circle style="fill:#9C9DB9" cx="15" cy="42.153" r="1" data-original="#9C9DB9" class="" data-old_color="#D28F1B"/>
 </g></g></g> </svg>
--- a/src/assets/custom/house-outline.svg
+++ b/src/assets/custom/house-outline.svg
@@ -0,0 +1,50 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="611.997px" height="611.998px" viewBox="0 0 611.997 611.998" style="enable-background:new 0 0 611.997 611.998;"
 	 xml:space="preserve">
 <g>
 	<g>
 		<path d="M511.114,300.251c-9.94,0-17.638,7.663-17.638,17.651v241.105H368.401v-98.453c0-9.236-7.697-17.31-17.002-17.31h-90.435
 			c-9.948,0-17.96,8.073-17.96,17.31v98.453h-124.76v-233.1c0-9.306-7.69-17.036-17.638-17.036c-9.298,0-16.995,7.73-16.995,17.036
 			v250.752c0,9.305,7.697,17.036,16.995,17.036h160.358c9.298,0,16.995-7.731,16.995-17.036v-98.454h55.801v98.454
 			c0,9.305,7.697,17.036,17.639,17.036h159.715c9.299,0,16.995-7.731,16.995-17.036V317.903
 			C528.109,307.915,520.413,300.251,511.114,300.251z"/>
 		<path d="M607.003,314.003L467.819,174.225V78.919c0-9.921-8.019-17.583-17.96-17.583c-9.305,0-17.001,7.663-17.001,17.583v60.345
 			L318.046,23.774c-3.518-3.558-7.697-5.474-11.864-5.474c-4.81,0-8.983,1.984-12.507,5.474L5.361,312.087
 			c-6.917,6.91-7.375,17.994,0,24.357c6.411,7.389,17.454,6.91,24.371,0l276.45-275.793l275.807,278.393
 			c2.873,2.874,7.054,4.516,12.507,4.516c4.81,0,8.976-1.642,12.507-4.516C613.42,332.613,613.899,320.982,607.003,314.003z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/menu.svg
+++ b/src/assets/custom/menu.svg
@@ -0,0 +1,53 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 <g>
 	<g>
 		<path d="M491.318,235.318H20.682C9.26,235.318,0,244.577,0,256s9.26,20.682,20.682,20.682h470.636
 			c11.423,0,20.682-9.259,20.682-20.682C512,244.578,502.741,235.318,491.318,235.318z"/>
 	</g>
 </g>
 <g>
 	<g>
 		<path d="M491.318,78.439H20.682C9.26,78.439,0,87.699,0,99.121c0,11.422,9.26,20.682,20.682,20.682h470.636
 			c11.423,0,20.682-9.26,20.682-20.682C512,87.699,502.741,78.439,491.318,78.439z"/>
 	</g>
 </g>
 <g>
 	<g>
 		<path d="M491.318,392.197H20.682C9.26,392.197,0,401.456,0,412.879s9.26,20.682,20.682,20.682h470.636
 			c11.423,0,20.682-9.259,20.682-20.682S502.741,392.197,491.318,392.197z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/percentage.svg
+++ b/src/assets/custom/percentage.svg
@@ -0,0 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 488 488" style="enable-background:new 0 0 488 488;" xml:space="preserve">
 <g>
 	<g>
 		<path d="M477,271l-7.4-10.1c-8-11-8.2-25.9-0.3-37.1l7.2-10.2c11-15.6,5.9-37.3-11-46.4l-11-5.9c-12-6.4-18.6-19.8-16.3-33.3
 			l2.1-12.3c3.2-18.8-10.9-36.2-30-37l-12.5-0.5c-13.6-0.6-25.4-9.8-29.2-22.9l-3.5-12C359.8,24.9,339.6,15.4,322,23l-11.5,4.9
 			c-12.5,5.4-27.1,2.2-36.2-8l-8.3-9.3C253.3-3.6,231-3.5,218.4,11l-8.2,9.4c-9,10.3-23.5,13.7-36.1,8.5l-11.6-4.8
 			c-17.7-7.3-37.7,2.6-42.8,21l-3.3,12.1c-3.6,13.2-15.2,22.6-28.8,23.3l-12.5,0.7C56,82.3,42.2,99.9,45.7,118.7L48,131
 			c2.5,13.4-3.9,26.9-15.8,33.5l-10.9,6.1c-16.7,9.3-21.5,31.1-10.2,46.5l7.4,10.1c8,11,8.2,25.9,0.3,37.1l-7.2,10.2
 			c-11,15.6-5.9,37.3,11,46.4l11,5.9c12,6.4,18.6,19.8,16.3,33.3l-2.1,12.3c-3.2,18.8,10.9,36.2,30,37l12.5,0.5
 			c13.6,0.6,25.4,9.8,29.2,22.9l3.5,12c5.3,18.4,25.5,27.9,43.1,20.3l11.5-4.9c12.5-5.4,27.1-2.2,36.2,8l8.3,9.3
 			c12.8,14.2,35.1,14.1,47.6-0.4l8.2-9.4c9-10.3,23.5-13.7,36.1-8.5l11.6,4.8c17.7,7.3,37.7-2.6,42.8-21l3.3-12.1
 			c3.6-13.2,15.2-22.6,28.8-23.3l12.5-0.7c19.1-1.1,32.9-18.7,29.4-37.5l-2.3-12.3c-2.5-13.4,3.9-26.9,15.8-33.5l10.9-6.1
 			C483.5,308.3,488.3,286.5,477,271z"/>
 	</g>
 </g>
 </svg>
--- a/src/assets/custom/pizza.svg
+++ b/src/assets/custom/pizza.svg
@@ -0,0 +1,38 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
 	<path style="fill:#534870" d="M31.94,0.817L31.94,0.817c1.214,0.732,2.663,0.985,4.057,0.707l0,0   c2.073-0.414,4.206,0.353,5.525,1.986l0,0c0.887,1.098,2.161,1.825,3.567,2.034l0,0c2.091,0.311,3.83,1.753,4.504,3.733v0   c0.453,1.332,1.399,2.445,2.648,3.117l0,0c1.857,0.999,2.992,2.941,2.94,5.029v0c-0.035,1.404,0.468,2.77,1.409,3.823l0,0   c1.399,1.566,1.794,3.775,1.021,5.719v0c-0.52,1.308-0.52,2.761,0,4.069v0c0.773,1.945,0.378,4.153-1.021,5.719l0,0   c-0.941,1.053-1.444,2.419-1.409,3.823v0c0.053,2.088-1.082,4.03-2.94,5.029l0,0c-1.249,0.672-2.195,1.785-2.648,3.117v0   c-0.674,1.98-2.413,3.421-4.504,3.733h0c-1.406,0.209-2.681,0.936-3.567,2.034l0,0c-1.319,1.633-3.452,2.4-5.525,1.986l0,0   c-1.394-0.278-2.843-0.026-4.057,0.707l0,0c-1.805,1.089-4.075,1.089-5.88,0l0,0c-1.214-0.732-2.663-0.985-4.057-0.707l0,0   c-2.073,0.414-4.206-0.353-5.525-1.986l0,0c-0.887-1.098-2.161-1.825-3.567-2.034h0c-2.091-0.311-3.83-1.753-4.504-3.733l0,0   c-0.453-1.332-1.399-2.445-2.648-3.117l0,0c-1.857-0.999-2.992-2.941-2.94-5.029l0,0c0.035-1.404-0.468-2.77-1.409-3.823l0,0   c-1.399-1.566-1.794-3.775-1.021-5.719l0,0c0.52-1.308,0.52-2.761,0-4.069l0,0c-0.773-1.945-0.378-4.153,1.021-5.719l0,0   c0.941-1.053,1.444-2.419,1.409-3.823l0,0c-0.053-2.088,1.082-4.03,2.94-5.029l0,0c1.249-0.672,2.195-1.785,2.648-3.117l0,0   c0.674-1.98,2.413-3.421,4.504-3.733l0,0c1.406-0.209,2.681-0.936,3.567-2.034l0,0c1.319-1.633,3.452-2.4,5.525-1.986l0,0   c1.394,0.278,2.843,0.026,4.057-0.707l0,0C27.865-0.272,30.135-0.272,31.94,0.817z" data-original="#FED070" class="" data-old_color="#FED070"/>
 	<circle style="fill:#E1DDF6" cx="29" cy="29" r="24" data-original="#FAF8D2" class="" data-old_color="#FAF8D2"/>
 	<circle style="fill:#6D5D96" cx="21" cy="15" r="5" data-original="#CD6E61" class="" data-old_color="#CD6E61"/>
 	<circle style="fill:#6D5D96" cx="14" cy="32" r="5" data-original="#CD6E61" class="" data-old_color="#CD6E61"/>
 	<circle style="fill:#6D5D96" cx="39" cy="20" r="5" data-original="#CD6E61" class="" data-old_color="#CD6E61"/>
 	<circle style="fill:#6D5D96" cx="26" cy="44" r="5" data-original="#CD6E61" class="" data-old_color="#CD6E61"/>
 	<circle style="fill:#6D5D96" cx="41" cy="37" r="5" data-original="#CD6E61" class="" data-old_color="#CD6E61"/>
 	<circle style="fill:#6D5D96" cx="27.001" cy="27.999" r="5" data-original="#CD6E61" class="" data-old_color="#CD6E61"/>
 	<g>
 		<circle style="fill:#534870" cx="20" cy="13" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="20" cy="17" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="23" cy="15" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="13" cy="30" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="13" cy="34" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="16" cy="32" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="38" cy="18" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="38" cy="22" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="41" cy="20" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="24.28" cy="42.572" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="25.889" cy="46.233" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="27.831" cy="43.195" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="42.09" cy="35.048" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="38.784" cy="37.299" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="42.126" cy="38.653" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="26.763" cy="25.775" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="25.366" cy="29.523" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 		<circle style="fill:#534870" cx="28.875" cy="28.697" r="1" data-original="#D79C8C" class="active-path" data-old_color="#D79C8C"/>
 	</g>
 	<path style="fill:#88C057;" d="M29,17c-0.552,0-1-0.447-1-1s0.448-1,1-1c1.654,0,3-1.346,3-3c0-0.553,0.448-1,1-1s1,0.447,1,1   C34,14.757,31.757,17,29,17z" data-original="#88C057"/>
 	<path style="fill:#ED3F32;" d="M16.74,24.735c-2.095,0-4.051-1.326-4.749-3.419c-0.175-0.524,0.108-1.091,0.632-1.265   c0.525-0.175,1.09,0.108,1.265,0.632c0.522,1.569,2.227,2.421,3.795,1.897c0.525-0.171,1.09,0.109,1.265,0.634   c0.174,0.523-0.109,1.09-0.633,1.265C17.793,24.653,17.263,24.735,16.74,24.735z" data-original="#ED3F32" class=""/>
 	<path style="fill:#88C057;" d="M37.739,45.999c-2.094,0-4.049-1.326-4.747-3.419c-0.175-0.524,0.108-1.091,0.632-1.265   c0.526-0.176,1.091,0.108,1.265,0.632c0.253,0.761,0.788,1.378,1.504,1.735c0.716,0.358,1.529,0.415,2.291,0.162   c0.525-0.176,1.09,0.108,1.265,0.632c0.175,0.524-0.108,1.091-0.632,1.265C38.793,45.916,38.262,45.999,37.739,45.999z" data-original="#88C057"/>
 	<path style="fill:#88C057;" d="M45.502,30.002c-0.843,0-1.677-0.216-2.434-0.639c-0.482-0.27-0.655-0.879-0.385-1.361   c0.27-0.481,0.877-0.654,1.361-0.385c0.701,0.393,1.511,0.487,2.281,0.27c0.771-0.219,1.411-0.725,1.802-1.425   c0.269-0.481,0.877-0.655,1.361-0.385c0.482,0.27,0.655,0.879,0.385,1.361c-0.652,1.166-1.719,2.009-3.003,2.372   C46.418,29.938,45.959,30.002,45.502,30.002z" data-original="#88C057"/>
 	<path style="fill:#ED3F32;" d="M29.502,38.002c-0.843,0-1.677-0.216-2.434-0.639c-0.482-0.27-0.655-0.879-0.385-1.361   c0.27-0.481,0.878-0.654,1.361-0.385c0.701,0.392,1.512,0.487,2.281,0.27c0.771-0.219,1.411-0.725,1.802-1.425   c0.269-0.481,0.877-0.653,1.361-0.385c0.482,0.27,0.655,0.879,0.385,1.361c-0.652,1.166-1.719,2.009-3.003,2.372   C30.418,37.938,29.959,38.002,29.502,38.002z" data-original="#ED3F32" class=""/>
 	<path style="fill:#88C057;" d="M18.619,40.375c-0.396,0-0.77-0.235-0.927-0.625c-0.208-0.512,0.04-1.095,0.551-1.302   c1.533-0.621,2.275-2.374,1.655-3.907c-0.208-0.512,0.04-1.095,0.551-1.302c0.512-0.207,1.095,0.039,1.302,0.552   c1.035,2.555-0.202,5.476-2.757,6.511C18.871,40.352,18.744,40.375,18.619,40.375z" data-original="#88C057"/>
 	<path style="fill:#ED3F32;" d="M35.789,33c-0.473,0-0.894-0.337-0.982-0.819c-0.242-1.314,0.042-2.644,0.8-3.742   c0.758-1.1,1.899-1.838,3.213-2.079c0.546-0.102,1.065,0.261,1.164,0.803c0.1,0.543-0.26,1.064-0.803,1.164   c-0.789,0.146-1.474,0.588-1.928,1.247c-0.455,0.659-0.625,1.457-0.48,2.246c0.1,0.543-0.259,1.064-0.803,1.164   C35.909,32.995,35.848,33,35.789,33z" data-original="#ED3F32" class=""/>
 </g></g> </svg>
--- a/src/assets/custom/placeholder.svg
+++ b/src/assets/custom/placeholder.svg
@@ -0,0 +1,48 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 477 477" style="enable-background:new 0 0 477 477;" xml:space="preserve">
 <g>
 	<g>
 		<path d="M238.4,0C133,0,47.2,85.8,47.2,191.2c0,12,1.1,24.1,3.4,35.9c0.1,0.7,0.5,2.8,1.3,6.4c2.9,12.9,7.2,25.6,12.8,37.7
 			c20.6,48.5,65.9,123,165.3,202.8c2.5,2,5.5,3,8.5,3s6-1,8.5-3c99.3-79.8,144.7-154.3,165.3-202.8c5.6-12.1,9.9-24.7,12.8-37.7
 			c0.8-3.6,1.2-5.7,1.3-6.4c2.2-11.8,3.4-23.9,3.4-35.9C429.6,85.8,343.8,0,238.4,0z M399.6,222.4c0,0.2-0.1,0.4-0.1,0.6
 			c-0.1,0.5-0.4,2-0.9,4.3c0,0.1,0,0.1,0,0.2c-2.5,11.2-6.2,22.1-11.1,32.6c-0.1,0.1-0.1,0.3-0.2,0.4
 			c-18.7,44.3-59.7,111.9-148.9,185.6c-89.2-73.7-130.2-141.3-148.9-185.6c-0.1-0.1-0.1-0.3-0.2-0.4c-4.8-10.4-8.5-21.4-11.1-32.6
 			c0-0.1,0-0.1,0-0.2c-0.6-2.3-0.8-3.8-0.9-4.3c0-0.2-0.1-0.4-0.1-0.7c-2-10.3-3-20.7-3-31.2c0-90.5,73.7-164.2,164.2-164.2
 			s164.2,73.7,164.2,164.2C402.6,201.7,401.6,212.2,399.6,222.4z"/>
 		<path d="M238.4,71.9c-66.9,0-121.4,54.5-121.4,121.4s54.5,121.4,121.4,121.4s121.4-54.5,121.4-121.4S305.3,71.9,238.4,71.9z
 			 M238.4,287.7c-52.1,0-94.4-42.4-94.4-94.4s42.4-94.4,94.4-94.4s94.4,42.4,94.4,94.4S290.5,287.7,238.4,287.7z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/restaurant.svg
+++ b/src/assets/custom/restaurant.svg
@@ -0,0 +1,52 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 489.773 489.773" style="enable-background:new 0 0 489.773 489.773;" xml:space="preserve">
 <g id="XMLID_95_">
 	<path id="XMLID_98_" d="M155.183,305.646c-2.081,0.175-4.157,0.265-6.238,0.265c-5.693,0-11.23-0.826-16.652-2.081L6.834,429.293
 		c-6.158,6.149-6.158,16.137,0,22.287l32.47,32.478c6.158,6.15,16.135,6.15,22.276,0l150.785-150.757l-27.944-30.15L155.183,305.646
 		z"/>
 	<path id="XMLID_97_" d="M485.345,104.649c-5.888-5.885-15.417-5.885-21.304,0l-81.303,81.301c-7.693,7.685-20.154,7.685-27.847,0
 		c-7.659-7.679-7.659-20.13,0-27.807l80.901-80.884c6.112-6.118,6.112-16.036,0-22.168c-6.141-6.11-16.055-6.11-22.167,0
 		l-80.868,80.876c-7.693,7.693-20.14,7.693-27.833,0c-7.677-7.676-7.677-20.136,0-27.806l81.286-81.293
 		c5.904-5.894,5.904-15.441,0-21.343c-5.888-5.895-15.434-5.895-21.338,0l-91.458,91.463
 		c-21.989,22.003-28.935,52.888-21.816,80.991l61.31,61.314c28.101,7.093,59.001,0.144,80.965-21.841l91.471-91.458
 		C491.249,120.1,491.249,110.543,485.345,104.649z"/>
 	<path id="XMLID_96_" d="M41.093,13.791c-3.134-3.135-7.372-4.854-11.724-4.854c-0.926,0-1.857,0.079-2.766,0.231
 		c-5.295,0.896-9.838,4.295-12.172,9.133c-26.79,55.373-15.594,121.631,27.894,165.121l77.801,77.791
 		c7.676,7.685,18.055,11.939,28.819,11.939c1.151,0,2.305-0.048,3.456-0.143l45.171-3.855l196.971,212.489
 		c3.058,3.303,7.342,5.221,11.855,5.31c0.093,0,0.19,0,0.288,0c4.412,0,8.636-1.743,11.771-4.855l33.734-33.741
 		c3.117-3.11,4.859-7.331,4.859-11.73c0-4.398-1.742-8.622-4.846-11.732L41.093,13.791z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/search.svg
+++ b/src/assets/custom/search.svg
@@ -0,0 +1,41 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 451 451" style="enable-background:new 0 0 451 451;" xml:space="preserve">
 <g>
 	<path d="M447.05,428l-109.6-109.6c29.4-33.8,47.2-77.9,47.2-126.1C384.65,86.2,298.35,0,192.35,0C86.25,0,0.05,86.3,0.05,192.3
 		s86.3,192.3,192.3,192.3c48.2,0,92.3-17.8,126.1-47.2L428.05,447c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4
 		C452.25,441.8,452.25,433.2,447.05,428z M26.95,192.3c0-91.2,74.2-165.3,165.3-165.3c91.2,0,165.3,74.2,165.3,165.3
 		s-74.1,165.4-165.3,165.4C101.15,357.7,26.95,283.5,26.95,192.3z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/share.svg
+++ b/src/assets/custom/share.svg
@@ -0,0 +1,76 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 473.932 473.932" style="enable-background:new 0 0 473.932 473.932;" xml:space="preserve">
 <g>
 	<g>
 		<path style="fill:#010002;" d="M385.513,301.214c-27.438,0-51.64,13.072-67.452,33.09l-146.66-75.002
 			c1.92-7.161,3.3-14.56,3.3-22.347c0-8.477-1.639-16.458-3.926-24.224l146.013-74.656c15.725,20.924,40.553,34.6,68.746,34.6
 			c47.758,0,86.391-38.633,86.391-86.348C471.926,38.655,433.292,0,385.535,0c-47.65,0-86.326,38.655-86.326,86.326
 			c0,7.809,1.381,15.229,3.322,22.412L155.892,183.74c-15.833-20.039-40.079-33.154-67.56-33.154
 			c-47.715,0-86.326,38.676-86.326,86.369s38.612,86.348,86.326,86.348c28.236,0,53.043-13.719,68.832-34.664l145.948,74.656
 			c-2.287,7.744-3.947,15.79-3.947,24.289c0,47.693,38.676,86.348,86.326,86.348c47.758,0,86.391-38.655,86.391-86.348
 			C471.904,339.848,433.271,301.214,385.513,301.214z"/>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 	<g>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/shopping-cart.svg
+++ b/src/assets/custom/shopping-cart.svg
@@ -0,0 +1,70 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
 <g>
 	<g>
 		<path d="M214.685,402.828c-24.829,0-45.029,20.2-45.029,45.029c0,24.829,20.2,45.029,45.029,45.029s45.029-20.2,45.029-45.029
 			C259.713,423.028,239.513,402.828,214.685,402.828z M214.685,467.742c-10.966,0-19.887-8.922-19.887-19.887
 			c0-10.966,8.922-19.887,19.887-19.887s19.887,8.922,19.887,19.887C234.572,458.822,225.65,467.742,214.685,467.742z"/>
 	</g>
 </g>
 <g>
 	<g>
 		<path d="M372.63,402.828c-24.829,0-45.029,20.2-45.029,45.029c0,24.829,20.2,45.029,45.029,45.029s45.029-20.2,45.029-45.029
 			C417.658,423.028,397.458,402.828,372.63,402.828z M372.63,467.742c-10.966,0-19.887-8.922-19.887-19.887
 			c0-10.966,8.922-19.887,19.887-19.887c10.966,0,19.887,8.922,19.887,19.887C392.517,458.822,383.595,467.742,372.63,467.742z"/>
 	</g>
 </g>
 <g>
 	<g>
 		<path d="M383.716,165.755H203.567c-6.943,0-12.571,5.628-12.571,12.571c0,6.943,5.629,12.571,12.571,12.571h180.149
 			c6.943,0,12.571-5.628,12.571-12.571C396.287,171.382,390.659,165.755,383.716,165.755z"/>
 	</g>
 </g>
 <g>
 	<g>
 		<path d="M373.911,231.035H213.373c-6.943,0-12.571,5.628-12.571,12.571s5.628,12.571,12.571,12.571h160.537
 			c6.943,0,12.571-5.628,12.571-12.571C386.481,236.664,380.853,231.035,373.911,231.035z"/>
 	</g>
 </g>
 <g>
 	<g>
 		<path d="M506.341,109.744c-4.794-5.884-11.898-9.258-19.489-9.258H95.278L87.37,62.097c-1.651-8.008-7.113-14.732-14.614-17.989
 			l-55.177-23.95c-6.37-2.767-13.773,0.156-16.536,6.524c-2.766,6.37,0.157,13.774,6.524,16.537L62.745,67.17l60.826,295.261
 			c2.396,11.628,12.752,20.068,24.625,20.068h301.166c6.943,0,12.571-5.628,12.571-12.571c0-6.943-5.628-12.571-12.571-12.571
 			H148.197l-7.399-35.916H451.69c11.872,0,22.229-8.44,24.624-20.068l35.163-170.675
 			C513.008,123.266,511.136,115.627,506.341,109.744z M451.69,296.301H135.619l-35.161-170.674l386.393,0.001L451.69,296.301z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/shopping-purse-icon.svg
+++ b/src/assets/custom/shopping-purse-icon.svg
@@ -0,0 +1,48 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="48px" height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
 <g>
 	<g>
 		<g>
 			<path d="M15.733,20.125c1.104,0,2-0.896,2-2v-7.8C17.733,6.838,20.57,4,24.058,4c3.487,0,6.325,2.838,6.325,6.325v7.8
 				c0,1.104,0.896,2,2,2c1.104,0,2-0.896,2-2v-7.8C34.383,4.632,29.751,0,24.058,0c-5.692,0-10.324,4.632-10.324,10.325v7.8
 				C13.733,19.229,14.629,20.125,15.733,20.125z"/>
 			<path d="M47,15.631H36.383v2.494c0,2.206-1.794,4-4,4c-2.205,0-4-1.794-4-4v-2.494h-8.649v2.494c0,2.206-1.794,4-4,4
 				s-4-1.794-4-4v-2.494H1c-0.552,0-0.893,0.435-0.762,0.971L7.235,45.1C7.658,46.702,9.343,48,11,48h26
 				c1.658,0,3.342-1.299,3.767-2.9l6.996-28.498C47.893,16.065,47.553,15.631,47,15.631z"/>
 		</g>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/src/assets/custom/vision.svg
+++ b/src/assets/custom/vision.svg
@@ -0,0 +1,53 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="511.626px" height="511.626px" viewBox="0 0 511.626 511.626" style="enable-background:new 0 0 511.626 511.626;"
 	 xml:space="preserve">
 <g>
 	<path d="M505.918,236.117c-26.651-43.587-62.485-78.609-107.497-105.065c-45.015-26.457-92.549-39.687-142.608-39.687
 		c-50.059,0-97.595,13.225-142.61,39.687C68.187,157.508,32.355,192.53,5.708,236.117C1.903,242.778,0,249.345,0,255.818
 		c0,6.473,1.903,13.04,5.708,19.699c26.647,43.589,62.479,78.614,107.495,105.064c45.015,26.46,92.551,39.68,142.61,39.68
 		c50.06,0,97.594-13.176,142.608-39.536c45.012-26.361,80.852-61.432,107.497-105.208c3.806-6.659,5.708-13.223,5.708-19.699
 		C511.626,249.345,509.724,242.778,505.918,236.117z M194.568,158.03c17.034-17.034,37.447-25.554,61.242-25.554
 		c3.805,0,7.043,1.336,9.709,3.999c2.662,2.664,4,5.901,4,9.707c0,3.809-1.338,7.044-3.994,9.704
 		c-2.662,2.667-5.902,3.999-9.708,3.999c-16.368,0-30.362,5.808-41.971,17.416c-11.613,11.615-17.416,25.603-17.416,41.971
 		c0,3.811-1.336,7.044-3.999,9.71c-2.667,2.668-5.901,3.999-9.707,3.999c-3.809,0-7.044-1.334-9.71-3.999
 		c-2.667-2.666-3.999-5.903-3.999-9.71C169.015,195.482,177.535,175.065,194.568,158.03z M379.867,349.04
 		c-38.164,23.12-79.514,34.687-124.054,34.687c-44.539,0-85.889-11.56-124.051-34.687s-69.901-54.2-95.215-93.222
 		c28.931-44.921,65.19-78.518,108.777-100.783c-11.61,19.792-17.417,41.207-17.417,64.236c0,35.216,12.517,65.329,37.544,90.362
 		s55.151,37.544,90.362,37.544c35.214,0,65.329-12.518,90.362-37.544s37.545-55.146,37.545-90.362
 		c0-23.029-5.808-44.447-17.419-64.236c43.585,22.265,79.846,55.865,108.776,100.783C449.767,294.84,418.031,325.913,379.867,349.04
 		z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>