<template>
  <v-container>
     <div class="homepage-overflow-x-hidden white" v-if="marketingCollateralPage">
      <div class="h3 my-5 py-5 body-font1">{{ marketingCollateralPage.contentHeading }}</div>
      <div v-html="marketingCollateralPage.content"></div>
    </div>
    <!-- <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");
    },
  },
   computed: {
    marketingCollateralPage: function () {
      let data = null;
      let pageContent = this.$store.state.layout.pageContent;
      if (pageContent.length) {
        data = pageContent.filter((element) => {
          return element.identifier === "marketing-collateral";
        })[0];
      }

      return data;
    },
  }
};
</script>
<style src="./marketing_collateral.scss" lang="scss" scoped/>
