<template>
  <main class="landing-page">
   
    <div class="container-fluid episode-intro">
    <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="#"><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="#"><img src="../assets/images/user.png"></a>
        </div>
      </nav>
      <!-- menu wrapper -->
    <div class="intro-startup">
        <div class="allMWrp">
<div class="mobile-screen-one p-left">
    <div class="m-screen-comments">
            <div class="single-author-li-comments">
            <div class="a-intro-comments">
               <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
               <ul class="rly-comment-set">
                   <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
                      <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
               </ul>
                </div><!-- comments box -->
            </div><!-- single author comments -->
                  <div class="single-author-li-comments">
            <div class="a-intro-comments">
               <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
               <ul class="rly-comment-set">
                   <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
                      <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
               </ul>
                </div><!-- comments box -->
            </div><!-- single author comments -->
        </div><!-- comments -->
    <img src="../assets/images/help-screen.png" class="m-screen" /> 
    <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />
    </div><!-- mobile screen one -->
    <div class="mobile-screen-one p-right">
    <div class="view-ticket-wrp-ps">
            <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">
              Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>
              </div>
              <div class="top-head">Jakob’s law</div>
               <p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>
<div class="footer">
  <a href="#" class="cit-16">16 Citations</a>
  <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
  </div><!-- footer -->
            
                </div><!-- comments box -->
            </div><!-- single author comments -->
        </div><!-- comments -->
    <img src="../assets/images/slide2.png" class="m-screen" /> 
   
    </div><!-- mobile screen Two -->
    </div>
      <div class="footer-nav">
        <div class="footer-top white-bg">
            <div class="row">
                <div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
                    <div class="row h-100p">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
              <ul class="top-intro-bt">
            <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
             <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
          </ul>
          </div>
           <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
                <div class="ft-comments-group">
                             <div class="c-with-photos">
              <span class="count-comments">16+ Comments</span><!-- count commets -->
              <ul class="comments-photos">
                  <li><img src="../assets/images/c-photo-1.png" /></li>
                  <li><img src="../assets/images/c-photo-2.png" /></li>
                  <li><img src="../assets/images/c-photo-3.png" /></li>
                  </ul><!-- comment photos -->
                  </div>
                  <div class="comments-detail all-c-space">
                      <span>Saudrika commented <a href="#">View All</a></span>
                      <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>
                      </div><!-- comments detail -->
                  
              </div><!-- comments Group -->
              </div></div>
              </div>
              <div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
                
                  <div class="comment-frm no-c-frm">
                        <div class="row">
                            <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
                           <div class="form-group frm-wdth addfrm-spc">
    <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  </div></div>
  <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
  <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
  </div>
                          </div><!-- comment from -->
                          </div> </div></div>
          </div><!-- footer top -->
        <div class="footer-bottom">
          <ul>
            <li class="active"></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: "TwoScreenWithInsight",

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