ProductInsight.vue 5.21 KB
<template>
  <main class="landing-page">
     <div class="container-fluid inner-wrp">

      
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png" /></a>
      
      
   
        <div class="user-profile-photo insights-profile">
          <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
        </div>
      </nav><!-- menu wrapper -->
    <div class="row profile-tab-spc-top insights-spc">
      <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
        <a href="javascript:void(0);" class="back-to-lib"><img src="../assets/images/arrow-left.svg" />Back to library</a>
        <ul class="insights-list">
          <li><a href="javascript:void(0);">PRODUCT Insight</a></li>
        </ul>
<div class="insights-details">
  <h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>

  <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. 
<br><br>
    When the user is already onboarded and is in the <strong>engage stage</strong>, it may be better to use a single CTA for each use case in order to <strong>avoid ambiguity.</strong>
    </p>

</div>

      </div><!-- user profile -->
      <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
        <div class="features-group">
          <h3>Further Reading</h3>
<ul class="features-group-list">
<li><a href="javascript:void(0);">The Aesthetic-Usability Effect <img src="../assets/images/link.svg" /></a>
<span>Wikipedia</span>
</li>
<li><a href="javascript:void(0);">The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones.  <img src="../assets/images/link.svg" /></a>
  <span>Nielsen Norman Group</span>
  </li>
</ul>
        </div><!-- list style -->
      </div>
    </div>
    <div class="clearfix"></div>
  <div class="row top-brd profile-tab-spc-top">
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
<ul class="profile-tab">
  <li class="active-green"><a href="javascript:void(0);">Citations(16)</a></li>
</ul>

</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
<a href="javascript:void(0);" class="insights-rply"><img src="../assets/images/reply.svg" /> Share Insight</a>
  
</div>
  </div><!-- tab style -->
  <div class="profile-data-wrp">
<div class="container-fluid data-wrp">
<div class="row">
  <div class="">
<div class="card-warpper">
  <div class="company-detail">
    <div class="c-logo">
      <img src="../assets/images/image 46.png" />
    </div>
    <div class="c-tag">
      <img src="../assets/images/c-tag.png" />
    </div>
  </div><!-- company detail-->
  <h1>Urban Company</h1>
  <div class="u-detail">
<img src="../assets/images/user-2.png" />
<h2>Murugan<br> Swaminathan</h2>
  </div><!-- user detail -->
  <p>Onboarding, Core usage,<br> Customer Suport</p>
  <ul class="tags-list">
    <li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
    <li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
    <li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
  </ul>
  <div class="clearfix"></div>
</div><!-- card wrpper -->
<div class="card-warpper">
  <div class="company-detail">
    <div class="c-logo">
      <img src="../assets/images/image 46.png" />
    </div>
    <div class="c-tag">
      <img src="../assets/images/c-tag.png" />
    </div>
  </div><!-- company detail-->
  <h1>Urban Company</h1>
  <div class="u-detail">
<img src="../assets/images/user-2.png" />
<h2>Murugan<br> Swaminathan</h2>
  </div><!-- user detail -->
  <p>Onboarding, Core usage,<br> Customer Suport</p>
  <ul class="tags-list">
    <li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
    <li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
    <li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
  </ul>
  <div class="clearfix"></div>
</div><!-- card wrpper -->
<div class="card-warpper">
  <div class="company-detail">
    <div class="c-logo">
      <img src="../assets/images/image 46.png" />
    </div>
    <div class="c-tag">
      <img src="../assets/images/c-tag.png" />
    </div>
  </div><!-- company detail-->
  <h1>Urban Company</h1>
  <div class="u-detail">
<img src="../assets/images/user-2.png" />
<h2>Murugan<br> Swaminathan</h2>
  </div><!-- user detail -->
  <p>Onboarding, Core usage,<br> Customer Suport</p>
  <ul class="tags-list">
    <li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
    <li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
    <li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
  </ul>
  <div class="clearfix"></div>
</div><!-- card wrpper -->
  </div><!-- all card wrpper -->
</div>
</div>

  </div><!-- data wrp -->
      <!-- body wrapper -->
    </div><!-- main wrapper -->
    <!-- main wrapper -->
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";

export default {
  name: "ProductInsight",

  data() {
    return {};
  },
  mounted() {},
  methods: {
    goToLogin() {
      this.$router.push("/login");
    },
    goToSignUp() {
      this.$router.push("/");
    },
    
  },
};
</script>