fixes

deploy_production.sh

@@ -5,6 +5,7 @@ yarn build:production
 yarn copy:git-info
 rm dist/static/js/craneRetailerCatalog.js
 rm dist/static/js/magentoCmsCache.js
+rm dist/static/js/seoRoutes.js
 # yarn copy:seo-files
 # yarn copy:cache-files
 yarn deploy:production

deploy_staging.sh

@@ -5,6 +5,7 @@ yarn build:staging
 yarn copy:git-info
 rm dist/static/js/craneRetailerCatalog.js
 rm dist/static/js/magentoCmsCache.js
+rm dist/static/js/seoRoutes.js
 # yarn copy:seo-files
 # yarn copy:cache-files
 yarn deploy:staging

public/index.html

@@ -25,6 +25,7 @@
     <div id="app"></div>
     <script src="/static/js/magentoCmsCache.js"></script>
     <script src="/static/js/craneRetailerCatalog.js"></script>    
+    <script src="/static/js/seoRoutes.js"></script>
 
     <script>
         // if (location.hash) {

src/components/landing/LandingComponent.scss

@@ -0,0 +1,44 @@
+/*.landing-right-icon {
+    background-image: url('../../../assets/blue-arrow.png');
+    max-width: 22px;
+    height: 11px;
+    background-position: right center;
+    background-size: contain;
+}*/
+@media screen and (max-width: 600px) {
+    .landing-page-bottom-margin-150 {
+        margin-bottom: 50px;
+    }
+    .landing-page-top-margin-150 {
+        margin-top: 50px;
+    }
+}
+@media screen and (min-width: 601px) {
+    .landing-page-bottom-margin-150 {
+        margin-bottom: 150px;
+    }
+    .landing-page-top-margin-150 {
+        margin-top: 150px;
+    }
+}
+
+.landing-page-link{
+    color: #2E5D86;
+}
+.landing-page-link:hover{
+    color: #CCB7FF !important;
+}
+/*.landing-page-icon{
+    background-image: url('../../../assets/landing-page-arrow.png'); 
+    max-width:22px;
+    height:16px;
+    background-position: right center;
+    background-size:contain;
+}
+.landing-page-icon:hover{
+    background-image: url('../../../assets/landing-page-hover-arrow.png');
+    max-width:22px;
+   height:16px;
+   background-position: right center;
+   background-size:contain;
+}*/

