<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="two-webscreen-insight">
      <div class="mobile-screen-one p-left bc-transparent">
      <div class="m-screen-comments two-webs-l-spc">
              <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="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">
                 <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="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><!-- comments -->
  
      <img src="../assets/images/top-user-demo.svg" class="two-screen-user-photo-bottom" />
      </div><!-- mobile screen one -->
       <div class="two-webscreen-r-insight">
             <div class="view-ticket-wrp-ps comments-right-without-bc">
              <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="javascript:void(0);"><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="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><!-- comments -->
           </div><!-- single mobile Right insight  -->
          </div><!-- Single Mobile Insight -->
           <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="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 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="javascript:void(0);">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="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="javascript:void(0);" 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: "TwoWebScreenWithInsight",
  
    data() {
      return {};
    },
    mounted() {},
    methods: {
      goToLogin() {

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

      },
      goToSignUp() {

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

      },
      
    },
  };
  </script>