From 3d4f38fdc334415bbd1cce27b3c8badf6b4c3ecd Mon Sep 17 00:00:00 2001
From: anju j <jangidanjali50@gmail.com>
Date: Mon, 17 Jan 2022 18:16:19 +0530
Subject: [PATCH] initial code

---
 git_info.json                                 |   2 +-
 src/multipages/retailer.routes.js             | 108 +++++-
 src/routes/retailer/account_dashboard.vue     | 327 ++++++++----------
 .../retailer/boxed-products-ordering.scss     |  13 +
 .../retailer/boxed-products-ordering.vue      | 108 ++++++
 src/routes/retailer/boxed_order_history.vue   |  11 +
 src/routes/retailer/contact-us.scss           |  16 +
 src/routes/retailer/contact-us.vue            | 258 ++++++++++++++
 .../retailer/marketing-tools-promotions.scss  |  16 +
 .../retailer/marketing-tools-promotions.vue   |  81 +++++
 src/routes/retailer/pds.vue                   |  12 +
 .../personalized-products-ordering.scss       |  16 +
 .../personalized-products-ordering.vue        |  94 +++++
 .../retailer/personalized_order_status.scss   |   3 +
 .../retailer/personalized_order_status.vue    |  41 +++
 src/routes/retailer/resources.scss            |  12 +
 src/routes/retailer/resources.vue             |  89 +++++
 .../retailer/retailer-communications.scss     |  16 +
 .../retailer/retailer-communications.vue      |  48 +++
 src/routes/retailer/training.scss             |  16 +
 src/routes/retailer/training.vue              | 274 +++++++++++++++
 src/styles/overrides.scss                     |  10 +
 22 files changed, 1382 insertions(+), 189 deletions(-)
 create mode 100644 src/routes/retailer/boxed-products-ordering.scss
 create mode 100644 src/routes/retailer/boxed-products-ordering.vue
 create mode 100644 src/routes/retailer/boxed_order_history.vue
 create mode 100644 src/routes/retailer/contact-us.scss
 create mode 100644 src/routes/retailer/contact-us.vue
 create mode 100644 src/routes/retailer/marketing-tools-promotions.scss
 create mode 100644 src/routes/retailer/marketing-tools-promotions.vue
 create mode 100644 src/routes/retailer/pds.vue
 create mode 100644 src/routes/retailer/personalized-products-ordering.scss
 create mode 100644 src/routes/retailer/personalized-products-ordering.vue
 create mode 100644 src/routes/retailer/personalized_order_status.scss
 create mode 100644 src/routes/retailer/personalized_order_status.vue
 create mode 100644 src/routes/retailer/resources.scss
 create mode 100644 src/routes/retailer/resources.vue
 create mode 100644 src/routes/retailer/retailer-communications.scss
 create mode 100644 src/routes/retailer/retailer-communications.vue
 create mode 100644 src/routes/retailer/training.scss
 create mode 100644 src/routes/retailer/training.vue

diff --git a/git_info.json b/git_info.json
index 948469c..ab09493 100644
--- a/git_info.json
+++ b/git_info.json
@@ -1 +1 @@
-{"branch_name":"beta","last_commit_date":"2022-01-10T16:11:16.000Z","last_commit_author":"sidharth","last_commit_hash":"25ae3331437809e4092c87f686e093b4f662b163"}
\ No newline at end of file
+{"branch_name":"beta","last_commit_date":"2022-01-11T14:18:17.000Z","last_commit_author":"sidharth","last_commit_hash":"72055c92e69a2f6c8d892620ef587454986cf0f3"}
\ No newline at end of file
diff --git a/src/multipages/retailer.routes.js b/src/multipages/retailer.routes.js
index a156863..06cf747 100644
--- a/src/multipages/retailer.routes.js
+++ b/src/multipages/retailer.routes.js
@@ -14,6 +14,47 @@ export default [
         redirect: '/b2b',
         component: () => import(/* webpackChunkName: "meModule" */ '@/components/retailer/layout/Layout.vue'),
         children: [
+            
+            {
+                path: 'order',
+                name: 'BoxedOrderHistoryPage',
+                component: () => import(/* webpackChunkName: "meModule" */ '@/routes/retailer/boxed_order_history.vue'),
+                meta: {
+                    breadcrumb: {
+                        label: 'Boxed Order History Page',
+                    },
+                }
+            },
+            {
+                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',
@@ -54,7 +95,6 @@ export default [
                     },
                 }
             },
-         
             {
                 path: 'my-orders',
                 name: 'MyOrders',
@@ -130,6 +170,72 @@ 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' ,
+                    },
+                }
+            },
           
         ]
     },
