tracker#309

.env.custom

@@ -0,0 +1,21 @@
+VUE_APP_MAGENTO_API_URL=https://customapi-r5bdena-kkhydudga4ihy.us.magentosite.cloud
+VUE_APP_CRANE_URL=/shop
+VUE_APP_GATE_URL=/gate
+VUE_APP_ME_URL=/retailer
+VUE_APP_LOGIN_URL=/gate/sign-in
+VUE_APP_PERSONALIZE_URL=https://personalize-daily.crane.com/personalize
+VUE_APP_PROVISION_URL=http://manager-daily.crane.com/manager
+VUE_APP_IMAGE_PATH_URL=https://staging.crane.com/media/catalog/product
+VUE_APP_RETAILOR_ID=449057567-f789-420c-98b6-2e0443af73f5
+VUE_APP_IMAGE_CATEGORY_PATH_URL=https://staging.crane.com
+VUE_APP_NODESLS_API_URL=https://imagelib-sls-stg.crane.com
+VUE_APP_HOME_PAGE_URL=https://next.crane.com
+VUE_APP_CC_CONNECTION_URL=https://www.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
+VUE_APP_MAINTENANCE_MODE=false
+VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
+VUE_APP_ASSETS_NODESLS_URL=https://assets-sls.crane.com
+VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
+VUE_APP_IMAGE_LIB_URL=https://imagelib-api.crane.com
+VUE_APP_CRANE_ORDER_URL=https://order.crane.com
+VUE_APP_BASE_URL=https://www.crane.com
+VUE_APP_RP_AUTH_NAME=rp_auth_stg

.env.daily

@@ -0,0 +1,25 @@
+VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
+VUE_APP_CRANE_URL=/shop
+VUE_APP_GATE_URL=/gate
+VUE_APP_ME_URL=/retailer
+VUE_APP_LOGIN_URL=/gate/sign-in
+VUE_APP_PERSONALIZE_URL=https://personalize-daily.crane.com/personalize
+VUE_APP_PROVISION_URL=http://manager-daily.crane.com/manager
+VUE_APP_IMAGE_PATH_URL=https://m2-stg.crane.com/media/catalog/product
+VUE_APP_RETAILOR_ID=49057567-f789-420c-98b6-2e0443af73f5
+VUE_APP_IMAGE_CATEGORY_PATH_URL=https://m2-stg.crane.com
+VUE_APP_NODESLS_API_URL=https://imagelib-sls-stg.crane.com
+VUE_APP_HOME_PAGE_URL=https://www-daily.crane.com
+VUE_APP_CC_CONNECTION_URL=https://www.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
+VUE_APP_MAINTENANCE_MODE=false
+VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
+VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
+VUE_APP_CRANE_ORDER_URL=https://order.crane.com
+
+DEPLOY_S3_REGION=us-east-2
+DEPLOY_S3_BUCKET=www-daily.crane.com
+DEPLOY_CLOUDFRONT_ID=E28QEVKG98ZHYU
+VUE_APP_ASSETS_NODESLS_URL=https://assets-sls.crane.com
+VUE_APP_IMAGE_LIB_URL=https://imagelib-api.crane.com
+VUE_APP_BASE_URL=https://www.crane.com
+VUE_APP_RP_AUTH_NAME=rp_auth_stg

.env.development

@@ -0,0 +1,25 @@
+VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
+VUE_APP_CRANE_URL=/shop
+VUE_APP_GATE_URL=/gate
+VUE_APP_ME_URL=/b2b
+VUE_APP_LOGIN_URL=/gate/sign-in
+VUE_APP_PERSONALIZE_URL=https://studio-stg.crane.com/personalize
+VUE_APP_IMAGE_PATH_URL=https://m2-stg.crane.com/media/catalog/product
+VUE_APP_RETAILOR_ID=49057567-f789-420c-98b6-2e0443af73f5
+VUE_APP_IMAGE_CATEGORY_PATH_URL=https://m2-stg.crane.com
+VUE_APP_NODESLS_API_URL=https://imagelib-sls-stg.crane.com
+
+VUE_APP_HOME_PAGE_URL=https://www-stg.crane.com
+VUE_APP_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
+VUE_APP_MAINTENANCE_MODE=false
+VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
+VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
+VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
+
+DEPLOY_S3_REGION=us-east-1
+DEPLOY_S3_BUCKET=retailer-edge-staging-website-bucket
+DEPLOY_CLOUDFRONT_ID=E1QLFKCOZUDC8P
+VUE_APP_ASSETS_NODESLS_URL=https://assets-stg-sls.crane.com
+VUE_APP_IMAGE_LIB_URL=https://imagelib-stg-api.crane.com
+VUE_APP_BASE_URL=https://retailer-stg.crane.com
+VUE_APP_RP_AUTH_NAME=rp_auth_stg

.env.production

@@ -0,0 +1,26 @@
+NODE_ENV=production
+VUE_APP_MAGENTO_API_URL=https://m2.crane.com
+VUE_APP_CRANE_URL=/shop
+VUE_APP_GATE_URL=/gate
+VUE_APP_ME_URL=/b2b
+VUE_APP_LOGIN_URL=/gate/sign-in
+VUE_APP_PERSONALIZE_URL=https://studio.crane.com/personalize
+VUE_APP_IMAGE_PATH_URL=https://m2.crane.com/media/catalog/product
+VUE_APP_RETAILOR_ID=49057567-f789-420c-98b6-2e0443af73f5
+VUE_APP_IMAGE_CATEGORY_PATH_URL=https://m2.crane.com
+VUE_APP_NODESLS_API_URL=https://imagelib-sls.crane.com
+
+VUE_APP_HOME_PAGE_URL=https://retailer.crane.com
+VUE_APP_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
+VUE_APP_MAINTENANCE_MODE=false
+VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
+VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
+VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
+
+DEPLOY_S3_REGION=us-east-1
+DEPLOY_S3_BUCKET=retailer-edge-production-website-bucket
+DEPLOY_CLOUDFRONT_ID=E1WSOW180GVD3S
+VUE_APP_ASSETS_NODESLS_URL=https://assets-sls.crane.com
+VUE_APP_IMAGE_LIB_URL=https://imagelib-api.crane.com
+VUE_APP_BASE_URL=https://retailer.crane.com
+VUE_APP_RP_AUTH_NAME=rp_auth_prod

.env.staging

@@ -0,0 +1,26 @@
+NODE_ENV=production
+VUE_APP_MAGENTO_API_URL=https://m2-stg.crane.com
+VUE_APP_CRANE_URL=/shop
+VUE_APP_GATE_URL=/gate
+VUE_APP_ME_URL=/b2b
+VUE_APP_LOGIN_URL=/gate/sign-in
+VUE_APP_PERSONALIZE_URL=https://studio-stg.crane.com/personalize
+VUE_APP_IMAGE_PATH_URL=https://m2-stg.crane.com/media/catalog/product
+VUE_APP_RETAILOR_ID=49057567-f789-420c-98b6-2e0443af73f5
+VUE_APP_IMAGE_CATEGORY_PATH_URL=https://m2-stg.crane.com
+VUE_APP_NODESLS_API_URL=https://imagelib-sls-stg.crane.com
+
+VUE_APP_HOME_PAGE_URL=https://www-stg.crane.com
+VUE_APP_CC_CONNECTION_URL=https://www.staging.personalized-stationery.com/CranesConnectionRedesign/Personalize.aspx?
+VUE_APP_MAINTENANCE_MODE=false
+VUE_APP_MAINTENANCE_PAGE_URL=/maintenance
+VUE_APP_IMAGE_CATEGORY_PARAMS=?height=600&width=600
+VUE_APP_CRANE_ORDER_URL=https://ordertest.crane.com
+
+DEPLOY_S3_REGION=us-east-1
+DEPLOY_S3_BUCKET=retailer-edge-staging-website-bucket
+DEPLOY_CLOUDFRONT_ID=E1QLFKCOZUDC8P
+VUE_APP_ASSETS_NODESLS_URL=https://assets-stg-sls.crane.com
+VUE_APP_IMAGE_LIB_URL=https://imagelib-stg-api.crane.com
+VUE_APP_BASE_URL=https://retailer-stg.crane.com
+VUE_APP_RP_AUTH_NAME=rp_auth_stg

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+git_info.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

copyGitInfo.js

@@ -0,0 +1,8 @@
+const fs = require('fs');
+
+console.log("coping git info files ...");
+
+fs.copyFile('git_info.json', './dist/static/js/git_info.json', (err) => {
+    if (err) throw err;
+    console.log('git_info.json was copied to dist folder');
+});

deploy_daily.sh

