From 2809216a9bc9e83d7091c3b9e905cb8ac5f59516 Mon Sep 17 00:00:00 2001
From: "shubhammehrotra.symfony@webkul.com"
 <shubhammehrotra.symfony@webkul.com>
Date: Mon, 13 Jan 2020 20:52:26 +0530
Subject: [PATCH] updates

---
 .../views/settings/locales/create.blade.php   |   2 +-
 .../views/settings/locales/edit.blade.php     |   2 +-
 .../publishable/assets/css/velocity.css       | 172 +++++++++++++-----
 .../publishable/assets/js/velocity.js         |  36 ++--
 ..._01_13_155803_add_velocity_locale_icon.php |  32 ++++
 ...192149_add_category_velocity_meta_data.php |  32 ++++
 .../Velocity/src/Helpers/AdminHelper.php      |  57 ++++++
 .../Webkul/Velocity/src/Helpers/Helper.php    |   8 -
 .../src/Providers/EventServiceProvider.php    |  11 +-
 .../src/Providers/VelocityServiceProvider.php |  21 +++
 .../assets/js/UI/components/card-header.vue   |   4 +-
 .../js/UI/components/content-header.vue       |  11 +-
 .../assets/js/UI/components/sidebar.vue       |   4 +-
 .../src/Resources/assets/sass/app.scss        |  13 ++
 .../Resources/assets/sass/components/app.scss |  20 +-
 .../assets/sass/components/footer.scss        |  12 --
 .../assets/sass/components/home.scss          |  14 +-
 .../assets/sass/components/media.scss         | 158 +++++++++++++---
 .../assets/sass/components/shared.scss        |  11 +-
 .../Velocity/src/Resources/lang/en/app.php    |   1 +
 .../categories/category-icon.blade.php        |   1 +
 .../settings/locales/locale-logo.blade.php    |   1 +
 .../account/partials/sidemenu.blade.php       |   2 +-
 .../views/customers/session/index.blade.php   |   2 +-
 .../advertisement-four.blade.php              |  16 +-
 .../advertisement-three.blade.php             |   8 +-
 .../advertisement-two.blade.php               |   8 +-
 .../category-with-custom-option.blade.php     |  82 +++++++--
 .../views/home/featured-products.blade.php    |   2 +-
 .../views/home/hot-categories.blade.php       |  10 +-
 .../recently-viewed-products.blade.php        |   2 +-
 .../src/Resources/views/home/index.blade.php  |   4 +-
 .../views/home/new-products.blade.php         |  76 ++++----
 .../views/home/popular-categories.blade.php   |   2 +-
 .../Resources/views/layouts/master.blade.php  |   2 +-
 .../layouts/top-nav/locale-currency.blade.php |  24 ++-
 .../views/products/add-to-cart.blade.php      |   5 +-
 .../views/products/list/card.blade.php        |   8 +-
 .../views/products/reviews/create.blade.php   |  91 +++++----
 .../views/products/reviews/index.blade.php    |  12 +-
 .../Resources/views/products/view.blade.php   |   6 +-
 .../views/products/wishlist.blade.php         |   6 +-
 42 files changed, 728 insertions(+), 263 deletions(-)
 create mode 100644 packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_155803_add_velocity_locale_icon.php
 create mode 100644 packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_192149_add_category_velocity_meta_data.php
 create mode 100644 packages/Webkul/Velocity/src/Helpers/AdminHelper.php
 create mode 100644 packages/Webkul/Velocity/src/Resources/views/admin/catelog/categories/category-icon.blade.php
 create mode 100644 packages/Webkul/Velocity/src/Resources/views/admin/settings/locales/locale-logo.blade.php

diff --git a/packages/Webkul/Admin/src/Resources/views/settings/locales/create.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/locales/create.blade.php
index 4906a56cb..55baebe44 100755
--- a/packages/Webkul/Admin/src/Resources/views/settings/locales/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/settings/locales/create.blade.php
@@ -7,7 +7,7 @@
 @section('content')
     <div class="content">
 
-        <form method="POST" action="{{ route('admin.locales.store') }}" @submit.prevent="onSubmit">
+        <form method="POST" action="{{ route('admin.locales.store') }}" @submit.prevent="onSubmit" enctype="multipart/form-data">
             <div class="page-header">
                 <div class="page-title">
                     <h1>
diff --git a/packages/Webkul/Admin/src/Resources/views/settings/locales/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/locales/edit.blade.php
index 365020c48..0fccaface 100755
--- a/packages/Webkul/Admin/src/Resources/views/settings/locales/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/settings/locales/edit.blade.php
@@ -7,7 +7,7 @@
 @section('content')
     <div class="content">
 
-        <form method="POST" action="{{ route('admin.locales.update', $locale->id) }}" @submit.prevent="onSubmit">
+        <form method="POST" action="{{ route('admin.locales.update', $locale->id) }}" @submit.prevent="onSubmit" enctype="multipart/form-data">
             <div class="page-header">
                 <div class="page-title">
                     <h1>
diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index c98aa5309..6ba23453d 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -838,6 +838,14 @@
   padding-bottom: 30px;
 }
 
+.review-page-container .submit-btn {
+  font-weight: 600;
+}
+
+.review-page-container .submit-btn button {
+  padding: 10px 15px;
+}
+
 .customer-rating .rating-container {
   padding: 30px 0;
 }
@@ -1008,14 +1016,6 @@
   width: 100%;
 }
 
-@media only screen and (max-width: 770px) {
-  .modal-container {
-    left: 10%;
-    max-width: 80%;
-    margin-left: 0px;
-  }
-}
-
 .product-card-new {
   border: none !important;
   margin: 0 5px 10px 10px;
@@ -1059,6 +1059,7 @@
 .product-card-new .cart-wish-wrap .wishlist-icon {
   height: 32px;
   display: table;
+  text-align: right;
 }
 
 .product-card-new .cart-wish-wrap .wishlist-icon > i {
@@ -1095,6 +1096,10 @@
   background-color: #0D2438;
 }
 
+.product-card-new:hover #quick-view-btn-container {
+  display: block;
+}
+
 .quantity {
   width: 100%;
   padding-bottom: 10px;
@@ -2437,7 +2442,7 @@ body .container-margin {
 }
 
 .banner-icon {
-  height: 525px;
+  height: unset;
   display: inline-block;
 }
 
@@ -2542,6 +2547,10 @@ header #search-form > *:focus {
   padding: 0 10px;
 }
 
+.advertisement-four-container .offers-ct-panel a:first-child {
+  padding-bottom: 15px !important;
+}
+
 .advertisement-four-container .offers-ct-panel .offers-ct-top {
   height: 180px;
 }
@@ -2575,7 +2584,7 @@ header #search-form > *:focus {
   height: 500px;
 }
 