diff --git a/src/routes/retailer/account_dashboard.vue b/src/routes/retailer/account_dashboard.vue
index cced30e..083db92 100644
--- a/src/routes/retailer/account_dashboard.vue
+++ b/src/routes/retailer/account_dashboard.vue
@@ -1,218 +1,173 @@
 <template>
-  <v-container>
-     <v-overlay :value="cartProductsProgress" :opacity="0.8">
-      <v-container>
+  <v-container-fluid>
+    <v-row class="pl-10 pr-10">
+      <v-col cols="12" sm="12" md="12" lg="12" class="">
+        <div class="h3 text-capitalize body-font1">Retailer dashboard</div>
+        <div class="fontsize-18 py-5">
+          <b>Holiday Cutoff:</b> The deadline to submit your personalized order
+          to receive in time for christmas exired on 12/1.
+        </div>
+
         <v-row>
-          <v-col cols="12" class="d-flex justify-center align-center">
-            <div
-              class="h3 white--text mt-10"
-            >Please wait while fetching your profile details</div>
+          <v-col cols="12" sm="12" md="6" lg="4">
+            <v-hover v-slot:default="{ hover }">
+              <router-link
+                class="text-decoration-none"
+                :to="{ name: 'CheckoutPage' }"
+              >
+                <div
+                  :class="hover ? 'primary--text' : 'black--text'"
+                  class="
+                    border
+                    height-130px
+                    v-btn--outlined
+                    d-flex
+                    justify-center
+                    align-center
+                  "
+                >
+                  Boxed Order New Order
+                </div>
+              </router-link>
+            </v-hover>
           </v-col>
-          <v-col cols="12" class="d-flex justify-center align-center">
-            <v-progress-circular
-              indeterminate
-              size="80"
-              color="white"
-              align="center"
-              justify="center"
-            ></v-progress-circular>
+          <v-col cols="12" sm="12" md="6" lg="4">
+            <v-hover v-slot:default="{ hover }">
+              <router-link
+                class="text-decoration-none"
+                :to="{ name: 'BoxedOrderHistoryPage' }"
+              >
+                <div
+                  :class="hover ? 'primary--text' : 'black--text'"
+                  class="
+                    border
+                    height-130px
+                    v-btn--outlined
+                    d-flex
+                    justify-center
+                    align-center
+                  "
+                >
+                  Boxed Order History
+                </div>
+              </router-link>
+            </v-hover>
+          </v-col>
+          <v-col cols="12" sm="12" md="6" lg="4">
+            <v-hover v-slot:default="{ hover }">
+              <router-link
+                class="text-decoration-none"
+                :to="{ name: 'PersonalizedOrderSummaryPage' }"
+              >
+                <div
+                  :class="hover ? 'primary--text' : 'black--text'"
+                  class="
+                    border
+                    height-130px
+                    v-btn--outlined
+                    d-flex
+                    justify-center
+                    align-center
+                  "
+                >
+                  Personalized Order Status
+                </div>
+              </router-link>
+            </v-hover>
+          </v-col>
+          <v-col cols="12" sm="12" md="6" lg="4">
+            <v-hover v-slot:default="{ hover }">
+              <router-link
+                class="text-decoration-none"
+                :to="{ name: 'ResourcesPage' }"
+              >
+                <div
+                  :class="hover ? 'primary--text' : 'black--text'"
+                  class="
+                    border
+                    height-130px
+                    v-btn--outlined
+                    d-flex
+                    justify-center
+                    align-center
+                  "
+                >
+                  Resources
+                </div>
+              </router-link>
+            </v-hover>
+          </v-col>
+          <v-col cols="12" sm="12" md="6" lg="4">
+            <v-hover v-slot:default="{ hover }">
+              <router-link target="_blank"
+                class="text-decoration-none"
+                :to="{ name: 'PDSPage' }"
+              >
+                <div
+                  
+                  :class="hover ? 'primary--text' : 'black--text'"
+                  class="
+                    border
+                    height-130px
+                    v-btn--outlined
+                    d-flex
+                    justify-center
+                    align-center
+                  "
+                >
+                  PDS
+                </div>
+              </router-link>
+            </v-hover>
           </v-col>
         </v-row>