@@ -0,0 +1,6 @@
+rm -Rf dist/*
+yarn
+yarn build:daily
+yarn copy:seo-files
+yarn copy:cache-files
+yarn deploy:daily

deploy_production.sh

@@ -0,0 +1,10 @@
+rm -Rf dist/*
+rm -Rf git_info.json
+yarn
+yarn build:production
+yarn copy:git-info
+rm dist/static/js/craneRetailerCatalog.js
+rm dist/static/js/magentoCmsCache.js
+# yarn copy:seo-files
+# yarn copy:cache-files
+yarn deploy:production

deploy_staging.sh

@@ -0,0 +1,10 @@
+rm -Rf dist/*
+rm -Rf git_info.json
+yarn
+yarn build:staging
+yarn copy:git-info
+rm dist/static/js/craneRetailerCatalog.js
+rm dist/static/js/magentoCmsCache.js
+# yarn copy:seo-files
+# yarn copy:cache-files
+yarn deploy:staging

package.json

@@ -0,0 +1,78 @@
+{
+    "name": "my_vuetify",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve  --port 8092",
+        "serve:daily": "vue-cli-service serve --mode daily --port 8092",
+        "serve:custom": "vue-cli-service serve --mode custom --port 8092",
+        "serve:development": "vue-cli-service serve --mode development --port 8092",
+        "serve:staging": "vue-cli-service serve --mode staging --port 8092",
+        "serve:production": "vue-cli-service serve --mode production --port 8092",
+        "copy:seo-files": "node copySeoFiles.js",
+        "copy:cache-files": "node copyCacheFiles.js",
+        "copy:git-info": "node copyGitInfo.js",
+        "index-catalog": "node indexCatalog.js",
+        "build": "vue-cli-service build",
+        "build:daily": "NODE_ENV=production vue-cli-service build --mode daily",
+        "build:staging": "NODE_ENV=production vue-cli-service build --mode staging",
+        "build:production": "NODE_ENV=production vue-cli-service build --mode production",
+        "deploy:daily": "AWS_PROFILE=crane vue-cli-service s3-deploy --mode daily",
+        "deploy:production": "AWS_PROFILE=crane vue-cli-service s3-deploy --mode production",
+        "deploy:staging": "AWS_PROFILE=crane vue-cli-service s3-deploy --mode staging",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {    
+        "core-js": "^3.4.4",
+        "fuse.js": "^6.4.2",
+        "js-base64": "^2.5.1",
+        "lodash-humps": "^3.1.5",
+        "vue": "^2.6.10",
+        "vue-cookies": "^1.5.13",
+        "vue-meta": "^2.4.0",
+        "vue-router": "^3.2.0",
+        "vue-tel-input": "^4.4.0",
+        "vue2-google-maps": "^0.10.7",
+        "vueperslides": "^2.8.2",
+        "vuetify": "^2.1.0",
+        "vuex": "^3.1.2",
+        "vuex-map-fields": "^1.3.6"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^4.1.0",
+        "@vue/cli-plugin-eslint": "^4.1.0",
+        "@vue/cli-service": "^4.1.0",
+        "babel-eslint": "^10.0.3",
+        "eslint": "^5.16.0",
+        "eslint-plugin-vue": "^5.0.0",
+        "git-commit-info-webpack-plugin": "^1.0.3",
+        "sass": "^1.19.0",
+        "sass-loader": "^8.0.0",
+        "vue-cli-plugin-critical": "^1.1.0",
+        "vue-cli-plugin-s3-deploy": "^3.0.0",
+        "vue-cli-plugin-vuetify": "^2.0.3",
+        "vue-template-compiler": "^2.6.10",
+        "vuetify-loader": "^1.3.0"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended"
+        ],
+        "rules": {
+            "no-useless-catch": "off",
+            "no-console": "off"
+        },
+        "parserOptions": {
+            "parser": "babel-eslint"
+        }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions"
+    ]
+}

plan.md

@@ -0,0 +1,61 @@
+```mermaid
+gantt
+       dateFormat  YYYY-MM-DD
+       title Project Zenas roadmap January to June
+
+       section Storefront
+       Sketching                :done,    storefront1, 2020-01-06, 14d
+       UI development           :active,  storefront2, 2020-01-09, 60d
+       Magento wiring           :         storefront3, 2020-01-25, 60d
+       Polishing                :         storefront4, after storefront3, 14d
+       Alpha                    :         store_alpha, after storefront4, 14d
+       Beta                     :         store_alpha, after store_alpha,  40d
+
+       section Provisioning
+       Sketching                :done,    prov_sketching, 2020-01-20, 14d
+       UI development           :active,  prov_ui_dev, after prov_sketching, 28d
+       Backend & wiring         :         prov_backend, 2020-01-03, 28d
+       QA                       :         prov_qa, after prov_backend, 14d
+
+       section Builder
+       Sketching                :done,    builder_sketching, 2020-01-06, 21d
+       UI development - P1      :         builder_ui_dev_p1,  2020-01-20, 28d
+       Backend & wiring - P1    :         builder_backend_p1, 2020-02-02, 28d 
+       Alpha                    :         builer_alpha1, after builder_backend_p1, 14d
+       UI development - P2      :         builder_ui_dev_p2,  after builer_alpha1, 30d
+       Backend & wiring - P2    :         builder_backend_p2, after builer_alpha1, 30d 
+       Beta                     :         builder_beta, after builder_backend_p1, 21d
+
+       section Integration
+       Content - set 1          :         int_content_set1, after builer_alpha1, 21d
+       Content - set 2          :         int_content_set2, after int_content_set1, 21d
+       Content - set 2          :         int_content_set3, after int_content_set3, 21d
+       Pricing                  :         int_pricing after prov_backend, 14d        
+       Order workflow           :         int_order_workflow,  after builer_alpha1, 21d
+       Alpha                    :         int_alpha, after int_order_workflow, 21d
+       Beta                     :         int_beta, after int_alpha, 40d
+
+       
+
+
+```
+
+```mermaid
+gantt
+       dateFormat  YYYY-MM-DD
+       title Project Zenas high-level roadmap June to September
+
+       section CMS              
+       Image Library            :         cms_image_lib, 2020-06-01, 14d
+       Page Editor              :         cms_page_editor, after cms_image_lib, 14d
+       Blog                     :         cms_blog, after cms_page_editor, 14d
+       Alpha                    :         cms_alpha, after cms_blog, 14d
+       Beta                     :         cms_beta, after cms_alpha,  28d
+
+       section Builder Plus
+       Acceptable choices       :         builder_plus_acceptable_choices, 2020-06-01, 28d
+       Alpha                    :         builder_plus_alpha, after builder_plus_acceptable_choices, 21d
+       Beta                     :         builder_plus_beta, after builder_plus_alpha, 21d
+
+       
+```

public/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <meta http-equiv="cache-control" content="max-age=0" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="-1" />
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+    <meta http-equiv="pragma" content="no-cache" />
+    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
+    <title>Crane Stationery</title>
+    <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <link rel="preload"  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+</head>
+
+<body>
+    <!-- <img src="https://fp.listrakbi.com/fp/yJ3fjhPTdCKx.jpg" height="1" width="1" hidden /> -->
+    <noscript>
+        <strong>We're sorry but my_vuetify doesn't work properly without JavaScript enabled. Please enable it to
+            continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script src="/static/js/magentoCmsCache.js"></script>
+    <script src="/static/js/craneRetailerCatalog.js"></script>    
+
+    <script>
+        // if (location.hash) {
+        //   history.pushState({}, "Application entry", location.hash.substring(2))
+        // };
+
+        // if (location.hash) {
+        //   console.log("url change to :",location.hash.substring(2)+window.location.search)
+        //   history.pushState({}, "Application entry", location.hash.substring(2)+window.location.search)
+        // };
+    </script>
+    <!-- built files will be auto injected -->
+
+    <!-- Listrak Analytics – Javascript Framework -->
+   <!-- <script type="text/javascript">
+        var biJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
+        (function (d, s, id, tid, vid) {
+            var js, ljs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) return;
+            js = d.createElement(s);
+            js.id = id;
+            js.src = biJsHost + "cdn.listrakbi.com/scripts/script.js?m=" + tid + "&v=" + vid;
+            ljs.parentNode.insertBefore(js, ljs);
+        })(document, 'script', 'ltkSDK', 'yJ3fjhPTdCKx', '1');
+    </script>-->
+    <!--START Pepperjam CODE-->
+    <!--<script>
+        (function () {
+            var a = document.createElement("script");
+            a.type = "text/javascript", a.async = !0, a.src = "//container.pepperjam.com/4135755510.js";
+            var b = document.getElementsByTagName("head")[0];
+            if (b) b.appendChild(a, b);
+            else {
+                var b = document.getElementsByTagName("script")[0];
+                b.parentNode.insertBefore(a, b)
+            }
+        })();
+    </script>-->
+    <!--END Pepperjam CODE-->
+    <!-- Criteo Homepage Tag -->
+    <!--<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
+    <script type="text/javascript">
+        window.criteo_q = window.criteo_q || [];
+        var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
+        window.criteo_q.push(
+            { event: "setAccount", account: 51127 }, // You should never update this line
+         //   { event: "setEmail", email: "" }, // Can be an empty string
+            { event: "setSiteType", type: deviceType },
+         //   { event: "viewHome" }
+        );
+    </script>-->
+    <!-- END Criteo Home Page Tag -->
+</body>
+
+</html>

server.cert

@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDaDCCAlACCQCOfHBFrAiV7zANBgkqhkiG9w0BAQsFADB2MQswCQYDVQQGEwJS
+TzESMBAGA1UECAwJQnVjaGFyZXN0MRIwEAYDVQQHDAlCdWNoYXJlc3QxDjAMBgNV
+BAoMBUF6b3RoMRIwEAYDVQQDDAlsb2NhbGhvc3QxGzAZBgkqhkiG9w0BCQEWDHJh
+cmVzQGF4ei5ybzAeFw0xOTA3MjMwNTEzMzZaFw0xOTA4MjIwNTEzMzZaMHYxCzAJ
+BgNVBAYTAlJPMRIwEAYDVQQIDAlCdWNoYXJlc3QxEjAQBgNVBAcMCUJ1Y2hhcmVz
+dDEOMAwGA1UECgwFQXpvdGgxEjAQBgNVBAMMCWxvY2FsaG9zdDEbMBkGCSqGSIb3
+DQEJARYMcmFyZXNAYXh6LnJvMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
+AQEA1JQI9I+wy48akRcT43OF9m3WEVz7Rn2ILjVkl7O+kmzXi1+gbchqmTmFcgMj
+C2ekjX/z0kEC+wrs4v7/5U8oTVOpkdSmOdbYxFRRVpAW+sC4rFEcIdGaIIBk8kcv
+FnmxBeOEkz25fPrg+Pkt1mPLNEnEVpmyEY9ZhtsbA0tK7kRr1aiVCvvblx459c9r
+TcqoL3t1Db0MxoNvNXUgf/ypotLtBWAkJDdSG9nlZi6jDpHWjfm0UDrT9OMhm9Vz
+xWjzYT8t74lWR7JuzYS0L3hZn60ZukcfmO0FuGrAfEgh03Acit0393x5q0w0LTSu
+5B82ILUJSqhlnkdA3Bk9LD57IwIDAQABMA0GCSqGSIb3DQEBCwUAA4IBAQAYR5Ix
+nr7ZBLtwOt66oJIJCcAI28pKmSZsZCiyS1WkjTmD0ewQbtirZ7BrQEv4IT98eGc5
+2Pn9VwAoJeOXx7Mky3sDJ3Bkv6Usfb2LTW3V6Mdbu2GB7wXYMzg0RjKhEQipIopD
+/TkduLNsCez53r54EpuPp5V3uYUqbwM1WflDIpd/Mx+T6UariJLy18J/o6FAqyAP
+W8F3qFEmv6SWvQqXfZWuA9UpMx88nugcsjUxW9KXLceQ4Si8iyFyQW5+jJ8MPc6m
+IRmIRBQGaMf/6JSrFcaQ5ThqPbRWPIHyROdC66rNzKz9yjUNo7ICBgGWmUvOW0tL
+X1BLZcGo6UJtf6Gh
+-----END CERTIFICATE-----

server.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDUlAj0j7DLjxqR
+FxPjc4X2bdYRXPtGfYguNWSXs76SbNeLX6BtyGqZOYVyAyMLZ6SNf/PSQQL7Cuzi
+/v/lTyhNU6mR1KY51tjEVFFWkBb6wLisURwh0ZoggGTyRy8WebEF44STPbl8+uD4
++S3WY8s0ScRWmbIRj1mG2xsDS0ruRGvVqJUK+9uXHjn1z2tNyqgve3UNvQzGg281
+dSB//Kmi0u0FYCQkN1Ib2eVmLqMOkdaN+bRQOtP04yGb1XPFaPNhPy3viVZHsm7N
+hLQveFmfrRm6Rx+Y7QW4asB8SCHTcByK3Tf3fHmrTDQtNK7kHzYgtQlKqGWeR0Dc
+GT0sPnsjAgMBAAECggEAW/x+74zqHPucrGIHGipYMq2Or07D8NnLPuudzsNZ2LS+
+hLHpkvfhoNIyO4a9+GZt30kZ8cZuCsHMheGAS/L35pYoT1FsaKTegf5WgBWzy+fv
+QamLedrgTeYhSHGjH5+jCYBNUwWnqTxKc5In0pi2SrcM/cheNJkKTX+sbb17/CPW
+/4KRngKLknVj4xwHimGHGLUMArMZ5xAfI0F/hDltU0zbdLwmwYjerp6BKVrazq2+
+reLuUL/olnEXyJO7fIxZCC50lIbuXinsCc6NoqIFFlmv43aRvdW5FL98tGw/FpyV
+LlpRERLTunenku4T7e4rJ0sLvttMqP5E7VP2DexAYQKBgQD6IickrVl/NVwjxkAt
+wxNUfDibtexIiysw0XkCbCGcesFajYip/hk0N5bGBcgUlWBQVwtiPt8sTUVtZjro
+EFxJKKsJGG4DkwccHHlaQYXRl0dkYYABhH7CyRSG+QM5m0qbUAFBEcc73s9zrpGV
+kxYtLhc1dIfXOKByvXYFwb3fswKBgQDZkGTgQGvHFRUIoa5cKssZ3tMfd8ws4bbY
+mO6iDneMr1/bhOzwbx1B2eyprqpig/wiei+8/zPVT4zktw6SGIw/u3xL4fiD9PLe
+v+8Jy0lPw3Dx6tm4dTlq4CqHggPMhoE9gALwkyWc3FXhe8dVwxU/dVPOBhsbtHV9
+oOZdoPy+0QKBgDlnHRSNs7w9wqdzF8dovUbmOxeA6Hi9d2v8poinyA7hHP5q/LIG
+XkJdf3xyVzhiD3hggXxKcWz5TrWMgHhBSOyBKL8tnBG17CvHXRIZd1xiG0AuH/I5
+Nd39x3gyLUtLGBQMiD0ml1JmD7W8mix5VN2JdkoONB5wIGI0mKE5lRmBAoGBAMck
+mHF8BitQbNRdyg+rTAT+JRnkugtK/+b69VN5Eoy/6moxHgBmdM1WAH7A1k0eqqeU
+WCYTIwrZqgmgVcH8nkOoBXof+S4wBC9IWDEK1qwgJT4Kzgc9pbTiQ4uNwpRvedUl
+W4uB5SfTtviSKD+kNcrERlWK2T1ezTyVDsgdF7xBAoGBAIBo0+0ImlxeGXqK8z5g
+a4s/TbIYH7fpSoTcmFPVaO2bhFasLF0J0CmWkCmKgKKnHFTfLqS/Z93wUgCYTQ/Y
+N+ppSCTTZfcUPd3wNcppB6wQUnHg6nmaOjIgQMQT5WlCEOOydkjcfQN0d4tDoc3g
+z3ObQxDxd4XP9mtZ8VQWMXEU
+-----END PRIVATE KEY-----

src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-app color="white">
+    <router-view/>   
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: "App",
+  created() {
+    // const currentPath = this.$router.history.current.path;
+    // if (window.localStorage.getItem('cr_authenticated') === 'false') {
+    //   this.$router.push('/login');
+    // }
+    //
+    // if (currentPath === '/' || currentPath === '/app') {
+    //   this.$router.push('/app/main/analytics');
+    // }
+  },
+  computed: {
+    
+  },
+ 
+};
+</script>
+ <style src="@/styles/_app.scss" lang="scss" /> 
+
+

src/components/common/ConfirmationDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-container class="py-0 my-0">
+    <v-dialog
+      v-model="confirmationDialog"
+      origin="left top"
+      hide-overlay
+      persistent
+      max-width="1100px"
+      flat
+    >
+      <v-card tile>
+        <v-card-title>
+          <v-row no-gutters>
+            <v-col cols="11">
+              <p
+                class="body mt-7 mb-0 fontcolor-black-light"
+              >{{confirmationDetails.confirmationMessage}}</p>
+            </v-col>
+            <v-col cols="1" class="text-right">
+              <router-link to class="text-decoration-none black--text fontcolor-black-light">
+                <div @click="onAction(false)">X</div>
+              </router-link>
+            </v-col>
+          </v-row>
+        </v-card-title>
+        <v-card-actions class="px-4">
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-hover v-slot:default="{ hover }">
+                <v-btn
+                  class="text-uppercase body-font ma-2 button-background"
+                  tile
+                  large
+                  depressed
+                  :outlined="hover"
+                  :color="hover?'white':'primary'"
+                  :class="hover?'primary--text':'white--text'"
+                  @click="onAction(false)"
+                >CANCEL</v-btn>
+              </v-hover>
+              <v-hover v-slot:default="{ hover }">
+                <v-btn
+                  class="text-uppercase body-font ma-2 button-background"
+                  :outlined="hover"
+                  :color="hover?'white':'error'"
+                  :class="hover?'error--text':'white--text'"
+                  tile
+                  large
+                  depressed
+                  @click="onAction(true)"
+                >OK</v-btn>
+              </v-hover>
+            </v-col>
+          </v-row>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "ConfirmationDialog",
+  props: ["confirmationDialog", "confirmationDetails"],
+  data: () => ({
+    //confirmationDialog:false
+  }),
+  components: {},
+  computed: {},
+  methods: {
+    onAction: function(action) {
+      this.$emit("actionRemove", { submit: action });
+    }
+  },
+  created() {}
+};
+</script>

src/components/common/SnackbarComponent.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-container class="py-0 my-0">
+    <v-snackbar
+      :color="snackbar.color"
+      v-model="snackbar.show"
+      right
+      top
+      :timeout="snackbar.timeout"
+    >{{ snackbar.message }}</v-snackbar>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "SnackbarComponent",
+  props:["snackbar"],
+  data: () => ({
+  }),
+  components: {},
+  computed: {
+  },
+  methods: {
+  },
+  created() {
+  }
+};
+</script>

src/components/common/SubscriptionDialog.vue

@@ -0,0 +1,221 @@
+<template>
+  <v-container class="py-0 my-0">
+    <v-dialog
+      v-model="subscriptionDialog"
+      :max-width="$vuetify.breakpoint.xlOnly?1100:800"
+      :scrollable="false"
+      :overlay-opacity="0.5"
+    >
+      <v-card
+        flat
+        tile
+        :img="isDesktop? `http://media.crane.com/9441/popup_v3.jpg` : ''"
+        :class="isDesktop?'':'dialog-background'"
+      >
+        <v-card-title class="px-2 px-sm-4 pb-0 pt-0 pt-sm-4">
+          <v-row no-gutters>
+            <v-col cols="12" class="d-flex justify-end">
+              <v-btn @click="subscriptionDialog=false" class="dailog-close-button" icon>
+                <v-icon :large="isDesktop" :small="!isDesktop">mdi-window-close</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card-title>
+        <v-card-text class="pb-1 pb-sm-3 px-2 px-sm-4">
+          <v-row no-gutters class="mx-0">
+            <v-col cols="12" sm="6">
+              <v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
+                <v-form ref="subscribeForm" v-model="footerFormValid">
+                  <div class="pa-md-1">
+                    <v-col cols="12" class="pt-0 mb-sm-4">
+                      <span
+                        class="primary--text h3 font-weight-regular text-uppercase"
+                      >{{stayInTouch}}</span>
+                      <p
+                        class="subscribe-fontcolor-black-darken body-font ls-n10 mb-0 pt-2 pt-sm-4"
+                      >Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
+                    </v-col>
+                    <v-col cols="12" class="pb-0 pt-2 pt-sm-3 d-md-block">
+                      <v-row no-gutters>
+                        <v-col cols="12">
+                          <v-text-field
+                            @blur="resetEmailValidation"
+                            label="Your Email"
+                            id="emailTextBox"
+                            class="footerpage_email_textbox fontsize-14 regular-font"
+                            solo
+                            flat
+                            dense
+                            :rules="emailRules"
+                            tile
+                            v-model="email"
+                          ></v-text-field>
+                        </v-col>
+                        <v-col cols="12">
+                          <v-btn
+                            depressed
+                            :block="!isDesktop"
+                            color="primary"
+                            class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body-font"
+                            @click="submit()"
+                          >SUBMIT</v-btn>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+                  </div>
+                </v-form>
+              </v-row>
+            </v-col>
+          </v-row>
+          <v-row v-if="!isDesktop"  class="regular-font subscribe-fontcolor-black-darken mx-0 px-sm-6 px-2">
+            <v-col cols="12" sm="3">
+              <router-link to class="subscribe-fontcolor-black-darken">
+                <span @click="subscriptionDialog=false">No, thank you</span>
+              </router-link>
+            </v-col>
+            <v-col cols="12" sm="9" class="pt-0 pt-sm-3">
+              By signing up, you agree to our and
+              <router-link
+                to
+                @click.native="goToLink('https://www.crane.com/privacy-policy')"
+                title="Privacy Policy"
+                class="subscribe-fontcolor-black-darken"
+              >
+                <span>Privacy Policy</span>
+              </router-link>and
+              <router-link
+                to
+                @click.native="goToLink('https://www.crane.com/terms-of-use')"
+                title="Terms of Service"
+                class="subscribe-fontcolor-black-darken"
+              >
+                <span>Terms of Service</span>
+              </router-link>.
+            </v-col>
+          </v-row>
+        </v-card-text>
+        </v-card>
+        <v-row v-if="isDesktop"  class="regular-font subscribe-fontcolor-black-darken bottom-div-background mx-0">
+          <v-col cols="12" sm="3">
+              <router-link to class="subscribe-fontcolor-black-darken">
+                <span @click="subscriptionDialog=false">No, thank you</span>
+              </router-link>
+          </v-col>
+          <v-col cols="12" sm="9" class="pt-0 pt-sm-3">
+              By signing up, you agree to our  and 
+              <router-link to
+                  @click.native="goToLink('https://www.crane.com/privacy-policy')"   title="Privacy Policy" class="subscribe-fontcolor-black-darken">
+                <span>Privacy Policy</span>
+              </router-link>
+              and
+              <router-link to
+                  @click.native="goToLink('https://www.crane.com/terms-of-use')" title="Terms of Service" class="subscribe-fontcolor-black-darken">
+                <span>Terms of Service</span>
+              </router-link>.
+          </v-col>
+      </v-row>
+    </v-dialog>
+    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
+  </v-container>
+</template>
+<script>
+/*eslint-disable*/
+import SnackbarComponent from "@/components/common/SnackbarComponent";
+export default {
+  name: "SubscriptionDialog",
+  data: () => ({
+    subscriptionDialog: false,
+    footerFormValid: false,
+    emailRules: [
+      (v) => !!v || "Email is required",
+      (v) => /.+@.+\..+/.test(v) || "Email must be valid",
+    ],
+    stayInTouch: "LET'S STAY IN TOUCH",
+    email: null,
+    snackbar: {
+      show: false,
+      message: null,
+      color: null,
+      timeout: 0,
+    },
+  }),
+  components: { SnackbarComponent },
+  computed: {
+    isDesktop: function () {
+      return this.$vuetify.breakpoint.xsOnly ? false : true;
+    },
+  },
+  methods: {
+    goToLink(pageLink) {
+      window.location.replace(pageLink);
+      //} else {
+      //window.open(routeSecond, "_self");
+      //}
+    },
+    submit: function () {
+      if (this.$refs.subscribeForm.validate()) {
+        this.$store
+          .dispatch("emailSubscriber/fetchEmailSubscriber", {
+            email: this.email,
+          })
+          .then((status) => {
+            if (status === "you have successfully subscribed.") {
+              this.snackbar = {
+                message: status,
+                color: "success",
+                show: true,
+                timeout: 5000,
+              };
+            } else {
+              this.snackbar = {
+                message: status,
+                color: "error",
+                show: true,
+                timeout: 5000,
+              };
+            }
+          })
+          .catch((error) => {
+            this.snackbar = {
+              message: error.message,
+              color: "error",
+              show: true,
+              timeout: 5000,
+            };
+          });
+        this.email = null;
+        this.$refs.subscribeForm.resetValidation();
+        this.subscriptionDialog = false;
+      }
+    },
+
+    resetEmailValidation() {
+      this.$refs.subscribeForm.resetValidation();
+    },
+  },
+  mounted() {          
+    // setTimeout(() => {    
+    //  let userVisitCount= localStorage.getItem("cr_userVisitCount");     
+    //   if (!userVisitCount||userVisitCount == 1) this.subscriptionDialog = true;
+    //   else this.subscriptionDialog = false;
+    // }, 4000);
+  },
+};
+</script>
+<style>
+.bottom-div-background {
+  background: rgba(217 218 221 / 20%);
+}
+.dialog-background {
+  background-color: #97cfe3 !important;
+}
+.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before {
+  opacity: 0 !important;
+}
+.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
+  opacity: 0 !important;
+}
+.subscribe-fontcolor-black-darken {
+  color: #1d1d1d !important;
+}
+</style>