src/components/landing/LandingComponent.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="homepage-overflow-x-hidden white" v-if="landingPageContent && data">
+   
+     <div class="h3 my-5 py-5 body-font1">{{ data.contentHeading }}</div>
+      <div v-html="data.content"></div>
+    </div>
+  
+</template>
+<script>
+export default {
+  name: "LandingComponent",
+  components: {},
+ data: () => ({
+    data: null
+    
+  }),
+  computed: {
+    isMobileDevice: function() {
+      return this.$vuetify.breakpoint.xsOnly ? true : false;
+    },
+     landingPageContent: function() {
+     return this.$store.state.layout.pageContent;
+     },
+     pageId: function(){
+      return this.$route.meta.pid
+     }
+  },
+   watch: {
+      landingPageContent(){
+        this.getPageContent();
+     }
+   },
+  /* eslint-disable no-alert, no-console ,  no-debugger */
+
+  methods: {
+     imageBasePathUrl() {
+      return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
+    },
+    getPageContent() {
+      if (this.landingPageContent.length) {
+      this.data = this.landingPageContent.filter(element=>{
+      return element.id === this.pageId})[0];
+
+
+      /*       if(data.length > 0){
+        let path = data[0].content;
+        var div = document.createElement("div");
+        div.innerHTML = path;
+        let imgSrcUrls = div.getElementsByTagName("img");
+        for (let i = 0; i < imgSrcUrls.length; i++) {
+          let urlValue = imgSrcUrls[i].getAttribute("src");
+          if (urlValue) {
+            imgSrcUrls[i].setAttribute(
+              "src",
+
+              this.imageBasePathUrl() +
+                "/media/" +
+                imgSrcUrls[i].src
+                  .replace(window.location.href, "")
+                  .replace(window.location.origin, "")
+                  .replace(/%22%7D%7D/g, "")
+                  .replace(/%7B%7B/g, "")
+                  .replace(/%20url=%22/g, "")
+                  .replace("media", "")
+                  
+            );
+          }
+        }
+        return div.innerHTML 
+      }*/
+      }
+    },
+     pushRoute() {    
+          this.$router
+            .push({
+              name: "LandingPage",
+            }) .catch(error => {
+          error;
+        });
+    },
+  },
+
+ created() {
+  // this.$store.dispatch("block/fetchLandingPage", this.pageUrlKey);
+  }
+};
+</script>
+<style lang="scss">
+html {
+  scroll-behavior: smooth;
+}
+.arrow-top-margin-130 {
+    margin-top: 130px;
+}
+.arrow {
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 18px;
+}
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+.hero-image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+.landing-page-hero-text {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+}
+.landing-page-hero-image{
+  height:62.5%;
+  width:100%;
+}
+.landing-page-image{
+  height:auto;
+  width:100%;
+}
+.landing-page-top-row{
+  display:flex;
+}
+.landing-page-row{
+  display:flex;
+}
+.landing-page-col-6{
+  width: 50%;
+  display: block;
+  margin-top:auto;
+  margin-bottom:auto;
+}
+.landing-page-content-maxwidth-750{
+    max-width:750px;
+}
+/*.landing-page-link{
+    color: #2E5D86 !important;
+    & .landing-page-icon{
+    background-image: url('../../../assets/landing-page-arrow.png'); 
+    max-width:22px;
+    height:16px;
+    background-position: right center;
+    background-size:contain;
+}
+}
+.landing-page-link:hover{
+    color: #CCB7FF !important;
+    & .landing-page-icon{
+    background-image: url('../../../assets/landing-page-hover-arrow.png');
+    max-width:22px;
+   height:16px;
+   background-position: right center;
+   background-size:contain;
+}
+}*/
+@media screen and (min-width: 601px) {
+    .landing-page-bottom-margin-150 {
+        margin-bottom: 150px;
+    }
+    .landing-page-top-margin-150 {
+        margin-top: 150px;
+    }
+}
+@media screen and (max-width: 601px) {
+  .arrow{
+    display: none;
+  }
+  .landing-page-hero-text {
+  display: none;
+  }
+ .landing-page-hero-image{
+  height:62.5%;
+  width:100%;
+}
+   .landing-page-row{
+  display:block;
+  text-align: center;
+}
+.landing-page-top-row{
+  display:flex;
+  flex-direction:column-reverse;
+  text-align: center;
+}
+.landing-page-col-6{
+  width: 100%;
+  display: block;
+  margin-top:auto;
+  margin-bottom:auto;
+}
+.landing-page-link{
+  justify-content: center;
+}
+}
+
+</style>
+<style src="./LandingComponent.scss" lang="scss" scoped /> 

src/multipages/retailer.routes.js