-      </v-container>
-    </v-overlay>
-
-    <v-row>
-      <v-col cols="12">
-        <!--<v-alert
-          class="alert-box-outline"
-          type="error"
-          text
-          dense
-          v-if="errorMessage  && hideShow"
-        >{{errorMessage}}</v-alert>-->
-        <!--<v-alert class="alert-box-outline" type="success" text dense v-if="successMessage && hideShow">
-            {{successMessage}}
-        </v-alert>-->
-        <p class="mb-8 h2 body-font text-uppercase primary--text">My Dashboard</p>
-        <div>
-          <p class="mt-4 h3 body-font text-uppercase primary--text">Account Information</p>
-          <div class="account-dashboard-line my-5"></div>
-          <v-row class="mt-5" justify="center" v-if="inProgress">
-            <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
-          </v-row>
-          <v-row class="mt-4" v-else>
-            <v-col cols="12" sm="6" md="6" lg="6">
-              <p class="body-font text-uppercase primary--text">Contact Information</p>
-              <p class="mb-0 body-font">{{ basicInfo.firstname}} {{ basicInfo.lastname}}</p>
-              <p class="body-font">{{ basicInfo.email}}</p>
-              <v-row>
-                <v-col cols="12">
-                  <v-hover v-slot:default="{ hover }">
-                    <router-link
-                      class="text-decoration-none"
-                      :to="{name:'EditAccountInfo',params:{value:'false'}}"
-                    >
-                      <v-btn
-                        depressed
-                        large
-                        tile
-                        class="mr-3 my-3 body-font account-dashboard-button"
-                        :outlined="hover"
-                        :color="hover?'white':'primary'"
-                        :class="hover?'primary--text':'white--text'"
-                      >EDIT</v-btn>
-                    </router-link>
-                  </v-hover>
-                  <!-- <router-link class="text-decoration-none" :to="{name:'EditAccountInfo',params:{value:'true'}}">
-                    <v-btn depressed large tile color="success" class="body-font my-2">CHANGE PASSWORD</v-btn>
-                  </router-link>-->
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col cols="12" sm="6" md="6" lg="6">
-              <p class="body-font text-uppercase primary--text">Newsletters</p>
-              <p v-if="basicInfo.extensionAttributes.isSubscribed" class="body-font">You are subscribed to our "Newsletter Subscription"</p>
-              <p v-else class="body-font">You are not subscribed to our "Newsletter Subscription"</p>
-              <v-row>
-                <v-col cols="12">
-                  <v-hover v-slot:default="{ hover }">
-                    <router-link class="text-decoration-none" :to="{name:'NewsLetterSubscription'}">
-                      <v-btn
-                        depressed
-                        large
-                        tile
-                        :outlined="hover"
-                        :color="hover?'white':'primary'"
-                        :class="hover?'primary--text':'white--text'"
-                        class="body-font my-2 account-dashboard-button"
-                      >EDIT</v-btn>
-                    </router-link>
-                  </v-hover>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-        </div>
-        <div>
-          <v-col>
-            <v-row class="mt-4">
-              <p class="h3 body-font text-uppercase primary--text mb-1 mr-3">Address Book</p>
-              <!-- <v-hover>
-                <router-link
-                  to
-                  @click.native="routeToPage('AddressBook')"
-                  class="mb-1 body-font mt-sm-3 mt-2 text-decoration-none primary-focus contentColor--text"
-                >Manage Addressess</router-link>
-              </v-hover>-->
-            </v-row>
-          </v-col>
-          <div class="account-dashboard-line my-1"></div>
-          <v-row class="mt-6" justify="center" v-if="inProgress">
-            <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
-          </v-row>
-          <v-row class="mt-4" v-else>
-            <v-col cols="12" sm="6" md="6" lg="6">
-              <p class="body-font text-uppercase primary--text">Default Billing Address</p>
-              <p
-                class="body-font"
-                v-if="!billingAddressDetails.address"
-              >You have not set a default billing address.</p>
-              <div v-else>
-                <p class="body-font">You have set a default billing address.</p>
-                <BillingAddressComponent :address="billingAddressDetails.address" />
-              </div>
-              <v-row>
-                <v-col cols="12">
-                  <v-hover v-slot:default="{ hover }">
-                    <v-btn
-                      @click="editAddress(billingAddressDetails.address,billingAddressDetails.index)"
-                      depressed
-                      large
-                      tile
-                      :outlined="hover"
-                      :color="hover?'white':'primary'"
-                      :class="hover?'primary--text':'white--text'"
-                      class="body-font my-2 account-dashboard-button"
-                    >EDIT</v-btn>
-                  </v-hover>
-                </v-col>
-              </v-row>
-            </v-col>
-            <v-col cols="12" sm="6" md="6" lg="6">
-              <p class="body-font text-uppercase primary--text">Default Shipping Address</p>
-              <p
-                class="body-font"
-                v-if="!shippingAddressDetails.address"
-              >You have not set a default shipping address.</p>
-              <div v-else>
-                <p class="body-font">You have set a default shipping address.</p>
-                <ShippingAddressComponent :address="shippingAddressDetails.address" />
-              </div>
-              <v-row>
-                <v-col cols="12">
-                  <v-hover v-slot:default="{ hover }">
-                    <v-btn
-                      @click="editAddress(shippingAddressDetails.address,shippingAddressDetails.index)"
-                      depressed
-                      large
-                      tile
-                      :outlined="hover"
-                      :color="hover?'white':'primary'"
-                      :class="hover?'primary--text':'white--text'"
-                      class="body-font my-2 account-dashboard-button"
-                    >EDIT</v-btn>
-                  </v-hover>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-        </div>
       </v-col>
     </v-row>
