Merge branch 'dev' of git.treelet.net:crane/retailer-vue into beta

git_info.json

@@ -1 +1 @@
-{"branch_name":"beta","last_commit_date":"2022-01-20T09:38:46.000Z","last_commit_author":"rakesh","last_commit_hash":"ad63d7d012c005f4fd033a9432f7feb1494fbf8e"}
+{"branch_name":"beta","last_commit_date":"2022-01-24T07:20:19.000Z","last_commit_author":"rakesh","last_commit_hash":"aa8e69ef45c86de9ea029d1aaa3db3c67a80dbcb"}

src/components/retailer/layout/header/Header.scss

@@ -104,7 +104,7 @@ margin-bottom: 0px !important;
 .me-header-search-field .theme--dark.v-label {
     color:#1d1d1d;
 }
-/*.v-menu__content,.v-list{
+.v-menu__content.me-header-user-menu{
     border-radius: 0px !important;
     top: 64px !important;
-}*/
+}

src/components/retailer/layout/header/Header.vue

@@ -83,7 +83,7 @@
       <v-icon>mdi-shopping-outline</v-icon>
       </v-btn> -->
       <div class="mt-3 mr-5 d-none d-md-block">
-        <v-menu offset-y v-if="userAuth">
+        <v-menu offset-y v-if="userAuth" content-class="me-header-user-menu" >
           <template v-slot:activator="{ on, attrs }">
             <div color="primary" >
               <span  v-bind="attrs" v-on="on" class="text-uppercase cursor-pointer" >  Welcome,</span>
@@ -91,7 +91,7 @@
             </div>
            
           </template>
-          <v-list class="pr-10  d-none d-md-block">
+          <v-list class="pr-10  d-none d-md-block ">
             <v-list-item  class="pr-10">
               <v-list-item-title
                 @click="goTohomePage()"

src/multipages/retailer.routes.js

@@ -236,6 +236,61 @@ export default [
                     },
                 }
             },
+            {
+                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' ,
+                    },
+                }
+            },
           
         ]
     },

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

@@ -5,12 +5,17 @@
     <div class="padding-space">
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Catalog.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             2021 Boxed Catalog
           </div>
@@ -18,11 +23,16 @@
       </v-hover>
     </div>
 
-    <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-2021-Boxed-Holiday-Catalog.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -34,12 +44,11 @@
       </v-hover>
     </div>
 
-    <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
-        <router-link
+        <router-link class="text-decoration-none whyteTmin10-font" to="">
-          class="text-decoration-none whyteTmin10-font"
+          <!-- to
-          :to="{ name: '' }"
+            @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"
@@ -50,15 +59,17 @@
       </v-hover>
     </div>
 