@@ -1,4 +1,6 @@
-
+ import LandingPage from '@/routes/retailer/landing_page';
+ let seoRoutes = window.seoRoutes ? window.seoRoutes({ lp: LandingPage }) : [];
+  
 export default [
     // {
     //     path: '/test',
@@ -14,7 +16,7 @@ export default [
         redirect: '/b2b',
         component: () => import(/* webpackChunkName: "meModule" */ '@/components/retailer/layout/Layout.vue'),
         children: [
-            
+           ...seoRoutes,
             {
                 path: '/b2b/:id',
                 name: 'BoxedOrderHistoryPage',
@@ -25,46 +27,6 @@ export default [
                     },
                 }
             },
-            {
-                path: 'personalized-order-summary',
-                name: 'PersonalizedOrderSummaryPage',
-                component: () => import(/* webpackChunkName: "meModule" */ '@/routes/retailer/personalized_order_status.vue'),
-                meta: {
-                    breadcrumb: {
-                        label: 'Personalized Order Status Page',
-                    },
-                }
-            },
-            {
-                path: 'resources',
-                name: 'ResourcesPage',
-                component: () => import(/* webpackChunkName: "meModule" */ '@/routes/retailer/resources.vue'),
-                meta: {
-                    breadcrumb: {
-                        label: 'Resources Page',
-                    },
-                }
-            },
-            {
-                path: 'pds',
-                name: 'PDSPage',
-                component: () => import(/* webpackChunkName: "meModule" */ '@/routes/retailer/pds.vue'),
-                meta: {
-                    breadcrumb: {
-                        label: 'PDS Page',
-                    },
-                }
-            },
-            {
-                path: 'b2b',
-                name: 'AccountDashboard',
-                component: () => import(/* webpackChunkName: "meModule" */ '@/routes/retailer/account_dashboard.vue'),
-                meta: {
-                    breadcrumb: {
-                        label: 'Account Dashboard Page',
-                    },
-                }
-            },
             {
                 path: 'address-book',
                 name: 'AddressBook',
@@ -179,138 +141,6 @@ export default [
                     },
                 }
             },
-            {
-                path: 'boxed-products-ordering',
-                name: 'BoxedProductsOrdering',
-                component: () => import( /* webpackChunkName: "Resources" */'@/routes/retailer/boxed-products-ordering.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Boxed Products Ordering Page' ,
-                    },
-                }
-            },
-            {
-                path: 'personalized-products-ordering',
-                name: 'PersonalizedProductsOrdering',
-                component: () => import( /* webpackChunkName: "Resources" */'@/routes/retailer/personalized-products-ordering.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Personalized Products Ordering Page' ,
-                    },
-                }
-            },
-            {
-                path: 'marketing-tools-promotions',
-                name: 'MarketingToolsPromotions',
-                component: () => import( /* webpackChunkName: "Resources" */'@/routes/retailer/marketing-tools-promotions.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Marketing Tools Promotions Page' ,
-                    },
-                }
-            },
-            {
-                path: 'retailer-communications',
-                name: 'RetailerCommunications',
-                component: () => import( /* webpackChunkName: "Resources" */'@/routes/retailer/retailer-communications.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Retailer Communications Page' ,
-                    },
-                }
-            },
-            {
-                path: 'training',
-                name: 'Training',
-                component: () => import( /* webpackChunkName: "Resources" */'@/routes/retailer/training.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Training Page' ,
-                    },
-                }
-            },
-            {
-                path: 'contact-us',
-                name: 'ContactUs',
-                component: () => import( /* webpackChunkName: "Resources" */'@/routes/retailer/contact-us.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Contact Us Page' ,
-                    },
-                }
-            },
-            {
-                path: 'personalized-albums',
-                name: 'PersonalizedAlbums',
-                component: () => import( /* webpackChunkName: "Resources/Personalized Products & Ordering" */'@/routes/retailer/personalized_albums.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Personalized Albums Page' ,
-                    },
-                }
-            },
-            {
-                path: 'marketing-collateral',
-                name: 'MarketingCollateral',
-                component: () => import( /* webpackChunkName: "Resources/Marketing Tools & Promotions" */'@/routes/retailer/marketing_collateral.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Marketing Collateral Page' ,
-                    },
-                }
-            },
-            {
-                path: 'promotions',
-                name: 'Promotions',
-                component: () => import( /* webpackChunkName: "Resources/Marketing Tools & Promotions" */'@/routes/retailer/promotions.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Promotions Page' ,
-                    },
-                }
-            },
-            {
-                path: 'imagery-logos',
-                name: 'ImageryLogos',
-                component: () => import( /* webpackChunkName: "Resources/Marketing Tools & Promotions" */'@/routes/retailer/imagery_logos.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Imagery Logos Page' ,
-                    },
-                }
-            },
-            {
-                path: 'service-levels',
-                name: 'ServiceLevels',
-                component: () => import( /* webpackChunkName: "Resources/Retailer Communications" */'@/routes/retailer/service_levels.vue'),
-                meta: {
-                    "canonical": true,
-                    breadcrumb: {
-                        label: 'Service Levels Page' ,
-                    },
-                }
-            },
-            {
-                path: 'holiday-assets',
-                name: 'HolidayAssetsPage',
-                component: () => import(/* webpackChunkName: "Holiday Assets Page" */ '@/routes/retailer/holiday_assets.vue'),
-                meta: {
-                    breadcrumb: {
-                        label: 'Holiday Assets Page',
-                    },
-                }
-            },
-          
         ]
     },
     {

src/routes/retailer/boxed-products-ordering.vue

@@ -4,123 +4,7 @@
       <div class="h3 my-5 py-5 body-font1">{{ boxedProductsOrderingPage.contentHeading }}</div>
       <div v-html="boxedProductsOrderingPage.content"></div>
     </div>
-    <!-- <div class="h3 my-5 py-5 body-font1">Boxed Products & Ordering</div>
+ 
-
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Catalog.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            2021 Boxed Catalog
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Catalog.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            2021 Boxed Holiday Catalog
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link class="text-decoration-none whyteTmin10-font" to="">
-           to
-            @click.native="gotoLink('http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Price-List.xlsx')" 
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            2021 Boxed Holiday Price List (Excel)
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Price-List.pdf'
-            )
-          "
-          :class="hover ? 'primary--text' : 'black--text'"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            2021 Boxed Holiday Price List (PDF)
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Downton-Abbey-Catalog.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Downton Abbey Catalog
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ResourcesPage' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Back to Resources
-          </div>
-        </router-link>
-      </v-hover>
-    </div> -->
   </v-container>
 </template>
 <script>