src/components/gate/ForgotPasswordComponent.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary" class="white--text" flat>
+      <v-toolbar-title text-center>Forgot Password</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-alert type="error" v-if="!!forgotPasswordError">{{forgotPasswordError}}</v-alert>
+      <v-alert type="success" v-if="!!forgotPasswordMessage">{{forgotPasswordMessage}}</v-alert>
+      <v-form ref="forgotPassword" v-on:submit.prevent="resetPassword">
+        <v-text-field
+          label="Your Registered Email"
+          type="email"
+          class="textfield-border"
+          ref="email"
+          v-model="email"
+          :rules="emailRules"
+          prepend-icon="mdi-email-outline"
+        >
+        </v-text-field>
+
+        <div class="mt-5 text-center">
+           <v-hover v-slot:default="{ hover }">
+            <v-btn
+              large
+              block
+              :outlined="hover ? false:true"
+              :color="hover ? 'primary' : 'primary'"
+              class="mt-6 body"
+              tile
+              @click="resetPassword"
+              :disabled="inProgress"
+            ><v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>Reset Password</v-btn>
+          </v-hover>
+        </div>
+      </v-form>
+      <v-row>
+        <v-col cols="12">
+          Already have a account sign in here
+          <v-hover v-slot:default="{ hover }">
+          <router-link class="text-decoration-none" :to="{name:'LoginPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign In</router-link>
+          </v-hover>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import { createHelpers } from "vuex-map-fields";
+const { mapFields } = createHelpers({
+  getterType: "registration/getField",
+  mutationType: "registration/updateField"
+});
+
+export default {
+  name: "ForgotPasswordComponent",
+  data: () => ({
+    valid: true,
+    emailRules: [
+      v => !!v || "E-mail is required",
+      v => /.+@.+\..+/.test(v) || "E-mail must be valid"
+    ]
+  }),
+  computed: {
+  ...mapFields([
+      "forgotOne",
+      "forgotOne.email",
+      "spinLogin",
+      "forgotPasswordError",
+      "forgotPasswordMessage",
+      "inProgress"
+    ])
+  },
+  methods: {
+    resetPassword(e) {
+      e.preventDefault();
+      if (this.$refs.forgotPassword.validate()) {
+        this.$store
+          .dispatch("registration/forgotPassword")
+          .then(data => {
+            if (data) {
+              this.$store.dispatch(
+                "auth/prepare",
+                "If there is an account associated with" +' '+ this.email +' '+ "you will receive an email with a link to reset your password."
+              );
+              this.$router.push({
+                name: "SignInPage"
+              });
+            }
+          });
+      }
+    }
+  },
+  created() {
+    this.$store.dispatch("registration/newForgotPassword");
+    this.$store.dispatch("registration/resetState");
+  }
+};
+</script>

src/components/gate/GateLayout.scss

@@ -0,0 +1,29 @@
+.gatelayout-background-image {
+    background-size: cover;
+    background-image: url("../../assets/Crane_Log_In_Page.jpg");
+    background-repeat: no-repeat;
+    height: 100%;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-position: center;
+  }
+  
+.mobile-header-list :before {
+    color:#fff;
+}
+.mobile-header-list-subcategory :before {
+    color:#fff;
+}
+.active-menu-nav-link{
+    color: #000000!important;    
+}
+.active-menu-nav-link.mobile-header-list :before {
+    color: #000000;    
+}
+.active-menu-nav-link.mobile-header-list-subcategory :before {
+    color: #000000!important;     
+}
+.active-menu-nav-link .mobile-header-list-subcategory :before {
+    color:#fff;
+}

src/components/gate/GateLayout.vue

