<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/lock.svg"></a>
        </div>
      </nav>
      <!-- menu wrapper -->
      <div class="startup-wrp">

        <div class="compare-c">
          <div class="logo-1"><img src="../assets/images/logo-1.png" /></div><!-- logo 1 -->
           <div class="vs">vs</div><!-- vs -->
            <div class="logo-2"><img src="../assets/images/logo-2.png" /></div><!-- logo 2 -->
          </div><!-- compare -->
<img src="../assets/images/spot-light.svg" class="epi-bg" />
    <div class="bottom-startup">
        <div class="logo-wrp">
            <a href="#"><img src="../assets/images/ps-growth.svg" />
            <span>Product Growth</span> 
            </a>
            </div><!-- logo wrp -->
            <div class="title">Apple music vs Spotify</div><!-- title -->
            <div class="author-sec">
              <div class="top">
                <span>Author</span>
                <span class="name">Rashmi & Shubham</span>
              </div><!-- top section -->
              <div class="bottom">
                <div class="left">
                  <span>Issue</span>
                  <span class="dt">06</span>
                  </div><!-- left -->
                 <div class="right">
                    <span>Last updated</span>
                  <span class="dt">11.11.2020</span>
                   </div><!-- right -->
                </div><!-- bottom -->
              </div><!-- author section-->
                   <div class="author-sec">
              <div class="top">
                <span>App</span>
                <span class="name">Whitehat Jr.</span>
              </div><!-- top section -->
            <div class="top">
                <span>Focus</span>
                <span class="name">Product Discovery</span>
              </div><!-- top section -->
              </div><!-- app section-->
                         <div class="author-sec info">
              <div class="top">
                <span>Read</span>
                <span class="name">5 min</span>
              </div><!-- top section -->
            <div class="top bt-brd">
                <span>Platform</span>
                <span class="name">Android</span>
              </div><!-- top section -->
              </div><!-- info section-->
              <div class="u-img-info">
                <img src="../assets/images/jxtapose.svg" />
              </div><!-- image info -->
              <div class="start">
                <a href="#">
                  <img src="../assets/images/arrow-right.svg" /> 
                  <span>Start</span>
                </a>
                </div><!-- start -->
        </div><!-- bottom startup -->
        
      </div>
      <!-- body wrapper -->
    </div>
    <!-- main wrapper -->
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";

export default {
  name: "EpisodeIntro",

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