-  </v-container>
+  </v-container-fluid>
 </template>
+
 <script>
 //import { mapState } from "vuex";
 
 import { createHelpers } from "vuex-map-fields";
 import { loginInterrupt } from "@/services/nav";
-import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent";
-import ShippingAddressComponent from "@/components/retailer/address/ShippingAddressComponent";
+// import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent";
+// import ShippingAddressComponent from "@/components/retailer/address/ShippingAddressComponent";
 const { mapFields } = createHelpers({
   getterType: "accountOne/getField",
-  mutationType: "accountOne/updateField"
+  mutationType: "accountOne/updateField",
 });
 export default {
   name: "AccountDashboard",
   data() {
     return {
-      hideShow: false
+      hideShow: false,
     };
   },
   components: {
-    BillingAddressComponent,
-    ShippingAddressComponent
+    // BillingAddressComponent,
+    // ShippingAddressComponent
   },
   computed: {
-     cartProductsProgress: function() {
+    cartProductsProgress: function () {
       return this.$store.state.userCartProduct.cartProductsProgress;
     },
     basicInfo() {
       return this.$store.state.accountOne.one;
     },
-    errorMessage: function() {
+    errorMessage: function () {
       return this.$store.state.accountOne.errorMessage;
     },
-    shippingAddressDetails: function() {
+    shippingAddressDetails: function () {
       return this.$store.state.accountOne.shippingAddressDetails;
     },
-    billingAddressDetails: function() {
+    billingAddressDetails: function () {
       return this.$store.state.accountOne.billingAddressDetails;
     },
-    addresses: function() {
+    addresses: function () {
       return this.$store.state.accountOne.addresses;
     },
-    inProgress: function() {
+    inProgress: function () {
       return this.$store.state.accountOne.inProgress;
     },
     /*addressLength: function(){
@@ -220,26 +175,25 @@ export default {
         return this.basicInfo.addresses.length;
       return 0;
     },*/
-    successMessage: function() {
+    successMessage: function () {
       return this.$store.state.accountOne.successMessage;
     },
     ...mapFields(["newsLetterSubscription", "addressIndex"]),
-    userAuth: function() {
+    userAuth: function () {
       return this.$store.state.auth.userAuth;
-    }
+    },
   },
   methods: {
-    
     editAccount() {
       this.$router.push({
-        name: "EditAccountInfo"
+        name: "EditAccountInfo",
       });
     },
     routeToPage(pageName) {
       setTimeout(() => {
         this.$router.push({
           name: pageName,
-          params: { address: "shipping" }
+          params: { address: "shipping" },
         });
       }, 50);
     },
@@ -256,9 +210,9 @@ export default {
       localStorage.setItem("cr_meCurrentPage", "accountDashboard");
       this.$router.push({
         name: "EditAddressBook",
-        params: { addressId: addressId }
+        params: { addressId: addressId },
       });
-    }
+    },
   },
   created() {
     if (!this.userAuth) {
@@ -272,7 +226,6 @@ export default {
     setTimeout(() => {
       this.hideShow = false;
     }, 2000);
-  }
+  },
 };
 </script>
-<style src="./account_dashboard.scss" lang="scss" scoped />
\ No newline at end of file
diff --git a/src/routes/retailer/boxed-products-ordering.scss b/src/routes/retailer/boxed-products-ordering.scss
new file mode 100644
index 0000000..44d4af9
--- /dev/null
+++ b/src/routes/retailer/boxed-products-ordering.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: 50px 0px 50px 0px;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/boxed-products-ordering.vue b/src/routes/retailer/boxed-products-ordering.vue
new file mode 100644
index 0000000..f1144ce
--- /dev/null
+++ b/src/routes/retailer/boxed-products-ordering.vue
@@ -0,0 +1,108 @@
+<template>
+  <v-container>
+    <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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>
+export default {
+  name: "BoxedProductsOrdering",
+};
+</script>
+
+<style src="./boxed-products-ordering.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/routes/retailer/boxed_order_history.vue b/src/routes/retailer/boxed_order_history.vue
new file mode 100644
index 0000000..f5150ae
--- /dev/null
+++ b/src/routes/retailer/boxed_order_history.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <p>this is boxed order history page</p>
+    </div>
+</template>
+<script>
+export default {
+   name: 'BoxedOrderHistoryPage',
+
+}
+</script>
\ No newline at end of file
diff --git a/src/routes/retailer/contact-us.scss b/src/routes/retailer/contact-us.scss
new file mode 100644
index 0000000..fcb6155
--- /dev/null
+++ b/src/routes/retailer/contact-us.scss
@@ -0,0 +1,16 @@
+.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: 50px 0px 50px 0px;
+}
+.padding-space1{
+    padding: 15px 0px 15px 0px;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/contact-us.vue b/src/routes/retailer/contact-us.vue
new file mode 100644
index 0000000..84fdfd7
--- /dev/null
+++ b/src/routes/retailer/contact-us.vue
@@ -0,0 +1,258 @@
+<template>
+  <v-container>
+    <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>
+export default {
+  name: "ContactUs",
+};
+</script>
+
+<style src="./contact-us.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/routes/retailer/marketing-tools-promotions.scss b/src/routes/retailer/marketing-tools-promotions.scss
new file mode 100644
index 0000000..19fbae3
--- /dev/null
+++ b/src/routes/retailer/marketing-tools-promotions.scss
@@ -0,0 +1,16 @@
+.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: 50px 0px 0px 0px;
+}
+.padding-space1{
+    padding: 10px 0px 0px 0px;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/marketing-tools-promotions.vue b/src/routes/retailer/marketing-tools-promotions.vue
new file mode 100644
index 0000000..d172169
--- /dev/null
+++ b/src/routes/retailer/marketing-tools-promotions.vue
@@ -0,0 +1,81 @@
+
+
+<template>
+  <v-container>
+    <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: '' }"
+        >
+          <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: '' }"
+        >
+          <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: '' }"
+        >
+          <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>
+export default {
+  name: "MarketingToolsPromotions",
+};
+</script>
+
+<style src="./marketing-tools-promotions.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/routes/retailer/pds.vue b/src/routes/retailer/pds.vue
new file mode 100644
index 0000000..24b12d9
--- /dev/null
+++ b/src/routes/retailer/pds.vue
@@ -0,0 +1,12 @@
+
+
+<template>
+    <div>
+        <p>this is PDS page</p>
+    </div>
+</template>
+<script>
+export default {
+    name : "PDSPage"
+}
+</script>
diff --git a/src/routes/retailer/personalized-products-ordering.scss b/src/routes/retailer/personalized-products-ordering.scss
new file mode 100644
index 0000000..19fbae3
--- /dev/null
+++ b/src/routes/retailer/personalized-products-ordering.scss
@@ -0,0 +1,16 @@
+.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: 50px 0px 0px 0px;
+}
+.padding-space1{
+    padding: 10px 0px 0px 0px;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/personalized-products-ordering.vue b/src/routes/retailer/personalized-products-ordering.vue
new file mode 100644
index 0000000..35313f9
--- /dev/null
+++ b/src/routes/retailer/personalized-products-ordering.vue
@@ -0,0 +1,94 @@
+
+<template>
+  <v-container>
+    <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: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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>
+export default {
+  name: "PersonalizedProductsOrdering",
+};
+</script>
+
+<style src="./personalized-products-ordering.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/routes/retailer/personalized_order_status.scss b/src/routes/retailer/personalized_order_status.scss
new file mode 100644
index 0000000..bbdb86d
--- /dev/null
+++ b/src/routes/retailer/personalized_order_status.scss
@@ -0,0 +1,3 @@
+iframe{
+    border: none !important;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/personalized_order_status.vue b/src/routes/retailer/personalized_order_status.vue
new file mode 100644
index 0000000..be19176
--- /dev/null
+++ b/src/routes/retailer/personalized_order_status.vue
@@ -0,0 +1,41 @@
+
+<template>
+  <v-container>
+    <div class="h3 py-5 body-font1">Personalized Order Status</div>
+    <div class="pt-5">
+      The Estimated Ship Date is based on the approximate number of business
+      days, after proof approval, that your order will ship.
+      <div class="pl-4 pt-4">
+        Please note that it does not currently reflect shortened time frames for
+        Sympathy and Birth orders.
+      </div>
+      <div class="pl-4 pb-4">
+        Multi-process, custom and other complex orders may experience delays
+        beyond this range.
+      </div>
+      Package tracking information is provided by the shipping carrier. Tracking
+      details will be made available when the shipping carrier has processed
+      your package.
+    </div>
+    <iframe
+      class="my-5"
+      :src="url"
+      :height="frameHeight"
+      :width="frameWidth"
+    ></iframe>
+  </v-container>
+</template>
+<script>
+export default {
+  name: "PersonalizedOrderSummaryPage",
+  data() {
+    return {
+      url: "https://orderexplorer.crane.com//OrderExplorer/?account=customer",
+      frameHeight: "800px",
+      frameWidth: "100%",
+    };
+  },
+};
+</script>
+
+<style src="./personalized_order_status.scss" lang="scss" scoped/>
diff --git a/src/routes/retailer/resources.scss b/src/routes/retailer/resources.scss
new file mode 100644
index 0000000..4a9b7f4
--- /dev/null
+++ b/src/routes/retailer/resources.scss
@@ -0,0 +1,12 @@
+.padding-space{
+    padding: 2px 0px 45px 0px !important;
+}
+.subheading{
+      border-bottom: 1px solid #111 ;
+      display: inline;
+      transition: all 0.1s ease-in-out;
+}
+.subheading:hover{
+      border-bottom: 1px solid #2c05da ;
+  
+}
\ No newline at end of file
diff --git a/src/routes/retailer/resources.vue b/src/routes/retailer/resources.vue
new file mode 100644
index 0000000..48e955c
--- /dev/null
+++ b/src/routes/retailer/resources.vue
@@ -0,0 +1,89 @@
+<template>
+  <v-container >
+    <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>
+export default {
+  name: "ResourcesPage",
+};
+</script>
+<style src="./resources.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/routes/retailer/retailer-communications.scss b/src/routes/retailer/retailer-communications.scss
new file mode 100644
index 0000000..19fbae3
--- /dev/null
+++ b/src/routes/retailer/retailer-communications.scss
@@ -0,0 +1,16 @@
+.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: 50px 0px 0px 0px;
+}
+.padding-space1{
+    padding: 10px 0px 0px 0px;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/retailer-communications.vue b/src/routes/retailer/retailer-communications.vue
new file mode 100644
index 0000000..b3ee9db
--- /dev/null
+++ b/src/routes/retailer/retailer-communications.vue
@@ -0,0 +1,48 @@
+
+
+<template>
+  <v-container>
+    <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 "
+          >
+           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>
+export default {
+  name: "RetailerCommunications",
+};
+</script>
+
+<style src="./retailer-communications.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/routes/retailer/training.scss b/src/routes/retailer/training.scss
new file mode 100644
index 0000000..4186c28
--- /dev/null
+++ b/src/routes/retailer/training.scss
@@ -0,0 +1,16 @@
+.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: 50px 0px 0px 0px;
+}
+.padding-space1{
+    padding: 50px 0px 20px 0px;
+}
\ No newline at end of file
diff --git a/src/routes/retailer/training.vue b/src/routes/retailer/training.vue
new file mode 100644
index 0000000..02821bc
--- /dev/null
+++ b/src/routes/retailer/training.vue
@@ -0,0 +1,274 @@
+
+
+
+<template>
+  <v-container>
+    <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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="{ name: '' }"
+        >
+          <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>
+export default {
+  name: "Training",
+};
+</script>
+
+<style src="./training.scss" lang="scss" scoped/>
\ No newline at end of file
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
index a0c7074..d242273 100644
--- a/src/styles/overrides.scss
+++ b/src/styles/overrides.scss
@@ -9,6 +9,8 @@
 }
 
 @import './custom_functions.scss';
+@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');
+
 @font-face {
     font-family: 'Whyte-Regular';
     src: url('../assets/font/Whyte-Regular.woff2') format("woff2");
@@ -42,6 +44,9 @@
     .body-font {
         font-family: 'Whyte-Book', sans-serif;
     }
+    .body-font1 {
+        font-family: 'PT Serif', serif;
+    }
     .regular-font {
         font-family: 'Whyte-Regular', sans-serif;
     }
@@ -158,6 +163,7 @@
     .background-cloud {
         background-color: #CEE4F2;
     }
+   
     .fontsize-10 {
         font-size: 0.625rem;
     }
@@ -274,6 +280,10 @@
     .height-100 {
         height: 100vh;
     }
+    .height-130px{
+        height: 130px;
+    }
+    
     // end vue-tel-input  css end
     @include mq(xs) {
         .h1 {