-.advertisement-three-container .col-6:first-child img {
+.advertisement-three-container img {
   height: 100%;
 }
 
@@ -2803,23 +2812,23 @@ header #search-form > *:focus {
 
 /* Customer Reviews */
 /* sidebar */
-.general-container {
+.main-content-wrapper {
   margin: 0;
   margin-bottom: 60px;
   display: inline-block;
 }
 
-.general-container > .row.disabled {
+.main-content-wrapper > .row.disabled {
   cursor: not-allowed;
 }
 
-.general-container .main-category {
+.main-content-wrapper .main-category {
   padding: 8px 15px;
   border-top: 1px solid #CCCCCC;
   border-bottom: 1px solid #CCCCCC;
 }
 
-.general-container .content-list {
+.main-content-wrapper .content-list {
   margin: 0;
   width: 100%;
   height: 42px;
@@ -2830,7 +2839,7 @@ header #search-form > *:focus {
   display: inline-block;
 }
 
-.general-container .content-list ul {
+.main-content-wrapper .content-list ul {
   width: 100%;
   height: 100%;
   display: -webkit-inline-box;
@@ -2839,7 +2848,7 @@ header #search-form > *:focus {
   background-color: #4D7EA8;
 }
 
-.general-container .content-list ul li a {
+.main-content-wrapper .content-list ul li a {
   display: block;
   cursor: pointer;
   font-size: 16px;
@@ -2851,7 +2860,7 @@ header #search-form > *:focus {
   text-decoration: none;
 }
 
-.general-container .content-list ul li:hover {
+.main-content-wrapper .content-list ul li:hover {
   background-color: #42719a;
 }
 
@@ -3181,18 +3190,6 @@ body::after {
   padding: 0px 20px;
 }
 
-@media all and (max-width: 720px) {
-  .footer {
-    padding-left: 15px;
-  }
-  .footer .footer-list-container {
-    padding-left: 0px !important;
-  }
-  .footer .currency {
-    display: block !important;
-  }
-}
-
 .padding-15 {
   padding: 15px;
 }
@@ -3217,7 +3214,7 @@ body::after {
   font-size: 13px !important;
 }
 
-.fs14, .general-container {
+.fs14, .main-content-wrapper {
   font-size: 14px;
 }
 
@@ -3500,6 +3497,7 @@ body::after {
 .theme-btn, .cart-details .continue-shopping-btn, .account-content .account-layout .bottom-toolbar .pagination .page-item {
   border: none;
   cursor: pointer;
+  font-weight: 600;
   padding: 10px 20px;
   vertical-align: top;
   color: #FFFFFF !important;
@@ -3694,7 +3692,7 @@ body::after {
 }
 
 .lg-card-container.list-card .add-to-cart-btn {
-  max-width: 140px;
+  max-width: 150px;
 }
 
 .lg-card-container.grid-card {
@@ -3717,6 +3715,14 @@ body::after {
   margin-top: 20px;
 }
 
+.small-padding {
+  padding: 3px 4px !important;
+}
+
+.medium-padding {
+  padding: 3px 10px !important;
+}
+
 .general-container {
   cursor: pointer;
 }
@@ -4151,7 +4157,7 @@ button[disabled] {
   max-height: 300px;
 }
 
-.velocity-small-screen {
+.vc-small-screen {
   display: none;
 }
 
@@ -4171,41 +4177,104 @@ button[disabled] {
   }
 }
 
-@media only screen and (max-width: 576px) {
-  .velocity-divide-page {
-    position: static;
+@media only screen and (max-width: 768px) {
+  .modal-container {
+    left: 10%;
+    max-width: 80%;
+    margin-left: 0px;
   }
-  .velocity-divide-page .left {
-    position: static;
+  .footer .footer-list-container {
+    padding-left: 0px !important;
   }
-  .velocity-divide-page .right {
-    padding-left: 0;
+  .footer .currency {
+    display: block !important;
   }
-  .general-container .vc-header > div {
+}
+
+@media only screen and (max-width: 576px) and (max-width: 768px) and (max-width: 992px) {
+  .main-content-wrapper .vc-header > div {
     display: none;
   }
-  .general-container .vc-header > div.velocity-small-screen {
+  .main-content-wrapper .vc-header > div.vc-small-screen {
     display: block;
   }
-  .general-container .vc-header > div.velocity-small-screen img {
+  .main-content-wrapper .vc-header > div.vc-small-screen img {
     width: 100%;
     height: 100%;
     max-height: 50px;
   }
-  .general-container .vc-header .right-vc-header {
-    height: 50px;
+  .main-content-wrapper .vc-header > div.vc-small-screen .hamburger-wrapper {
     display: table;
+    height: 50px;
   }
-  .general-container .vc-header .right-vc-header * {
+  .main-content-wrapper .vc-header > div.vc-small-screen .hamburger-wrapper .hamburger {
+    font-size: 24px;
     display: table-cell;
     vertical-align: middle;
   }
+  .main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header {
+    text-align: right;
+    height: 50px;
+  }
+  .main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header * {
+    top: 13px;
+    width: 24px;
+    position: relative;
+    padding-right: 10px;
+  }
   #top {
     display: none;
   }
   #top + header {
     display: none;
   }
+  .product-card-new .cart-wish-wrap .wishlist-icon {
+    text-align: left;
+  }
+  .advertisement-four-container .offers-ct-panel {
+    padding: 8px 0;
+  }
+  .advertisement-four-container .offers-ct-panel a:first-child {
+    padding-bottom: 10px !important;
+  }
+  .advertisement-three-container .top-container img,
+  .advertisement-three-container .bottom-container img {
+    padding: 0px;
+  }
+  .advertisement-three-container .second-panel {
+    padding-top: 10px;
+  }
+  .advertisement-two-container a:nth-of-type(2) {
+    padding: 15px 0 0 0;
+  }
+  .category-with-custom-options {
+    display: none;
+  }
+  .category-with-custom-options.vc-small-screen {
+    display: block;
+  }
+  .category-with-custom-options.vc-small-screen .smart-category-container .col-12 {
+    padding: 0;
+  }
+  .category-with-custom-options.vc-small-screen .smart-category-container:not(:first-child) {
+    padding-top: 20px;
+  }
+  .footer .footer-content .newsletter-subscription .newsletter-wrapper input.subscribe-field {
+    width: 200px;
+  }
+  .popular-category-wrapper {
+    padding: 0px;
+  }
+  .main-content-wrapper {
+    margin-bottom: 25px;
+  }
+  .slides-container .VueCarousel .VueCarousel-pagination button {
+    width: 5px !important;
+    height: 5px !important;
+  }
+  .slides-container .VueCarousel .VueCarousel-pagination .VueCarousel-dot {
+    padding: 2px !important;
+  }
 }
 
 /* fallback */
@@ -12509,6 +12578,19 @@ body {
   height: 100%;
 }
 
+#top .locale-icon {
+  width: 20px;
+  display: inline-block;
+}
+
+#top .locale-icon img {
+  width: 100%;
+}
+
+#top .locale-switcher {
+  padding-left: 5px;
+}
+
 .dropdown-menu {
   border-top: 3px solid #269c77;
   border-radius: 0px;
diff --git a/packages/Webkul/Velocity/publishable/assets/js/velocity.js b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
index bbd615708..e7559002f 100644
--- a/packages/Webkul/Velocity/publishable/assets/js/velocity.js
+++ b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
@@ -35662,10 +35662,13 @@ var render = function() {
                           }
                         },
                         [
-                          category.image
+                          category.category_icon_path
                             ? _c("img", {
                                 attrs: {
-                                  src: _vm.url + "/storage/" + category.image
+                                  src:
+                                    _vm.url +
+                                    "/storage/" +
+                                    category.category_icon_path
                                 }
                               })
                             : _vm._e()
@@ -36508,11 +36511,11 @@ var render = function() {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "row mb15 col-12", class: _vm.rowClass }, [
-    _c("div", { staticClass: "col-lg-4 no-padding" }, [
+    _c("div", { staticClass: "col-4 no-padding" }, [
       _c("h2", { staticClass: "fs20 fw6" }, [_vm._v(_vm._s(_vm.headerHeading))])
     ]),
     _vm._v(" "),
-    _c("div", { staticClass: "col-lg-8 no-padding" }, [
+    _c("div", { staticClass: "col-8 no-padding" }, [
       _c(
         "div",
         { staticClass: "row justify-content-end text-right" },
@@ -36858,6 +36861,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     props: ['heading', 'headerContent', 'isEnabled']
@@ -36875,22 +36881,22 @@ var render = function() {
     "div",
     { staticClass: "row velocity-divide-page remove-padding-margin vc-header" },
     [
-      _c("div", { staticClass: "velocity-small-screen container" }, [
+      _c("div", { staticClass: "vc-small-screen container" }, [
         _c("div", { staticClass: "row" }, [
           _c("div", { staticClass: "col-8" }, [
             _c(
               "div",
-              { staticClass: "row" },
+              { staticClass: "row col-12" },
               [
-                _c("logo-component", {
-                  attrs: { "add-class": "col-8 offset-3" }
-                })
+                _vm._m(0),
+                _vm._v(" "),
+                _c("logo-component", { attrs: { "add-class": "pl10" } })
               ],
               1
             )
           ]),
           _vm._v(" "),
-          _vm._m(0)
+          _vm._m(1)
         ])
       ]),
       _vm._v(" "),
@@ -36956,7 +36962,15 @@ var staticRenderFns = [
     var _vm = this
     var _h = _vm.$createElement
     var _c = _vm._self._c || _h
-    return _c("div", { staticClass: "col-4 right-vc-header" }, [
+    return _c("div", { staticClass: "hamburger-wrapper" }, [
+      _c("i", { staticClass: "rango-toggle hamburger" })
+    ])
+  },
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "row col-4 right-vc-header" }, [
       _c("i", { staticClass: "fs16 fw6 rango-search" }),
       _vm._v(" "),
       _c("i", { staticClass: "material-icons text-down-3" }, [
diff --git a/packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_155803_add_velocity_locale_icon.php b/packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_155803_add_velocity_locale_icon.php
new file mode 100644
index 000000000..f0f911804
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_155803_add_velocity_locale_icon.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddVelocityLocaleIcon extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('locales', function (Blueprint $table) {
+            $table->text('locale_image')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('locales', function (Blueprint $table) {
+            $table->dropColumn('locale_image');
+        });
+    }
+}
diff --git a/packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_192149_add_category_velocity_meta_data.php b/packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_192149_add_category_velocity_meta_data.php
new file mode 100644
index 000000000..ecd47f17a
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Database/Migrations/2020_01_13_192149_add_category_velocity_meta_data.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddCategoryVelocityMetaData extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('categories', function (Blueprint $table) {
+            $table->text('category_icon_path')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('categories', function (Blueprint $table) {
+            $table->dropColumn('category_icon_path');
+        });
+    }
+}
diff --git a/packages/Webkul/Velocity/src/Helpers/AdminHelper.php b/packages/Webkul/Velocity/src/Helpers/AdminHelper.php
new file mode 100644
index 000000000..d75f95290
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Helpers/AdminHelper.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace Webkul\Velocity\Helpers;
+
+use Illuminate\Support\Facades\Storage;
+use Webkul\Category\Repositories\CategoryRepository;
+
+class AdminHelper
+{
+    /**
+     * CategoryRepository object
+     *
+     * @var object
+     */
+    protected $categoryRepository;
+
+    public function __construct(
+        CategoryRepository $categoryRepository
+    ) {
+        $this->categoryRepository =  $categoryRepository;
+    }
+
+    public function saveLocaleImg($locale)
+    {
+        $locale->locale_image = $this->uploadImage('locale_image');
+        $locale->save();
+
+        return $locale;
+    }
+
+    public function storeCategoryIcon($categoryId)
+    {
+        $category = $this->categoryRepository->findOrFail($categoryId);
+
+        $category->category_icon_path = $this->uploadImage('category_icon_path');
+        $category->save();
+
+        return $category;
+    }
+
+    public function uploadImage($type)
+    {
+        $request = request();
+
+        $image = '';
+        $file = $type;
+        $dir = "velocity/$type";
+
+        if ($request->hasFile($file)) {
+            Storage::delete($dir . $file);
+
+            $image = $request->file($file)->store($dir);
+        }
+
+        return $image;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Helpers/Helper.php b/packages/Webkul/Velocity/src/Helpers/Helper.php
index 3186233f7..fc2369d11 100644
--- a/packages/Webkul/Velocity/src/Helpers/Helper.php
+++ b/packages/Webkul/Velocity/src/Helpers/Helper.php
@@ -10,16 +10,8 @@ use Webkul\Velocity\Repositories\VelocityMetadataRepository;
 use Webkul\Attribute\Repositories\AttributeOptionRepository;
 use Webkul\Product\Repositories\ProductRepository as ProductRepository;
 
-/**
- * Search controller
- *
- * @author  Shubham Mehrotra <shubhammehrotra.symfony@webkul.com> @shubhwebkul
- * @copyright 2019 Webkul Software Pvt Ltd (http://www.webkul.com)
- */
-
 class Helper extends Review
 {
-
     /**
      * orderBrands object
      *
diff --git a/packages/Webkul/Velocity/src/Providers/EventServiceProvider.php b/packages/Webkul/Velocity/src/Providers/EventServiceProvider.php
index 24091dc55..65b7ebe3d 100644
--- a/packages/Webkul/Velocity/src/Providers/EventServiceProvider.php
+++ b/packages/Webkul/Velocity/src/Providers/EventServiceProvider.php
@@ -24,7 +24,16 @@ class EventServiceProvider extends ServiceProvider
             $viewRenderEventManager->addTemplate('velocity::admin.layouts.style');
         });
 
-        Event::listen('checkout.order.save.after', 'Webkul\Velocity\Helpers\Helper@topBrand');
+        Event::listen([
+            'core.locale.create.after',
+            'core.locale.update.after',
+        ], 'Webkul\Velocity\Helpers\AdminHelper@saveLocaleImg');
 
+        Event::listen([
+            'catalog.category.create.after',
+            'catalog.category.update.after',
+        ], 'Webkul\Velocity\Helpers\AdminHelper@storeCategoryIcon');
+
+        Event::listen('checkout.order.save.after', 'Webkul\Velocity\Helpers\Helper@topBrand');
     }
 }
diff --git a/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php b/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php
index 5ae5917a5..b50280b32 100644
--- a/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php
+++ b/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php
@@ -3,6 +3,7 @@
 namespace Webkul\Velocity\Providers;
 
 use Illuminate\Routing\Router;
+use Illuminate\Support\Facades\Event;
 use Illuminate\Foundation\AliasLoader;
 use Illuminate\Support\ServiceProvider;
 
@@ -42,6 +43,26 @@ class VelocityServiceProvider extends ServiceProvider
             __DIR__ . '/../Resources/views/' => resource_path('themes/velocity/views'),
         ]);
 
+        Event::listen([
+            'bagisto.admin.settings.locale.edit.after',
+            'bagisto.admin.settings.locale.create.after',
+        ], function($viewRenderEventManager) {
+                $viewRenderEventManager->addTemplate(
+                    'velocity::admin.settings.locales.locale-logo'
+                );
+            }
+        );
+
+        Event::listen([
+            'bagisto.admin.catalog.category.edit_form_accordian.general.after',
+            'bagisto.admin.catalog.category.create_form_accordian.general.after',
+        ], function($viewRenderEventManager) {
+                $viewRenderEventManager->addTemplate(
+                    'velocity::admin.catelog.categories.category-icon'
+                );
+            }
+        );
+
         $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'velocity');
 
         $velocityHelper = app('Webkul\Velocity\Helpers\Helper');
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue
index e7e45b166..8b14e3f8c 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue
@@ -1,11 +1,11 @@
 <template>
 
     <div class="row mb15 col-12" :class="rowClass">
-        <div class="col-lg-4 no-padding">
+        <div class="col-4 no-padding">
             <h2 class="fs20 fw6">{{ headerHeading }}</h2>
         </div>
 
-        <div class="col-lg-8 no-padding">
+        <div class="col-8 no-padding">
             <div class="row justify-content-end text-right">
 
                 <template v-if="tabs">
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
index 2f8cda2ea..bf236159f 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
@@ -1,13 +1,16 @@
 <template>
     <div class="row velocity-divide-page remove-padding-margin vc-header">
-        <div class="velocity-small-screen container">
+        <div class="vc-small-screen container">
             <div class="row">
                 <div class="col-8">
-                    <div class="row">
-                        <logo-component add-class="col-8 offset-3"></logo-component>
+                    <div class="row col-12">
+                        <div class="hamburger-wrapper">
+                            <i class="rango-toggle hamburger"></i>
+                        </div>
+                        <logo-component add-class="pl10"></logo-component>
                     </div>
                 </div>
-                <div class="col-4 right-vc-header">
+                <div class="row col-4 right-vc-header">
                     <i class="fs16 fw6 rango-search"></i>
                     <i class="material-icons text-down-3">shopping_cart</i>
                 </div>
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
index d91b79537..8b3194711 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
@@ -27,8 +27,8 @@
                         @mouseover="toggleSidebar(id, $event, 'mouseover')">
 
                         <img
-                            v-if="category.image"
-                            :src="`${url}/storage/${category.image}`" />
+                            v-if="category.category_icon_path"
+                            :src="`${url}/storage/${category.category_icon_path}`" />
                     </div>
                     <span class="category-title">{{ category['name'] }}</span>
                     <i
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
index 9786cde14..e4cf9a222 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
@@ -225,6 +225,19 @@ body {
             height: 100%;
         }
     }
+
+    .locale-icon {
+        width: 20px;
+        display: inline-block;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    .locale-switcher {
+        padding-left: 5px;
+    }
 }
 
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index 2f39350d9..03b072090 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -27,6 +27,14 @@
             }
         }
     }
+
+    .submit-btn {
+        font-weight: 600;
+
+        button {
+            padding: 10px 15px;
+        }
+    }
 }
 
 .customer-rating {
@@ -200,15 +208,6 @@
     }
 }
 
-// responsive css for modal
-@media only screen and (max-width: 770px) {
-    .modal-container {
-        left: 10%;
-        max-width: 80%;
-        margin-left: 0px;
-    }
-}
-
 .product-card-new {
     // width: 19rem;
     border: none !important;
@@ -261,6 +260,7 @@
         .wishlist-icon {
             height: 32px;
             display: table;
+            text-align: right;
 
             > i {
                 display: table-cell;
@@ -301,7 +301,7 @@
 
 .product-card-new:hover {
     #quick-view-btn-container {
-        // display: block;
+        display: block;
     }
 }
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss
index eff6f5e61..ae1aefb7b 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss
@@ -187,16 +187,4 @@
         }
     }
 
-}
-
-@media all and (max-width: 720px) {
-    .footer {
-        padding-left: 15px;
-    }
-    .footer .footer-list-container {
-        padding-left: 0px !important;
-    }
-    .footer .currency {
-        display: block !important;
-    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
index ba09b75a0..f017a79ba 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -22,7 +22,7 @@ body {
 }
 
 .banner-icon {
-    height: 525px;
+    height: unset;
     display: inline-block;
 }
 
@@ -130,6 +130,10 @@ header #search-form > *:focus {
             padding: 0 10px;
         }
 
+        a:first-child {
+            padding-bottom: 15px !important;
+        }
+
         .offers-ct-top {
             height: 180px;
         }
@@ -168,10 +172,8 @@ header #search-form > *:focus {
 }
 
 .advertisement-three-container {
-    .col-6:first-child {
-        img {
-            height: 100%;
-        }
+    img {
+        height: 100%;
     }
 
     .top-container,
@@ -426,7 +428,7 @@ header #search-form > *:focus {
 /* Customer Reviews */
 
 /* sidebar */
-.general-container {
+.main-content-wrapper {
     @extend .fs14;
 
     margin: 0;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
index 564bd852c..13d704b41 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
@@ -1,4 +1,4 @@
-.velocity-small-screen {
+.vc-small-screen {
     display: none;
 }
 
@@ -35,55 +35,69 @@
 }
 
 @media only screen and (max-width: 768px) {
-    // body {
-    //     display: none;
-    // }
+    .modal-container {
+        left: 10%;
+        max-width: 80%;
+        margin-left: 0px;
+    }
+
+    .footer .footer-list-container {
+        padding-left: 0px !important;
+    }
+    .footer .currency {
+        display: block !important;
+    }
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen
+    and (max-width: 576px)
+    and (max-width: 768px)
+    and (max-width: 992px) {
     // body {
     //     display: block;
     // }
 
-    .velocity-divide-page {
-        position: static;
+    $header-height: 50px;
 
-        .left {
-            position: static;
-        }
-
-        .right {
-            padding-left: 0;
-        }
-    }
-
-    .general-container {
+    .main-content-wrapper {
         .vc-header {
             > div {
                 display: none;
             }
 
-            > div.velocity-small-screen {
+            > div.vc-small-screen {
                 display: block;
 
                 img {
                     width: 100%;
                     height: 100%;
-                    max-height: 50px;
+                    max-height: $header-height;
                 }
-            }
 
-            .right-vc-header {
-                height: 50px;
-                display: table;
+                .hamburger-wrapper {
+                    display: table;
+                    height: $header-height;
 
-                * {
-                    display: table-cell;
-                    vertical-align: middle;
+                    .hamburger {
+                        font-size: 24px;
+                        display: table-cell;
+                        vertical-align: middle;
+                    }
+                }
+
+                .right-vc-header {
+                    text-align: right;
+                    height: $header-height;
+
+                    * {
+                        top: 13px;
+                        width: 24px;
+                        position: relative;
+                        padding-right: 10px;
+                    }
                 }
             }
         }
-
     }
 
     #top {
@@ -97,4 +111,94 @@
         //     display: none;
         // }
     }
+
+    .product-card-new {
+        .cart-wish-wrap {
+            .wishlist-icon {
+                text-align: left;
+            }
+        }
+    }
+
+    .advertisement-four-container {
+        .offers-ct-panel {
+            padding: 8px 0;
+
+            a:first-child {
+                padding-bottom: 10px !important;
+            }
+        }
+    }
+
+    .advertisement-three-container {
+        .top-container,
+        .bottom-container {
+            img {
+                padding: 0px;
+            }
+        }
+
+        .second-panel {
+            padding-top: 10px;
+        }
+    }
+
+    .advertisement-two-container {
+        a:nth-of-type(2) {
+            padding: 15px 0 0 0;
+        }
+    }
+
+    .category-with-custom-options {
+        display: none;
+
+        &.vc-small-screen {
+            display: block;
+
+            .smart-category-container {
+                .col-12 {
+                    padding: 0;
+                }
+            }
+
+            .smart-category-container:not(:first-child) {
+                padding-top: 20px;
+            }
+        }
+    }
+
+    .footer {
+        .footer-content {
+            .newsletter-subscription {
+                .newsletter-wrapper {
+                    input.subscribe-field {
+                        width: 200px;
+                    }
+                }
+            }
+        }
+    }
+
+    .popular-category-wrapper {
+        padding: 0px;
+    }
+
+    .main-content-wrapper {
+        margin-bottom: 25px;
+    }
+
+    .slides-container {
+        .VueCarousel {
+            .VueCarousel-pagination {
+                button {
+                    width: 5px !important;
+                    height: 5px !important;
+                }
+
+                .VueCarousel-dot {
+                    padding: 2px !important;
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
index a4612c06e..c17c4783f 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -247,6 +247,7 @@
 .theme-btn {
     border: none;
     cursor: pointer;
+    font-weight: 600;
     padding: 10px 20px;
     vertical-align: top;
     color: $light-color !important;
@@ -451,7 +452,7 @@
         }
 
         .add-to-cart-btn {
-            max-width: 140px;
+            max-width: 150px;
         }
     }
 
@@ -476,6 +477,14 @@
     }
 }
 
+.small-padding {
+    padding: 3px 4px !important;
+}
+
+.medium-padding {
+    padding: 3px 10px !important;
+}
+
 .general-container {
     cursor: pointer;
 }
diff --git a/packages/Webkul/Velocity/src/Resources/lang/en/app.php b/packages/Webkul/Velocity/src/Resources/lang/en/app.php
index 040240502..caf3e58f3 100644
--- a/packages/Webkul/Velocity/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Velocity/src/Resources/lang/en/app.php
@@ -188,6 +188,7 @@ return [
             'customer-login' => 'Customer Login',
             'registered-user' => 'Registered User',
             'form-login-text' => 'If you have an account, sign in with your email address.',
+            'sign-up' => 'Sign up',
             'new-customer' => 'New Customer',
             'your-email-address' => 'Your email address',
         ],
diff --git a/packages/Webkul/Velocity/src/Resources/views/admin/catelog/categories/category-icon.blade.php b/packages/Webkul/Velocity/src/Resources/views/admin/catelog/categories/category-icon.blade.php
new file mode 100644
index 000000000..fa4302189
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/views/admin/catelog/categories/category-icon.blade.php
@@ -0,0 +1 @@
+<input type="file" name="category_icon_path" />
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/admin/settings/locales/locale-logo.blade.php b/packages/Webkul/Velocity/src/Resources/views/admin/settings/locales/locale-logo.blade.php
new file mode 100644
index 000000000..a2ec1c5c2
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/views/admin/settings/locales/locale-logo.blade.php
@@ -0,0 +1 @@
+<input type="file" name="locale_image" />
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
index ed0cd2a12..9f5f8a6bb 100644
--- a/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
@@ -24,7 +24,7 @@
 
 @push('css')
     <style type="text/css">
-        .general-container {
+        .main-content-wrapper {
             margin-bottom: 0px;
             min-height: 100vh;
         }
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php
index 45497524d..ee0244321 100755
--- a/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php
@@ -18,7 +18,7 @@
 
                         <a href="{{ route('customer.register.index') }}" class="btn-new-customer">
                             <button type="button" class="theme-btn light">
-                                {{ __('velocity::app.customer.login-form.new-customer')}}
+                                {{ __('velocity::app.customer.login-form.sign-up')}}
                             </button>
                         </a>
                     </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-four.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-four.blade.php
index acdecb1e7..27d974395 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-four.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-four.blade.php
@@ -18,12 +18,12 @@
 
         <div class="container-fluid advertisement-four-container">
             <div class="row">
-                <a @if (isset($one)) href="{{ $one }}" @endif class="col-4 no-padding">
+                <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding">
                     <img class="col-12" src="{{ asset('/storage/' . $advertisementFour['image_1']) }}" />
                 </a>
 
-                <div class="col-4 offers-ct-panel">
-                    <a @if (isset($two)) href="{{ $two }}" @endif class="row pb15 col-12 remove-padding-margin">
+                <div class="col-lg-4 col-12 offers-ct-panel">
+                    <a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin">
                         <img class="col-12 offers-ct-top" src="{{ asset('/storage/' . $advertisementFour['image_2']) }}" />
                     </a>
                     <a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin">
@@ -31,7 +31,7 @@
                     </a>
                 </div>
 
-                <a @if (isset($four)) href="{{ $four }}" @endif class="col-4 no-padding">
+                <a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding">
                     <img class="col-12" src="{{ asset('/storage/' . $advertisementFour['image_4']) }}" />
                 </a>
             </div>
@@ -42,12 +42,12 @@
 @if (! $isRendered)
     <div class="container-fluid advertisement-four-container">
         <div class="row">
-            <a @if (isset($one)) href="{{ $one }}" @endif class="col-4 no-padding">
+            <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding">
                 <img class="col-12" src="{{ asset('/themes/velocity/assets/images/big-sale-banner.png') }}" />
             </a>
 
-            <div class="col-4 offers-ct-panel">
-                <a @if (isset($two)) href="{{ $two }}" @endif class="row pb15 col-12 remove-padding-margin">
+            <div class="col-lg-4 col-12 offers-ct-panel">
+                <a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin">
                     <img class="col-12 offers-ct-top" src="{{ asset('/themes/velocity/assets/images/seasons.png') }}" />
                 </a>
                 <a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin">
@@ -55,7 +55,7 @@
                 </a>
             </div>
 
-            <a @if (isset($four)) href="{{ $four }}" @endif class="col-4 no-padding">
+            <a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding">
                 <img class="col-12" src="{{ asset('/themes/velocity/assets/images/kids.png') }}" />
             </a>
         </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-three.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-three.blade.php
index 65db18dae..0fa8dc2fd 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-three.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-three.blade.php
@@ -18,11 +18,11 @@
 
         <div class="container-fluid advertisement-three-container">
             <div class="row">
-                <a @if (isset($one)) href="{{ $one }}" @endif class="col-6 no-padding">
+                <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
                     <img src="{{ asset('/storage/' . $advertisementThree['image_1']) }}" class="full-width" />
                 </a>
 
-                <div class="col-6">
+                <div class="col-lg-6 col-md-12 second-panel">
                     <a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
                         <img src="{{ asset('/storage/' . $advertisementThree['image_2']) }}" class="col-12 pr0" />
                     </a>
@@ -38,11 +38,11 @@
 @if (! $isRendered)
     <div class="container-fluid advertisement-three-container">
         <div class="row">
-            <a @if (isset($one)) href="{{ $one }}" @endif class="col-6 no-padding">
+            <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
                 <img src="{{ asset('/themes/velocity/assets/images/headphones.png') }}" class="full-width" />
             </a>
 
-            <div class="col-6">
+            <div class="col-lg-6 col-md-12 second-panel">
                 <a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
                     <img src="{{ asset('/themes/velocity/assets/images/watch.png') }}" class="col-12 pr0" />
                 </a>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php
index 4e6a375f7..225e7d17e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php
@@ -18,11 +18,11 @@
 
         <div class="container-fluid advertisement-two-container">
             <div class="row">
-                <a class="col-9 no-padding">
+                <a class="col-lg-9 col-md-12 no-padding">
                     <img src="{{ asset('/storage/' . $advertisementTwo['image_1']) }}" />
                 </a>
 
-                <a class="col-3 pr0">
+                <a class="col-lg-3 col-md-12 pr0">
                     <img src="{{ asset('/storage/' . $advertisementTwo['image_2']) }}" />
                 </a>
             </div>
@@ -33,11 +33,11 @@
 @if (! $isRendered)
     <div class="container-fluid advertisement-two-container">
         <div class="row">
-            <a class="col-9 no-padding">
+            <a class="col-lg-9 col-md-12 no-padding">
                 <img src="{{ asset('/themes/velocity/assets/images/toster.png') }}" />
             </a>
 
-            <a class="col-3 pr0">
+            <a class="col-lg-3 col-md-12 pr0">
                 <img src="{{ asset('/themes/velocity/assets/images/trimmer.png') }}" />
             </a>
         </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php
index a04bd47ac..d02fab9e2 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/category-with-custom-option.blade.php
@@ -1,11 +1,11 @@
-<div class="container-fluid category-with-custom-options">
-    @php
-        $category[0] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[0]);
-        $category[1] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[1]);
-        $category[2] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[2]);
-        $category[3] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[3]);
-    @endphp
+@php
+    $category[0] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[0]);
+    $category[1] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[1]);
+    $category[2] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[2]);
+    $category[3] = app('Webkul\Category\Repositories\CategoryRepository')->findByPath($category[3]);
+@endphp
 
+<div class="container-fluid category-with-custom-options">
     <div class="row">
         <div class="col pr15">
             <img src="{{ asset ('/storage/' . $category['2']->image) }}" />
@@ -18,11 +18,15 @@
 
             <div class="categories-collection">
                 <div class="category-text-content">
-                    <h2 class="text-uppercase">{{ $category[0]->name }}</h2>
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[0]->slug }}" class="unset">
+                            {{ $category[0]->name }}
+                        </a>
+                    </h2>
                     <ul type="none" class="fs14">
                         @foreach ($category[0]->children as $subCategory)
                             <li>
-                                <a href="{{ $subCategory->slug }}" class="unset">
+                                <a href="{{ $category[0]->slug . '/' . $subCategory->slug }}" class="unset">
                                     {{ $subCategory->name }}
                                 </a>
                             </li>
@@ -43,11 +47,15 @@
 
             <div class="categories-collection">
                 <div class="category-text-content">
-                    <h2 class="text-uppercase">{{ $category[1]->name }}</h2>
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[1]->slug }}" class="unset">
+                            {{ $category[1]->name }}
+                        </a>
+                    </h2>
                     <ul type="none" class="fs14">
                         @foreach ($category[1]->children as $subCategory)
                             <li>
-                                <a href="{{ $subCategory->slug }}" class="unset">
+                                <a href="{{ $category[1]->slug . '/' . $subCategory->slug }}" class="unset">
                                     {{ $subCategory->name }}
                                 </a>
                             </li>
@@ -66,11 +74,15 @@
 
             <div class="categories-collection">
                 <div class="category-text-content">
-                    <h2 class="text-uppercase">{{ $category[2]->name }}</h2>
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[2]->slug }}" class="unset">
+                            {{ $category[2]->name }}
+                        </a>
+                    </h2>
                     <ul type="none" class="fs14">
                         @foreach ($category[2]->children as $subCategory)
                             <li>
-                                <a href="{{ $subCategory->slug }}" class="unset">
+                                <a href="{{ $category[2]->slug . '/' . $subCategory->slug }}" class="unset">
                                     {{ $subCategory->name }}
                                 </a>
                             </li>
@@ -90,11 +102,15 @@
 
             <div class="categories-collection">
                 <div class="category-text-content">
-                    <h2 class="text-uppercase">{{ $category[3]->name }}</h2>
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[3]->slug }}" class="unset">
+                            {{ $category[3]->name }}
+                        </a>
+                    </h2>
                     <ul type="none" class="fs14">
                         @foreach ($category[3]->children as $subCategory)
                             <li>
-                                <a href="{{ $subCategory->slug }}" class="unset">
+                                <a href="{{ $category[3]->slug . '/' . $subCategory->slug }}" class="unset">
                                     {{ $subCategory->name }}
                                 </a>
                             </li>
@@ -110,3 +126,39 @@
 
     </div>
 </div>
+
+<div class="container-fluid category-with-custom-options vc-small-screen">
+    @foreach ($category as $categoryItem)
+        <div class="smart-category-container">
+            <div class="col-12">
+                <img src="{{ asset ('/storage/' . $categoryItem->image) }}" />
+            </div>
+
+            <div class="col-12">
+                <div class="card-arrow-container">
+                    <div class="card-arrow card-arrow-tp"></div>
+                </div>
+
+                <div class="categories-collection">
+                    <div class="category-text-content">
+                        <h2 class="text-uppercase">
+                            <a href="{{ $categoryItem->slug }}" class="unset">
+                                {{ $categoryItem->name }}
+                            </a>
+                        </h2>
+                        <ul type="none" class="fs14">
+                            @foreach ($categoryItem->children as $subCategory)
+                                <li>
+                                    <a href="{{ $categoryItem->slug . '/' . $subCategory->slug }}" class="unset">
+                                        {{ $subCategory->name }}
+                                    </a>
+                                </li>
+                            @endforeach
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endforeach
+</div>
+
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php
index a6751f34e..e1d7fad75 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php
@@ -8,7 +8,7 @@
 
 @if ($featuredProductsCount)
 
-    <div class="container-fluid popular-products">
+    <div class="container-fluid featured-products">
 
         <card-list-header heading="{{ __('shop::app.home.featured-products') }}">
         </card-list-header>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php
index 624bb96b5..66d69da74 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php
@@ -9,7 +9,7 @@
             @endphp
 
             @if ($categoryDetails)
-                <div class="col hot-category-wrapper">
+                <div class="col-lg-3 col-md-12 hot-category-wrapper">
                     <div class="card">
                         <div class="row velocity-divide-page">
                             <div class="left">
@@ -17,12 +17,16 @@
                             </div>
 
                             <div class="right">
-                                <h3 class="fs20 clr-light text-uppercase">{{ $categoryDetails->name }}</h3>
+                                <h3 class="fs20 clr-light text-uppercase">
+                                    <a href="{{ $slug }}" class="unset">
+                                        {{ $categoryDetails->name }}
+                                    </a>
+                                </h3>
 
                                 <ul type="none">
                                     @foreach ($categoryDetails->children as $subCategory)
                                         <li>
-                                            <a href="{{ $subCategory->slug }}" class="unset">
+                                            <a href="{{ $slug . '/' . $subCategory->slug }}" class="unset">
                                                 {{ $subCategory->name }}
                                             </a>
                                         </li>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/in-progress/recently-viewed-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/in-progress/recently-viewed-products.blade.php
index fd835f9bb..3d89fe73e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/in-progress/recently-viewed-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/in-progress/recently-viewed-products.blade.php
@@ -122,7 +122,7 @@
     $cardCount = 5;
 @endphp
 
-<div class="container-fluid popular-products">
+<div class="container-fluid">
 
     <card-list-header
         heading="Plants"
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
index 38583ddbc..b3b47a21b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
@@ -50,7 +50,7 @@
     <div class="full-content-wrapper">
         {!! view_render_event('bagisto.shop.home.content.before') !!}
 
-            {{-- {!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!} --}}
+            {!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!}
 
         {{ view_render_event('bagisto.shop.home.content.after') }}
     </div>
@@ -63,8 +63,6 @@
     <!-- Show Product Policy -->
     {{-- @include('shop::home.product-policy') --}}
 
-
-
     <!-- advertisement two -->
     {{-- @include('shop::home.advertisements.advertisement-two') --}}
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
index 927eec5d6..caf07fbf4 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
@@ -5,26 +5,49 @@
 @endphp
 
 @if (! empty($newProducts))
-    <div class="container-fluid popular-products">
-
+    <div class="container-fluid">
         <card-list-header heading="{{ __('shop::app.home.new-products') }}">
         </card-list-header>
 
         {!! view_render_event('bagisto.shop.new-products.before') !!}
 
-        <div class="row flex-nowrap">
-            @if ($showRecentlyViewed)
-                @push('css')
-                    <style>
-                        .recently-viewed {
-                            padding-right: 0px;
-                        }
-                    </style>
-                @endpush
+            <div class="row flex-nowrap">
+                @if ($showRecentlyViewed)
+                    @push('css')
+                        <style>
+                            .recently-viewed {
+                                padding-right: 0px;
+                            }
+                        </style>
+                    @endpush
 
-                <div class="col-9 no-padding">
+                    <div class="col-9 no-padding">
+                        <carousel-component
+                            slides-per-page="5"
+                            navigation-enabled="hide"
+                            pagination-enabled="hide"
+                            id="new-products-carousel"
+                            :slides-count="{{ sizeof($newProducts) }}">
+
+                            @foreach ($newProducts as $index => $product)
+                                <slide slot="slide-{{ $index }}">
+                                    @include ('shop::products.list.card', [
+                                        'product' => $product,
+                                        'addToCartBtnClass' => 'small-padding'
+                                    ])
+                                </slide>
+                            @endforeach
+
+                        </carousel-component>
+                    </div>
+
+                    @include ('shop::products.list.recently-viewed', [
+                        'addClass' => 'col-3',
+                        'addClassWrapper' => 'scrollable max-height-350',
+                    ])
+                @else
                     <carousel-component
-                        slides-per-page="5"
+                        slides-per-page="6"
                         navigation-enabled="hide"
                         pagination-enabled="hide"
                         id="new-products-carousel"
@@ -39,31 +62,8 @@
                         @endforeach
 
                     </carousel-component>
-                </div>
-
-                @include ('shop::products.list.recently-viewed', [
-                    'addClass' => 'col-3',
-                    'addClassWrapper' => 'scrollable max-height-350',
-                ])
-            @else
-                <carousel-component
-                    slides-per-page="6"
-                    navigation-enabled="hide"
-                    pagination-enabled="hide"
-                    id="new-products-carousel"
-                    :slides-count="{{ sizeof($newProducts) }}">
-
-                    @foreach ($newProducts as $index => $product)
-
-                        <slide slot="slide-{{ $index }}">
-                            @include ('shop::products.list.card', ['product' => $product])
-                        </slide>
-
-                    @endforeach
-
-                </carousel-component>
-            @endif
-        </div>
+                @endif
+            </div>
 
         {!! view_render_event('bagisto.shop.new-products.after') !!}
     </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/popular-categories.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/popular-categories.blade.php
index 6d43855e2..eded4cd7b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/popular-categories.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/popular-categories.blade.php
@@ -9,7 +9,7 @@
             @endphp
 
             @if ($categoryDetails)
-                <div class="col popular-category-wrapper">
+                <div class="col-lg-3 col-md-12 popular-category-wrapper">
                     <div class="card col-12 no-padding">
                         <div class="category-image">
                             <img src="{{ asset('/storage/' . $categoryDetails->image) }}" />
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
index dbf948c8b..3051a3857 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
@@ -63,7 +63,7 @@
                     @include('shop::layouts.top-nav.index')
                     @include('shop::layouts.header.index', ['categories' => $categories])
 
-                    <div class="general-container col-12 no-padding">
+                    <div class="main-content-wrapper col-12 no-padding">
 
                         @php
                             $velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/locale-currency.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/locale-currency.blade.php
index e3e42b93d..10c91fe3b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/locale-currency.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/locale-currency.blade.php
@@ -2,7 +2,23 @@
 
     <div class="pull-left">
         <div class="dropdown">
-           <select
+
+            @php
+                $localeImage = null;
+            @endphp
+            @foreach (core()->getCurrentChannel()->locales as $locale)
+                @if ($locale->code == app()->getLocale())
+                    @php
+                        $localeImage = $locale->locale_image;
+                    @endphp
+                @endif
+            @endforeach
+
+            <div class="locale-icon">
+                <img src="{{ asset('/storage/' . $localeImage) }}" />
+            </div>
+
+            <select
                 class="btn btn-link dropdown-toggle control locale-switcher styled-select"
                 onchange="window.location.href = this.value"
                 @if (count(core()->getCurrentChannel()->locales) == 1)
@@ -11,7 +27,11 @@
 
                 @foreach (core()->getCurrentChannel()->locales as $locale)
                     @if (isset($serachQuery))
-                        <option value="?{{ $serachQuery }}&locale={{ $locale->code }}" {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>{{ $locale->name }}</option>
+                        <option
+                            value="?{{ $serachQuery }}&locale={{ $locale->code }}"
+                            {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>
+                            {{ $locale->name }}
+                        </option>
                     @else
                         <option value="?locale={{ $locale->code }}" {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>{{ $locale->name }}</option>
                     @endif
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php
index 02cb0e4e5..7c6dca49f 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/add-to-cart.blade.php
@@ -11,11 +11,10 @@
         <input type="hidden" name="quantity" value="1">
         <button
             type="submit"
-            class="btn btn-add-to-cart"
-            {{ ! $product->isSaleable() ? 'disabled' : '' }}>
+            {{ ! $product->isSaleable() ? 'disabled' : '' }}
+            class="btn btn-add-to-cart {{ $addToCartBtnClass ?? '' }}">
 
             @if (! (isset($showCartIcon) && !$showCartIcon))
-                {{-- <span class="rango-cart-1 fs20"></span> --}}
                 <i class="material-icons text-down-3">shopping_cart</i>
             @endif
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
index 1daab66d4..08d9c87a9 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
@@ -51,7 +51,10 @@
                     </div>
 
                     <div class="cart-wish-wrap row mt5">
-                        @include ('shop::products.add-to-cart', ['product' => $product])
+                        @include ('shop::products.add-to-cart', [
+                            'product' => $product,
+                            'addToCartBtnClass' => 'medium-padding'
+                        ])
                     </div>
                 </div>
             </div>
@@ -100,7 +103,8 @@
                 <div class="cart-wish-wrap row">
                     @include ('shop::products.add-to-cart', [
                         'product' => $product,
-                        'addWishlistClass' => 'col-4 offset-4'
+                        'addWishlistClass' => 'col-lg-4 col-md-4 col-sm-12 offset-lg-4',
+                        'addToCartBtnClass' => $addToCartBtnClass ?? ''
                     ])
                 </div>
             </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php
index 4f1f7a57c..e9e46e230 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php
@@ -3,22 +3,18 @@
 @extends('shop::layouts.master')
 
 @section('page_title')
-    {{ __('shop::app.reviews.add-review-page-title') }}
+    {{ __('shop::app.reviews.add-review-page-title') }} - {{ $product->name }}
 @endsection
 
 @section('content-wrapper')
-    <create-review></create-review>
-@endsection
-
-@push('scripts')
-    <script type="text/x-template" id="create-review-template">
-        <div class="row review-page-container">
 
+    <div class="container">
+        <section class="row review-page-container">
             @include ('shop::products.view.small-view', ['product' => $product])
 
             <div class="col-6">
                 <div class="row customer-rating">
-                    <h2 class="full-width">Reviews</h2>
+                    <h2 class="full-width">{{ __('shop::app.reviews.write-review') }}</h2>
 
                     <form
                         method="POST"
@@ -28,43 +24,72 @@
 
                         @csrf
 
-                        <div class="ratings">
-                            <label>Rating*</label>
+                        <div :class="`${errors.has('rating') ? 'has-error' : ''}`">
+                            <label for="title" class="required">
+                                {{ __('admin::app.customers.reviews.rating') }}
+                            </label>
                             <star-ratings ratings="5" size="24" editable="true"></star-ratings>
+                            <span class="control-error" v-if="errors.has('rating')">
+                                @{{ errors.first('rating') }}
+                            </span>
                         </div>
 
-                        <div class="title">
-                            <label>Title*</label>
-                            <input type="text" placeholder="Title" name="title" />
+                        <div :class="`${errors.has('title') ? 'has-error' : ''}`">
+                            <label for="title" class="required">
+                                {{ __('shop::app.reviews.title') }}
+                            </label>
+                            <input
+                                type="text"
+                                name="title"
+                                class="control"
+                                v-validate="'required'"
+                                value="{{ old('title') }}" />
+
+                            <span class="control-error" v-if="errors.has('title')">@{{ errors.first('title') }}</span>
                         </div>
 
-                        <div class="comment">
-                            <label>Description*</label>
-                            <textarea rows="4" placeholder="Your Comment" name="comment"></textarea>
+                        @if (core()->getConfigData('catalog.products.review.guest_review') && ! auth()->guard('customer')->user())
+                            <div :class="`${errors.has('name') ? 'has-error' : ''}`">
+                                <label for="title" class="required">
+                                    {{ __('shop::app.reviews.name') }}
+                                </label>
+                                <input  type="text" class="control" name="name" v-validate="'required'" value="{{ old('name') }}">
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+                        @endif
+
+                        <div :class="`${errors.has('comment') ? 'has-error' : ''}`">
+                            <label for="comment" class="required">
+                                {{ __('admin::app.customers.reviews.comment') }}
+                            </label>
+                            <textarea
+                                type="text"
+                                class="control"
+                                name="comment"
+                                v-validate="'required'"
+                                value="{{ old('comment') }}">
+                            </textarea>
+                            <span class="control-error" v-if="errors.has('comment')">
+                                @{{ errors.first('comment') }}
+                            </span>
                         </div>
 
                         <div class="submit-btn">
-                            <button class="theme-btn fs16" type="submit">{{ __('velocity::app.products.submit-review') }}</button>
+                            <button
+                                type="submit"
+                                class="theme-btn fs16">
+                                {{ __('velocity::app.products.submit-review') }}
+                            </button>
                         </div>
                     </form>
                 </div>
             </div>
-
             @if ($showRecentlyViewed)
-                @include ('shop::products.list.recently-viewed')
+                @include ('shop::products.list.recently-viewed', [
+                    'addClass' => 'col-3'
+                ])
             @endif
-        </div>
-    </script>
+        </section>
+    </div>
 
-    <script type="text/javascript">
-        (() => {
-            Vue.component('create-review', {
-                template: '#create-review-template',
-
-                data: function () {
-                    return {}
-                }
-            })
-        })()
-    </script>
-@endpush
+@endsection
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
index c9e893616..0e9d73564 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
@@ -27,13 +27,15 @@
 @endpush
 
 @section('content-wrapper')
-    <div class="row review-page-container">
-        @include ('shop::products.view.small-view', ['product' => $product])
+    <div class="container">
+        <div class="row review-page-container">
+            @include ('shop::products.view.small-view', ['product' => $product])
 
-        <div class="col-7 scrollable fs16">
-            <h2 class="full-width mb30">Rating and Reviews</h2>
+            <div class="col-7 scrollable fs16">
+                <h2 class="full-width mb30">Rating and Reviews</h2>
 
-            @include ('shop::products.view.reviews')
+                @include ('shop::products.view.reviews')
+            </div>
         </div>
     </div>
 @endsection
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
index f609f82a6..2dd099200 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
@@ -29,7 +29,7 @@
             margin-top: 0px;
         }
 
-        .general-container {
+        .main-content-wrapper {
             margin-bottom: 0px;
         }
     </style>
@@ -53,12 +53,12 @@
                                 <input type="hidden" name="product_id" value="{{ $product->product_id }}">
 
                                 {{-- product-gallery --}}
-                                <div class="left col-lg-5">
+                                <div class="left col-lg-6">
                                     @include ('shop::products.view.gallery')
                                 </div>
 
                                 {{-- right-section --}}
-                                <div class="right col-lg-7 scrollable">
+                                <div class="right col-lg-6 scrollable">
                                     {{-- product-info-section --}}
                                     <div class="row info">
                                         <h2 class="col-lg-12">{{ $product->name }}</h2>
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
index 367b181fe..d25228e89 100755
--- a/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
@@ -7,7 +7,7 @@
         @endphp
 
         <a
-            class="unset wishlist-icon text-right {{ $addWishlistClass ?? '' }}"
+            class="unset wishlist-icon {{ $addWishlistClass ?? '' }}"
             @if (! $isWished)
                 href="{{ route('customer.wishlist.add', $product->product_id) }}"
             @elseif (isset($itemId) && $itemId)
@@ -22,7 +22,7 @@
     @guest('customer')
         <a
             href="{{ route('customer.session.index') }}"
-            class="unset wishlist-icon text-right {{ $addWishlistClass ?? '' }}">
+            class="unset wishlist-icon {{ $addWishlistClass ?? '' }}">
             <wishlist-component active="false"></wishlist-component>
         </a>
     @endauth
@@ -31,7 +31,7 @@
 @push('scripts')
     <script type="text/x-template" id="wishlist-template">
         <i
-            :class="`material-icons ${isActive} ${active}`"
+            :class="`material-icons`"
             @mouseover="isActive ? isActive = !isActive : ''"
             @mouseout="active !== '' && !isActive ? isActive = !isActive : ''">