@@ -0,0 +1,406 @@
+<template>
+  <div
+    class="gatelayout-background-image"
+    ref="divOne"
+    v-scroll="onScroll"
+    v-resize="OnResize"
+  >
+    <v-navigation-drawer
+      v-model="showMenu"
+      v-if="showMenu"
+      width="320"
+      :app="showMenu"
+      :absolute="!showMenu"
+      color="primary"
+      tile
+    >
+      <v-icon
+        @click.stop="showMenu = !showMenu"
+        class="white--text pa-4 pl-4 cursor-pointer"
+        >mdi-close</v-icon
+      >
+      <div class="px-4 pb-3">
+      
+        <v-text-field
+          v-model="search"
+          autofocus
+          single-line
+          type="text"
+          color="white"
+          class="mobile-header-search-field white--text background-transparent"
+          @blur="showSearchInput = false"
+          v-on:keyup.enter="GotoPage"
+        >
+          <template v-slot:prepend>
+            <v-icon @click="GotoPage()" class="white--text">mdi-magnify</v-icon>
+          </template>
+        </v-text-field>
+      </div>
+
+      <v-row class="mt-12" justify="center" v-if="inProgress">
+        <v-progress-circular
+          :size="60"
+          color="white"
+          indeterminate
+        ></v-progress-circular>
+      </v-row>
+    
+
+      <v-list class="pl-4 mobile-header-list background-transparent">
+        <v-list-group v-if="userAuth">
+          <template v-slot:activator>
+            <v-list-item-content>
+              <v-list-item-title class="white--text text-uppercase h3 my-2"
+                >Hi {{ userName }}</v-list-item-title
+              >
+            </v-list-item-content>
+          </template>
+          <v-list-item>
+            <span
+              class="white--text text-uppercase h4 my-2"
+              @click="goToDashboard()"
+              >My Account</span
+            >
+          </v-list-item>
+          <v-list-item>
+            <span
+              @click="goToLogout()"
+              class="white--text text-uppercase h4 my-2"
+              >Logout</span
+            >
+          </v-list-item>
+        </v-list-group>
+        <v-list-item v-if="!userAuth">
+          <v-list-item-content class="pa-0">
+            <v-list-item-title
+              class="white--text text-uppercase h3 my-2"
+              @click="goToLogin()"
+              >Sign-In</v-list-item-title
+            >
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    <Header
+      v-bind:heroData="heroData"
+      v-bind:offsetTop="offsetTop"
+      @action="onAction"
+      @actionScroll="onActionScroll"
+    />
+    <v-container fill-height class="ios-fill-height py-0">
+      <v-row align="center" align-content="center" justify="center">
+        <v-col cols="12" sm="8" md="6" class="mr-sm-0">
+          <router-view />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+<script>
+import Header from "@/components/layout/header/Header";
+import {
+  customAttributeValueNew,
+  getCategoryOne,
+} from "@/services/util.service";
+import { doFetchCatelogProducts } from "@/services/product.service";
+import humps from "lodash-humps";
+export default {
+  name: "GateLayout",
+  components: {
+    Header,
+  },
+  data: () => ({
+    activeMainMenu: "",
+    activeSubMenu: "",
+    activeSubMenuItem: "",
+    offsetTop: 0,
+    showMenu: false,
+    heroData: null,
+    pageNo: 1,
+    pageSize: 9,
+    // categoryList: [],
+    sortSelect: { label: "Position", value: "position" },
+    blockId: "30",
+    search: null,
+    searchResultList: [],
+    lookupCatelog: null,
+    searchInProgress: false,
+  }),
+  watch: {
+    lookupCatelog: {
+      handler: function (newVal) {
+        clearTimeout(this.lookupCatelogProductTimeoutId);
+        this.lookupCatelogProductTimeoutId = setTimeout(async () => {
+          try {
+            if (!newVal) this.searchResultList = [];
+            else {
+              this.searchInProgress = true;
+              let results = await doFetchCatelogProducts(newVal);
+              if (results != null) {
+                this.searchResultList = humps(results);
+              } else {
+                this.searchResultList = [];
+              }
+              this.searchInProgress = false;
+            }
+          } catch (error) {
+            this.searchResultList = [];
+          }
+        }, 500);
+      },
+    },
+  },
+  computed: {
+    easingOptions() {
+      return {
+        duration: this.duration,
+        //  offset: this.offset,
+        easing: this.easing,
+      };
+    },
+    isDesktop: function () {
+      return this.$vuetify.breakpoint.xsOnly ? true : false;
+    },
+    userAuth: function () {
+      return this.$store.state.auth.userAuth;
+    },
+    
+    userName: function () {
+      return this.$store.state.accountOne.one.firstname;
+    },
+    inProgress: function () {
+      return this.$store.state.headerCategoryList.inProgress;
+    },
+    categoryList: {
+      get: function () {
+        return this.$store.state.headerCategoryList.categoryList;
+      },
+      set: function () {},
+      //return this.$store.state.headerCategoryList.categoryList;
+    },
+    categoryDetailsList: function () {
+      return this.$store.state.headerCategoryList.categoryDetails;
+    },
+  },
+  methods: {
+    OnResize() {
+      setTimeout(() => {
+        if (this.$vuetify.breakpoint.mdAndUp) {
+          this.showMenu = false;
+        }
+      }, 200);
+    },
+    GotoPage() {
+      if (this.search) {
+        this.showSearchInput = false;
+        this.searchResultList = [];
+        let searchKeywords = this.search;
+        let pagePath = this.$route.path;
+        let isGateModulePage = pagePath.includes("/gate/");
+        if (isGateModulePage) {
+          window.open(
+            `/search?pageNumber=${this.pageNo}&pageSize=${this.pageSize}&sortBy=relevance&q=${searchKeywords}&filter=e30=`,
+            "_self"
+          );
+        } else {
+          this.$router
+            .push({
+              name: "SearchPage",
+              query: {
+                pageNumber: this.pageNo,
+                pageSize: this.pageSize,
+                sortBy: "relevance",
+                q: searchKeywords,
+                filter: "e30=",
+              },
+            })
+            .catch((error) => {
+              error;
+            });
+          this.$store.dispatch("catalogBrowser/search", {
+            fullCatalog: window.craneCatalog,
+            keywords: searchKeywords,
+            filters: [],
+            pageNumber: 1,
+            pageSize: 9,
+            sortBy: "relevance",
+          });
+        }
+        localStorage.removeItem("cr_subCategoryItemId");
+        localStorage.removeItem("cr_subCategoryId");
+        localStorage.removeItem("cr_mainCategoryId");
+        this.search = null;
+      }
+    },
+    onAction(action) {
+      this.showMenu = action.showMenu;
+      this.categoryList = action.categoryList;
+    },
+    onActionScroll() {
+      if (this.$refs.divOne) {
+        this.$vuetify.goTo(this.$refs.divOne, this.easingOptions);
+      }
+    },
+    onScroll() {
+      this.offsetTop = window.pageYOffset || document.documentElement.scrollTop;
+    },
+    goToStoreLocator() {
+      // window.open(`/store-locator`, "_self");
+    },
+    goToLogin() {
+      window.open("/gate/sign-in", "_self");
+    },
+    getCustomAttributeValue(customAttributes, attributeCode) {
+      return customAttributeValueNew(customAttributes, attributeCode);
+    },
+    /* eslint-disable no-alert, no-console ,  no-debugger */
+    async categoryProducts(flag, category, subcategorys, items) {
+      let mainCat = "";
+      switch (flag) {
+        case "main":
+          mainCat = category;
+          localStorage.setItem("cr_mainCategoryId", category);
+          localStorage.setItem("cr_subCategoryItemId", items);
+          localStorage.setItem("cr_subCategoryId", subcategorys);
+          break;
+        case "subManu":
+          mainCat = subcategorys;
+          localStorage.setItem("cr_mainCategoryId", category);
+          localStorage.setItem("cr_subCategoryItemId", items);
+          localStorage.setItem("cr_subCategoryId", subcategorys);
+          break;
+        case "subManuChild":
+          mainCat = items;
+          localStorage.setItem("cr_mainCategoryId", category);
+          localStorage.setItem("cr_subCategoryItemId", items);
+          localStorage.setItem("cr_subCategoryId", subcategorys);
+          break;
+        default:
+      }
+      if (this.categoryDetailsList) {
+        let categoryOne = await getCategoryOne(
+          this.categoryDetailsList,
+          mainCat
+        );
+        if (categoryOne) {
+          this.$store.dispatch("layout/setHeroContent", categoryOne);
+          let path = this.getCustomAttributeValue(
+            categoryOne.customAttributes,
+            "url_path"
+          );
+         // console.log(categoryOne.name, categoryOne);
+          /*googleAanalyticsEventCategory(
+            "browse_category",
+            "ecommerce",
+            categoryOne
+          );*/
+          let pagePath = this.$route.path;
+          let isGateModulePage = pagePath.includes("/gate/");
+          if (isGateModulePage) {
+            window.open(`/${path}`, "_self");
+          }
+         this.$store.dispatch("catalogBrowser/search", {
+          fullCatalog: window.craneCatalog,
+          keywords: "",
+          filters: [{ label: "Category", prop: "ci", value: mainCat }],
+          pageNumber: 1,
+          pageSize: 9,
+          sortBy: "position",
+        })
+        .catch((error) => {
+          error;
+        });
+
+        }
+      }
+    },
+    goToLogout() {
+      this.$store.dispatch("auth/logout");
+    },
+    goToDashboard() {
+      window.open("/b2b", "_self");
+    },
+  },
+  created() {
+    if (!this.categoryList.id) {
+      this.$store.dispatch("headerCategoryList/fetchCategoryList");
+    }
+
+   // this.$store.dispatch("block/fetchHeaderPromoBanner", this.blockId);
+    if (this.userAuth) {
+      this.$store.dispatch("userCartProduct/cartProductList");
+      // this.$store.dispatch("userCartProduct/productTotalAmt");
+      this.$store.dispatch("accountOne/basicInfo");
+    }
+  },
+};
+</script>
+<style lang="scss">
+.header-input-custom {
+  .v-input__control {
+    background-color: transparent !important;
+  }
+  .v-input__slot {
+    &:before {
+      border-color: #ffffff !important;
+      border-style: solid;
+      border-width: 1px;
+    }
+    &:after {
+      border-color: #ffffff !important;
+      border-style: solid;
+      border-width: 1px;
+    }
+  }
+  .v-text-field__slot {
+    input {
+      color: #ffffff !important;
+      border-bottom-color: #ffffff !important;
+    }
+    input::placeholder {
+      color: #ffffff !important;
+    }
+    input:-ms-input-placeholder {
+      color: #ffffff !important;
+    }
+
+    input ::-ms-input-placeholder {
+      color: #ffffff !important;
+    }
+  }
+  .v-icon {
+    color: #ffffff !important;
+  }
+  .mobile-header-list.theme--light.v-list {
+    background: #2805da;
+  }
+  .v-list-item__icon {
+    color: #ffffff !important;
+  }
+}
+.mobile-header-autocomplete .v-input__append-inner .v-input__icon {
+  display: none !important;
+}
+.mobile-header-autocomplete .theme--light.v-icon {
+  color: #ffffff !important;
+}
+.mobile-header-autocomplete.theme--light.v-input input {
+  color: #ffffff !important;
+}
+.mobile-header-autocomplete.theme--light.v-text-field--filled
+  > .v-input__control
+  > .v-input__slot {
+  background-color: transparent !important;
+}
+.mobile-header-search-field.theme--light.v-text-field--solo
+  > .v-input__control
+  > .v-input__slot {
+  background-color: transparent !important;
+}
+.mobile-header-search-field.theme--light.v-input input {
+  color: #fff;
+}
+</style>
+
+<style  src="./GateLayout.scss" lang="scss" scoped>
+</style>

src/components/gate/ResetPasswordComponent.vue

@@ -0,0 +1,137 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary" class="white--text" flat>
+      <v-toolbar-title text-center>Reset Password</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-alert type="error" v-if="!!resetPasswordError">{{resetPasswordError}}</v-alert>
+      <v-alert type="success" v-if="!!resetPasswordMessage">{{resetPasswordMessage}}</v-alert>
+      <v-form ref="resetPassword"  v-on:submit.prevent="resetPassword" >
+          <v-text-field v-if="emailTextfield" label="Email Id" class="textfield-border" placeholder="Enter your email id" type="email" ref="email" v-model="email" :rules="emailRules" prepend-icon="mdi-email-outline">
+        </v-text-field>
+
+        <v-text-field
+          type="password"
+          class="textfield-border"
+          label="New Password"
+          ref="newPassword"
+          v-model="newPassword"
+          @click="clear()"
+          :rules="commonValidationRules.passwordRule"
+          required
+          prepend-icon="mdi-lock"
+        >
+        </v-text-field>
+
+        <v-text-field
+          type="password"
+          class="textfield-border"
+          label="Confirm Password"
+          ref="confirmPassword"
+          v-model="confirmPassword"
+          :rules="[passwordConfirmationRule]"
+          prepend-icon="mdi-lock"
+          required
+        >
+        </v-text-field>
+
+        <div class="mt-5 text-center">
+           <v-hover v-slot:default="{ hover }">
+            <v-btn
+              large
+              block
+              :outlined="hover ? false:true"
+              :color="hover ? 'primary' : 'primary'"
+              class="mt-6 body"
+              tile
+              @click="resetPassword"
+              :disabled="inProgress"
+            ><v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>Reset Password</v-btn>
+          </v-hover>
+        </div>
+      </v-form>
+       <v-row>
+        <v-col cols="12">
+          Already have an account sign in here
+          <v-hover v-slot:default="{ hover }">
+           <router-link class="text-decoration-none" :to="{name:'LoginPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign In</router-link>
+          </v-hover>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import { createHelpers } from "vuex-map-fields";
+import { commonValidationRules } from "@/services/util.service";
+const { mapFields } = createHelpers({
+  getterType: "registration/getField",
+  mutationType: "registration/updateField"
+});
+
+export default {
+  name: "ResetPasswordComponent",
+  data: () => ({
+    valid: true,
+    confirmPassword: "",
+    commonValidationRules: commonValidationRules,
+     emailRules: [
+      v => !!v || "Email Id is required",
+      v => /.+@.+\..+/.test(v) || "Email Id must be valid"
+    ],
+        emailTextfield:false
+
+  }),
+  computed: {
+    ...mapFields([
+      "resetOne",
+      "resetOne.newPassword",
+        "resetOne.email",
+      "resetPasswordError",
+      "inProgress",
+      "resetPasswordMessage"
+    ]),
+    passwordConfirmationRule() {
+      return () =>
+        this.newPassword === this.confirmPassword || "Password must match";
+    },
+  },
+  methods: {
+    resetPassword(e) {
+      e.preventDefault();
+      if (this.$refs.resetPassword.validate()) {
+
+        this.$store
+          .dispatch("registration/resetPassword")
+          .then(data => {
+            if (data) {
+              this.$store.dispatch(
+                "auth/prepare",
+                "You updated your password."
+              );
+              this.$router.push({
+                name: "SignInPage"
+              });
+            }
+          });
+      }
+    },
+    clear() {
+      return (this.confirmPassword = "");
+    }
+  },
+  created() {
+    this.token = this.$route.params.token;   
+     this.email = this.$route.params.emailId;
+      if(!this.email || this.email=='null' || this.email== 'undefined' ) 
+     {
+      this.emailTextfield =true;
+     }
+    let userIdAndToken = {
+      token : this.token,
+      email:this.email
+      }
+    this.$store.dispatch("registration/newResetPassword",{userIdAndToken});
+  }
+};
+</script>

src/components/gate/SignInComponent.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary" class="white--text" flat>
+      <v-toolbar-title text-center>Login</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-alert class="word-break" type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
+      <v-alert class="word-break" type="success" v-if="!!signInMessage">{{signInMessage}}</v-alert>
+      <v-form ref="siginForm" id=signin-form  @submit.prevent="signIn">
+        <v-text-field label="Email Id" class="textfield-border" placeholder="Enter your email id" type="email" ref="email" v-model="email" :rules="emailRules" prepend-icon="mdi-email-outline">
+        </v-text-field>
+
+        <v-text-field
+          type="password"
+          class="textfield-border"
+          label="Password"
+          placeholder="Enter your password"
+          ref="password"
+          v-model="password"
+          :rules="passwordRules"
+          prepend-icon="mdi-lock"
+        >
+        </v-text-field>
+         <v-checkbox v-model="logged" label="Keep me logged in" color="indigo"></v-checkbox>
+        <div class="text-right mt-4">
+          <v-hover v-slot:default="{ hover }">
+            <v-btn
+              :disabled="inProgress"
+              large
+              block
+              :outlined="hover ? false:true"
+              :color="hover ? 'primary' : 'primary'"
+              class="mt-6 body"
+              tile
+              type="submit"
+              form="signin-form"
+              @click="signIn"
+            ><v-progress-circular :size="20" :color="hover ? 'primary' : 'primary'" indeterminate v-if="inProgress"></v-progress-circular> Login</v-btn>
+          </v-hover>
+        </div>
+      </v-form>
+
+      <v-row >
+      <!--  <v-col cols="12">
+          Create an account ?
+          <v-hover v-slot:default="{ hover }">
+            <router-link class="text-decoration-none" :to="{name:'SignUpPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign Up</router-link>
+          </v-hover>
+        </v-col>-->
+        <v-col cols="12"  >
+          Forgot your password?
+          <v-hover v-slot:default="{ hover }">
+            <router-link class="text-decoration-none" :to="{name:'forgot-password'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Forgot Password</router-link>
+          </v-hover>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import { createHelpers } from "vuex-map-fields";
+const { mapFields } = createHelpers({
+  getterType: "auth/getField",
+  mutationType: "auth/updateField"
+});
+
+export default {
+  name: "SignInComponent",
+  data: () => ({
+    valid: true,
+    passwordRules: [
+      v => !!v || "Password is required",
+      v => (v && v.length >= 8) || "Password must be at least 8 characters"
+    ],
+    emailRules: [
+      v => !!v || "Email Id is required",
+      v => /.+@.+\..+/.test(v) || "Email Id must be valid"
+    ]
+  }),
+  computed: {
+    ...mapFields([
+      "one",
+      "one.email",
+      "one.password",
+      "one.logged",
+      "errorMessage",
+      "inProgress",
+      "signInMessage"
+    ])
+  },
+  methods: {
+    signIn() {
+      if (this.$refs.siginForm.validate()) {
+        this.$store.dispatch("auth/login");
+      }
+    }
+  },
+  created() {
+      this.$store.dispatch("auth/newUserLogin");
+  }
+};
+</script>

src/components/gate/SignUpComponent.vue