-    <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')"
+          @click.native="
-                target="_blank"
+            goToLink(
-                :class="hover ? 'primary--text':'black--text'"
+              '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'"
@@ -74,7 +85,12 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Downton-Abbey-Catalog.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -106,14 +122,14 @@
 <script>
 export default {
   name: "BoxedProductsOrdering",
-  methods:{
+  methods: {
     goToLink(pageLink) {
       // window.location.replace(pageLink);
       //} else {
       window.open(pageLink, "_blank");
       //}
     },
-  }
+  },
 };
 </script>
 

src/routes/retailer/imagery_logos.scss

@@ -0,0 +1,13 @@
+.subheading{
+    border-bottom: 1px solid #111 ;
+    
+    display: inline;
+    transition: all 0.1s ease-in-out;
+}
+.subheading:hover{
+    border-bottom: 1px solid #2c05da ;
+
+}
+.padding-space{
+    padding: 5px 0px 0px 0px;
+}

src/routes/retailer/imagery_logos.vue

@@ -0,0 +1,338 @@
+<template>
+  <v-container>
+    <div class="h3 my-5 py-10 body-font1">Imagery & Logos</div>
+    <div class="pb-5"><b>Crane & Co. Album Imagery</b></div>
+   
+    <div class="padding-space">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          to
+          @click.native="
+            goToLink(
+              'https://www.dropbox.com/sh/d2aeogtlsby0gee/AAA3jzGfe5Z8GTMvteqhai6va?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+      Crane & Co. Business Essentials
+          </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(
+              'https://www.dropbox.com/sh/9wr2f5xhin3j4wk/AAAF6E8uM13XoQGmazoRZAEoa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     Crane & Co. Collection I
+          </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(
+              'https://www.dropbox.com/sh/hefr3rjvm93k15b/AAA60S01KZqsaPWvwPKMx_3Da?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     Crane & Co. Collection II
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+
+    <div class="pt-10 pb-5"><b>Holiday 2021</b></div>
+
+    <div class="padding-space">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          to
+          @click.native="
+            goToLink(
+              'https://www.dropbox.com/sh/xlbplrg290552oh/AAD8k5QCic3a45GWmKuBeSZpa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     Boxed
+          </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(
+              'https://www.dropbox.com/sh/xlbplrg290552oh/AAD8k5QCic3a45GWmKuBeSZpa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     Personalized
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+
+    <div class="pt-10 pb-5"><b>Brand Logos</b></div>
+
+
+    <div class="padding-space">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          to
+          @click.native="
+            goToLink(
+              'https://www.dropbox.com/sh/njpvrfc0yjvysyr/AAAaHmEded75XOo3Cvf39hEva?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     Hi Res Brand 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
+          @click.native="
+            goToLink(
+              'https://www.dropbox.com/sh/j5fqicnp6c12j49/AABFKE1PAD4VOfidmwQbEAdCa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     JPEG Brand Logos
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+
+    <div class="pt-10 pb-5"><b>William Arthur Album Imagery</b></div>
+
+    <div class="padding-space">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          to
+          @click.native="
+            goToLink(
+              'https://www.dropbox.com/sh/1idvf0bp9k2y4zk/AAAVtCgkYOkD1MwhoIj-c7H7a?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     NEW William Arthur Weddings Volume I
+          </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(
+              'https://www.dropbox.com/sh/nljbpmr8ieiil4g/AADP6MpJUcZN8nTHuu_66wHJa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     NEW William Arthur Weddings Volume I (Detail Shots)
+          </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(
+              'https://www.dropbox.com/sh/jpvxv2ns60azzb2/AAA2e_VsAd0CoEvcUZ4At2EFa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     William Arthur Invitations & Announcements, Volume II
+          </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(
+              'https://www.dropbox.com/sh/aemgss1o857719f/AADBoxO3t-kRDCXaRcr9Yik0a?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     NEW William Arthur Social Stationery & Occassions
+          </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(
+              'https://www.dropbox.com/sh/ftr9xd0b58hu9e0/AACuJGSnyJfsbLPAO_fRvUvsa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     William Arthur Weddings, Volume II
+          </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(
+              'https://www.dropbox.com/sh/nlkdmqvsg7s2iy9/AABJOA6W7L4PlN9x0hBbq_Rra?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+     William Arthur Weddings, Volume II Insert
+          </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(
+              'https://www.dropbox.com/sh/2rie5nzxg7be8r8/AABlMW1ihlCO4ua44_PavXfYa?dl=0'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+    William Arthur Weddings, Volume III
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+
+
+    <div class="py-10">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          :to="{ name: 'MarketingToolsPromotions' }"
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+          Back to Marketing Tools & Promotions
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "ImageryLogos",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
+};
+</script>
+
+<style src="./imagery_logos.scss" lang="scss" scoped/>

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

@@ -8,7 +8,7 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font "
-          :to="{ name: '' }"
+          :to="{ name: 'MarketingCollateral' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -24,7 +24,7 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          :to="{ name: 'Promotions' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -40,7 +40,7 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          :to="{ name: 'ImageryLogos' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"

src/routes/retailer/marketing_collateral.scss

@@ -0,0 +1,12 @@
+.subheading{
+    border-bottom: 1px solid #111 ;
+    
+    display: inline;
+    transition: all 0.1s ease-in-out;
+}
+.subheading:hover{
+    border-bottom: 1px solid #2c05da ;
+}
+.padding-space{
+    padding: 5px 0px 0px 0px;
+}

src/routes/retailer/marketing_collateral.vue

@@ -0,0 +1,494 @@
+<template>
+  <v-container>
+    <div class="h3 my-10 pb-2 body-font1">Marketing Collateral</div>
+    <div><b>Album Marketing Collateral</b></div>
+
+    <div class="pt-5">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          to
+          @click.native="
+            goToLink(
+              'https://www.dropbox.com/login?cont=%2Fhome%2FCrane%2520%2526%2520Co%2520Team%2520Folder%2FSales%2FRetailer%2520Image%2520Requests%2FRetailer%2520Toolkits%2F2021%2520Stationery%2520Album'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane 2021 Stationery Album
+          </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/2015/media/SEPT/Crane-Download-and-Display-Sept-2015-Weddings.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Wedding
+          </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/2015/media/JULY/Crane-Download-and-Display-July-monograms-2015.pdf?cid=EM070115'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Monograms
+          </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/2015/Media/MAY/May-Download-and%20Display-Accessories.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Wedding Day-of Accessories
+          </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/2015/media/MARCH/Crane-Wedding-Refresh-POP.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Wedding Refresh
+          </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/2014/media/JULY/august-print-and-post-corner-office.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Collection II (business stationery)
+          </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/2014/media/JULY/July-T-stand-1.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Collection II
+          </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/2014/media/JULY/July-T-stand-3.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Colleciton II "Lovely Liners"
+          </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/2014/media/JULY/July-T-stand-2.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Collection II "Magnificent Monograms"
+          </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/WA-Weddings-2017-Rose-Gold-Promo-Poster.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Wedding 2017 Rose Gold
+          </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/2016/media/jul/2016-WA-Holiday-Promotion.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Personalized Holiday
+          </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/2015/media/OCT/WA-PrintandPost-winter-wedding-%20October-2015.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Winter Wedding
+          </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/2015/media/MAY/MAY-WA-print-and-post-truly.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Truly Collection
+          </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/2015/media/MARCH/March-Print-and-Post-Timeline.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Wedding Stationery Timeline
+          </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/2014/media/NOV/WA-nov-print%20and-post-winter-wedding.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Winter Wedding
+          </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/2015/media/MAY/MAY-WA-print-and-post-truly.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Truly Collection
+          </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/2015/media/MARCH/March-Print-and-Post-Timeline.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Wedding Stationery Timeline
+          </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/2014/media/NOV/WA-nov-print%20and-post-winter-wedding.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Winter Wedding
+          </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/2014/media/JULY/WA-august-print-and-post-bright-wedding-invites.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Weddings III (bright colors)
+          </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/2014/media/JULY/%20JULY-william-arthur-print-and-post-1.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Weddings II (new invitation designs)
+          </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/2014/media/APRIL/WA-April-Print-and-Post-Invites.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            William Arthur Spring Wedding Invitations
+          </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/2014/media/May/Wedding-collateral-2014-Vera.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Vera Wang On Weddings
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+
+    <div class="py-12">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          :to="{ name: 'MarketingToolsPromotions' }"
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Back to Marketing Tools Promotions
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "MarketingCollateral",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
+};
+</script>
+<style src="./marketing_collateral.scss" lang="scss" scoped/>

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

@@ -7,7 +7,7 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font "
-          :to="{ name: '' }"
+          :to="{ name: 'PersonalizedAlbums' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -23,7 +23,12 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+         to 
+         @click.native="goToLink(
+              'http://emarketing.crane.com/retailer-portal/Concierge-Services.pdf'
+            )
+          "
+        
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -39,7 +44,11 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to 
+         @click.native="goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-Stationery-Design-Elements.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -55,7 +64,11 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to 
+         @click.native="goToLink(
+              'http://emarketing.crane.com/retailer-portal/Engraving-Die-Record.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
@@ -88,6 +101,11 @@
 <script>
 export default {
   name: "PersonalizedProductsOrdering",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
 };
 </script>
 

src/routes/retailer/personalized_albums.scss

@@ -0,0 +1,12 @@
+.subheading{
+    border-bottom: 1px solid #111 ;
+    
+    display: inline;
+    transition: all 0.1s ease-in-out;
+}
+.subheading:hover{
+    border-bottom: 1px solid #2c05da ;
+}
+.padding-space{
+    padding: 15px 0px 0px 0px;
+}

src/routes/retailer/personalized_albums.vue

@@ -0,0 +1,170 @@
+<template>
+  <v-container>
+    <div class="h3 my-10 body-font1">Personalized Albums</div>
+    <div><b>Crane & Co.</b></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.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Stationery 2021
+          </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/Crane-Stationery-2021-Pricing.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Stationery 2021 - Pricing Booklet
+          </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/Crane-Wedding.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Wedding
+          </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/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="mt-10"><b>Crane Stationery Holiday 2021</b></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-Holiday-2021.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+            Crane Holiday 2021
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+
+     <div class="mt-10"><b> William Arthur</b></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/William-Arthur-Weddings-I.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+        William Arthur Weddings Volume One - 2019
+          </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/William-Arthur-Weddings-II.pdf'
+            )
+          "
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+         William Arthur Weddings Volume Two - 2019
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+     <div class="my-12  pb-12">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          :to="{ name: 'PersonalizedProductsOrdering' }"
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+        Back to Personalized Products & Ordering
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "PersonalizedAlbums",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
+};
+</script>
+<style src="./personalized_albums.scss" lang="scss" scoped/>

src/routes/retailer/promotions.scss

@@ -0,0 +1,10 @@
+.subheading{
+    border-bottom: 1px solid #111 ;
+    
+    display: inline;
+    transition: all 0.1s ease-in-out;
+}
+.subheading:hover{
+    border-bottom: 1px solid #2c05da ;
+
+}

src/routes/retailer/promotions.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container>
+    <div class="h3 my-5 py-10 body-font1">Promotions</div>
+    <div><b>Promotions</b></div>
+    <div class="py-5">TBA</div>
+   
+    <div class="pt-10">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          :to="{ name: 'MarketingToolsPromotions' }"
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+          Back to Marketing Tools & Promotions
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "Promotions",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
+};
+</script>
+
+<style src="./promotions.scss" lang="scss" scoped/>

src/routes/retailer/retailer-communications.vue

@@ -8,7 +8,7 @@
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font "
-          :to="{ name: '' }"
+          :to="{ name: 'ServiceLevels' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"

src/routes/retailer/service_levels.scss

@@ -0,0 +1,13 @@
+.subheading{
+    border-bottom: 1px solid #111 ;
+    
+    display: inline;
+    transition: all 0.1s ease-in-out;
+}
+.subheading:hover{
+    border-bottom: 1px solid #2c05da ;
+
+}
+.padding-space{
+    padding: 5px 0px 0px 0px;
+}

src/routes/retailer/service_levels.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-container>
+    <div class="h3 my-5 py-10 body-font1">Service Levels</div>
+    <div class="pb-5 whyte-book-font">Please reference your weekly service level email. If you do not receive this email and would like to receive it please contact Customer Service and ask to have your email address added to this mailing list.</div>
+   
+  
+
+    <div class="py-10">
+      <v-hover v-slot:default="{ hover }">
+        <router-link
+          class="text-decoration-none whyteTmin10-font"
+          :to="{ name: 'RetailerCommunications' }"
+        >
+          <div
+            :class="hover ? 'primary--text' : 'black--text'"
+            class="subheading"
+          >
+        Back to Retailer Communications
+          </div>
+        </router-link>
+      </v-hover>
+    </div>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "ServiceLevels",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
+};
+</script>
+
+<style src="./service_levels.scss" lang="scss" scoped/>

src/routes/retailer/training.vue

@@ -6,45 +6,60 @@
     <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 >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Basic-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Crane's PDS Basic Guide
           </div>
         </router-link>
       </v-hover>
     </div>
-    <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          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 "
+            class="subheading"
           >
             Crane's PDS Holiday Basic Guide
           </div>
         </router-link>
       </v-hover>
     </div>
-     <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          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 "
+            class="subheading"
           >
             Crane's PDS Basic Q&A
           </div>
@@ -52,15 +67,20 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Advanced-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Crane's PDS Advanced Guide
           </div>
@@ -68,15 +88,20 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-PDS-Advanced-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Crane's PDS Advanced Q&A
           </div>
@@ -84,31 +109,36 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Crane-Wedding-Reference-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Crane Wedding Reference Guide
           </div>
         </router-link>
       </v-hover>
     </div>
-<div class="padding-space">PDS Video Tutorials</div>
+    <div class="padding-space">PDS Video Tutorials</div>
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
           :to="{ name: '' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Video Demonstration - Placing a PDS Order
           </div>
@@ -116,15 +146,15 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
           :to="{ name: '' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             PDS Holiday Order in a few steps
           </div>
@@ -132,62 +162,71 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
-        <router-link
+        <router-link class="text-decoration-none whyteTmin10-font" to="">
-          class="text-decoration-none whyteTmin10-font "
+          <!-- to   -->
-          :to="{ name: '' }"
+          <!-- @click.native="gotoLink('https://www.dropbox.com/s/md6dxx0hahlkd4l/2021%20PDS%20Refresh.mp4?dl=0')" -->
-        >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Multi Browser PDS
           </div>
         </router-link>
       </v-hover>
     </div>
-<div class="padding-space">PDS Sign Up Forms</div>
+    <div class="padding-space">PDS Sign Up Forms</div>
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/PDS-Usage-Agreement.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             PDS Usage Agreement
           </div>
         </router-link>
       </v-hover>
     </div>
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
           :to="{ name: '' }"
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Account Sign Up Form
           </div>
         </router-link>
       </v-hover>
     </div>
-<div class="padding-space1"><b>Retailer Portal Training Materials</b></div>
+    <div class="padding-space1"><b>Retailer Portal Training Materials</b></div>
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-Training-Overview.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Retailer Portal Training Overview
           </div>
@@ -195,15 +234,20 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+          to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Retailer-Portal-FAQ.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Retailer Portal FAQ
           </div>
@@ -211,31 +255,43 @@
       </v-hover>
     </div>
 
- <div >
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+         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 "
+            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 class="padding-space1">
- <div >
+      <b>Universal Order Form Training Materials</b>
+    </div>
+    <div>
       <v-hover v-slot:default="{ hover }">
         <router-link
-          class="text-decoration-none whyteTmin10-font "
+          class="text-decoration-none whyteTmin10-font"
-          :to="{ name: '' }"
+           to
+          @click.native="
+            goToLink(
+              'http://emarketing.crane.com/retailer-portal/Alternate-Characters-Reference-Sheet.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
             Alternate Characters Reference Sheet
           </div>
@@ -243,10 +299,8 @@
       </v-hover>
     </div>
 
- 
+    <div class="padding-space1"><b>Sign Up for Training</b></div>
-<div class="padding-space1"><b>Sign Up for Training</b></div>
+    <div>No training sessions are currently scheduled at this time.</div>
-<div>No training sessions are currently scheduled at this time.</div>
-    
 
     <div class="padding-space1">
       <v-hover v-slot:default="{ hover }">
@@ -268,6 +322,11 @@
 <script>
 export default {
   name: "Training",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
 };
 </script>