CRM 97%

package-lock.json

@@ -818,6 +818,64 @@
                 "to-fast-properties": "^2.0.0"
             }
         },
+        "@ckeditor/ckeditor5-build-classic": {
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-12.3.1.tgz",
+            "integrity": "sha512-nlE8wRasM3AF2XkXHJuj91cq46ZvmTBfXePCtjogT8s/niYlFma+Lqu7cAUONxRXh11m1IpgC6i+QOGFZH0p8A=="
+        },
+        "@ckeditor/ckeditor5-core": {
+            "version": "12.2.1",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-core/-/ckeditor5-core-12.2.1.tgz",
+            "integrity": "sha512-1z6t56Evo3u/c11t4xSvxGdN/UB+UJ2PxzbiDf7ul0zBo/CE3Q3dYFjVRSKLKePhQOI1wti4sXCeLQaflh76VQ==",
+            "requires": {
+                "@ckeditor/ckeditor5-engine": "^13.2.1",
+                "@ckeditor/ckeditor5-utils": "^13.0.1",
+                "lodash-es": "^4.17.10"
+            }
+        },
+        "@ckeditor/ckeditor5-engine": {
+            "version": "13.2.1",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-engine/-/ckeditor5-engine-13.2.1.tgz",
+            "integrity": "sha512-yGERQGIYZwJtShi+CYuAWV5P1bvLDlMTMjHf+qPKCwXAw9RiWmjuS5MVpeaZRtmAMEGXyol+mf8IvYvXczfo8A==",
+            "requires": {
+                "@ckeditor/ckeditor5-utils": "^13.0.1",
+                "lodash-es": "^4.17.10"
+            }
+        },
+        "@ckeditor/ckeditor5-font": {
+            "version": "11.2.1",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-font/-/ckeditor5-font-11.2.1.tgz",
+            "integrity": "sha512-WllXgqHlI0DW50Cb9/dyhFBED1i3X/vYbOKpPrpChbKCWhdZiwkb/HuthIf0oEzPRfRiSllyx062pb2v2JNaaQ==",
+            "requires": {
+                "@ckeditor/ckeditor5-core": "^12.2.1",
+                "@ckeditor/ckeditor5-ui": "^13.0.2",
+                "@ckeditor/ckeditor5-utils": "^13.0.1"
+            }
+        },
+        "@ckeditor/ckeditor5-ui": {
+            "version": "13.0.2",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-ui/-/ckeditor5-ui-13.0.2.tgz",
+            "integrity": "sha512-A2Ut+W3rHWNUNR1TwjdBQShl7v270hRlcz3Z77ka/0xlhkQ7TIAVlVHu8q89170fFE4Po8cSqGDZVO9YT3W75A==",
+            "requires": {
+                "@ckeditor/ckeditor5-core": "^12.2.1",
+                "@ckeditor/ckeditor5-utils": "^13.0.1",
+                "lodash-es": "^4.17.10"
+            }
+        },
+        "@ckeditor/ckeditor5-utils": {
+            "version": "13.0.1",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-utils/-/ckeditor5-utils-13.0.1.tgz",
+            "integrity": "sha512-u/18fD/lPeoir3R6+chBlm2ZCdvbqXqbx4yelOc4J+wzQUj53n0ZuADZrxXH0lXY/jsU5Lat0wisgmjwOkmGBw==",
+            "requires": {
+                "ckeditor5": "^12.3.1",
+                "lodash-es": "^4.17.10"
+            }
+        },
+        "@ckeditor/ckeditor5-vue": {
+            "version": "1.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-vue/-/ckeditor5-vue-1.0.0-beta.2.tgz",
+            "integrity": "sha512-9qF795EKQZi2VV5zgYjUfAY2L3rr50NaZOAMq2O2sADrWMxUGOb3cUAD6FuV3kboVaKoSmXGcApm7Iy5YTGr3g=="
+        },
         "@fortawesome/fontawesome-free": {
             "version": "5.6.3",
             "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.6.3.tgz",
@@ -2412,6 +2470,11 @@
                 "safe-buffer": "^5.0.1"
             }
         },
