<template>
    <main class="landing-page">
     
      <div class="container-fluid episode-intro">
      <nav class="navbar navbar-expand-sm spotLight-nav">

          <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
          </button>
          <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="intro-startup">
          <div class="bounce-board-wrp">
              <div class="inner-wrp-bc">
  <div class="bc-top-head">
      <span class="bc-head">
          <img src="../assets/images/bounce-icon.svg" /> Bounce Board
      </span>
      <div class="action-sort">
       <span class="sort-by">SORT  BY</span>   <div class="btn-group">
    <button type="button" class="bc-sort-list dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     BEST
    </button>
    <div class="dropdown-menu">

      <a class="dropdown-item" href="javascript:void(0);">BEST 1</a>
      <a class="dropdown-item" href="javascript:void(0);">BEST 2</a>
      <a class="dropdown-item" href="javascript:void(0);">BEST 3</a>

    </div>
  </div>
          </div><!-- action sort -->
      </div><!-- top head -->
  <div class="bounce-board-body">
      <div class="bc-empty">Empty State</div>
      </div><!-- bounce board body -->
              </div>
              </div><!-- bounceboard wrp -->
       <div class="single-mobileInsight">
            <img src="../assets/images/slide.png" class="slide-img" /> 
               <div class="single-left-Insight-comments">
                   <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
              <div class="single-author-li-comments">
              <div class="a-intro-comments custom-c-style">
                 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
                 <ul class="rly-comment-set">

                     <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
                        <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>

                 </ul>
                  </div><!-- comments box -->
              </div><!-- single author comments -->
               <div class="single-author-li-comments">
              <div class="a-intro-comments custom-c-style">
                 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
                 <ul class="rly-comment-set">

                     <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
                        <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>

                 </ul>
                  </div><!-- comments box -->
              </div><!-- single author comments -->
           </div><!-- single mobile Left insight  -->
       <div class="c-product-insight-wrp ">
              <div class="single-author-li-comments ">
              <div class="a-intro-comments custom-selected-style">
                <img src="../assets/images/rect.svg" class="rect" />
                <div class="top-wrp">

                 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>

                </div>
                <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
                 <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 class="footer">

    <a href="javascript:void(0);" class="cit-16">16 Citations</a>
    <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>

    </div><!-- footer -->
              
                  </div><!-- comments box -->
              </div><!-- single author comments -->
   
           </div><!-- single mobile Right insight  -->
          </div><!-- Single Mobile Insight -->
        <div class="footer-nav">
          <div class="footer-top">
              <div class="row">
                  <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
                      <div class="row h-100p">
                           <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
                <ul class="top-intro-bt">

              <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
               <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>

            </ul>
            </div>
         
                </div>
                </div>
              </div>
            </div><!-- footer top -->
          <div class="footer-bottom">
            <ul>
              <li class=""></li>
               <li></li>
            </ul>
            </div><!-- footer top -->
          </div><!-- footer -->
      
      </div>
        <!-- body wrapper -->
      </div>
      <!-- main wrapper -->
    </main>
  </template>
  
  <script>
  import Vue from "vue";
  import router from "../router";
  
  export default {
    name: "ReadingFlowBounceBoard",
  
    data() {
      return {};
    },
    mounted() {},
    methods: {
      goToLogin() {

        this.$router.push("/login");

      },
      goToSignUp() {

        this.$router.push("/");

      },
      
    },
  };
  </script>