@@ -0,0 +1,155 @@
+<template>
+  <v-card class="mx-auto my-auto" elevation="10">
+    <v-toolbar color="primary" class="white--text" flat>
+      <v-toolbar-title>Signup</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-alert type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
+      <v-alert type="success" v-if="!!signUpMessage">{{signUpMessage}}</v-alert>
+      <v-form ref="signUpForm" id="signup-form" @submit.prevent="signUp">
+        <v-text-field
+          label="First Name"
+          class="textfield-border"
+          type="text"
+          ref="firstName"
+          placeholder="Enter your First Name"
+          v-model="firstname"
+          :rules="firstNameRules"
+          prepend-icon="mdi-account"
+        ></v-text-field>
+        <v-text-field
+          label="Last Name"
+          class="textfield-border"
+          type="text"
+          ref="lastName"
+          placeholder="Enter your Last Name"
+          v-model="lastname"
+          :rules="lastNameRules"
+          prepend-icon="mdi-account"
+        ></v-text-field>
+
+        <v-text-field
+          label="Email Id"
+          class="textfield-border"
+          placeholder="Enter your email"
+          type="email"
+          ref="email"
+          id="userEmail"
+          v-model="email"
+          :rules="emailRules"
+          prepend-icon="mdi-email-outline"
+        ></v-text-field>
+
+        <v-text-field
+          type="password"
+          class="textfield-border"
+          label="Password"
+          ref="password"
+          placeholder="Enter your password"
+          v-model="password"
+          :rules="commonValidationRules.passwordRule"
+          prepend-icon="mdi-lock"
+        ></v-text-field>
+         <v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox>
+        <div class="text-right mt-4">
+          <v-hover v-slot:default="{ hover }">
+            <v-btn
+              large
+              block
+              :disabled="inProgress"
+              :outlined="hover ? false:true"
+              :color="hover ? 'primary' : 'primary'"
+              class="mt-6 body"
+              tile
+              type="submit"
+              form="signup-form"
+              @click="signUp"
+            >
+              <v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>Signup
+            </v-btn>
+          </v-hover>
+        </div>
+      </v-form>
+      <v-row>
+        <v-col cols="12">
+          Already have an account sign in here
+          <v-hover v-slot:default="{ hover }">
+            <router-link
+              class="text-decoration-none"
+              :to="{name:'LoginPage'}"
+              :class="hover ? 'content-link-hover-color' : 'primary--text'"
+            >Sign In</router-link>
+          </v-hover>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import { createHelpers } from "vuex-map-fields";
+import { commonValidationRules } from "@/services/util.service";
+const { mapFields } = createHelpers({
+  getterType: "registration/getField",
+  mutationType: "registration/updateField"
+});
+
+export default {
+  name: "SignUpComponent",
+  components: {},
+  computed: {
+    ...mapFields([
+      "one",
+      "one.email",
+      "one.firstname",
+      "one.lastname",
+      "one.password",
+      "one.newsletter",
+      "errorMessage",
+      "inProgress",
+      "signUpMessage"
+    ])
+  },
+  data: () => ({
+    valid: true,
+    commonValidationRules: commonValidationRules,
+    firstNameRules: [
+      v => !!v || "First Name is required",
+      v => (v && v.length >= 3) || "First Name must be at least 3 characters"
+    ],
+    lastNameRules: [
+      v => !!v || "Last Name is required",
+      v => (v && v.length >= 3) || "Last Name must be at least 3 characters"
+    ],
+    // passwordRules: [
+    //   v => !!v || "Password is required",
+    //   v => (v && v.length >= 8) || "Password must be at least 8 characters"
+    // ],
+    emailRules: [
+      v => !!v || "Email Id is required",
+      v => /.+@.+\..+/.test(v) || "Email Id must be valid"
+    ]
+  }),
+  methods: {
+    signUp(e) {
+      e.preventDefault();
+      if (this.$refs.signUpForm.validate()) {
+        this.$store.dispatch("registration/signUp");
+        // .then(data => {
+        //   if (data) {
+        //     this.$store.dispatch(
+        //       "auth/prepare",
+        //       "You must confirm your account.Please check your email for the confirmation."
+        //     );
+        //     this.$router.push({
+        //       name: "LoginPage"
+        //     });
+        //   }
+        // });
+      }
+    }
+  },
+  created() {
+    this.$store.dispatch("registration/resetState");
+  }
+};
+</script>

src/components/layout/Layout.scss

@@ -0,0 +1,50 @@
+.background-transparent {
+    background: transparent !important;
+}
+
+.mobile-header-list :before {
+    //  display: none;
+    color: #fff;
+}
+
+.mobile-header-list-subcategory :before {
+    color: #fff;
+}
+
+.active-menu-nav-link {
+    color: #000000!important;
+}
+
+.active-menu-nav-link.mobile-header-list :before {
+    color: #000000;
+}
+
+.active-menu-nav-link.mobile-header-list-subcategory :before {
+    color: #000000!important;
+}
+
+.active-menu-nav-link .mobile-header-list-subcategory :before {
+    color: #fff;
+}
+
+.mobile-header-autocomplete .v-input__control.v-select__slot.v-input__append-inner {
+    display: none !important;
+}
+.page-height{
+   height: calc(100vh - 50px);
+}
+.mobile-header-search-field.theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background-color: transparent !important;
+}
+.mobile-header-search-field.theme--light.v-input input{
+    color:#fff;
+}
+.mobile-header-search-field.theme--light.v-text-field>.v-input__control>.v-input__slot:before{
+    border-color: #fff;
+}
+.mobile-header-search-field.theme--light.v-text-field:not(.v-input--has-state):hover>.v-input__control>.v-input__slot:before {
+    border-color: #fff;
+}
+.mobile-header-search-field .v-text-field__details{
+    display: none;
+}

src/components/layout/Layout.vue