src/routes/retailer/contact-us.vue

@@ -5,253 +5,7 @@
       <div class="h3 my-5 py-5 body-font1">{{  contactUsPage.contentHeading }}</div>
       <div v-html=" contactUsPage.content"></div>
     </div>
-    <!-- <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>
+ 
-
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Account Manager Contact List
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1"><b>Crane Contacts for Retailers</b></div>
-    <div>
-      To help us respond to your request quickly, please reference the below
-      contact information. By using the contact method appropriate for each
-      request, we can reduce internal handling time and ensure it is sent to the
-      correct department every time.
-    </div>
-    <div class="padding-space1"><b>Boxed Product Orders and Inquiries</b></div>
-    <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:cranesocialpapers@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            cranesocialpapers@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>Phone: 1-877-478-4849 or 413-664-2500</div>
-    <div>Fax: 1-800-331-8660 or 413-684-7273</div>
-    <div class="padding-space1">
-      <b
-        >Personalized Orders: New Order, Order Change, and Response to Order
-        Delay Questions</b
-      >
-    </div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:cdsorders@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            cdsorders@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>Fax: 1-800-411-4554 or 413-663-3092</div>
-    <div class="padding-space1">
-      <b>Personalized Product General Inquiries</b>
-    </div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:cranecustomerservice@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            cranecustomerservice@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>
-
-      Phone: 1-877-478-4849 or 413-664-2500</div>
-    <div>Toll-free from Canada: 1-800-551-8321</div>
-    <div class="padding-space1"><b>Custom Concierge Quote Request</b></div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:retailerconcierge@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-           retailerconcierge@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div class="padding-space1"><b>Sample to Match</b></div>
-    <div>Retailer Portal: Electronic Submissions</div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:cdsorders@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-           cdsorders@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div class="padding-space1"><b>Crane PDS Help Desk</b></div>
-      <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:pdshelpdesk@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-           pdshelpdesk@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>Phone: 1-800-206-8530</div>
-    <div class="padding-space1"><b>Crane PDS Account Applications</b></div>
-    <div>
-      Retailers obtain applications from the Resources>Training section on the
-      retailer portal and send to Crane Customer Service
-    </div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:cranecustomerservice@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-           cranecustomerservice@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>Fax: 1-888-865-9715</div>
-    <div class="padding-space1"><b>Crane Retailer Portal Support</b></div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:retailerportal@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-         retailerportal@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>Phone: 1-877-478-4849</div>
-    <div class="padding-space1"><b>Etiquette Questions</b></div>
-     <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:concierge@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-        concierge@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div>Phone: 1-877-478-4849</div>
-    <div class="padding-space1"><b>Find a Retailer Listings</b></div>
-    <div>Contact Retailer Portal Help Desk</div>
-    <div>
-      Email:
-      <v-hover v-slot:default="{ hover }">
-        <a
-          href="mailto:retailerportal@crane.com"
-          class="text-decoration-none"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-      retailerportal@crane.com
-          </div>
-        </a>
-      </v-hover>
-    </div>
-    <div class="padding-space1"><b>Engraved Dies</b></div>
-    <div>Please use the address below for engraving dies:</div>
-    <div>Crane Stationery</div>
-    <div>Attn: Kitting Department</div>
-    <div>461 Saratoga Street</div>
-    <div>Cohoes, NY 12047</div>
-    <div class="padding-space1"><b>Customer Service Mailing Address</b></div>
-    <div>Please use the address below for mailed orders:</div>
-    <div>Crane Stationery Returns</div>
-    <div>461 Saratoga Street</div>
-    <div>Cohoes, NY 12047</div>
-    <div class="padding-space1"><b>Customer Service Hours</b></div>
-    <div>Monday - Friday 9:00am - 6:00pm EST</div>
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ResourcesPage' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Back to Resources
-          </div>
-        </router-link>
-      </v-hover>
-    </div> -->
   </v-container>
 </template>
 <script>

