still woring on components-incomplte in header part

git_info.json

@@ -1 +1 @@
-{"branch_name":"dev","last_commit_date":"2022-01-21T06:09:37.000Z","last_commit_author":"anju j","last_commit_hash":"934b913728e33b2c9f6fdfff0b610198132bfe8a"}
+{"branch_name":"dev","last_commit_date":"2022-01-21T06:11:48.000Z","last_commit_author":"anju j","last_commit_hash":"ec3b6b80d10917d37b10d953d1161fe29d92ad68"}

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

@@ -104,7 +104,8 @@ margin-bottom: 0px !important;
 .me-header-search-field .theme--dark.v-label {
     color:#1d1d1d;
 }
-/*.v-menu__content,.v-list{
+.v-menu__content,.v-list .me-header-user-menu-list{
     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" 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 me-header-user-menu-list">
             <v-list-item  class="pr-10">
               <v-list-item-title
                 @click="goTohomePage()"

src/multipages/retailer.routes.js

@@ -236,6 +236,28 @@ 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' ,
+                    },
+                }
+            },
           
         ]
     },

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/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'"

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: 15px 0px 0px 0px;
+}

src/routes/retailer/marketing_collateral.vue

@@ -0,0 +1,170 @@
+<template>
+  <v-container>
+    <div class="h3 my-10 body-font1">Marketing Collateral</div>
+    <div><b>Album Marketing Collateral</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: "MarketingCollateral",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
+};
+</script>
+<style src="./marketing_collateral" 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/training.vue

@@ -6,249 +6,303 @@
     <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
+            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
+            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
+            Crane's PDS Basic Q&A
           </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-Advanced-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
-         Crane's PDS Advanced Guide
+            Crane's PDS Advanced 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-Advanced-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
-         Crane's PDS Advanced Q&A
+            Crane's PDS Advanced Q&A
           </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-Wedding-Reference-Guide.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
-         Crane Wedding Reference Guide
+            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
+            Video Demonstration - Placing a PDS Order
           </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"
           >
-         PDS Holiday Order in a few steps
+            PDS Holiday Order in a few steps
           </div>
         </router-link>
       </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
+            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
+            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
+            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
+            Retailer Portal Training Overview
           </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/Retailer-Portal-FAQ.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
-         Retailer Portal FAQ
+            Retailer Portal FAQ
           </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/Retailer-Portal-Boxed-Ordering-Quick-Reference.pdf'
+            )
+          "
         >
           <div
             :class="hover ? 'primary--text' : 'black--text'"
-            class="subheading "
+            class="subheading"
           >
-         How to Place a Boxed Order
+            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
+            Alternate Characters Reference Sheet
           </div>
         </router-link>
       </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">
-   
-    <div  class="padding-space1">
       <v-hover v-slot:default="{ hover }">
         <router-link
           class="text-decoration-none whyteTmin10-font"
@@ -268,6 +322,11 @@
 <script>
 export default {
   name: "Training",
+  methods: {
+    goToLink(pageLink) {
+      window.open(pageLink, "_blank");
+    },
+  },
 };
 </script>