@@ -0,0 +1,769 @@
+<template>
+  <div
+    v-scroll="onScroll"
+    v-resize="OnResize"
+    v-bind:class="!heroData ? 'mt-12 page-height' : 'height-100'"
+  >
+    <v-navigation-drawer
+      v-model="showMenu"
+      v-if="showMenu"
+      width="320"
+      :app="showMenu"
+      :absolute="!showMenu"
+      color="primary"
+      tile
+    >
+      <v-icon
+        @click.stop="showMenu = !showMenu"
+        class="white--text pa-4 pl-4 cursor-pointer"
+        >mdi-close</v-icon
+      >
+      <div class="px-4 pb-3">
+        <!--<v-autocomplete
+          v-model="search"
+         
+          color="white"
+          class="mt-0 py-0 white--text header-input-custom background-transparent search-catalog mobile-header-autocomplete"
+          height="30"
+          :items="searchResultList"
+          :loading="searchInProgress"
+          :search-input.sync="lookupCatelog"
+          @change="GotoPage(search)"
+          @blur="showSearchInput = false"
+          hide-details
+          :no-filter="true"
+          hide-no-data
+          flat
+          filled
+          dense
+          clearable
+          item-text="title"
+          item-value="title"
+          prepend-icon="mdi-magnify"
+          return-object
+        >
+          <template v-slot:selection="data">
+            <span class="ml-2" v-text="data.item.title"></span>
+          </template>
+          <template v-slot:item="data">
+            <template>
+              <v-list-item-content>
+                <div class="d-flex justify-space-between">
+                  <v-list-item-title class="d-block text-truncate">{{
+                    data.item.title
+                  }}</v-list-item-title>
+                 
+                </div>
+              </v-list-item-content>
+            </template>
+          </template>
+        </v-autocomplete>-->
+        <v-text-field
+          v-model="search"
+          autofocus
+          single-line
+          type="text"
+          color="white"
+          class="mobile-header-search-field white--text background-transparent mb-0"
+          @blur="showSearchInput = false"
+          v-on:keyup.enter="GotoPage"
+        >
+          <template v-slot:prepend>
+            <v-icon @click="GotoPage()" class="white--text">mdi-magnify</v-icon>
+          </template>
+        </v-text-field>
+        <!--<v-text-field
+          prepend-icon="mdi-magnify"
+          color="white"
+          class="h4 px-4 pl-3 header-input-custom white--text"
+          single-line
+          placeholder
+        ></v-text-field>-->
+      </div>
+      <v-row class="mt-12" justify="center" v-if="inProgress">
+        <v-progress-circular
+          :size="60"
+          color="white"
+          indeterminate
+        ></v-progress-circular>
+      </v-row>
+      <v-list
+        v-else
+        class="pl-4 mobile-header-list background-transparent"
+        v-for="(categories, index) in categoryList.childrenData"
+        v-bind:key="index"
+        v-show="index === 0"
+        dense
+      >
+        <v-list-group
+          class="mobile-header-list"
+          v-for="(category, i) in categories.childrenData"
+          v-bind:key="i"
+          :class="
+            category.id == activeMainMenu && categoryId
+              ? 'active-menu-nav-link'
+              : 'mobile-header-list'
+          "
+          v-show="
+            category.name !== 'Baby' &&
+            category.name !== 'Gifts' &&
+            category.isActive
+          "
+        >
+          <template v-slot:activator>
+            <v-list-item-title>
+              <span
+                @click="categoryProducts('main', category.id, '', '')"
+                :class="
+                  category.id == activeMainMenu && categoryId
+                    ? 'active-menu-nav-link'
+                    : 'white--text'
+                "
+                class="text-uppercase h2 my-2"
+                >{{ category.name }}</span
+              >
+            </v-list-item-title>
+          </template>
+          <v-list-group
+            no-action
+            sub-group
+            flat
+            class="mobile-header-list-subcategory"
+            v-for="(subcategorys, index) in category.childrenData"
+            v-bind:key="index"
+            v-show="subcategorys.isActive"
+            :class="
+              subcategorys.id == activeSubMenu
+                ? 'active-menu-nav-link'
+                : 'mobile-header-list-subcategory'
+            "
+          >
+            <template v-slot:activator>
+              <v-list-item-title>
+                <span
+                  @click="
+                    categoryProducts(
+                      'subManu',
+                      category.id,
+                      subcategorys.id,
+                      ''
+                    )
+                  "
+                  :class="
+                    subcategorys.id == activeSubMenu && categoryId
+                      ? 'active-menu-nav-link'
+                      : 'white--text'
+                  "
+                  class="text-uppercase h4"
+                  >{{ subcategorys.name }}</span
+                >
+              </v-list-item-title>
+            </template>
+            <v-list-item
+              v-for="(items, index) in subcategorys.childrenData"
+              v-bind:key="index"
+            >
+              <span
+                @click="
+                  categoryProducts(
+                    'subManuChild',
+                    category.id,
+                    subcategorys.id,
+                    items.id
+                  )
+                "
+                :class="
+                  items.id == activeSubMenuItem && categoryId
+                    ? 'active-menu-nav-link'
+                    : 'white--text'
+                "
+                class="text-uppercase h5 pa-0"
+                >{{ items.name }}</span
+              >
+            </v-list-item>
+          </v-list-group>
+        </v-list-group>
+      </v-list>
+
+      <v-list class="pl-4 mobile-header-list background-transparent">
+        <v-list-item>
+          <v-list-item-content class="pa-0">
+            <router-link
+              class="text-decoration-none"
+              :to="{ name: 'StoreLocatore' }"
+            >
+              <v-list-item-title class="white--text text-uppercase h2 my-2"
+                >Store Locator</v-list-item-title
+              >
+            </router-link>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+
+      <v-list class="pl-4 mobile-header-list background-transparent">
+        <v-list-group v-if="userAuth">
+          <template v-slot:activator>
+            <v-list-item-content>
+              <v-list-item-title class="white--text text-uppercase h3 my-2"
+                >Hi {{ userName }}</v-list-item-title
+              >
+            </v-list-item-content>
+          </template>
+          <v-list-item>
+            <span
+              class="white--text text-uppercase h4 my-2"
+              @click="goToDashboard()"
+              >My Account</span
+            >
+          </v-list-item>
+          <v-list-item>
+            <span
+              @click="goToLogout()"
+              class="white--text text-uppercase h4 my-2"
+              >Logout</span
+            >
+          </v-list-item>
+        </v-list-group>
+        <v-list-item v-if="!userAuth">
+          <v-list-item-content class="pa-0">
+            <v-list-item-title
+              class="white--text text-uppercase h3 my-2"
+              @click="goToLogin()"
+              >Sign-In</v-list-item-title
+            >
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    <Header
+      v-bind:heroData="heroData"
+      v-bind:offsetTop="offsetTop"
+      @action="onAction"
+      @actionScroll="onActionScroll"
+      v-show="!maintainanceFlag"
+    />
+    <HeroContainer
+      v-if="heroData"
+      v-show="!maintainanceFlag"
+      v-bind:heroData="heroData"
+      ref="divOne"
+    >
+      <Header
+        v-bind:heroData="heroData"
+        v-bind:offsetTop="offsetTop"
+        @action="onAction"
+        @actionScroll="onActionScroll"
+        v-show="!maintainanceFlag"
+      />
+    </HeroContainer>
+    <div></div>
+    <router-view />
+    
+  </div>
+</template>
+
+<script>
+import * as easings from "vuetify/es5/services/goto/easing-patterns";
+import Header from "@/components/layout/header/Header";
+import {
+  customAttributeValue,
+  goToCategoryPageRouting,
+  getCategoryOne,
+} from "@/services/util.service";
+import HeroContainer from "@/components/layout/hero-image/HeroContainer";
+import { doFetchCatelogProducts } from "@/services/product.service";
+import humps from "lodash-humps";
+import { createHelpers } from "vuex-map-fields";
+const { mapFields } = createHelpers({
+  getterType: "layout/getField",
+  mutationType: "layout/updateField",
+});
+export default {
+  name: "Layout",
+  components: {
+    Header,
+    HeroContainer,
+  },
+  props: ["activeMainMenu1"],
+  data: () => ({
+    search: null,
+    searchResultList: [],
+    lookupCatelog: null,
+    searchInProgress: false,
+    easing: "easeInOutCubic",
+    easings: Object.keys(easings),
+    selector: "#scroll-with-options",
+    duration: 100,
+    activeMainMenu: "",
+    activeSubMenu: "",
+    activeSubMenuItem: "",
+    offsetTop: 0,
+    showMenu: false,
+    heroData: null,
+    pageNo: 1,
+    pageSize: 9,
+    //categoryList: [],
+    blockId: "30",
+    sortSelect: { label: "Position", value: "position" },
+    aboutContentDescription: `
+      <v-list flat class="content-description">
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">We believe everyone has a second voice. A voice only found on paper.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">It may take a moment to come to you, but what you say with it will never fade.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">Our aim has always been to help you reach beyond limitation and stir your senses in discovering and sharing this voice.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">By giving it color, shape, weight, and texture.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">By adding a formal or friendly accent, an inviting or insightful tone.</v-list-item>
+        <v-list-item class="d-none d-sm-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">By making it simple to say anything you wish, in a way that’s impossible for anyone to forget.</v-list-item>
+        <v-list-item class="d-none d-sm-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">People across the world choose Crane stationery to find their second voice; to express themselves authentically and memorably by putting pen to thoughtfully crafted paper.  </v-list-item>
+        <v-list-item class="d-none d-sm-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">With each invitation you send or letter you write, you’ll see that our craftsmanship is second-to-none—because it’s been 250 years in the making.</v-list-item>
+
+      </v-list>`,
+    etiquetteContentDescription: `
+      <v-list flat class="content-description">
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">The word etiquette originates from Old French, translating to “a ticket,” or a token representing a right to enter or participate. Since that time, the definition has evolved to center around conventional —and often intimidating—requirements around social behavior.</v-list-item>
+        <v-list-item class="mb-4 fontsize-16 line-height-18pt body-font ls-n016 d-none d-sm-block">But we believe in the original intent of the word: a ticket. At its core, etiquette is about bringing people together. An invitation or thank- you note isn’t a duty or formality—it’s an authentic expression of inclusivity. A ticket that welcomes recipients into your life, where they will feel acknowledged, appreciated, and significant.</v-list-item>
+        <v-list-item class="mb-4 fontsize-16 line-height-18pt body-font ls-n016 d-none d-sm-block">That perspective gives etiquette a new meaning. Yes, there are guidelines to help you know when to send a wedding save-the-date or how to address an invitation, and there’s also plenty of flexibility to incorporate your own unique style, tastes, and customs. You can turn to classic options if you prefer, or you can forgo traditional templates and forge your own path.</v-list-item>
+        <v-list-item class="mb-4 fontsize-16 line-height-18pt body-font ls-n016 d-none d-sm-block">After all, no matter what you’re writing, the most effective expression can’t be dictated by someone else—it must come from a place that’s truly, authentically you. There’s no right or wrong way to share your message, as long as you find a way to express it.</v-list-item>
+         <v-list-item class="mb-4 fontsize-16 line-height-18pt body-font ls-n016 d-none d-sm-block">Yes, when your options for what to say are limitless, the words may take a while to surface. But as you tuck your card into the envelope and envision it in the hands of your recipient, you’ll know: The time you invested was well spent.</v-list-item>
+      </v-list>`,
+    papersContentDescription: `
+      <v-list flat class="content-description">
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">The sheen of glossy ink. The crisp tearing of the envelope as you reveal what’s inside. The silky softness of the card, accented by subtle ridges of an embossed design.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">The paper you choose for your stationery touches every sense. It precedes your message, conveying care and luxury long before the recipient reads the greeting.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">The quality and finish of your paper can transform any thank you note or invitation, elevating it from an everyday message to a treasured memory that will be kept for years to come.</v-list-item>
+         <v-list-item class="d-none d-sm-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">At Crane, we combine time-honored traditions and meticulous craftsmanship to create products ranging from premium business papers to high-end stationery. Our signature paper is crafted from 100 percent cotton for softness and texture, making it the perfect canvas for a variety of printing techniques—or your own handwriting.</v-list-item>
+          <v-list-item class="d-none d-sm-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">Ultimately, our core paper types, available in a multitude of sizes, format, colors, and weights, are carefully handcrafted by us to be hand-made by you.</v-list-item>
+      </v-list>`,
+    printingProcessesContentDescription: `
+      <v-list flat class="content-description">
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">Like the elegant decor at a party, where you know the host has thought of every detail, your stationery sets the tone for your correspondence.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">Professionalism and sophistication for your company’s letterhead. Joyful anticipation for your wedding invitations. Sincerity and gratitude for the thank you notes you’ll send following significant life events and small, thoughtful gestures alike.</v-list-item>
+        <v-list-item class="d-block mb-4 fontsize-16 line-height-18pt body-font ls-n016">Rather than starting from a blank canvas, you can convey that tone from first glance through Crane’s masterful printing processes. The way the ink is pressed onto the paper, the raised design you can feel underneath your fingers, an array of colors or a sleek, monochromatic finish — every detail works together to give you a distinctive voice before you even begin writing.</v-list-item>
+      </v-list>`,
+  }),
+  computed: {
+    categoryId() {
+      return this.$route.meta.id;
+    },
+    easingOptions() {
+      return {
+        duration: this.duration,
+        //  offset: this.offset,
+        easing: this.easing,
+      };
+    },
+    isDesktop: function () {
+      return this.$vuetify.breakpoint.xsOnly ? true : false;
+    },
+    ...mapFields(["user", "user.userVisits"]),
+
+    userAuth: function () {
+      return this.$store.state.auth.userAuth;
+    },
+    
+    userName: function () {
+      return this.$store.state.accountOne.one.firstname;
+    },
+    inProgress: function () {
+      return this.$store.state.headerCategoryList.inProgress;
+    },
+    categoryList: {
+      get: function () {
+        return this.$store.state.headerCategoryList.categoryList;
+      },
+      set: function () {},
+      //return this.$store.state.headerCategoryList.categoryList;
+    },
+    footerBlock: function () {
+      return this.$store.state.block.footerBlock;
+    },
+    maintainanceFlag: function () {
+      return this.$route.name == "Maintenance" ? true : false;
+    },
+    categoryDetailsList: function () {
+      return this.$store.state.headerCategoryList.categoryDetails;
+    },
+  },
+  watch: {
+    $route() {
+      this.heroData = this.getHeroData();
+    },
+    lookupCatelog: {
+      handler: function (newVal) {
+        clearTimeout(this.lookupCatelogProductTimeoutId);
+        this.lookupCatelogProductTimeoutId = setTimeout(async () => {
+          try {
+            if (!newVal) this.searchResultList = [];
+            else {
+              this.searchInProgress = true;
+              let results = await doFetchCatelogProducts(newVal);
+              if (results != null) {
+                this.searchResultList = humps(results);
+              } else {
+                this.searchResultList = [];
+              }
+              this.searchInProgress = false;
+            }
+          } catch (error) {
+            this.searchResultList = [];
+          }
+        }, 500);
+      },
+    },
+  },
+  methods: {
+    GotoPage() {
+      if (this.search) {
+        //this.search = null;
+        this.showSearchInput = false;
+        this.searchResultList = [];
+        let searchKeywords = this.search;
+        let pagePath = this.$route.path;
+        let isGateModulePage = pagePath.includes("/gate/");
+        if (isGateModulePage) {
+          window.open(
+            `/search?pageNumber=${this.pageNo}&pageSize=${this.pageSize}&sortBy=relevance&q=${searchKeywords}&filter=e30=`,
+            "_self"
+          );
+        } else {
+          this.$router
+            .push({
+              name: "SearchPage",
+              query: {
+                pageNumber: this.pageNo,
+                pageSize: this.pageSize,
+                sortBy: "relevance",
+                q: searchKeywords,
+                filter: "W10=",
+              },
+            })
+            .catch((error) => {
+              error;
+            });
+          this.$store.dispatch("catalogBrowser/search", {
+            fullCatalog: window.craneCatalog,
+            keywords: searchKeywords,
+            filters: [],
+            pageNumber: 1,
+            pageSize: 9,
+            sortBy: "relevance",
+          });
+        }
+        localStorage.removeItem("cr_subCategoryItemId");
+        localStorage.removeItem("cr_subCategoryId");
+        localStorage.removeItem("cr_mainCategoryId");
+        this.search = null;
+      }
+    },
+    pageName() {
+      return this.$route.name;
+    },
+    onScroll() {
+      this.offsetTop = window.pageYOffset || document.documentElement.scrollTop;
+    },
+    onAction(action) {
+      this.showMenu = action.showMenu;
+      this.categoryList = action.categoryList;
+      this.activeMainMenu = localStorage.getItem("cr_mainCategoryId");
+      this.activeSubMenuItem = localStorage.getItem("cr_subCategoryItemId");
+      this.activeSubMenu = localStorage.getItem("cr_subCategoryId");
+      this.search = null;
+    },
+    onActionScroll() {
+      if (this.$refs.divOne) {
+        this.$vuetify.goTo(this.$refs.divOne, this.easingOptions);
+      }
+    },
+    OnResize() {
+      setTimeout(() => {
+        if (this.$vuetify.breakpoint.mdAndUp) {
+          this.showMenu = false;
+        }
+      }, 200);
+    },
+    //Homepage-Desktop-Hero
+    getHeroData() {
+      let currentPage = this.$router.history.current.name;
+      if (currentPage === "HomePage") {
+        return {
+          //Homepage-Mobile-Hero
+          image: require("@/assets/Home Page_Hero.jpg"),
+          mobileViewImage: require("@/assets/Home Page_Mobile.jpg"),
+          title: "Joyful Greetings",
+          content:
+            "Personalized holiday greeting cards are here, and 10% off for a limited time",
+          buttonText: "Shop the Collection",
+        };
+      } else if (currentPage === "CategoryPage") {
+        /*else if (currentPage === "LandingPage" ) {
+        return {
+          //Homepage-Mobile-Hero
+          image: require("@/assets/Homepage-Desktop-Hero.png"),
+          mobileViewImage: require("@/assets/Homepage-Desktop-Hero.png"),
+          title: "SARAH FLINT",
+           content:'',
+          buttonText: null
+        };
+      }*/
+        return {
+          image: "",
+          //  image: require("@/assets/c4aa164d9b01387a88228c67620f7faf861b5544.png"),
+          title: "Boxed Stationery Sets",
+          content: `Find the perfect stationery box set to suit your taste and personality at Crane.
+               Explore a variety of engraved designs, from whimsical images to classic text for
+                thank you notes or general correspondence. Each Crane boxed stationery set
+               comes with heavyweight note cards and matching fully lined envelopes for a
+               complete, polished look.`,
+          buttonText: null,
+        };
+      } /*else if (currentPage === "FaqPage") {
+        return {
+          image: require("@/assets/c4aa164d9b01387a88228c67620f7faf861b5544.png"),
+          mobileViewImage: require("@/assets/c4aa164d9b01387a88228c67620f7faf861b5544.png"),
+          title: "FREQUENTLY ASKED QUESTIONS",
+          content: ``,
+          buttonText: null,
+        };
+      } */else if (currentPage === "StoreLocatore") {
+        return {
+          image: require("@/assets/CraneStationary-Store-locator.jpg"),
+          mobileViewImage: require("@/assets/CraneStationary-Store-locator.jpg"),
+          title: "Store Locator",
+          content: ``,
+          buttonText: null,
+        };
+      } else if (currentPage === "AboutUs") {
+        return {
+          header: "About Us",
+          headerDescription: `The history of Crane encompasses 250 years of experience and craftsmanship. Learn more about Crane, Crane heritage, and how it expanded worldwide.`,
+          contentHeader: "Share Your Voice",
+          contentDescription: this.aboutContentDescription,
+        };
+      } else if (currentPage === "EtiquetteGuide") {
+        return {
+          header: "Crane's Etiquette Guide",
+          headerDescription: `Etiquette rules have changed over the years, and today, etiquette looks different. Learn the rules of modern etiquette from the experts at Crane Stationery.`,
+          contentHeader: "The Spirit of Modern Etiquette",
+          contentDescription: this.etiquetteContentDescription,
+        };
+      } else if (currentPage === "PrintingProcesses") {
+        return {
+          header: "Our Printing Processes",
+          headerDescription: `Various printing techniques can add personality to your correspondence. Learn about different printing processes and techniques from the experts at Crane.`,
+          contentHeader: "Set the Tone",
+          contentDescription: this.printingProcessesContentDescription,
+        };
+      } else if (currentPage === "OurPapers") {
+        return {
+          header: "Our Papers",
+          headerDescription: `Crane’s high quality paper is made from cotton for premium softness and texture. Explore our options, from plain paper to high-end stationery.`,
+          contentHeader: "The perfect canvas",
+          contentDescription: this.papersContentDescription,
+        };
+      } else if (currentPage === "Accessibility") {
+        return {
+          header: "accessibility & compliance",
+          headerDescription: `Explore a variety of engraved designs, from whimsical images to classic text for thank you notes or general correspondence. Each Crane boxed stationery set comes with heavyweight note cards and matching fully lined envelopes for a complete, polished look.`,
+          firstContentHeader: "accessibility notice",
+          secondContentHeader: "contact us with your accessibility questions",
+          firstContentDescriptionFirst:
+            "Crane is committed to accessibility. That commitment means Crane embraces WCAG guidlines and supports assitive technologies such as screen readers.",
+          firstContentDescriptionSecond:
+            "If you are using a screen reader, magnifier, or other assitive technologies and are experiencing difficulties using this website please call us at (800.555.1212) for assistance.",
+
+          secondContentDescriptionFirst:
+            "Please be aware that our efforts are ongoing. if you have questions or concerns about the accessibility website please contact us at CustomerSupports@Crane.com.",
+          secondContentDescriptionSecond:
+            "If you do encounter an accessiblity issue, please be sure to specify the web page and issue you are having in your email, and we will make all reasonable efforts to make that page accessible for you in the best way possible.",
+        };
+      } else if (currentPage === "ShippingAndDelivery") {
+        return {
+          header: "Shipping & Delivery",
+          //headerDescription: `The history of Crane encompasesses 250 years of experience and craftsmanship. Learn more about Crane, Crane heritage, and how it expanded worldwide.`,
+          //contentHeader: "Share Your Voice",
+          contentDescription:
+            "Crane products are exclusively crafted in the United States of America and have been for over 219 years. We are inextricably connected to the wellbeing of our community, family and partners, and their wellbeing will always be our top priority.",
+        };
+      } else if (currentPage === "Maintenance") {
+        return {
+          header: "Maintenance",
+          //headerDescription: `The history of Crane encompasesses 250 years of experience and craftsmanship. Learn more about Crane, Crane heritage, and how it expanded worldwide.`,
+          //contentHeader: "Share Your Voice",
+          contentDescription: "Maintenance",
+        };
+      }
+      return null;
+    },
+    getCustomAttributeValue(customAttributes, attributeCode) {
+      return customAttributeValue(customAttributes, attributeCode);
+    },
+    /* eslint-disable no-alert, no-console ,  no-debugger */
+    async categoryProducts(flag, category, subcategorys, items) {
+      let mainCat = "";
+      switch (flag) {
+        case "main":
+          mainCat = category;
+          localStorage.setItem("cr_mainCategoryId", category);
+          localStorage.setItem("cr_subCategoryItemId", items);
+          localStorage.setItem("cr_subCategoryId", subcategorys);
+          break;
+        case "subManu":
+          mainCat = subcategorys;
+          localStorage.setItem("cr_mainCategoryId", category);
+          localStorage.setItem("cr_subCategoryItemId", items);
+          localStorage.setItem("cr_subCategoryId", subcategorys);
+          break;
+        case "subManuChild":
+          mainCat = items;
+          localStorage.setItem("cr_mainCategoryId", category);
+          localStorage.setItem("cr_subCategoryItemId", items);
+          localStorage.setItem("cr_subCategoryId", subcategorys);
+          break;
+        default:
+      }
+      if (this.categoryDetailsList) {
+        let categoryOne = await getCategoryOne(
+          this.categoryDetailsList,
+          mainCat
+        );
+        if (categoryOne) {
+          this.$store.dispatch("layout/setHeroContent", categoryOne);
+          /*  let path = this.getCustomAttributeValue(
+             categoryOne.customAttributes,
+            "url_path"
+          );*/
+        // console.log(categoryOne.n, categoryOne);
+          let vm = this;
+          goToCategoryPageRouting(vm, categoryOne);
+          this.$store
+            .dispatch("catalogBrowser/search", {
+              fullCatalog: window.craneCatalog,
+              keywords: "",
+              filters: [{ label: "Category", prop: "ci", value: mainCat }],
+              pageNumber: 1,
+              pageSize: 9,
+              sortBy: "position",
+            })
+            .catch((error) => {
+              error;
+            });
+        }
+      }
+    },
+    subCategory(subCategoryId) {
+      this.$emit("onActionScrollSub");
+      this.$emit("action", {
+        mainMenu: this.mainMenu,
+        subMenu: subCategoryId,
+        subMenuItem: subCategoryId,
+      });
+      this.$store
+        .dispatch("catalogBrowser/search", {
+          fullCatalog: window.craneCatalog,
+          keywords: "",
+          filters: [{ label: "Category", prop: "ci", value: subCategoryId }],
+          pageNumber: 1,
+          pageSize: 9,
+          sortBy: "position",
+        })
+        .catch((error) => {
+          error;
+        });
+    },
+    goToLogout() {
+      this.$store.dispatch("auth/logout");
+    },
+    goToLogin() {
+      window.open("/gate/sign-in", "_self");
+    },
+    goToDashboard() {
+      window.open("/b2b", "_self");
+    },
+  },
+  created() {
+    this.$store.dispatch("catalogBrowser/index", {
+      productsCatalog: window.craneCatalog.products,
+    });
+    this.$store.dispatch("layout/fetchCmsBlock");
+    this.$store.dispatch("layout/fetchPageContent");
+    this.$store.dispatch("headerCategoryList/fetchCategoryList");
+    this.$store.dispatch("productList/fetchAttributeList");
+    //this.$store.dispatch("headerCategoryList/fetchCategoryListIdWise");
+    if (this.userAuth) {
+      this.$store.dispatch("userCartProduct/checkUserToken");
+      this.$store.dispatch("userCartProduct/cartProductList");
+      // this.$store.dispatch("userCartProduct/productTotalAmt");
+      this.$store.dispatch("accountOne/basicInfo");
+    }  
+    if (this.userVisits) {
+      let userVisits = Number(this.userVisits) + 1;
+      localStorage.setItem("cr_userVisitCount", userVisits);
+      this.userVisits = userVisits;
+    } else {
+      localStorage.setItem("cr_userVisitCount", 1);
+      this.userVisits = 1;
+    }
+    this.heroData = this.getHeroData();
+    //this.$store.dispatch("block/fetchHeaderPromoBanner", this.blockId);
+    // if (!this.footerBlock.id) this.$store.dispatch("block/fetchOne", "10"); // for footer
+  },
+};
+</script>
+<style lang="scss">
+.header-input-custom {
+  .v-input__control {
+    background-color: transparent !important;
+  }
+  .v-input__slot {
+    &:before {
+      border-color: #ffffff !important;
+      border-style: solid;
+      border-width: 1px;
+    }
+    &:after {
+      border-color: #ffffff !important;
+      border-style: solid;
+      border-width: 1px;
+    }
+  }
+  .v-text-field__slot {
+    input {
+      color: #ffffff !important;
+      border-bottom-color: #ffffff !important;
+    }
+    input::placeholder {
+      color: #ffffff !important;
+    }
+    input:-ms-input-placeholder {
+      color: #ffffff !important;
+    }
+
+    input ::-ms-input-placeholder {
+      color: #ffffff !important;
+    }
+  }
+  .v-icon {
+    color: #ffffff !important;
+  }
+  .mobile-header-list.theme--light.v-list {
+    background: #2805da;
+  }
+  .v-list-item__icon {
+    color: #ffffff !important;
+  }
+}
+.mobile-header-autocomplete .v-input__append-inner .v-input__icon {
+  display: none !important;
+}
+.mobile-header-autocomplete .theme--light.v-icon {
+  color: #ffffff !important;
+}
+.mobile-header-autocomplete.theme--light.v-input input {
+  color: #ffffff !important;
+}
+.mobile-header-autocomplete.theme--light.v-text-field--filled
+  > .v-input__control
+  > .v-input__slot {
+  background-color: transparent !important;
+}
+</style>
+<style src="./Layout.scss" lang="scss"/>