src/routes/retailer/landing_page.scss

@@ -0,0 +1,3 @@
+.landing-page-height{
+ height:100%;
+}

src/routes/retailer/landing_page.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="d-flex flex-column landing-page-height">
+    <LandingComponent/>
+  </div>
+</template>
+<script>
+const baseUrl = process.env.VUE_APP_BASE_URL;
+import LandingComponent from "@/components/landing/LandingComponent";
+export default {
+  name: "LandingPage",
+  data: () => ({ 
+  }),
+   components: {
+    LandingComponent,
+  },
+  computed:{
+     canonical: function() {
+      return this.$route.meta.canonical;
+    },
+     landingPageContent: function() {
+     return this.$store.state.layout.pageContent;
+     },
+      pageId: function(){
+      return this.$route.meta.pid
+     }
+  },
+  methods:{
+    pageData() {
+      if (this.landingPageContent.length) {
+       let data = this.landingPageContent.filter(element=>{
+      return element.id === this.pageId});
+             if(data.length > 0){
+               return data[0]
+             }
+
+      }
+  },
+  },
+  metaInfo() {
+        return {
+            title: `${this.landingPageContent && this.pageData() && this.pageData().title != undefined ?this.pageData().title:''}`,
+            meta: [
+                { name: 'title', content: `${this.landingPageContent && this.pageData() && this.pageData().metaTitle != undefined?this.pageData().metaTitle:''}`},
+                { name: 'description', content: `${this.landingPageContent && this.pageData() && this.pageData().metaDescription != undefined?this.pageData().metaDescription:''}`},
+                { name: 'keywords', content: `${this.landingPageContent && this.pageData() && this.pageData().metaKeywords != undefined ? this.pageData().metaKeywords:''}`}
+            ],
+             link: [
+                {rel: 'canonical', href:`${this.canonical ? window.location.href.split('?')[0] : baseUrl }`}
+            ] 
+        }
+  },
+ 
+};
+</script>
+<style src="./landing_page.scss" lang="scss" scoped />

src/routes/retailer/marketing-tools-promotions.vue

@@ -5,74 +5,7 @@
       <div class="h3 my-5 py-5 body-font1">{{ marketingToolsPromotionsPage.contentHeading }}</div>
       <div v-html="marketingToolsPromotionsPage.content"></div>
     </div>