+        "ckeditor5": {
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/ckeditor5/-/ckeditor5-12.3.1.tgz",
+            "integrity": "sha512-hXXAMvV8zdRIMsa66rUKlU50+/IC7obQxg/myBe8kkYrnrfthGwWFd3j6qHzlEb48B9g1noZX8oqBF9E6D+N2Q=="
+        },
         "class-utils": {
             "version": "0.3.6",
             "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -3180,8 +3243,7 @@
         "de-indent": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
-            "dev": true
+            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
         },
         "debug": {
             "version": "3.1.0",
@@ -5219,8 +5281,7 @@
         "he": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-            "dev": true
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
         },
         "hex-color-regex": {
             "version": "1.1.0",
@@ -6320,6 +6381,11 @@
             "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
             "dev": true
         },
+        "lodash-es": {
+            "version": "4.17.15",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+            "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+        },
         "lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -10186,6 +10252,11 @@
             "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
             "dev": true
         },
+        "tinymce": {
+            "version": "4.9.5",
+            "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.9.5.tgz",
+            "integrity": "sha512-ID7oGvk7qYjx3rYck4vRkQLEM5jYKIik2JlNwKrUogZ/1c2tXHJ5Y8/Y74/IULyqlxClNdlE4d+YXzUTPvP1og=="
+        },
         "to-arraybuffer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -10692,8 +10763,7 @@
         "vue": {
             "version": "2.6.10",
             "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
-            "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==",
-            "dev": true
+            "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
         },
         "vue-apexcharts": {
             "version": "1.4.0",
@@ -10795,7 +10865,6 @@
             "version": "2.6.10",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
             "integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==",
-            "dev": true,
             "requires": {
                 "de-indent": "^1.0.2",
                 "he": "^1.1.0"
@@ -10807,6 +10876,16 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
+        "vue-tinymce-editor": {
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/vue-tinymce-editor/-/vue-tinymce-editor-1.6.2.tgz",
+            "integrity": "sha1-Pt/HNngv22UV1QznAXIOnsd9+f0=",
+            "requires": {
+                "tinymce": "^4.7.7",
+                "vue": "^2.5.13",
+                "vue-template-compiler": "^2.5.13"
+            }
+        },
         "vuetify": {
             "version": "1.5.14",
             "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.14.tgz",

package.json

@@ -10,6 +10,9 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=webpack.config.js"
     },
     "dependencies": {
+        "@ckeditor/ckeditor5-build-classic": "^12.3.1",
+        "@ckeditor/ckeditor5-font": "^11.2.1",
+        "@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
         "@fortawesome/fontawesome-free": "^5.5.0",
         "ajv": "^6.10.0",
         "apexcharts": "^3.8.2",
@@ -28,6 +31,7 @@
         "vue-chartjs": "^3.4.0",
         "vue-router": "^3.0.2",
         "vue-scroll-reveal": "^1.0.11",
+        "vue-tinymce-editor": "^1.6.2",
         "vuetify": "^1.5.14"
     },
     "devDependencies": {

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=dd71ece093627ceeb8e0",
-    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=ed85fe3b61f308dc2e8c",
-    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=c021095f6e5e00a81073",
-    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=5f408f2fd973ffba7cae",
-    "/js/vue/User/app.js": "/js/vue/User/app.js?id=442c17b05e9f1943a1ed"
+    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=46082928a20a61ffac98",
+    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=2e3732fbd7feea17db64",
+    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=148b27c08322ebf935a0",
+    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=9ef7b1af8b4a64d9d2cb",
+    "/js/vue/User/app.js": "/js/vue/User/app.js?id=ad10046a6197a537f107"
 }

resources/js/Global/components/Body/Backgrounds/Gradient-CSS.vue

@@ -1,27 +1,24 @@
 <template>
     <div>
-        <div class="backgrounds"></div>
+        <div class="backgrounds" :style="'background: linear-gradient(163deg, #'+C1+', #'+C2+', #'+C3+');'"></div>
     </div>
 </template>
 
 <script>
 export default {
     props: {
-        R1: { default: 130 },
-        R2: { default: 64 },
-        G1: { default: 0 },
-        G2: { default: 64 },
-        B1: { default: 250 },
-        B2: { default: 64 },
+        C1: { default: '1C0F41' },
+        C2: { default: 'ee3552' },
+        C3: { default: '0C1630' },
     },
-    
+
 };
 </script>
 
 <style lang="scss" scoped>
 
 .backgrounds {
-    background: linear-gradient(163deg, #246655, #602466, #e3533c);
+    // background: linear-gradient(163deg, #1C0F41, #085156, #0C1630);
     background-size: 600% 600%;
     -webkit-animation: AnimationName 30s ease infinite;
     -moz-animation: AnimationName 30s ease infinite;
@@ -30,6 +27,7 @@ export default {
     min-width: 100%;
     min-height: 100%;
     position:fixed;
+    z-index: -1;
 
 }
 
@@ -48,7 +46,7 @@ export default {
     50%{background-position:64% 100%}
     100%{background-position:37% 0%}
 }
-@keyframes AnimationName { 
+@keyframes AnimationName {
     0%{background-position:37% 0%}
     50%{background-position:64% 100%}
     100%{background-position:37% 0%}

resources/js/Global/scss/Modify.scss

@@ -9,7 +9,6 @@
 //     color:inherit !important;
 // }
 
-
 /* --------------------------------------------------------
                         Navigation :: Bootstrap Tabs
 -------------------------------------------------------- */
@@ -47,14 +46,12 @@
 
 @each $Color,
 $Value in $Colors {
-
     .nav-tabs .nav-link.WM-#{$Color}.active,
     .nav-tabs .nav-link.WM-#{$Color}:hover,
     .nav-tabs .nav-link.WM-#{$Color}:focus {
         border-bottom: 1px solid $Value;
         color: $Value;
     }
-
     .nav-tabs .nav-link.WM-#{$Color}.active .WM-Notification,
     .nav-tabs .nav-link.WM-#{$Color}:hover .WM-Notification,
     .nav-tabs .nav-link.WM-#{$Color}:focus .WM-Notification {
@@ -62,6 +59,7 @@ $Value in $Colors {
     }
 }
 
+
 /* --------------------------------------------------------
                         Vuetify :: Dialog
 -------------------------------------------------------- */
@@ -142,6 +140,11 @@ table.v-table tbody td {
     font-family: "Montserrat-Regular" !important;
 }
 
+.v-input.LTR .v-label {
+    font-size: 14px;
+    top: 10px;
+}
+
 .v-input--selection-controls.v-input .Fa .v-label {
     top: 3px;
 }
@@ -162,9 +165,11 @@ table.v-table tbody td {
     width: 30px;
     height: 30px;
 }
+
 .v-btn.XS .v-icon {
     font-size: 14px;
 }
+
 .v-tooltip .v-btn--outline:hover .v-icon,
 .v-tooltip .v-btn--outline:focus .v-icon {
     color: #fff;
@@ -175,7 +180,6 @@ table.v-table tbody td {
     right: auto !important;
 }
 
-
 .v-card__text {
     padding: 6px 16px;
 }
@@ -196,14 +200,12 @@ $Value in $colors {
         background-color: $Value !important;
         border-color: $Value !important;
     }
-
     .#{$Color}--text {
         color: $Value !important;
         caret-color: $Value !important;
     }
 }
 
-
 @each $Shadow,
 $Value in $Shadows {
     .v-btn.v-btn--floating.#{$Shadow} {
@@ -224,4 +226,4 @@ $Value in $Shadows {
     -webkit-box-shadow: 0 10px 30px 0px $BlackShadow;
     -o-box-shadow: 0 10px 30px 0px $BlackShadow;
     -ms-box-shadow: 0 10px 30px 0px $BlackShadow;
-}
+}

resources/js/Global/scss/SizeAndPositioning.scss

@@ -1,24 +1,31 @@
 .WM-Height-90 {
     height: 90px;
 }
+
 .WM-Height-110 {
     height: 110px;
 }
+
 .WM-Width-220 {
     width: 220px;
 }
+
 .WM-Width-100 {
     width: 100%;
 }
+
 .WM-Absolute {
     position: absolute;
 }
+
 .WM-Relative {
     position: relative;
 }
+
 .WM-Block {
     display: block;
 }
+
 .WM-InlineBlock {
     display: inline-block;
 }
@@ -26,95 +33,135 @@
 .WM-Flex {
     display: flex !important;
 }
-.WM-Flex >*, .WM-Inline-Flex>* {
-    -webkit-box-flex: 1 !important;
+
+.WM-Inline-Flex {
+    display: inline-flex !important;
 }
 
+.WM-Flex>*,
+.WM-Inline-Flex>* {
+    -webkit-box-flex: 1 !important;
+}
 
 .WM-Float-L {
     float: left;
 }
+
 .WM-Float-R {
     float: right;
 }
+
 .WM-Align-R {
     text-align: right;
 }
+
 .WM-Align-L {
     text-align: left;
 }
+
 .WM-Align-C {
     text-align: center;
 }
 
+
 /* --------------------------------------------------------
                         Margins :: Begin
 -------------------------------------------------------- */
+
 .WM-Margin-0 {
     margin: 0px;
 }
+
 .WM-Margin-T-5 {
     margin-top: 5px;
 }
+
 .WM-Margin-T-10 {
     margin-top: 10px;
 }
+
 .WM-Margin-T-15 {
     margin-top: 15px;
 }
+
 .WM-Margin-T-20 {
     margin-top: 20px;
 }
+
 .WM-Margin-T-45 {
     margin-top: 45px;
 }
+
 .WM-Margin-T-55 {
     margin-top: 55px;
 }
+
 .WM-Margin-T-100 {
     margin-top: 100px;
 }
+
 .WM-Margin-L-10 {
     margin-left: 10px;
 }
+
 .WM-Margin-R-10 {
     margin-right: 10px;
 }
+
 .WM-Margin-BT-20 {
     margin-top: 20px;
     margin-bottom: 20px;
 }
+
 .WM-Margin-BT-5 {
     margin-top: 5px;
     margin-bottom: 5px;
 }
+
 .WM-Margin-B-10 {
     margin-bottom: 10px;
 }
+
 .WM-Margin-RL-15 {
     margin-left: 15px;
     margin-right: 15px;
 }
 
+
 /* --------------------------------------------------------
                         Paddings :: Begin
 -------------------------------------------------------- */
+
 .WM-Padding-10 {
     padding: 10px;
 }
+
 .WM-Padding-RL-20 {
     padding-right: 20px;
     padding-left: 20px;
 }
+
 .WM-Padd-T-40 {
     padding-top: 40px;
 }
 
+
 /* --------------------------------------------------------
                         Fonts :: Begin
 -------------------------------------------------------- */
-$FontSizes: [12,14,16,18,20,22,24,30,36,48,52,60];
 
+$FontSizes: [12,
+14,
+16,
+18,
+20,
+22,
+24,
+30,
+36,
+48,
+52,
+60];
 @each $Size in $FontSizes {
     .WM-Font-#{$Size} {
         font-size: #{$Size}px;
@@ -125,13 +172,14 @@ $FontSizes: [12,14,16,18,20,22,24,30,36,48,52,60];
     line-height: 40px;
 }
 
-
 .WM-LetterSpacing-5 {
     letter-spacing: 5px;
 }
+
 .WM-LetterSpacing-10 {
     letter-spacing: 10px;
 }
+
 .WM-LetterSpacing-15 {
     letter-spacing: 15px;
-}
+}

resources/js/Global/scss/_vars.scss

@@ -2,7 +2,7 @@ $Red: #ee3552;
 $RedShadow: rgba(255, 75, 90, 0.5);
 $Orange: #FF6B57;
 $OrangeShadow:rgba(255, 130, 46, 0.5);
-$Yellow: #ffd63a;
+$Yellow: #ffc107;
 $YellowShadow:rgba(234, 223, 131, 0.5);
 $Gold: #ddcfbb;
 $GoldShadow:rgba(234, 223, 131, 0.5);
@@ -24,4 +24,4 @@ $White: #fff;
 $WhiteShadow:rgba(255, 255, 255, 0.2);
 $Colors: (Red: $Red, Orange: $Orange, Yellow: $Yellow, Gold: $Gold, Purple: $Purple, Blue: $Blue, Green: $Green, Cyan: $Cyan, LightGray: $LightGray, Gray: $Gray, Black: $Black, White: $White);
 $colors: (red: $Red, orange: $Orange, yellow: $Yellow, gold: $Gold, purple: $Purple, blue: $Blue, green: $Green, cyan: $Cyan, gray: $Gray, black: $Black, white: $White);
-$Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold: $GoldShadow, purple: $PurpleShadow, blue: $BlueShadow, green: $GreenShadow, cyan: $CyanShadow, gray: $GrayShadow, black: $BlackShadow, white: $WhiteShadow);
+$Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold: $GoldShadow, purple: $PurpleShadow, blue: $BlueShadow, green: $GreenShadow, cyan: $CyanShadow, gray: $GrayShadow, 'grey lighten-3': $LightGrayShadow, black: $BlackShadow, white: $WhiteShadow);

resources/js/Home/App.vue

@@ -1,7 +1,7 @@
 <template>
     <v-app>
         <div id="app">
-            <wm-background></wm-background>
+            <wm-background C1="1C0F41" C2="076371" C3="0C1630" ></wm-background>
             <app-menu></app-menu>
             <v-content>
                 <v-container fluid class="Login">
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-    import Background from '@Global/components/Body/Backgrounds/Gradient';
+    import Background from '@Global/components/Body/Backgrounds/Gradient-CSS';
     import Menu from '@Global/components/Drawer/SideBar';
 
     export default {

resources/js/Home/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
     <v-container fluid>
         <v-layout row wrap>
-            <a href="/Main/Home" class="flex lg8 xs12">
+            <!-- <a href="/Main/Home" class="flex lg8 xs12">
                 <wm-tile TileClass="Inline LTR Padd10" TitleEn="My Store" TitleFa="فروشگاه من" Desc=" کالاها، خدمات، تخفیفات، فروش وِیژه و ... "
                          GradientBegin="feeae3"  GradientEnd="feeae3" ImageURL="Store.png" ImageHeight="220px" Quantity="32">
                 </wm-tile>
@@ -17,18 +17,17 @@
                 <wm-tile TileClass="Inline LTR Padd10" TileHeight="180" TitleEn="My Website" TitleFa="وبسایت من" Desc=" کالاها، خدمات، تخفیفات، فروش وِیژه و ... "
                          GradientBegin="f2f2f2"  GradientEnd="e0e0e0" ImageURL="Website.png" >
                 </wm-tile>
-            </router-link>
-
-            <a href="/Reservation/Home" class="flex lg4 xs12">
-                <wm-tile TileClass="Padd10" TitleEn="Reservations" TitleFa=" سیستم رزرو وقت " Desc=" کالاها، خدمات، تخفیفات، فروش وِیژه و ... "
-                         GradientBegin="cecece"  GradientEnd="f7f7f7" ImageURL="Clock.png" ImageHeight="150px"  Quantity="1250" >
-                </wm-tile>
-            </a>
+            </router-link> -->
             <a href="/CRM/Home" class="flex lg8 xs12">
                 <wm-tile TileClass="Inline LTR Padd10" TitleEn="CRM" TitleFa=" مدیریت ارتباط با مشتری " Desc=" کالاها، خدمات، تخفیفات، فروش وِیژه و ... "
                          GradientBegin="d6e7de"  GradientEnd="d8d8e1" ImageURL="Members.png" ImageHeight="220px" Quantity="1250" >
                 </wm-tile>
             </a>
+            <a href="/Reservation/Home" class="flex lg4 xs12">
+                <wm-tile TileClass="Padd10" TitleEn="Reservations" TitleFa=" سیستم رزرو وقت " Desc=" کالاها، خدمات، تخفیفات، فروش وِیژه و ... "
+                         GradientBegin="cecece"  GradientEnd="f7f7f7" ImageURL="Clock.png" ImageHeight="150px"  Quantity="1250" >
+                </wm-tile>
+            </a>
         </v-layout>
     </v-container>
 </template>