<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" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   BEST
  </button>
  <div class="dropdown-menu short_by">
    <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">
    <ul class="bounced-user-comments">
<li class="bc_border">
  <div class="lbord"></div><!-- border -->
  <div class="parent-full-width parent_bg">
    <div class="full-width">
    <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 
    <span class="head-content">wanderingirl    </span>
<ul>
    <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
    <li> <span></span>3days ago</li>
     <li> <span class="au">Author</span></li>
</ul>


    </div><!-- header -->
    <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
  <div class="joined_wrapper">
  <ul class="joined-info info_bc_spc">
    <li>  <img src="../assets/images/purple-heart.png"> </li>
    <li>  <a href="javascript:void(0);"> 4</a> </li>
    <li class="comment-spc">  <img src="../assets/images/purple-comment.png"> </li>
    <li>  <a href="javascript:void(0);"> 6</a> </li>
  </ul>
  <div class="add_rply">
    <input type="text" placeholder="Add your reply" />
    </div><!-- rly form -->
  </div><!-- joined wrapper -->
  </div><!-- full width -->
  </div><!-- parent -->
    <div class="child-full-width">
        <div class="full-width">
      <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 
    <span class="head-content">Onenoisyboi    </span>
<ul>
    <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
    <li> <span></span>3days ago</li>
     <li> <span class="red">Mod</span></li>
</ul>


    </div><!-- header -->
    <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
  <div class="joined_wrapper">
  <ul class="joined-info info_bc_spc">
    <li>  <img src="../assets/images/purple-heart.png"> </li>
    <li>  <a href="javascript:void(0);"> 4</a> </li>
    <li class="comment-spc">  <img src="../assets/images/purple-comment.png"> </li>
    <li>  <a href="javascript:void(0);"> 6</a> </li>
  </ul>
  <div class="add_rply">
    <input type="text" placeholder="Add your reply" />
    </div><!-- rly form -->
  </div><!-- joined wrapper -->
  </div><!-- full width -->
  </div><!-- child wrapper -->
</li>

    </ul><!-- all user comments -->
     <ul class="bounced-user-comments">
<li class="bc_border">
  <div class="bc_brd_l"></div><!-- border -->
  <div class="parent-full-width ">
    <div class="full-width">
    <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 
    <span class="head-content">wanderingirl    </span>
<ul>
    <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
    <li> <span></span>3days ago</li>
    
</ul>


    </div><!-- header -->
    <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
  <div class="joined_wrapper">
  <ul class="joined-info info_bc_spc">
    <li>  <img src="../assets/images/purple-heart.png"> </li>
    <li>  <a href="javascript:void(0);"> 4</a> </li>
    <li class="comment-spc">  <img src="../assets/images/purple-comment.png"> </li>
    <li>  <a href="javascript:void(0);"> 6</a> </li>
  </ul>
  <div class="add_rply">
    <input type="text" placeholder="Add your reply" />
    </div><!-- rly form -->
  </div><!-- joined wrapper -->
  </div><!-- full width -->
  </div><!-- parent -->
    <div class="child-full-width">
        <div class="full-width">
      <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 
    <span class="head-content">Onenoisyboi    </span>
<ul>
    <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
    <li> <span></span>3days ago</li>
   
</ul>


    </div><!-- header -->
    <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
  <div class="joined_wrapper">
  <ul class="joined-info info_bc_spc">
    <li>  <img src="../assets/images/purple-heart.png"> </li>
    <li>  <a href="javascript:void(0);"> 4</a> </li>
    <li class="comment-spc">  <img src="../assets/images/purple-comment.png"> </li>
    <li>  <a href="javascript:void(0);"> 6</a> </li>
  </ul>
  <div class="add_rply">
    <input type="text" placeholder="Add your reply" />
    </div><!-- rly form -->
  </div><!-- joined wrapper -->
  </div><!-- full width -->
  </div><!-- child wrapper -->
      <div class="child-full-width">
        <div class="full-width">
      <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 
    <span class="head-content">Onenoisyboi    </span>
<ul>
    <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
    <li> <span></span>3days ago</li>
   
</ul>


    </div><!-- header -->
    <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
  <div class="joined_wrapper">
  <ul class="joined-info info_bc_spc">
    <li>  <img src="../assets/images/purple-heart.png"> </li>
    <li>  <a href="javascript:void(0);"> 4</a> </li>
    <li class="comment-spc">  <img src="../assets/images/purple-comment.png"> </li>
    <li>  <a href="javascript:void(0);"> 6</a> </li>
  </ul>
  <div class="add_rply">
    <input type="text" placeholder="Add your reply" />
    </div><!-- rly form -->
  </div><!-- joined wrapper -->
  </div><!-- full width -->
  </div><!-- child wrapper -->
</li>

    </ul><!-- all user comments -->
    </div><!-- bounce board body -->
    <div class="comments-footer">
      <textarea></textarea>
      <div class="comments-footer-wrp">
      <a href="javascript:void(0);" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a>
      </div>
      </div><!-- comments footer -->
            </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_chat",

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