-    <!-- <div class="h3 my-5 py-5 body-font1">Marketing Tools & Promotions</div>
+ 
-
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font "
-          :to="{ name: 'MarketingCollateral' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
-          >
-            Marketing Collateral
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'Promotions' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-           Promotions - Album, Boxed
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ImageryLogos' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Imagery & Logos
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    
-
-   
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ResourcesPage' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Back to Resources
-          </div>
-        </router-link>
-      </v-hover>
-    </div> -->
   </v-container>
 </template>
 <script>

src/routes/retailer/personalized-products-ordering.vue

@@ -5,101 +5,7 @@
       <div class="h3 my-5 py-5 body-font1">{{ personalizedProductsOrderingPage.contentHeading }}</div>
       <div v-html="personalizedProductsOrderingPage.content"></div>
     </div>
-    <!-- <div class="h3 my-5 py-5 body-font1">Personalized Products & Ordering</div>
+ 
-
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font "
-          :to="{ name: 'PersonalizedAlbums' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
-          >
-            Personalized Albums
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-         to 
-         @click.native="goToLink(
-              'http://emarketing.crane.com/retailer-portal/Concierge-Services.pdf'
-            )
-          "
-        
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-           Concierge Services
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to 
-         @click.native="goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-Design-Elements.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane Stationery Design Elements
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to 
-         @click.native="goToLink(
-              'http://emarketing.crane.com/retailer-portal/Engraving-Die-Record.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-          Engraving Die Form
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-   
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ResourcesPage' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Back to Resources
-          </div>
-        </router-link>
-      </v-hover>
-    </div> -->
   </v-container>
 </template>
 <script>

src/routes/retailer/resources.vue

@@ -4,85 +4,7 @@
       <div class="h3 my-5 py-5 body-font1">{{ resourcePage.contentHeading }}</div>
       <div v-html="resourcePage.content"></div>
     </div>
-    <!-- <div class="h3 my-5 py-5 body-font1">Resources</div> -->
 
-    <!-- <v-hover v-slot:default="{ hover }" >
-      <router-link class="text-decoration-none   whyteTmin10-font" :to="{ name: 'BoxedProductsOrdering' }">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading " >
-          Boxed Products & Ordering
-        </div>
-      </router-link>
-    </v-hover>
-    <div class="padding-space ">Boxed product catalogs, price lists and order forms</div>
-
-    <v-hover v-slot:default="{ hover }">
-      <router-link class="text-decoration-none " :to="{ name: 'PersonalizedProductsOrdering' }">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
-          Personalized Products & Ordering
-        </div>
-      </router-link>
-    </v-hover>
-    <div class="pt-1">Electronic order form and wedding program template downloads</div>
-    <div class="padding-space">
-      Album PDF's design elements information, custom information and supplied
-      art guidelines
-    </div>
-
-    <v-hover v-slot:default="{ hover }">
-      <router-link class="text-decoration-none " :to="{ name: 'MarketingToolsPromotions' }">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
-          Marketing Tools & Promotions
-        </div>
-      </router-link>
-    </v-hover>
-    <div class="padding-space">
-      Promotion details, marketing collateral, album imagery, and brand logos
-    </div>
-
-    <v-hover v-slot:default="{ hover }">
-      <router-link class="text-decoration-none " :to="{ name: 'RetailerCommunications' }">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
-          Retailer Communications
-        </div>
-      </router-link>
-    </v-hover>
-    <div class="padding-space"> 
-      Archive of amil communications about service levels, product and pricing
-      announcements, monthly marketing emails and more
-    </div>
-
-    <v-hover v-slot:default="{ hover }">
-      <router-link class="text-decoration-none " :to="{ name: 'Training' }">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
-          Training
-        </div>
-      </router-link>
-    </v-hover>
-    <div class="pt-1">Upcoming Training calendar and sign-up details</div>
-    <div class="padding-space">
-      Archive of training materials for PDS, Retailer Portal and the Universal
-      Order Form
-    </div>
-
-    <v-hover v-slot:default="{ hover }">
-      <router-link class="text-decoration-none " :to="{ name: 'ContactUs' }">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
-          Contact Us
-        </div>
-      </router-link>
-    </v-hover>
-    <div class="padding-space">
-      Account Manager contact list, and Customer Service, PDS and Retailer
-      Portal Support contat information and hours of operation
-    </div>
-
-    <v-hover v-slot:default="{ hover }" >
-      <router-link class="text-decoration-none padding-space" :to="{ name: 'AccountDashboard'}">
-        <div :class="hover ? 'primary--text' : 'black--text'" class="subheading">
-          Back to Retailer Portal Dashboard
-        </div>
-      </router-link>
-    </v-hover> -->
   </v-container>
 </template>
 <script>