src/components/layout/MobileNavigationBar.scss

@@ -0,0 +1,30 @@
+.bg-blue-darken {
+    background: #2850da !important;
+}
+
+.no-background {
+    background: transparent !important;
+}
+
+.line-height-48px {
+    line-height: 3rem !important;
+}
+
+.font-28px {
+    font-size: 1.75rem !important;
+}
+
+.font-weight-500 {
+    font-weight: 400 !important;
+}
+
+
+/************  Override the vuetify css  *********/
+
+.v-navigation-drawer {
+    letter-spacing: -0.00625rem;
+}
+
+.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
+    border-color: rgba(247, 245, 245, 0.42) !important;
+}

src/components/layout/MobileNavigationBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-card class="mx-auto overflow-hidden" height="500">
+    <v-app-bar prominent>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" v-if="drawer" absolute left temporary color="bg-blue-darken" width="auto">
+        <v-icon class="mdi mdi-close pa-5 white--text subtitle-2" @click.stop="drawer = !drawer"></v-icon>
+        <div class="py-0 px-8">
+            <v-text-field>
+                <v-icon slot="prepend" color="white" class="title">mdi mdi-magnify</v-icon>
+            </v-text-field>
+        </div>
+        
+        <v-list nav dense class="no-background pa-6">
+            <v-list-item-group v-model="group">
+            <v-list-item v-for="(menu, index) in menuItems" v-bind:key="index">
+                <v-list-item-title class="white--text font-28px font-weight-500 line-height-48px text-uppercase " href="#">{{ menu }}</v-list-item-title>
+            </v-list-item>
+            </v-list-item-group>
+        </v-list>
+    </v-navigation-drawer>
+  </v-card>
+</template>
+    
+ 
+<script>
+export default {
+  name: "MobileNavigationBar",
+  data: () => ({
+    drawer: false,
+    group: null,
+    menuItems:['Notes & Cards','Wedding','Business','For the Desk','For the Home','Occasions','Crane & Co','','Store Locator','Sign-In'],
+  }),
+  watch: {
+    group() {
+      this.drawer = false;
+    }
+  }
+};
+</script>
+
+<style src="./MobileNavigationBar.scss" lang="scss"/>

src/components/layout/NavigationBar.vue

@@ -0,0 +1,59 @@
+    <template>
+  <v-navigation-drawer v-model="showMenuBar" v-if="showMenuBar" app :clipped="$vuetify.breakpoint.mdAndUp">
+    <v-list dense>
+      <v-list-item link>
+        <v-list-item-action>
+          <v-icon>mdi-home</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>Home</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      <v-list-item link>
+        <v-list-item-action>
+          <v-icon>mdi-contact-mail</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>Contact</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+    
+ 
+<script>
+export default {
+  name: "NavigationBar",
+  props: ["showMenu"],
+  data: () => ({
+    drawer: false,
+    group: null,
+    menuItems: [
+      "Notes & Cards",
+      "Wedding",
+      "Business",
+      "For the Desk",
+      "For the Home",
+      "Occasions",
+      "Crane & Co",
+      "",
+      "Store Locator",
+      "Sign-In"
+    ]
+  }),
+  computed: {
+    showMenuBar: {
+      get: function() {
+        return this.showMenu;
+      },
+      set: function(value) {
+        this.showMenu = value;
+      }
+    }
+  },
+  watch: {}
+};
+</script>
+
+<style src="./MobileNavigationBar.scss" lang="scss"/>

src/components/layout/footer/FooterComponent.scss

@@ -0,0 +1,139 @@
+.footer-component-border {
+    background: #FFFFFF!important;
+    border-top: 1px solid rgba(0, 0, 0, 0.10)!important;
+}
+
+.footer-fontcolor-black-darken {
+    color: #1D1D1D!important;
+}
+
+.footer-component-lighten-5 {
+    color: #dcdddd !important;
+}
+
+a.footer-link {
+    text-decoration: none;
+}
+
+@media screen and (max-width:600px) {
+    .footer-fontcolor-black-darken {
+        color: rgba(0, 0, 0, 0.50) !important
+    }
+}
+
+
+/*************************    Override the Vuetify classes values ***** */
+
+.footerpage_page_footer.v-footer {
+    font-size: 0.875rem !important;
+}
+
+.footerpage_email_textbox .v-input__slot {
+    border: 1px solid rgba(0, 0, 0, 0.10) !important;
+    border-radius: 2px !important;
+}
+
+.footerpage_submit_email_btn.v-btn {
+    border-top-left-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+}
+
+.footerpage_min_height {
+    min-height: 1.5625rem !important;
+}
+
+.footerpage_word_break.v-list-item__title {
+    white-space: unset !important; //for word break
+}
+
+.footer-list_subheader {
+    height: 1.875rem !important;
+    padding: 0 0.5rem !important;
+}
+
+.footerpage_email_textbox.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
+    min-height: 0.625rem !important;
+    height: 2.3125rem !important;
+}
+.footer-links{
+      display:flex;
+      color:#ffffff;
+      justify-content: space-between;
+     // margin:60px 0px;
+   }
+   .footer-bottom-link{
+       display:inline-flex;
+   }   
+.footer-bottom-link a{
+    font-size: 14px !important;
+}   
+   .link-col{
+            color:#ffffff !important;
+   }
+   /*.link-col:nth-child(3) .title{
+    margin-bottom: -4px;
+   }
+   .link-col:nth-child(4) a:nth-child(1){
+        margin-top: 4px;
+        text-transform: uppercase !important;
+   }*/
+   .link-col a{
+            color:#ffffff !important;
+            text-decoration: none;
+            font-size: 14px !important;
+            padding-bottom:12px;
+            word-break: break-word!important; 
+            display: flex;
+            align-content: space-between;
+
+   }
+   /*.title{
+        color:#dcdddd !important;
+        display: block;
+        font-size: 1rem !important;
+   }*/
+   .v-application .title {
+       color:#dcdddd !important;
+       font-size: 0.625rem !important;
+       font-weight: 500;
+       letter-spacing: .0125em!important;
+       text-transform: uppercase !important;
+       padding-bottom:14px;
+   }
+   @media (min-width: 600px) and (max-width: 960px) {
+    .footer-links{
+        display:grid;
+        grid-template-columns: auto auto;
+        grid-gap: 50px;
+        padding-left:10px;
+       }
+       .footer-bottom-link{
+        display:flex;
+        padding-left:10px;
+        flex-direction:  column-reverse;
+    } 
+}
+   @media screen and (max-width: 600px) {
+    .footer-links{
+        display:block;
+        padding-left:10px;
+        margin:20px 0px;
+       }
+       .link-col{
+        margin-bottom:40px;
+}
+
+.v-application .title {
+    font-size: 0.825rem !important;
+    padding-bottom:7px;
+}
+.link-col a{
+    padding-bottom:7px;
+}
+.footer-bottom-link{
+    display:flex;
+    padding-left:10px;
+    flex-direction:  column-reverse;
+
+}  
+}

