<template>
    <main class="landing-page">
       <div class="container-fluid inner-wrp">
  
        
        <nav class="navbar navbar-expand-sm spotLight-nav">
          <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a>
        
        
     
          <div class="user-profile-photo insights-profile">
            <a href="#"><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="#" class="back-to-lib"><img src="../assets/images/arrow-left.svg" />Back to library</a>
          <ul class="insights-list">
            <li><a href="#">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="#">The Aesthetic-Usability Effect <img src="../assets/images/link.svg" /></a>
  <span>Wikipedia</span>
  </li>
  <li><a href="#">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="#">Citations(16)</a></li>
  </ul>
  
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  <a href="#" 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="#" class="cape-honey">Design</a></li>
      <li><a href="#" class="rose-bud">Marketing</a></li>
      <li><a href="#" 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="#" class="cape-honey">Design</a></li>
      <li><a href="#" class="rose-bud">Marketing</a></li>
      <li><a href="#" 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="#" class="cape-honey">Design</a></li>
      <li><a href="#" class="rose-bud">Marketing</a></li>
      <li><a href="#" 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("/");
      },
      goToSignUp() {
        this.$router.push("/signup");
      },
      
    },
  };
  </script>