src/routes/retailer/retailer-communications.vue

@@ -6,41 +6,7 @@
       <div class="h3 my-5 py-5 body-font1">{{  retailerCommunicationsPage.contentHeading }}</div>
       <div v-html=" retailerCommunicationsPage.content"></div>
     </div>
-    <!-- <div class="h3 my-5 py-5 body-font1">Retailer Communications</div>
 
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font "
-          :to="{ name: 'ServiceLevels' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
-          >
-           Service Levels
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    
-   
-    <div class="padding-space">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ResourcesPage' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Back to Resources
-          </div>
-        </router-link>
-      </v-hover>
-    </div> -->
   </v-container>
 </template>
 <script>

src/routes/retailer/training.vue

@@ -4,321 +4,7 @@
       <div class="h3 my-5 py-5 body-font1">{{ trainingPage.contentHeading }}</div>
       <div v-html="trainingPage.content"></div>
     </div>
-    
-    <!-- <div class="h3 my-5 py-5 body-font1">Training</div>
-    <div><b>PDS Training Materials</b></div>
-    <div class="padding-space">PDS Documentation</div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Basic-Guide.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane's PDS Basic Guide
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Holiday-Basic-Guide.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane's PDS Holiday Basic Guide
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-PDS%20Basic-Q%26A.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane's PDS Basic Q&A
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
 
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Advanced-Guide.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane's PDS Advanced Guide
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Advanced-Guide.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane's PDS Advanced Q&A
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Crane-Wedding-Reference-Guide.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Crane Wedding Reference Guide
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div class="padding-space">PDS Video Tutorials</div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Video Demonstration - Placing a PDS Order
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            PDS Holiday Order in a few steps
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link class="text-decoration-none whyteTmin10-font" to="">
-          to   
-          @click.native="gotoLink('https://www.dropbox.com/s/md6dxx0hahlkd4l/2021%20PDS%20Refresh.mp4?dl=0')" 
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Multi Browser PDS
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div class="padding-space">PDS Sign Up Forms</div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/PDS-Usage-Agreement.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            PDS Usage Agreement
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Account Sign Up Form
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div class="padding-space1"><b>Retailer Portal Training Materials</b></div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-Training-Overview.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Retailer Portal Training Overview
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-FAQ.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Retailer Portal FAQ
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-         to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-Boxed-Ordering-Quick-Reference.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            How to Place a Boxed Order
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-    <div class="padding-space1">
-      <b>Universal Order Form Training Materials</b>
-    </div>
-    <div>
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-           to
-          @click.native="
-            goToLink(
-              'http://emarketing.crane.com/retailer-portal/Alternate-Characters-Reference-Sheet.pdf'
-            )
-          "
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Alternate Characters Reference Sheet
-          </div>
-        </router-link>
-      </v-hover>
-    </div>
-
-    <div class="padding-space1"><b>Sign Up for Training</b></div>
-    <div>No training sessions are currently scheduled at this time.</div>
-
-    <div class="padding-space1">
-      <v-hover v-slot:default="{ hover }">
-        <router-link
-          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: 'ResourcesPage' }"
-        >
-          <div
-            :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading"
-          >
-            Back to Resources
-          </div>
-        </router-link>
-      </v-hover>
-    </div> -->
   </v-container>
 </template>
 <script>