src/components/layout/footer/FooterComponent.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <v-footer
+      class="py-sm-0 px-sm-0 pb-0 px-0 page-footer footer-component-border"
+    >
+      <v-row
+        align="center"
+        justify="center"
+        class="d-flex flex-column-reverse flex-sm-row pa-0 ma-0"
+      >
+        <v-col
+          class="primary pb-md-0 px-sm-10 px-md-6 pt-md-5 pt-sm-4 pt-6 pl-lg-12 pr-lg-12"
+          cols="12"
+          md="8"
+          sm="7"
+          lg="8"
+          xl="9"
+        >
+          <v-container class="px-lg-12 pb-md-0">
+            <v-row>
+              <v-col class="regular-font pr-lg-8">
+                <div v-html="footerContent()"></div>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-col>
+        <v-col
+          md="4"
+          sm="5"
+          lg="4"
+          xl="3"
+          class="pb-0 pt-md-0 d-sm-flex align-center white"
+        >
+          <v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
+            <v-form ref="footerForm" v-model="footerFormValid">
+              <div class="pa-md-1">
+                <v-col cols="12" class="pt-md-0 mb-4 mb-sm-0">
+                  <span
+                    class="primary--text h3 font-weight-regular text-uppercase"
+                    >{{ stayInTouch }}</span
+                  >
+                  <p
+                    class="footer-fontcolor-black-darken body-font ls-n10 mb-0 pt-4 mt-md-4 mt-sm-4 pt-sm-0"
+                  >
+                    Be the first to know about special promotions, new
+                    collections and more when you sign up for our emails!
+                  </p>
+                </v-col>
+                <v-col cols="12" class="pb-0 pt-2 pt-sm-3 d-sm-none d-md-block">
+                  <v-row no-gutters>
+                    <v-col cols="12">
+                      <v-text-field
+                        @blur="resetEmailValidation"
+                        label="Your Email"
+                        id="subscriberEmailId"
+                        name="subscriberEmailId"
+                        class="footerpage_email_textbox fontsize-14 regular-font"
+                        single-line
+                        solo
+                        flat
+                        :rules="emailRules"
+                        tile
+                        v-model="email"
+                      >
+                        <v-btn
+                          color="primary"
+                          class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body-font"
+                          slot="append"
+                          id="subscriberSubmitId"
+                          name="subscriberSubmitId"
+                          @click="submit()"
+                          >SUBMIT</v-btn
+                        >
+                      </v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+                <v-col
+                  cols="12"
+                  class="pb-0 pt-2 pt-sm-3 d-none d-sm-block d-md-none"
+                >
+                  <v-row no-gutters>
+                    <v-col cols="12">
+                      <v-text-field
+                        label="Your Email"
+                        id="emailTextBox"
+                        class="footerpage_email_textbox regular-font"
+                        single-line
+                        solo
+                        flat
+                        tile
+                        :rules="emailRules"
+                        dense
+                        v-model="email"
+                      ></v-text-field>
+                      <v-btn
+                        color="primary"
+                        class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body-font"
+                        slot="append"
+                        @click="submit()"
+                        type="submit"
+                        >SUBMIT</v-btn
+                      >
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </div>
+            </v-form>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-footer>
+    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
+    <SubscriptionDialog />
+  </div>
+</template>
+
+<script>
+import SnackbarComponent from "@/components/common/SnackbarComponent";
+import SubscriptionDialog from "@/components/common/SubscriptionDialog";
+//import { listrakSubscribe } from "@/services/util.service";
+export default {
+  name: "FooterComponent",
+  components: { SnackbarComponent, SubscriptionDialog },
+  data() {
+    return {
+      footerBlockId: 10,
+      listSubHeaderColor: "red",
+      footerFormValid: false,
+      emailRules: [
+        (v) => !!v || "Email is required",
+        (v) => /.+@.+\..+/.test(v) || "Email must be valid",
+      ],
+      stayInTouch: "LET'S STAY IN TOUCH",
+      email: null,
+      snackbar: {
+        show: false,
+        message: null,
+        color: null,
+        timeout: 0,
+      },
+    };
+  },
+  /* eslint-disable no-alert, no-console ,  no-debugger */
+  computed: {
+    userAuth: function () {
+      return this.$store.state.auth.userAuth;
+    },
+    footerBlockContent: function () {
+      return this.$store.state.layout.cmsBlockContent;
+    },
+  },
+  methods: {
+    footerContent() {
+      if (this.footerBlockContent.length) {
+        let data = this.footerBlockContent.filter((element) => {
+          return element.id === this.footerBlockId;
+        });
+        if (data.length > 0) {
+          return data[0].content;
+        }
+      }
+    },
+    submit: function () {
+      if (this.$refs.footerForm.validate()) {
+        // listrakSubscribe(this.email);
+        this.snackbar = {
+          message: "you have successfully subscribed.",
+          color: "success",
+          show: true,
+          timeout: 5000,
+        };
+
+        // this.email = null;
+        // this.$refs.footerForm.resetValidation();
+      }
+    },
+
+    resetEmailValidation() {
+      this.$refs.footerForm.resetValidation();
+    },
+  },
+  mounted() {
+    // if (window._ltk) {
+    //   window._ltk.Signup.New(
+    //     "Footer",
+    //     "subscriberEmailId",
+    //     window._ltk.Signup.TYPE.CLICK,
+    //     "subscriberSubmitId",
+    //     "email"
+    //   );
+    // }
+  },
+  created() {
+    //this.$store.dispatch("block/fetchOne", "10");
+  },
+};
+</script>
+<style src="./FooterComponent.scss" lang="scss"/>

src/components/layout/footer/SeoFooterContent.scss

@@ -0,0 +1,12 @@
+.seofootercontent-image-background{
+  background-color:#F2F2F2;
+}
+.content{
+  display: flex !important;
+}
+/*.left-side-content{
+  display:block;
+}
+.right-side-content{
+  display:block;
+}*/

src/components/layout/footer/SeoFooterContent.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <v-row class="seofootercontent-image-background ma-0" v-if="getSeoBlock()">
+      <v-container class="px-lg-12 pb-md-0 px-6">
+        <v-row>
+          <v-col class="regular-font pr-lg-8">
+            <div v-html="getSeoBlock()"></div>
+          </v-col>
+        </v-row>
+      </v-container>
+      <!--<v-container>
+        <v-col class="text-center">
+          <h2
+            class="text-uppercase py-4 mb-0 fontsize-28 font-weight-400 line-height-36"
+          >More to Discover</h2>
+        </v-col>
+        <v-row>
+          <v-col cols="12" sm="4" md="4" class="text-center px-6">
+            <v-img :src="image18"></v-img>
+            <h3
+              class="pt-5 text-uppercase fontsize-18 font-weight-regular line-height-21 ls-n015"
+            >Finding the one:</h3>
+            <p class="fontsize-18 line-height-21 ls-n015">Wedding Invitation: Kate and Kevin</p>
+          </v-col>
+          <v-col cols="12" sm="4" md="4" class="text-center px-6">
+            <v-img :src="image19"></v-img>
+            <h3
+              class="pt-5 text-uppercase fontsize-18 font-weight-regular line-height-21 ls-n015"
+            >Wedding etiquette:</h3>
+            <p class="fontsize-18 line-height-21 ls-n015">in the Age of Social Media</p>
+          </v-col>
+          <v-col cols="12" sm="4" md="4" class="text-center px-6">
+            <v-img :src="image20"></v-img>
+            <h3
+              class="pt-5 text-uppercase fontsize-18 font-weight-regular line-height-21 ls-n015"
+            >Real weddings:</h3>
+            <p class="fontsize-18 line-height-21 ls-n015">Invitation Inspired by Something Borrowed</p>
+          </v-col>
+        </v-row>
+      </v-container>-->
+    </v-row>
+    <!--<v-container>
+      <v-row class="py-12 mb-12">
+        <v-col cols="12" sm="6" md="6" lg="6" class="px-6">
+          <p
+            class="text-uppercase fontsize-18 mb-0 line-height-21 ls-n03"
+          >WEDDING Couple’s Stationery Style?</p>
+          <p
+            class="fontsize-18 line-height-21 ls-n03"
+          >Most people don’t consider what an elegant touch couple’s stationery can provide until they begin writing thank you notes for their wedding gifts. Beautiful, personalized stationery oes in factplay a part in maintaining meaningful relationships with those who participated in your wedding experience and continue encouraging thoughtful communication beyond the wedding day. The following ideas can inspire you to enhance your connections with unique and personalized stationery options.</p>
+
+          <p
+            class="text-uppercase fontsize-18 mb-0 pt-6 line-height-21 ls-n03"
+          >When to Send Save the Dates & Wedding Invitations?</p>
+          <p
+            class="fontsize-18 line-height-21 ls-n03"
+          >As you plan for your special day, you might feel like you’re entering a whole new world — one with its own unique rules and customs that are different from any event you’ve planned before. Oftentimes, this is most noticeable when you’re not sure about how to approach a specific detail, like when to take a particular planning step or send out information to guests. Luckily, you can use this guide as your resource for each step of the way. We break down the standard timeline for all wedding invitation-related correspondence so you know what to expect and how to prepare in the time leading up to your big day.</p>
+        </v-col>
+        <v-col cols="12" sm="6" md="6" lg="6" class="px-6">
+          <p
+            class="text-uppercase fontsize-18 mb-0 line-height-21 ls-n03"
+          >What to Write in a Wedding Thank You Card?</p>
+          <p
+            class="fontsize-18 line-height-21 ls-n03"
+          >Once your wedding’s over, you get the opportunity to show your gratitude to all the special people who gave gifts, dedicated time and attention to your big day, and played a part in your celebration. Start off your new life together by writing and mailing thoughtful thank you notes in a timely manner. This guide can help you find the right words to express your gratitude.</p>
+
+          <p
+            class="text-uppercase fontsize-18 mb-0 pt-6 line-height-21 ls-n03"
+          >Who Receives a Thank You Card?</p>
+          <p
+            class="mb-0 fontsize-18 line-height-21 ls-n03"
+          >Newlyweds write wedding thank you cards to acknowledge the thought, time, and attention others have devoted to their wedding. That means you have the opportunity to write wedding thanks for people who:</p>
+          <p
+            class="mb-0 fontsize-18 line-height-21 ls-n03"
+          >1) Attend pre-wedding events, such as showers or engagement parties.</p>
+          <p
+            class="mb-0 fontsize-18 line-height-21 ls-n03"
+          >2) Attend the wedding ceremony and reception.</p>
+          <p
+            class="mb-0 fontsize-18 line-height-21 ls-n03"
+          >3) Give gifts or money, even if they couldn’t attend the events.</p>
+        </v-col>
+      </v-row>
+    </v-container>-->
+  </div>
+</template>
+<script>
+export default {
+  name: "SeoFooterContent",
+  //props:["categoryList" ,"blockId"],
+  components: {},
+  computed: {
+    /* categorySeoContent: function() {
+      return this.$store.state.block.categorySeoContent;
+    },*/
+    categoryList: function () {
+      return this.$store.state.headerCategoryList.categoryListIdWise;
+    },
+    categoryId: function () {
+      return this.$route.meta.id;
+    },
+    categorySeoContent: function () {
+      return this.$store.state.layout.cmsBlockContent;
+    },
+  },
+  data: () => ({
+    image18: require("@/assets/Image 18.png"),
+    image19: require("@/assets/Image 19.png"),
+    image20: require("@/assets/Image 20.png"),
+    //blockId:'178'
+  }),
+  watch: {
+    categoryId() {
+      this.getSeoBlock();
+    },
+    categoryList() {
+      this.getSeoBlock();
+    },
+  },
+  methods: {
+    getSeoBlock() {
+      if (this.categoryList) {
+        let attributes = this.categoryList.filter(
+          (data) => data.id == this.categoryId
+        );
+        if (attributes.length > 0) {
+          let code = attributes[0].ca.filter(
+            (data) => data.ac == "landing_page"
+          );
+          if (code.length > 0) {
+            let cId = parseInt(code[0].v);
+            if (this.categorySeoContent.length) {
+              let data = this.categorySeoContent.filter((element) => {
+                return element.id === cId;
+              });
+              if (data.length > 0) {
+                return data[0].content;
+              }
+            }
+          }
+        }
+      }
+    },
+  },
+  async created() {
+    if (this.categoryId) {
+      await this.getSeoBlock();
+    }
+  },
+};
+</script>
+<style src="./SeoFooterContent.scss" lang="scss" scoped /> 

src/components/layout/header/Header.scss

@@ -0,0 +1,167 @@
+.content-color {
+    color: #1d1d1d !important;
+}
+
+.menu-nav-link:hover {
+    color: #2850da!important;
+}
+.active-menu-nav-link {
+    color: #2850da!important;
+}
+.header-menu-content {
+    box-shadow: none;
+}
+.header-menu-content.v-menu__content{
+    outline: none !important;
+}
+.header-category-text{
+    color: #2850da!important;
+}
+.header-category-text:hover, .header-action-icons:hover{
+    color: #CCB7FF!important;
+}
+.header-category-text-active{
+    color: #404040!important;
+
+}
+.header-category-text-active:hover{
+    color: #CCB7FF!important;
+}
+.header-category-page-text{
+    color: #2850da;
+}
+.header-category-page-text:hover{
+    color: #CCB7FF;
+}
+.header-category-icon{
+    color: #CCB7FF!important;
+}
+.header-background-white {
+    background: #fff !important;
+}
+.header-hover-links{
+    background: #fff !important;
+    color: #2850da!important;
+}
+.header-buttons.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before {
+    opacity: 0 !important;
+}
+
+.header-buttons.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
+    opacity: 0 !important;
+}
+
+// .custom-menu:hover::after {
+//   content: "";
+//   width: 0;
+//   height: 0;
+//   position: absolute;
+//   bottom: -84%;
+//   right: 54px;
+//   border-width: 0 11px 11px 11px;
+//   border-style: solid;
+//   border-color: white #a5161600;
+// }
+//.custom-menu:hover::after {
+// content: "";
+// width: 0;
+// height: 0;
+//  position: absolute;
+// border-width: 0 11px 11px 11px;
+// border-style: solid;
+// border-color: #fff #a5161600;
+//  margin-top: 17px;
+
+/* align-items: flex-start; */
+
+// display: flex;
+
+/* align-items: center; */
+
+
+/* justify-items: center; */
+
+
+/* justify-content: end;*/
+
+//}
+.headerpage-cart-list{
+    //max-height:300px !important; 
+    overflow-y:auto;
+}
+.headerpage-cart-drawer .v-navigation-drawer__content{
+  overflow-y:hidden !important; 
+}
+.headerpage-cart-drawer{
+    z-index:9 !important; 
+  }
+.header-autocomplete.v-select.v-select--is-menu-active
+  .v-input__icon--append
+  .v-icon {
+  -webkit-transform: rotate(360deg) !important;
+  transform: rotate(360deg) !important;
+}
+.header-buttons .v-ripple__container{
+    opacity:0;
+}
+.header-menu-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
+    opacity:0 !important;
+}
+.header-menu-button .v-ripple__container{
+    opacity:0;
+}
+.header-top-margin{
+    margin-top:56px !important;
+}
+
+.promo-banner{
+    display:flex;
+    justify-content: center;
+    align-content: center;
+}
+.promo-banner a{
+    text-decoration: none;
+    color:#ffffff !important;
+    text-transform: uppercase;
+    font-size:12px;
+    align-self: center;
+    
+}
+.promo-link{
+    text-decoration: none;
+    color:#ffffff;
+    text-transform: uppercase;
+    font-size:10px;
+    align-self: center;
+    
+}
+.promo-banner:hover a{
+    color:#CCB7FF !important;
+   }
+   .promo-banner:active a{
+    color: #2850da !important;
+   }
+@media screen and (max-width: 600px) {
+    .promo-banner{
+        font-size: 8px;
+       }
+}
+
+/*.header-checkoutpage-button:active{
+    background-color: #2850da !important;
+    color:#ffffff !important;
+}*/
+.header-checkoutpage-button.v-btn:before{
+    background-color: transparent !important;
+}
+.header-closedrawer-button.v-btn:before{
+    background-color: transparent !important;
+}
+.header-search-field.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot{
+    height:56px;
+    margin-bottom: 0px !important;
+}
+.header-search-field.v-text-field.v-text-field--enclosed .v-text-field__details {
+display: none;
+margin-bottom: 0px !important;
+}