Commit 7d5959c849ed6d9e4cbd6f59cb98b698f62c5979
1 parent
0ad3ed4de8
Exists in
admin
removed un-used files
Showing
32 changed files
with
2 additions
and
4378 deletions
Show diff stats
src/components/AuthorIntro.vue
| ... | ... | @@ -1,85 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="smasung-g-10wrp"> | |
| 19 | - <div class="samsung-compare-c"> | |
| 20 | - <div class="logo-1"><img src="../assets/images/logo-1.png" /></div><!-- logo 1 --> | |
| 21 | - <div class="vs">vs</div><!-- vs --> | |
| 22 | - <div class="logo-2"><img src="../assets/images/logo-2.png" /></div><!-- logo 2 --> | |
| 23 | - </div><!-- compare --> | |
| 24 | - <div class="comment-box"> | |
| 25 | - <div class="comment-box-s-1"> | |
| 26 | - <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> | |
| 27 | - <div class="footer"> | |
| 28 | - <img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a> | |
| 29 | - </div><!-- footer --> | |
| 30 | - </div><!-- comment box 1 --> | |
| 31 | - <div class="comment-box-s-1 comment-w-397"> | |
| 32 | - <p> | |
| 33 | - Use arrow keys to navigate <br/> | |
| 34 | -<img src="../assets/images/key-arrow.jpg" class="key-arrow" /> | |
| 35 | - </p> | |
| 36 | - </div><!-- comment box 1 --> | |
| 37 | - <div class="user-photo"> | |
| 38 | - <img src="../assets/images/comment-photo.png" /> | |
| 39 | - </div> | |
| 40 | - </div><!-- comment box --> | |
| 41 | - </div><!-- samsung g 10 --> | |
| 42 | - <div class="footer-nav"> | |
| 43 | - <div class="footer-top"> | |
| 44 | - <ul class="top-intro-bt"> | |
| 45 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 46 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 47 | - </ul> | |
| 48 | - </div><!-- footer top --> | |
| 49 | - <div class="footer-bottom"> | |
| 50 | - <ul> | |
| 51 | - <li></li> | |
| 52 | - <li></li> | |
| 53 | - </ul> | |
| 54 | - </div><!-- footer top --> | |
| 55 | - </div><!-- footer --> | |
| 56 | - | |
| 57 | - </div> | |
| 58 | - <!-- body wrapper --> | |
| 59 | - </div> | |
| 60 | - <!-- main wrapper --> | |
| 61 | - </main> | |
| 62 | -</template> | |
| 63 | - | |
| 64 | -<script> | |
| 65 | -import Vue from "vue"; | |
| 66 | -import router from "../router"; | |
| 67 | - | |
| 68 | -export default { | |
| 69 | - name: "AuthorIntro", | |
| 70 | - | |
| 71 | - data() { | |
| 72 | - return {}; | |
| 73 | - }, | |
| 74 | - mounted() {}, | |
| 75 | - methods: { | |
| 76 | - goToLogin() { | |
| 77 | - this.$router.push("/"); | |
| 78 | - }, | |
| 79 | - goToSignUp() { | |
| 80 | - this.$router.push("/signup"); | |
| 81 | - }, | |
| 82 | - | |
| 83 | - }, | |
| 84 | -}; | |
| 85 | -</script> |
src/components/AuthorReadingNow.vue
| ... | ... | @@ -1,73 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid episode-intro app-discovery-bg"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 6 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 7 | - <span class="navbar-toggler-icon"></span> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - </button> | |
| 11 | - <div class="user-profile-photo insights-profile"> | |
| 12 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 13 | - </div> | |
| 14 | - </nav> | |
| 15 | - <!-- menu wrapper --> | |
| 16 | - <div class="intro-startup"> | |
| 17 | - <div class="spot-light-top"> | |
| 18 | - <img src="../assets/images/spot-light-top.svg" /> | |
| 19 | - <div class="app-discovery"> | |
| 20 | - <div class="top-user"> | |
| 21 | - <img src="../assets/images/app-photo.svg" /> | |
| 22 | - </div><!-- top user --> | |
| 23 | - <h1>App Discovery</h1> | |
| 24 | - <h2>01</h2> | |
| 25 | - <img src="../assets/images/discovery.svg" class="discovery-app-img" /> | |
| 26 | - </div><!-- app Disovery --> | |
| 27 | - | |
| 28 | - </div><!-- spot light top --> | |
| 29 | - <img src="../assets/images/popcorn-set.svg" class="popcorn-set" /> | |
| 30 | - <div class="footer-nav"> | |
| 31 | - <div class="footer-top"> | |
| 32 | - <ul class="top-intro-bt"> | |
| 33 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 34 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 35 | - </ul> | |
| 36 | - </div><!-- footer top --> | |
| 37 | - <div class="footer-bottom"> | |
| 38 | - <ul> | |
| 39 | - <li class="active"></li> | |
| 40 | - <li></li> | |
| 41 | - </ul> | |
| 42 | - </div><!-- footer top --> | |
| 43 | - </div><!-- footer --> | |
| 44 | - | |
| 45 | - </div> | |
| 46 | - <!-- body wrapper --> | |
| 47 | - </div> | |
| 48 | - <!-- main wrapper --> | |
| 49 | - </main> | |
| 50 | -</template> | |
| 51 | - | |
| 52 | -<script> | |
| 53 | -import Vue from "vue"; | |
| 54 | -import router from "../router"; | |
| 55 | - | |
| 56 | -export default { | |
| 57 | - name: "AuthorReadingNow", | |
| 58 | - | |
| 59 | - data() { | |
| 60 | - return {}; | |
| 61 | - }, | |
| 62 | - mounted() {}, | |
| 63 | - methods: { | |
| 64 | - goToLogin() { | |
| 65 | - this.$router.push("/"); | |
| 66 | - }, | |
| 67 | - goToSignUp() { | |
| 68 | - this.$router.push("/signup"); | |
| 69 | - }, | |
| 70 | - | |
| 71 | - }, | |
| 72 | -}; | |
| 73 | -</script> |
src/components/ChangePassword.vue
| ... | ... | @@ -1,177 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid main-wrp"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - | |
| 22 | - <div class="collapse navbar-collapse" id="navbarsExample03"> | |
| 23 | - <ul class="navbar-nav mr-auto"> | |
| 24 | - <li class="nav-item active"> | |
| 25 | - <a class="nav-link" href="#">About</a> | |
| 26 | - </li> | |
| 27 | - <li class="nav-item"> | |
| 28 | - <a class="nav-link" href="#">Masterclass</a> | |
| 29 | - </li> | |
| 30 | - <li class="nav-item"> | |
| 31 | - <a class="nav-link" href="#">Stories</a> | |
| 32 | - </li> | |
| 33 | - <li class="nav-item spotLight-img"> | |
| 34 | - <a class="nav-link" href="#" | |
| 35 | - ><img src="../assets/images/SPOTLight.svg" | |
| 36 | - /></a> | |
| 37 | - </li> | |
| 38 | - <li class="nav-item"> | |
| 39 | - <a class="nav-link" href="#">Library</a> | |
| 40 | - </li> | |
| 41 | - </ul> | |
| 42 | - </div> | |
| 43 | - </nav> | |
| 44 | - <!-- menu wrapper --> | |
| 45 | - <div class="sign-wrp"> | |
| 46 | - <div class="row col-reverse"> | |
| 47 | - <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | |
| 48 | - <!-- users land image --> | |
| 49 | - <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | |
| 50 | - <h1 class="welcome-hd-back"> | |
| 51 | - Welcome <br /> | |
| 52 | - back | |
| 53 | - </h1> | |
| 54 | - </div> | |
| 55 | - <!-- users land image --> | |
| 56 | - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 57 | - <div class="form-layout signup-frm-spc"> | |
| 58 | - <form> | |
| 59 | - <!-- <h5>SignUp Using</h5> --> | |
| 60 | - <div class="social-login" style="visibility: hidden"> | |
| 61 | - <ul> | |
| 62 | - <li> | |
| 63 | - <a href="#"><img src="../assets/images/google.svg" /></a> | |
| 64 | - </li> | |
| 65 | - <li> | |
| 66 | - <a href="#"><img src="../assets/images/linkdin.svg" /></a> | |
| 67 | - </li> | |
| 68 | - <li> | |
| 69 | - <a href="#"><img src="../assets/images/twitter.svg" /></a> | |
| 70 | - </li> | |
| 71 | - </ul> | |
| 72 | - </div> | |
| 73 | - <h5> | |
| 74 | - Setup a new password. Please enter the OTP shared to {{email}} to confirm | |
| 75 | - your email address | |
| 76 | - </h5> | |
| 77 | - <div class="fill-form"> | |
| 78 | - <label for="inputEmail" class="sr-only">OTP</label> | |
| 79 | - <input | |
| 80 | - type="text" | |
| 81 | - id="inputEmail" | |
| 82 | - class="form-control" | |
| 83 | - placeholder="Your OTP" | |
| 84 | - v-model="otp" | |
| 85 | - autocomplete="off" | |
| 86 | - | |
| 87 | - /> | |
| 88 | - <label for="inputEmail" class="sr-only">New Password</label> | |
| 89 | - <input | |
| 90 | - type="password" | |
| 91 | - id="inputEmail" | |
| 92 | - class="form-control" | |
| 93 | - placeholder="Your New Password" | |
| 94 | - v-model="password" | |
| 95 | - autocomplete="off" | |
| 96 | - | |
| 97 | - /> | |
| 98 | - <!-- <label for="inputPassword" class="sr-only">Password</label> | |
| 99 | - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> --> | |
| 100 | - | |
| 101 | - <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="changePassword"> | |
| 102 | - <img src="../assets/images/password-reload.png" />Update Password | |
| 103 | - </a> | |
| 104 | - <p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail">Resend</a></p> | |
| 105 | - <!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> --> | |
| 106 | - </div> | |
| 107 | - </form> | |
| 108 | - </div> | |
| 109 | - </div> | |
| 110 | - <!-- sign up --> | |
| 111 | - </div> | |
| 112 | - </div> | |
| 113 | - <!-- body wrapper --> | |
| 114 | - </div> | |
| 115 | - </main> | |
| 116 | -</template> | |
| 117 | - | |
| 118 | -<script> | |
| 119 | -import Vue from "vue"; | |
| 120 | -import router from "../router"; | |
| 121 | -import axios from "axios"; | |
| 122 | - | |
| 123 | -export default { | |
| 124 | - name: "ChangePassword", | |
| 125 | - | |
| 126 | - data() { | |
| 127 | - return { | |
| 128 | - email:null, | |
| 129 | - otp:null, | |
| 130 | - password:null, | |
| 131 | - }; | |
| 132 | - }, | |
| 133 | - mounted() { | |
| 134 | - this.email = localStorage.getItem("spotlight_email"); | |
| 135 | - console.log("this.$route.params.flag",this.$route.params.flag) | |
| 136 | - if(this.$route.params.flag == true){ | |
| 137 | - this.ResendEmail(false); | |
| 138 | - } | |
| 139 | - | |
| 140 | - }, | |
| 141 | - methods: { | |
| 142 | - goToLogin() { | |
| 143 | - this.$router.push("/"); | |
| 144 | - }, | |
| 145 | - changePassword(){ | |
| 146 | - axios | |
| 147 | - .post("/resetPassword", {'email':this.email,'otp':this.otp,'newPassword':this.password}) | |
| 148 | - .then((response) => { | |
| 149 | - console.log("resetPassword- response",response) | |
| 150 | - this.$toaster.success(response.data.message) | |
| 151 | - if(response.data.status == "success"){ | |
| 152 | - this.$router.push("/"); | |
| 153 | - } | |
| 154 | - }) | |
| 155 | - .catch( (error) =>{ | |
| 156 | - if (error.response) { | |
| 157 | - this.$toaster.error(error.response.data.message) | |
| 158 | - } | |
| 159 | - }); | |
| 160 | - | |
| 161 | - }, | |
| 162 | - ResendEmail(){ | |
| 163 | - axios | |
| 164 | - .post("/forgotPassword", {'email':this.email,'otp':true}) | |
| 165 | - .then((response) => { | |
| 166 | - console.log("forgotPassword- response",response) | |
| 167 | - this.$toaster.success(response.data.message) | |
| 168 | - }) | |
| 169 | - .catch( (error) =>{ | |
| 170 | - if (error.response) { | |
| 171 | - this.$toaster.error(error.response.data.message) | |
| 172 | - } | |
| 173 | - }); | |
| 174 | - } | |
| 175 | - }, | |
| 176 | -}; | |
| 177 | -</script> |
src/components/EpisodeIntro.vue
| ... | ... | @@ -1,107 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="startup-wrp"> | |
| 18 | - | |
| 19 | - <div class="compare-c"> | |
| 20 | - <div class="logo-1"><img src="../assets/images/logo-1.png" /></div><!-- logo 1 --> | |
| 21 | - <div class="vs">vs</div><!-- vs --> | |
| 22 | - <div class="logo-2"><img src="../assets/images/logo-2.png" /></div><!-- logo 2 --> | |
| 23 | - </div><!-- compare --> | |
| 24 | -<img src="../assets/images/spot-light.svg" class="epi-bg" /> | |
| 25 | - <div class="bottom-startup"> | |
| 26 | - <div class="logo-wrp"> | |
| 27 | - <a href="#"><img src="../assets/images/ps-growth.svg" /> | |
| 28 | - <span>Product Growth</span> | |
| 29 | - </a> | |
| 30 | - </div><!-- logo wrp --> | |
| 31 | - <div class="title">Apple music vs Spotify</div><!-- title --> | |
| 32 | - <div class="author-sec"> | |
| 33 | - <div class="top"> | |
| 34 | - <span>Author</span> | |
| 35 | - <span class="name">Rashmi & Shubham</span> | |
| 36 | - </div><!-- top section --> | |
| 37 | - <div class="bottom"> | |
| 38 | - <div class="left"> | |
| 39 | - <span>Issue</span> | |
| 40 | - <span class="dt">06</span> | |
| 41 | - </div><!-- left --> | |
| 42 | - <div class="right"> | |
| 43 | - <span>Last updated</span> | |
| 44 | - <span class="dt">11.11.2020</span> | |
| 45 | - </div><!-- right --> | |
| 46 | - </div><!-- bottom --> | |
| 47 | - </div><!-- author section--> | |
| 48 | - <div class="author-sec"> | |
| 49 | - <div class="top"> | |
| 50 | - <span>App</span> | |
| 51 | - <span class="name">Whitehat Jr.</span> | |
| 52 | - </div><!-- top section --> | |
| 53 | - <div class="top"> | |
| 54 | - <span>Focus</span> | |
| 55 | - <span class="name">Product Discovery</span> | |
| 56 | - </div><!-- top section --> | |
| 57 | - </div><!-- app section--> | |
| 58 | - <div class="author-sec info"> | |
| 59 | - <div class="top"> | |
| 60 | - <span>Read</span> | |
| 61 | - <span class="name">5 min</span> | |
| 62 | - </div><!-- top section --> | |
| 63 | - <div class="top bt-brd"> | |
| 64 | - <span>Platform</span> | |
| 65 | - <span class="name">Android</span> | |
| 66 | - </div><!-- top section --> | |
| 67 | - </div><!-- info section--> | |
| 68 | - <div class="u-img-info"> | |
| 69 | - <img src="../assets/images/jxtapose.svg" /> | |
| 70 | - </div><!-- image info --> | |
| 71 | - <div class="start"> | |
| 72 | - <a href="#"> | |
| 73 | - <img src="../assets/images/arrow-right.svg" /> | |
| 74 | - <span>Start</span> | |
| 75 | - </a> | |
| 76 | - </div><!-- start --> | |
| 77 | - </div><!-- bottom startup --> | |
| 78 | - | |
| 79 | - </div> | |
| 80 | - <!-- body wrapper --> | |
| 81 | - </div> | |
| 82 | - <!-- main wrapper --> | |
| 83 | - </main> | |
| 84 | -</template> | |
| 85 | - | |
| 86 | -<script> | |
| 87 | -import Vue from "vue"; | |
| 88 | -import router from "../router"; | |
| 89 | - | |
| 90 | -export default { | |
| 91 | - name: "EpisodeIntro", | |
| 92 | - | |
| 93 | - data() { | |
| 94 | - return {}; | |
| 95 | - }, | |
| 96 | - mounted() {}, | |
| 97 | - methods: { | |
| 98 | - goToLogin() { | |
| 99 | - this.$router.push("/"); | |
| 100 | - }, | |
| 101 | - goToSignUp() { | |
| 102 | - this.$router.push("/signup"); | |
| 103 | - }, | |
| 104 | - | |
| 105 | - }, | |
| 106 | -}; | |
| 107 | -</script> |
src/components/Insight.vue
| ... | ... | @@ -1,109 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid insights-wrp"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a> | |
| 6 | - <div class="user-profile-photo insights-profile"> | |
| 7 | - <a href="#"><img src="../assets/images/user.png" /></a> | |
| 8 | - </div> | |
| 9 | - </nav><!-- menu wrapper --> | |
| 10 | - <div class="clearfix"></div> | |
| 11 | - <div class="row"> | |
| 12 | -<div class="col-lg-12"> | |
| 13 | -<form class="insights-searh"> | |
| 14 | - <div class="form-group"> | |
| 15 | - <input type="text" class="form-control" value="" placeholder="Search Insights Library" id="fname"> | |
| 16 | - <a href="#"><img src="../assets/images//search-icon.svg" /></a> | |
| 17 | - </div> | |
| 18 | -</form> | |
| 19 | -</div> | |
| 20 | - </div><!-- tab style --> | |
| 21 | - <div class="row"> | |
| 22 | -<div class="col-lg-7 mr-auto ml-auto"> | |
| 23 | -<div class="insights-border"><span>or Filter by</span></div> | |
| 24 | -<div class="insights-list-filter"> | |
| 25 | -<ul> | |
| 26 | -<li><a href="" class="lavender-blue-bg">Pricing</a></li> | |
| 27 | -<li><a href="" class="golden-tainoi-bg">Design</a></li> | |
| 28 | -<li><a href="" class="red-orange-bg">Marketing</a></li> | |
| 29 | -<li><a href="" class="morning-glory-bg">Product</a></li> | |
| 30 | -<li><a href="" class="dark-green-copper-bg">Psychology</a></li> | |
| 31 | -<li><a href="" class="red-orange-bg">Marketing</a></li> | |
| 32 | -<li><a href="" class="morning-glory-bg">Product</a></li> | |
| 33 | -<li><a href="" class="dark-green-copper-bg">Psychology</a></li> | |
| 34 | -</ul> | |
| 35 | -</div> | |
| 36 | -</div> | |
| 37 | -</div> | |
| 38 | - <div class="row"> | |
| 39 | -<div class="col-lg-4 insight-mb-spc"> | |
| 40 | -<div class="insights-products radical-red-border"> | |
| 41 | -<h3 class="radical-red-col">PRODUCT Insight <a href="#"><img src="../assets/images/radical-red-icon.svg"></a></h3> | |
| 42 | -<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 43 | -<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...</p> | |
| 44 | -</div> | |
| 45 | -</div> | |
| 46 | -<div class="col-lg-4 insight-mb-spc"> | |
| 47 | -<div class="insights-products selective-yellow-border"> | |
| 48 | -<h3 class="selective-yellow-col">PRODUCT Insight <a href="#"><img src="../assets/images/selective-yellow-icon.svg"></a></h3> | |
| 49 | -<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 50 | -<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...</p> | |
| 51 | -</div> | |
| 52 | -</div> | |
| 53 | -<div class="col-lg-4 insight-mb-spc"> | |
| 54 | -<div class="insights-products lavender-blue-border"> | |
| 55 | -<h3 class="lavender-blue-col">PRODUCT Insight <a href="#"><img src="../assets/images/lavender-blue-icon.svg"></a></h3> | |
| 56 | -<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 57 | -<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...</p> | |
| 58 | -</div> | |
| 59 | -</div> | |
| 60 | -<div class="col-lg-4 insight-mb-spc"> | |
| 61 | -<div class="insights-products dark-green-copper-border"> | |
| 62 | -<h3 class="dark-green-copper-col">PRODUCT Insight <a href="#"><img src="../assets/images/dark-green-copper-icon.svg"></a></h3> | |
| 63 | -<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 64 | -<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...</p> | |
| 65 | -</div> | |
| 66 | -</div> | |
| 67 | -<div class="col-lg-4 insight-mb-spc"> | |
| 68 | -<div class="insights-products purple-heart-border"> | |
| 69 | -<h3 class="purple-heart-col">PRODUCT Insight <a href="#"><img src="../assets/images/purple-heart-icon.svg"></a></h3> | |
| 70 | -<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 71 | -<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...</p> | |
| 72 | -</div> | |
| 73 | -</div> | |
| 74 | -<div class="col-lg-4 insight-mb-spc"> | |
| 75 | -<div class="insights-products silver-border"> | |
| 76 | -<h3 class="silver-col">PRODUCT Insight <a href="#"><img src="../assets/images/silver-icon.svg"></a></h3> | |
| 77 | -<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 78 | -<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...</p> | |
| 79 | -</div> | |
| 80 | -</div> | |
| 81 | -</div> | |
| 82 | - <!-- body wrapper --> | |
| 83 | - </div><!-- main wrapper --> | |
| 84 | - <!-- main wrapper --> | |
| 85 | - </main> | |
| 86 | -</template> | |
| 87 | - | |
| 88 | -<script> | |
| 89 | -import Vue from "vue"; | |
| 90 | -import router from "../router"; | |
| 91 | - | |
| 92 | -export default { | |
| 93 | - name: "Insight", | |
| 94 | - | |
| 95 | - data() { | |
| 96 | - return {}; | |
| 97 | - }, | |
| 98 | - mounted() {}, | |
| 99 | - methods: { | |
| 100 | - goToLogin() { | |
| 101 | - this.$router.push("/"); | |
| 102 | - }, | |
| 103 | - goToSignUp() { | |
| 104 | - this.$router.push("/signup"); | |
| 105 | - }, | |
| 106 | - | |
| 107 | - }, | |
| 108 | -}; | |
| 109 | -</script> |
src/components/Intermediate.vue
| ... | ... | @@ -1,22 +0,0 @@ |
| 1 | -<template> | |
| 2 | - | |
| 3 | - <div class="contact-page"> | |
| 4 | - <p>Loading</p> | |
| 5 | - </div> | |
| 6 | -</template> | |
| 7 | - | |
| 8 | -<script> | |
| 9 | - import router from '../router' | |
| 10 | - export default { | |
| 11 | - name: 'Intermediate', | |
| 12 | - data() { | |
| 13 | - var userdata = localStorage.getItem('spotlight_usertoken') | |
| 14 | - if(userdata){ | |
| 15 | - router.push({ path: '/profile'}) | |
| 16 | - } | |
| 17 | - return { | |
| 18 | - msg: 'Welcome to Your Vue.js App' | |
| 19 | - } | |
| 20 | - }, | |
| 21 | - } | |
| 22 | -</script> |
src/components/NoScreenshotSingleAuthor.vue
| ... | ... | @@ -1,130 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="single-author-comments"> | |
| 19 | - <img class="s-user-comments" src="../assets/images/u-info.png" /> | |
| 20 | - <div class="comments-a-wrp"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p> | |
| 24 | - <ul class="rly-comment-set"> | |
| 25 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 26 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 27 | - </ul> | |
| 28 | - </div><!-- comments box --> | |
| 29 | - </div><!-- single author comments --> | |
| 30 | - <div class="single-author-li-comments"> | |
| 31 | - <div class="a-intro-comments"> | |
| 32 | - <p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p> | |
| 33 | - <ul class="rly-comment-set"> | |
| 34 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 35 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- comments box --> | |
| 38 | - </div><!-- single author comments --> | |
| 39 | - <div class="a-intro-comments custom-selected-author-style"> | |
| 40 | - <img src="../assets/images/org-rect.svg" class="rect" /> | |
| 41 | - <div class="top-wrp"> | |
| 42 | - Product Insight <a href="#"><img src="../assets/images/org-link.svg" /></a> | |
| 43 | - </div> | |
| 44 | - <div class="top-head">Automate your customer support for better engagement</div> | |
| 45 | - <p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p> | |
| 46 | - | |
| 47 | - | |
| 48 | - </div><!-- comments box --> | |
| 49 | - </div> | |
| 50 | - </div><!-- single author comments --> | |
| 51 | - <div class="footer-nav"> | |
| 52 | - <div class="footer-top white-bg"> | |
| 53 | - <div class="row"> | |
| 54 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 55 | - <div class="row h-100p"> | |
| 56 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 57 | - <ul class="top-intro-bt"> | |
| 58 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 59 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 60 | - </ul> | |
| 61 | - </div> | |
| 62 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 63 | - <div class="ft-comments-group"> | |
| 64 | - <div class="c-with-photos"> | |
| 65 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 66 | - <ul class="comments-photos"> | |
| 67 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 68 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 69 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 70 | - </ul><!-- comment photos --> | |
| 71 | - </div> | |
| 72 | - <div class="comments-detail all-c-space"> | |
| 73 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 74 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 75 | - </div><!-- comments detail --> | |
| 76 | - | |
| 77 | - </div><!-- comments Group --> | |
| 78 | - </div></div> | |
| 79 | - </div> | |
| 80 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 81 | - | |
| 82 | - <div class="comment-frm no-c-frm"> | |
| 83 | - <div class="row"> | |
| 84 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 85 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 86 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 87 | - </div></div> | |
| 88 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 89 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 90 | - </div> | |
| 91 | - </div><!-- comment from --> | |
| 92 | - </div> </div></div> | |
| 93 | - </div><!-- footer top --> | |
| 94 | - <div class="footer-bottom"> | |
| 95 | - <ul> | |
| 96 | - <li class="active"></li> | |
| 97 | - <li></li> | |
| 98 | - </ul> | |
| 99 | - </div><!-- footer top --> | |
| 100 | - </div><!-- footer --> | |
| 101 | - | |
| 102 | - </div> | |
| 103 | - <!-- body wrapper --> | |
| 104 | - </div> | |
| 105 | - <!-- main wrapper --> | |
| 106 | - </main> | |
| 107 | -</template> | |
| 108 | - | |
| 109 | -<script> | |
| 110 | -import Vue from "vue"; | |
| 111 | -import router from "../router"; | |
| 112 | - | |
| 113 | -export default { | |
| 114 | - name: "NoScreenshotSingleAuthor", | |
| 115 | - | |
| 116 | - data() { | |
| 117 | - return {}; | |
| 118 | - }, | |
| 119 | - mounted() {}, | |
| 120 | - methods: { | |
| 121 | - goToLogin() { | |
| 122 | - this.$router.push("/"); | |
| 123 | - }, | |
| 124 | - goToSignUp() { | |
| 125 | - this.$router.push("/signup"); | |
| 126 | - }, | |
| 127 | - | |
| 128 | - }, | |
| 129 | -}; | |
| 130 | -</script> |
src/components/NoScreenshotTwoAuthor.vue
| ... | ... | @@ -1,146 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="allMWrp"> | |
| 19 | - <div class="two-author-comments"> | |
| 20 | - <img src="../assets/images/author-u2.png" class="a2-set" /> | |
| 21 | - <img src="../assets/images/true-dat.png" class="a2true-set" /> | |
| 22 | - | |
| 23 | - <div class="two-author-all-comments"> | |
| 24 | - <div class="single-author-li-comments"> | |
| 25 | - <div class="a-intro-comments"> | |
| 26 | - <img src="../assets/images/user-2-set.svg" class="user-b-1" /> | |
| 27 | - <p>COVID has accelerated the growth of some sectors in particular. </p> | |
| 28 | - <ul class="rly-comment-set"> | |
| 29 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 30 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 31 | - </ul> | |
| 32 | - </div><!-- comments box --> | |
| 33 | - </div><!-- single author comments --> | |
| 34 | - <div class="single-author-li-comments "> | |
| 35 | - <div class="a-intro-comments all-c-style"> | |
| 36 | - <img src="../assets/images/user.png" class="all-c-user-b-r" /> | |
| 37 | - <p>COVID has accelerated the growth of some sectors in particular. </p> | |
| 38 | - <ul class="rly-comment-set"> | |
| 39 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 40 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 41 | - </ul> | |
| 42 | - </div><!-- comments box --> | |
| 43 | - </div><!-- single author comments --> | |
| 44 | - <div class="single-author-li-comments"> | |
| 45 | - <div class="a-intro-comments"> | |
| 46 | - <img src="../assets/images/user-2-set.svg" class="user-b-1" /> | |
| 47 | - <p>COVID has accelerated the growth of some sectors in particular. </p> | |
| 48 | - <ul class="rly-comment-set"> | |
| 49 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 50 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 51 | - </ul> | |
| 52 | - </div><!-- comments box --> | |
| 53 | - </div><!-- single author comments --> | |
| 54 | - <div class="single-author-li-comments "> | |
| 55 | - <div class="a-intro-comments all-c-style"> | |
| 56 | - <img src="../assets/images/user.png" class="all-c-user-b-r" /> | |
| 57 | - <p>COVID has accelerated the growth of some sectors in particular. </p> | |
| 58 | - <ul class="rly-comment-set"> | |
| 59 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 60 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 61 | - </ul> | |
| 62 | - </div><!-- comments box --> | |
| 63 | - </div><!-- single author comments --> | |
| 64 | - </div><!-- all comments --> | |
| 65 | - </div><!-- two authors comments --> | |
| 66 | - </div> | |
| 67 | - <div class="footer-nav"> | |
| 68 | - <div class="footer-top white-bg"> | |
| 69 | - <div class="row"> | |
| 70 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 71 | - <div class="row h-100p"> | |
| 72 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 73 | - <ul class="top-intro-bt"> | |
| 74 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 75 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 76 | - </ul> | |
| 77 | - </div> | |
| 78 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 79 | - <div class="ft-comments-group"> | |
| 80 | - <div class="c-with-photos"> | |
| 81 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 82 | - <ul class="comments-photos"> | |
| 83 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 84 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 85 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 86 | - </ul><!-- comment photos --> | |
| 87 | - </div> | |
| 88 | - <div class="comments-detail all-c-space"> | |
| 89 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 90 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 91 | - </div><!-- comments detail --> | |
| 92 | - | |
| 93 | - </div><!-- comments Group --> | |
| 94 | - </div></div> | |
| 95 | - </div> | |
| 96 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 97 | - | |
| 98 | - <div class="comment-frm no-c-frm"> | |
| 99 | - <div class="row"> | |
| 100 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 101 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 102 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 103 | - </div></div> | |
| 104 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 105 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 106 | - </div> | |
| 107 | - </div><!-- comment from --> | |
| 108 | - </div> </div></div> | |
| 109 | - </div><!-- footer top --> | |
| 110 | - <div class="footer-bottom"> | |
| 111 | - <ul> | |
| 112 | - <li class="active"></li> | |
| 113 | - <li></li> | |
| 114 | - </ul> | |
| 115 | - </div><!-- footer top --> | |
| 116 | - </div><!-- footer --> | |
| 117 | - | |
| 118 | - </div> | |
| 119 | - <!-- body wrapper --> | |
| 120 | - </div> | |
| 121 | - <!-- main wrapper --> | |
| 122 | - </main> | |
| 123 | -</template> | |
| 124 | - | |
| 125 | -<script> | |
| 126 | -import Vue from "vue"; | |
| 127 | -import router from "../router"; | |
| 128 | - | |
| 129 | -export default { | |
| 130 | - name: "NoScreenshotTwoAuthor", | |
| 131 | - | |
| 132 | - data() { | |
| 133 | - return {}; | |
| 134 | - }, | |
| 135 | - mounted() {}, | |
| 136 | - methods: { | |
| 137 | - goToLogin() { | |
| 138 | - this.$router.push("/"); | |
| 139 | - }, | |
| 140 | - goToSignUp() { | |
| 141 | - this.$router.push("/signup"); | |
| 142 | - }, | |
| 143 | - | |
| 144 | - }, | |
| 145 | -}; | |
| 146 | -</script> |
src/components/Otp.vue
| ... | ... | @@ -1,169 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid main-wrp"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - | |
| 22 | - <div class="collapse navbar-collapse" id="navbarsExample03"> | |
| 23 | - <ul class="navbar-nav mr-auto"> | |
| 24 | - <li class="nav-item active"> | |
| 25 | - <a class="nav-link" href="#">About</a> | |
| 26 | - </li> | |
| 27 | - <li class="nav-item"> | |
| 28 | - <a class="nav-link" href="#">Masterclass</a> | |
| 29 | - </li> | |
| 30 | - <li class="nav-item"> | |
| 31 | - <a class="nav-link" href="#">Stories</a> | |
| 32 | - </li> | |
| 33 | - <li class="nav-item spotLight-img"> | |
| 34 | - <a class="nav-link" href="#" | |
| 35 | - ><img src="../assets/images/SPOTLight.svg" | |
| 36 | - /></a> | |
| 37 | - </li> | |
| 38 | - <li class="nav-item"> | |
| 39 | - <a class="nav-link" href="#">Library</a> | |
| 40 | - </li> | |
| 41 | - </ul> | |
| 42 | - </div> | |
| 43 | - </nav> | |
| 44 | - <!-- menu wrapper --> | |
| 45 | - <div class="sign-wrp"> | |
| 46 | - <div class="row col-reverse"> | |
| 47 | - <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | |
| 48 | - <!-- users land image --> | |
| 49 | - <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | |
| 50 | - <h1 class="welcome-hd-back"> | |
| 51 | - Welcome <br /> | |
| 52 | - back | |
| 53 | - </h1> | |
| 54 | - </div> | |
| 55 | - <!-- users land image --> | |
| 56 | - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 57 | - <div class="form-layout signup-frm-spc"> | |
| 58 | - <form> | |
| 59 | - <!-- <h5>SignUp Using</h5> --> | |
| 60 | - <div class="social-login" style="visibility: hidden"> | |
| 61 | - <ul> | |
| 62 | - <li> | |
| 63 | - <a href="#"><img src="../assets/images/google.svg" /></a> | |
| 64 | - </li> | |
| 65 | - <li> | |
| 66 | - <a href="#"><img src="../assets/images/linkdin.svg" /></a> | |
| 67 | - </li> | |
| 68 | - <li> | |
| 69 | - <a href="#"><img src="../assets/images/twitter.svg" /></a> | |
| 70 | - </li> | |
| 71 | - </ul> | |
| 72 | - </div> | |
| 73 | - <h5> | |
| 74 | - Please enter the OTP shared to {{email}} to confirm | |
| 75 | - your email address | |
| 76 | - </h5> | |
| 77 | - <div class="fill-form"> | |
| 78 | - <label for="inputEmail" class="sr-only">OTP</label> | |
| 79 | - <input | |
| 80 | - type="text" | |
| 81 | - id="inputEmail" | |
| 82 | - class="form-control" | |
| 83 | - placeholder="Your OTP" | |
| 84 | - v-model="otp" | |
| 85 | - | |
| 86 | - /> | |
| 87 | - <!-- <label for="inputPassword" class="sr-only">Password</label> | |
| 88 | - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> --> | |
| 89 | - | |
| 90 | - <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="verifyOtp"> | |
| 91 | - <img src="../assets/images/check-circle.png" /> Verify Email | |
| 92 | - Address | |
| 93 | - </a> | |
| 94 | - <p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail(true)">Resend</a></p> | |
| 95 | - <!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> --> | |
| 96 | - </div> | |
| 97 | - </form> | |
| 98 | - </div> | |
| 99 | - </div> | |
| 100 | - <!-- sign up --> | |
| 101 | - </div> | |
| 102 | - </div> | |
| 103 | - <!-- body wrapper --> | |
| 104 | - </div> | |
| 105 | - </main> | |
| 106 | -</template> | |
| 107 | - | |
| 108 | -<script> | |
| 109 | -import Vue from "vue"; | |
| 110 | -import router from "../router"; | |
| 111 | -import axios from "axios"; | |
| 112 | - | |
| 113 | -export default { | |
| 114 | - name: "Otp", | |
| 115 | - | |
| 116 | - data() { | |
| 117 | - return { | |
| 118 | - email:null, | |
| 119 | - otp:null, | |
| 120 | - }; | |
| 121 | - }, | |
| 122 | - mounted() { | |
| 123 | - this.email = localStorage.getItem("spotlight_email"); | |
| 124 | - console.log("this.$route.params.flag",this.$route.params.flag) | |
| 125 | - if(this.$route.params.flag == true){ | |
| 126 | - this.ResendEmail(false); | |
| 127 | - } | |
| 128 | - | |
| 129 | - }, | |
| 130 | - methods: { | |
| 131 | - goToLogin() { | |
| 132 | - this.$router.push("/"); | |
| 133 | - }, | |
| 134 | - verifyOtp(){ | |
| 135 | - axios | |
| 136 | - .get(`/verifyEmail?email=${this.email}&otp=${this.otp}`, this.userData) | |
| 137 | - .then((response) => { | |
| 138 | - console.log("otp response",response); | |
| 139 | - this.$toaster.success(response.data.message) | |
| 140 | - if(response.data.status == 'success'){ | |
| 141 | - localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) | |
| 142 | - this.$router.push("/profile"); | |
| 143 | - } | |
| 144 | - }) | |
| 145 | - .catch( (error) =>{ | |
| 146 | - if (error.response) { | |
| 147 | - this.$toaster.error(error.response.data.message) | |
| 148 | - } | |
| 149 | - }); | |
| 150 | - | |
| 151 | - }, | |
| 152 | - ResendEmail(req){ | |
| 153 | - axios | |
| 154 | - .post("/forgotPassword", {'email':this.email,'forgotPassword':false}) | |
| 155 | - .then((response) => { | |
| 156 | - console.log("forgotPassword- response",response) | |
| 157 | - if(req){ | |
| 158 | - this.$toaster.success(response.data.message) | |
| 159 | - } | |
| 160 | - }) | |
| 161 | - .catch( (error) =>{ | |
| 162 | - if (error.response) { | |
| 163 | - this.$toaster.error(error.response.data.message) | |
| 164 | - } | |
| 165 | - }); | |
| 166 | - } | |
| 167 | - }, | |
| 168 | -}; | |
| 169 | -</script> |
src/components/ProductInsight.vue
| ... | ... | @@ -1,161 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid inner-wrp"> | |
| 4 | - | |
| 5 | - | |
| 6 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 7 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a> | |
| 8 | - | |
| 9 | - | |
| 10 | - | |
| 11 | - <div class="user-profile-photo insights-profile"> | |
| 12 | - <a href="#"><img src="../assets/images/user.png" /></a> | |
| 13 | - </div> | |
| 14 | - </nav><!-- menu wrapper --> | |
| 15 | - <div class="row profile-tab-spc-top insights-spc"> | |
| 16 | - <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | |
| 17 | - <a href="#" class="back-to-lib"><img src="../assets/images/arrow-left.svg" />Back to library</a> | |
| 18 | - <ul class="insights-list"> | |
| 19 | - <li><a href="#">PRODUCT Insight</a></li> | |
| 20 | - </ul> | |
| 21 | -<div class="insights-details"> | |
| 22 | - <h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2> | |
| 23 | - | |
| 24 | - <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. | |
| 25 | -<br><br> | |
| 26 | - 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> | |
| 27 | - </p> | |
| 28 | - | |
| 29 | -</div> | |
| 30 | - | |
| 31 | - </div><!-- user profile --> | |
| 32 | - <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | |
| 33 | - <div class="features-group"> | |
| 34 | - <h3>Further Reading</h3> | |
| 35 | -<ul class="features-group-list"> | |
| 36 | -<li><a href="#">The Aesthetic-Usability Effect <img src="../assets/images/link.svg" /></a> | |
| 37 | -<span>Wikipedia</span> | |
| 38 | -</li> | |
| 39 | -<li><a href="#">The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones. <img src="../assets/images/link.svg" /></a> | |
| 40 | - <span>Nielsen Norman Group</span> | |
| 41 | - </li> | |
| 42 | -</ul> | |
| 43 | - </div><!-- list style --> | |
| 44 | - </div> | |
| 45 | - </div> | |
| 46 | - <div class="clearfix"></div> | |
| 47 | - <div class="row top-brd profile-tab-spc-top"> | |
| 48 | -<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | |
| 49 | -<ul class="profile-tab"> | |
| 50 | - <li class="active-green"><a href="#">Citations(16)</a></li> | |
| 51 | -</ul> | |
| 52 | - | |
| 53 | -</div> | |
| 54 | -<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 55 | -<a href="#" class="insights-rply"><img src="../assets/images/reply.svg" /> Share Insight</a> | |
| 56 | - | |
| 57 | -</div> | |
| 58 | - </div><!-- tab style --> | |
| 59 | - <div class="profile-data-wrp"> | |
| 60 | -<div class="container-fluid data-wrp"> | |
| 61 | -<div class="row"> | |
| 62 | - <div class=""> | |
| 63 | -<div class="card-warpper"> | |
| 64 | - <div class="company-detail"> | |
| 65 | - <div class="c-logo"> | |
| 66 | - <img src="../assets/images/image 46.png" /> | |
| 67 | - </div> | |
| 68 | - <div class="c-tag"> | |
| 69 | - <img src="../assets/images/c-tag.png" /> | |
| 70 | - </div> | |
| 71 | - </div><!-- company detail--> | |
| 72 | - <h1>Urban Company</h1> | |
| 73 | - <div class="u-detail"> | |
| 74 | -<img src="../assets/images/user-2.png" /> | |
| 75 | -<h2>Murugan<br> Swaminathan</h2> | |
| 76 | - </div><!-- user detail --> | |
| 77 | - <p>Onboarding, Core usage,<br> Customer Suport</p> | |
| 78 | - <ul class="tags-list"> | |
| 79 | - <li><a href="#" class="cape-honey">Design</a></li> | |
| 80 | - <li><a href="#" class="rose-bud">Marketing</a></li> | |
| 81 | - <li><a href="#" class="pattens-blue">Product</a></li> | |
| 82 | - </ul> | |
| 83 | - <div class="clearfix"></div> | |
| 84 | -</div><!-- card wrpper --> | |
| 85 | -<div class="card-warpper"> | |
| 86 | - <div class="company-detail"> | |
| 87 | - <div class="c-logo"> | |
| 88 | - <img src="../assets/images/image 46.png" /> | |
| 89 | - </div> | |
| 90 | - <div class="c-tag"> | |
| 91 | - <img src="../assets/images/c-tag.png" /> | |
| 92 | - </div> | |
| 93 | - </div><!-- company detail--> | |
| 94 | - <h1>Urban Company</h1> | |
| 95 | - <div class="u-detail"> | |
| 96 | -<img src="../assets/images/user-2.png" /> | |
| 97 | -<h2>Murugan<br> Swaminathan</h2> | |
| 98 | - </div><!-- user detail --> | |
| 99 | - <p>Onboarding, Core usage,<br> Customer Suport</p> | |
| 100 | - <ul class="tags-list"> | |
| 101 | - <li><a href="#" class="cape-honey">Design</a></li> | |
| 102 | - <li><a href="#" class="rose-bud">Marketing</a></li> | |
| 103 | - <li><a href="#" class="pattens-blue">Product</a></li> | |
| 104 | - </ul> | |
| 105 | - <div class="clearfix"></div> | |
| 106 | -</div><!-- card wrpper --> | |
| 107 | -<div class="card-warpper"> | |
| 108 | - <div class="company-detail"> | |
| 109 | - <div class="c-logo"> | |
| 110 | - <img src="../assets/images/image 46.png" /> | |
| 111 | - </div> | |
| 112 | - <div class="c-tag"> | |
| 113 | - <img src="../assets/images/c-tag.png" /> | |
| 114 | - </div> | |
| 115 | - </div><!-- company detail--> | |
| 116 | - <h1>Urban Company</h1> | |
| 117 | - <div class="u-detail"> | |
| 118 | -<img src="../assets/images/user-2.png" /> | |
| 119 | -<h2>Murugan<br> Swaminathan</h2> | |
| 120 | - </div><!-- user detail --> | |
| 121 | - <p>Onboarding, Core usage,<br> Customer Suport</p> | |
| 122 | - <ul class="tags-list"> | |
| 123 | - <li><a href="#" class="cape-honey">Design</a></li> | |
| 124 | - <li><a href="#" class="rose-bud">Marketing</a></li> | |
| 125 | - <li><a href="#" class="pattens-blue">Product</a></li> | |
| 126 | - </ul> | |
| 127 | - <div class="clearfix"></div> | |
| 128 | -</div><!-- card wrpper --> | |
| 129 | - </div><!-- all card wrpper --> | |
| 130 | -</div> | |
| 131 | -</div> | |
| 132 | - | |
| 133 | - </div><!-- data wrp --> | |
| 134 | - <!-- body wrapper --> | |
| 135 | - </div><!-- main wrapper --> | |
| 136 | - <!-- main wrapper --> | |
| 137 | - </main> | |
| 138 | -</template> | |
| 139 | - | |
| 140 | -<script> | |
| 141 | -import Vue from "vue"; | |
| 142 | -import router from "../router"; | |
| 143 | - | |
| 144 | -export default { | |
| 145 | - name: "ProductInsight", | |
| 146 | - | |
| 147 | - data() { | |
| 148 | - return {}; | |
| 149 | - }, | |
| 150 | - mounted() {}, | |
| 151 | - methods: { | |
| 152 | - goToLogin() { | |
| 153 | - this.$router.push("/"); | |
| 154 | - }, | |
| 155 | - goToSignUp() { | |
| 156 | - this.$router.push("/signup"); | |
| 157 | - }, | |
| 158 | - | |
| 159 | - }, | |
| 160 | -}; | |
| 161 | -</script> |
src/components/ReadingFlowBounceBoard.vue
| ... | ... | @@ -1,139 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="bounce-board-wrp"> | |
| 19 | - <div class="inner-wrp-bc"> | |
| 20 | -<div class="bc-top-head"> | |
| 21 | - <span class="bc-head"> | |
| 22 | - <img src="../assets/images/bounce-icon.svg" /> Bounce Board | |
| 23 | - </span> | |
| 24 | - <div class="action-sort"> | |
| 25 | - <span class="sort-by">SORT BY</span> <div class="btn-group"> | |
| 26 | - <button type="button" class="bc-sort-list dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| 27 | - BEST | |
| 28 | - </button> | |
| 29 | - <div class="dropdown-menu"> | |
| 30 | - <a class="dropdown-item" href="#">BEST 1</a> | |
| 31 | - <a class="dropdown-item" href="#">BEST 2</a> | |
| 32 | - <a class="dropdown-item" href="#">BEST 3</a> | |
| 33 | - </div> | |
| 34 | -</div> | |
| 35 | - </div><!-- action sort --> | |
| 36 | - </div><!-- top head --> | |
| 37 | -<div class="bounce-board-body"> | |
| 38 | - <div class="bc-empty">Empty State</div> | |
| 39 | - </div><!-- bounce board body --> | |
| 40 | - </div> | |
| 41 | - </div><!-- bounceboard wrp --> | |
| 42 | - <div class="single-mobileInsight"> | |
| 43 | - <img src="../assets/images/slide.png" class="slide-img" /> | |
| 44 | - <div class="single-left-Insight-comments"> | |
| 45 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 46 | - <div class="single-author-li-comments"> | |
| 47 | - <div class="a-intro-comments custom-c-style"> | |
| 48 | - <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> | |
| 49 | - <ul class="rly-comment-set"> | |
| 50 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 51 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 52 | - </ul> | |
| 53 | - </div><!-- comments box --> | |
| 54 | - </div><!-- single author comments --> | |
| 55 | - <div class="single-author-li-comments"> | |
| 56 | - <div class="a-intro-comments custom-c-style"> | |
| 57 | - <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> | |
| 58 | - <ul class="rly-comment-set"> | |
| 59 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 60 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 61 | - </ul> | |
| 62 | - </div><!-- comments box --> | |
| 63 | - </div><!-- single author comments --> | |
| 64 | - </div><!-- single mobile Left insight --> | |
| 65 | - <div class="c-product-insight-wrp "> | |
| 66 | - <div class="single-author-li-comments "> | |
| 67 | - <div class="a-intro-comments custom-selected-style"> | |
| 68 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 69 | - <div class="top-wrp"> | |
| 70 | - PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 71 | - </div> | |
| 72 | - <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> | |
| 73 | - <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. | |
| 74 | -<br><br> | |
| 75 | -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> | |
| 76 | -</p> | |
| 77 | -<div class="footer"> | |
| 78 | - <a href="#" class="cit-16">16 Citations</a> | |
| 79 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 80 | - </div><!-- footer --> | |
| 81 | - | |
| 82 | - </div><!-- comments box --> | |
| 83 | - </div><!-- single author comments --> | |
| 84 | - | |
| 85 | - </div><!-- single mobile Right insight --> | |
| 86 | - </div><!-- Single Mobile Insight --> | |
| 87 | - <div class="footer-nav"> | |
| 88 | - <div class="footer-top"> | |
| 89 | - <div class="row"> | |
| 90 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 91 | - <div class="row h-100p"> | |
| 92 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 93 | - <ul class="top-intro-bt"> | |
| 94 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 95 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li> | |
| 96 | - </ul> | |
| 97 | - </div> | |
| 98 | - | |
| 99 | - </div> | |
| 100 | - </div> | |
| 101 | - </div> | |
| 102 | - </div><!-- footer top --> | |
| 103 | - <div class="footer-bottom"> | |
| 104 | - <ul> | |
| 105 | - <li class=""></li> | |
| 106 | - <li></li> | |
| 107 | - </ul> | |
| 108 | - </div><!-- footer top --> | |
| 109 | - </div><!-- footer --> | |
| 110 | - | |
| 111 | - </div> | |
| 112 | - <!-- body wrapper --> | |
| 113 | - </div> | |
| 114 | - <!-- main wrapper --> | |
| 115 | - </main> | |
| 116 | -</template> | |
| 117 | - | |
| 118 | -<script> | |
| 119 | -import Vue from "vue"; | |
| 120 | -import router from "../router"; | |
| 121 | - | |
| 122 | -export default { | |
| 123 | - name: "ReadingFlowBounceBoard", | |
| 124 | - | |
| 125 | - data() { | |
| 126 | - return {}; | |
| 127 | - }, | |
| 128 | - mounted() {}, | |
| 129 | - methods: { | |
| 130 | - goToLogin() { | |
| 131 | - this.$router.push("/"); | |
| 132 | - }, | |
| 133 | - goToSignUp() { | |
| 134 | - this.$router.push("/signup"); | |
| 135 | - }, | |
| 136 | - | |
| 137 | - }, | |
| 138 | -}; | |
| 139 | -</script> |
src/components/ReadingFlowBounceBoard_chat.vue
| ... | ... | @@ -1,288 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="bounce-board-wrp"> | |
| 19 | - <div class="inner-wrp-bc"> | |
| 20 | -<div class="bc-top-head"> | |
| 21 | - <span class="bc-head"> | |
| 22 | - <img src="../assets/images/bounce-icon.svg" /> Bounce Board | |
| 23 | - </span> | |
| 24 | - <div class="action-sort"> | |
| 25 | - <span class="sort-by">SORT BY</span> <div class="btn-group"> | |
| 26 | - <button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| 27 | - BEST | |
| 28 | - </button> | |
| 29 | - <div class="dropdown-menu short_by"> | |
| 30 | - <a class="dropdown-item" href="#">BEST 1</a> | |
| 31 | - <a class="dropdown-item" href="#">BEST 2</a> | |
| 32 | - <a class="dropdown-item" href="#">BEST 3</a> | |
| 33 | - </div> | |
| 34 | -</div> | |
| 35 | - </div><!-- action sort --> | |
| 36 | - </div><!-- top head --> | |
| 37 | -<div class="bounce-board-body"> | |
| 38 | - <ul class="bounced-user-comments"> | |
| 39 | -<li class="bc_border"> | |
| 40 | - <div class="lbord"></div><!-- border --> | |
| 41 | - <div class="parent-full-width parent_bg"> | |
| 42 | - <div class="full-width"> | |
| 43 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 44 | - <span class="head-content">wanderingirl </span> | |
| 45 | -<ul> | |
| 46 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 47 | - <li> <span></span>3days ago</li> | |
| 48 | - <li> <span class="au">Author</span></li> | |
| 49 | -</ul> | |
| 50 | - | |
| 51 | - | |
| 52 | - </div><!-- header --> | |
| 53 | - <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> | |
| 54 | - <div class="joined_wrapper"> | |
| 55 | - <ul class="joined-info info_bc_spc"> | |
| 56 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 57 | - <li> <a href="#"> 4</a> </li> | |
| 58 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 59 | - <li> <a href="#"> 6</a> </li> | |
| 60 | - </ul> | |
| 61 | - <div class="add_rply"> | |
| 62 | - <input type="text" placeholder="Add your reply" /> | |
| 63 | - </div><!-- rly form --> | |
| 64 | - </div><!-- joined wrapper --> | |
| 65 | - </div><!-- full width --> | |
| 66 | - </div><!-- parent --> | |
| 67 | - <div class="child-full-width"> | |
| 68 | - <div class="full-width"> | |
| 69 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 70 | - <span class="head-content">Onenoisyboi </span> | |
| 71 | -<ul> | |
| 72 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 73 | - <li> <span></span>3days ago</li> | |
| 74 | - <li> <span class="red">Mod</span></li> | |
| 75 | -</ul> | |
| 76 | - | |
| 77 | - | |
| 78 | - </div><!-- header --> | |
| 79 | - <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | |
| 80 | - <div class="joined_wrapper"> | |
| 81 | - <ul class="joined-info info_bc_spc"> | |
| 82 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 83 | - <li> <a href="#"> 4</a> </li> | |
| 84 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 85 | - <li> <a href="#"> 6</a> </li> | |
| 86 | - </ul> | |
| 87 | - <div class="add_rply"> | |
| 88 | - <input type="text" placeholder="Add your reply" /> | |
| 89 | - </div><!-- rly form --> | |
| 90 | - </div><!-- joined wrapper --> | |
| 91 | - </div><!-- full width --> | |
| 92 | - </div><!-- child wrapper --> | |
| 93 | -</li> | |
| 94 | - | |
| 95 | - </ul><!-- all user comments --> | |
| 96 | - <ul class="bounced-user-comments"> | |
| 97 | -<li class="bc_border"> | |
| 98 | - <div class="bc_brd_l"></div><!-- border --> | |
| 99 | - <div class="parent-full-width "> | |
| 100 | - <div class="full-width"> | |
| 101 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 102 | - <span class="head-content">wanderingirl </span> | |
| 103 | -<ul> | |
| 104 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 105 | - <li> <span></span>3days ago</li> | |
| 106 | - | |
| 107 | -</ul> | |
| 108 | - | |
| 109 | - | |
| 110 | - </div><!-- header --> | |
| 111 | - <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> | |
| 112 | - <div class="joined_wrapper"> | |
| 113 | - <ul class="joined-info info_bc_spc"> | |
| 114 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 115 | - <li> <a href="#"> 4</a> </li> | |
| 116 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 117 | - <li> <a href="#"> 6</a> </li> | |
| 118 | - </ul> | |
| 119 | - <div class="add_rply"> | |
| 120 | - <input type="text" placeholder="Add your reply" /> | |
| 121 | - </div><!-- rly form --> | |
| 122 | - </div><!-- joined wrapper --> | |
| 123 | - </div><!-- full width --> | |
| 124 | - </div><!-- parent --> | |
| 125 | - <div class="child-full-width"> | |
| 126 | - <div class="full-width"> | |
| 127 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 128 | - <span class="head-content">Onenoisyboi </span> | |
| 129 | -<ul> | |
| 130 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 131 | - <li> <span></span>3days ago</li> | |
| 132 | - | |
| 133 | -</ul> | |
| 134 | - | |
| 135 | - | |
| 136 | - </div><!-- header --> | |
| 137 | - <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | |
| 138 | - <div class="joined_wrapper"> | |
| 139 | - <ul class="joined-info info_bc_spc"> | |
| 140 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 141 | - <li> <a href="#"> 4</a> </li> | |
| 142 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 143 | - <li> <a href="#"> 6</a> </li> | |
| 144 | - </ul> | |
| 145 | - <div class="add_rply"> | |
| 146 | - <input type="text" placeholder="Add your reply" /> | |
| 147 | - </div><!-- rly form --> | |
| 148 | - </div><!-- joined wrapper --> | |
| 149 | - </div><!-- full width --> | |
| 150 | - </div><!-- child wrapper --> | |
| 151 | - <div class="child-full-width"> | |
| 152 | - <div class="full-width"> | |
| 153 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 154 | - <span class="head-content">Onenoisyboi </span> | |
| 155 | -<ul> | |
| 156 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 157 | - <li> <span></span>3days ago</li> | |
| 158 | - | |
| 159 | -</ul> | |
| 160 | - | |
| 161 | - | |
| 162 | - </div><!-- header --> | |
| 163 | - <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | |
| 164 | - <div class="joined_wrapper"> | |
| 165 | - <ul class="joined-info info_bc_spc"> | |
| 166 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 167 | - <li> <a href="#"> 4</a> </li> | |
| 168 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 169 | - <li> <a href="#"> 6</a> </li> | |
| 170 | - </ul> | |
| 171 | - <div class="add_rply"> | |
| 172 | - <input type="text" placeholder="Add your reply" /> | |
| 173 | - </div><!-- rly form --> | |
| 174 | - </div><!-- joined wrapper --> | |
| 175 | - </div><!-- full width --> | |
| 176 | - </div><!-- child wrapper --> | |
| 177 | -</li> | |
| 178 | - | |
| 179 | - </ul><!-- all user comments --> | |
| 180 | - </div><!-- bounce board body --> | |
| 181 | - <div class="comments-footer"> | |
| 182 | - <textarea></textarea> | |
| 183 | - <div class="comments-footer-wrp"> | |
| 184 | - <a href="#" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 185 | - </div> | |
| 186 | - </div><!-- comments footer --> | |
| 187 | - </div> | |
| 188 | - </div><!-- bounceboard wrp --> | |
| 189 | - <div class="single-mobileInsight"> | |
| 190 | - <img src="../assets/images/slide.png" class="slide-img" /> | |
| 191 | - <div class="single-left-Insight-comments"> | |
| 192 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 193 | - <div class="single-author-li-comments"> | |
| 194 | - <div class="a-intro-comments custom-c-style"> | |
| 195 | - <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> | |
| 196 | - <ul class="rly-comment-set"> | |
| 197 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 198 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 199 | - </ul> | |
| 200 | - </div><!-- comments box --> | |
| 201 | - </div><!-- single author comments --> | |
| 202 | - <div class="single-author-li-comments"> | |
| 203 | - <div class="a-intro-comments custom-c-style"> | |
| 204 | - <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> | |
| 205 | - <ul class="rly-comment-set"> | |
| 206 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 207 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 208 | - </ul> | |
| 209 | - </div><!-- comments box --> | |
| 210 | - </div><!-- single author comments --> | |
| 211 | - </div><!-- single mobile Left insight --> | |
| 212 | - <div class="c-product-insight-wrp "> | |
| 213 | - <div class="single-author-li-comments "> | |
| 214 | - <div class="a-intro-comments custom-selected-style"> | |
| 215 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 216 | - <div class="top-wrp"> | |
| 217 | - PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 218 | - </div> | |
| 219 | - <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> | |
| 220 | - <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. | |
| 221 | -<br><br> | |
| 222 | -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> | |
| 223 | -</p> | |
| 224 | -<div class="footer"> | |
| 225 | - <a href="#" class="cit-16">16 Citations</a> | |
| 226 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 227 | - </div><!-- footer --> | |
| 228 | - | |
| 229 | - </div><!-- comments box --> | |
| 230 | - </div><!-- single author comments --> | |
| 231 | - | |
| 232 | - </div><!-- single mobile Right insight --> | |
| 233 | - </div><!-- Single Mobile Insight --> | |
| 234 | - <div class="footer-nav"> | |
| 235 | - <div class="footer-top"> | |
| 236 | - <div class="row"> | |
| 237 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 238 | - <div class="row h-100p"> | |
| 239 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 240 | - <ul class="top-intro-bt"> | |
| 241 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 242 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li> | |
| 243 | - </ul> | |
| 244 | - </div> | |
| 245 | - | |
| 246 | - </div> | |
| 247 | - </div> | |
| 248 | - </div> | |
| 249 | - </div><!-- footer top --> | |
| 250 | - <div class="footer-bottom"> | |
| 251 | - <ul> | |
| 252 | - <li class=""></li> | |
| 253 | - <li></li> | |
| 254 | - </ul> | |
| 255 | - </div><!-- footer top --> | |
| 256 | - </div><!-- footer --> | |
| 257 | - | |
| 258 | - </div> | |
| 259 | - <!-- body wrapper --> | |
| 260 | - </div> | |
| 261 | - <!-- main wrapper --> | |
| 262 | - </main> | |
| 263 | -</template> | |
| 264 | - | |
| 265 | -<script> | |
| 266 | -import Vue from "vue"; | |
| 267 | -import router from "../router"; | |
| 268 | - | |
| 269 | -export default { | |
| 270 | - name: "ReadingFlowBounceBoard_chat", | |
| 271 | - | |
| 272 | - data() { | |
| 273 | - return {}; | |
| 274 | - }, | |
| 275 | - mounted() {}, | |
| 276 | - methods: { | |
| 277 | - goToLogin() { | |
| 278 | - this.$router.push("/"); | |
| 279 | - }, | |
| 280 | - goToSignUp() { | |
| 281 | - this.$router.push("/signup"); | |
| 282 | - }, | |
| 283 | - best_sort(){ | |
| 284 | -$(".short_by").toggle(); | |
| 285 | - }, | |
| 286 | - }, | |
| 287 | -}; | |
| 288 | -</script> |
src/components/Reset.vue
| ... | ... | @@ -1,152 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid main-wrp"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - | |
| 22 | - <div class="collapse navbar-collapse" id="navbarsExample03"> | |
| 23 | - <ul class="navbar-nav mr-auto"> | |
| 24 | - <li class="nav-item active"> | |
| 25 | - <a class="nav-link" href="#">About</a> | |
| 26 | - </li> | |
| 27 | - <li class="nav-item"> | |
| 28 | - <a class="nav-link" href="#">Masterclass</a> | |
| 29 | - </li> | |
| 30 | - <li class="nav-item"> | |
| 31 | - <a class="nav-link" href="#">Stories</a> | |
| 32 | - </li> | |
| 33 | - <li class="nav-item spotLight-img"> | |
| 34 | - <a class="nav-link" href="#" | |
| 35 | - ><img src="../assets/images/SPOTLight.svg" | |
| 36 | - /></a> | |
| 37 | - </li> | |
| 38 | - <li class="nav-item"> | |
| 39 | - <a class="nav-link" href="#">Library</a> | |
| 40 | - </li> | |
| 41 | - </ul> | |
| 42 | - </div> | |
| 43 | - </nav> | |
| 44 | - <!-- menu wrapper --> | |
| 45 | - <div class="row col-reverse"> | |
| 46 | - <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | |
| 47 | - <!-- users land image --> | |
| 48 | - <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | |
| 49 | - <h1> | |
| 50 | - Welcome to <br /> | |
| 51 | - Productgrowth | |
| 52 | - </h1> | |
| 53 | - <ul class="sign-in-up-list"> | |
| 54 | - <li> | |
| 55 | - <img src="../assets/images/check.svg" /><span | |
| 56 | - >Connect & learn from fellow product enthusiasts</span | |
| 57 | - > | |
| 58 | - </li> | |
| 59 | - <li> | |
| 60 | - <img src="../assets/images/check.svg" /><span | |
| 61 | - >Share & pickup deeper insights from real world products</span | |
| 62 | - > | |
| 63 | - </li> | |
| 64 | - <li> | |
| 65 | - <img src="../assets/images/check.svg" /><span | |
| 66 | - >Access to XX Casestudies</span | |
| 67 | - > | |
| 68 | - </li> | |
| 69 | - </ul> | |
| 70 | - </div> | |
| 71 | - <!-- users land image --> | |
| 72 | - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 73 | - <div class="form-layout signup-frm-spc"> | |
| 74 | - <form class="reset-pass-spc"> | |
| 75 | - <h5> | |
| 76 | - Forgot password? Enter your e-Mail ID<br /> | |
| 77 | - to retrive | |
| 78 | - </h5> | |
| 79 | - <div class="fill-form"> | |
| 80 | - <label for="inputEmail" class="sr-only">Email address</label> | |
| 81 | - <input | |
| 82 | - type="email" | |
| 83 | - id="inputEmail" | |
| 84 | - class="form-control" | |
| 85 | - placeholder="Your Email ID" | |
| 86 | - v-model="email" | |
| 87 | - /> | |
| 88 | - | |
| 89 | - <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="forgotPassword"> | |
| 90 | - <img src="../assets/images/key.svg" /> Reset Password | |
| 91 | - </a> | |
| 92 | - | |
| 93 | - <h3 class="go-back"> | |
| 94 | - <span>Go back to </span><a @click="goToLogin">Login</a><span> / </span | |
| 95 | - ><a @click="goToSignUp">SignUp</a> | |
| 96 | - </h3> | |
| 97 | - </div> | |
| 98 | - </form> | |
| 99 | - </div> | |
| 100 | - </div> | |
| 101 | - <!-- sign up --> | |
| 102 | - </div> | |
| 103 | - <!-- body wrapper --> | |
| 104 | - </div> | |
| 105 | - <!-- main wrapper --> | |
| 106 | - </main> | |
| 107 | -</template> | |
| 108 | - | |
| 109 | -<script> | |
| 110 | -import Vue from "vue"; | |
| 111 | -import router from "../router"; | |
| 112 | -import axios from "axios"; | |
| 113 | - | |
| 114 | -export default { | |
| 115 | - name: "Reset", | |
| 116 | - | |
| 117 | - data() { | |
| 118 | - return { | |
| 119 | - email:null, | |
| 120 | - }; | |
| 121 | - }, | |
| 122 | - mounted() {}, | |
| 123 | - methods: { | |
| 124 | - goToLogin() { | |
| 125 | - this.$router.push("/"); | |
| 126 | - }, | |
| 127 | - goToSignUp() { | |
| 128 | - this.$router.push("/signup"); | |
| 129 | - }, | |
| 130 | - forgotPassword(){ | |
| 131 | - axios | |
| 132 | - .post("/forgotPassword", {'email':this.email,'forgotPassword':true}) | |
| 133 | - .then((response) => { | |
| 134 | - console.log("forgotPassword- response",response) | |
| 135 | - | |
| 136 | - this.$toaster.success(response.data.message) | |
| 137 | - if(response.data.status == 'success'){ | |
| 138 | - localStorage.setItem('spotlight_email', this.email); | |
| 139 | - this.$router.push("/changepassword"); | |
| 140 | - } | |
| 141 | - }) | |
| 142 | - .catch( (error) =>{ | |
| 143 | - if (error.response) { | |
| 144 | - this.$toaster.error(error.response.data.message) | |
| 145 | - } | |
| 146 | - }); | |
| 147 | - | |
| 148 | - } | |
| 149 | - | |
| 150 | - }, | |
| 151 | -}; | |
| 152 | -</script> |
src/components/SignUp.vue
| ... | ... | @@ -1,166 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid main-wrp"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - | |
| 22 | - <div class="collapse navbar-collapse" id="navbarsExample03"> | |
| 23 | - <ul class="navbar-nav mr-auto"> | |
| 24 | - <li class="nav-item active"> | |
| 25 | - <a class="nav-link" href="#">About</a> | |
| 26 | - </li> | |
| 27 | - <li class="nav-item"> | |
| 28 | - <a class="nav-link" href="#">Masterclass</a> | |
| 29 | - </li> | |
| 30 | - <li class="nav-item"> | |
| 31 | - <a class="nav-link" href="#">Stories</a> | |
| 32 | - </li> | |
| 33 | - <li class="nav-item spotLight-img"> | |
| 34 | - <a class="nav-link" href="#" | |
| 35 | - ><img src="../assets/images/SPOTLight.svg" | |
| 36 | - /></a> | |
| 37 | - </li> | |
| 38 | - <li class="nav-item"> | |
| 39 | - <a class="nav-link" href="#">Library</a> | |
| 40 | - </li> | |
| 41 | - </ul> | |
| 42 | - </div> | |
| 43 | - </nav> | |
| 44 | - <!-- menu wrapper --> | |
| 45 | - <div class="sign-wrp"> | |
| 46 | - <div class="row col-reverse"> | |
| 47 | - <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | |
| 48 | - <!-- users land image --> | |
| 49 | - <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | |
| 50 | - <h1> | |
| 51 | - Welcome to <br /> | |
| 52 | - Productgrowth | |
| 53 | - </h1> | |
| 54 | - <ul class="sign-in-up-list"> | |
| 55 | - <li> | |
| 56 | - <img src="../assets/images/check.svg" /><span | |
| 57 | - >Connect & learn from fellow product enthusiasts</span | |
| 58 | - > | |
| 59 | - </li> | |
| 60 | - <li> | |
| 61 | - <img src="../assets/images/check.svg" /><span | |
| 62 | - >Share & pickup deeper insights from real world products</span | |
| 63 | - > | |
| 64 | - </li> | |
| 65 | - <li> | |
| 66 | - <img src="../assets/images/check.svg" /><span | |
| 67 | - >Access to XX Casestudies</span | |
| 68 | - > | |
| 69 | - </li> | |
| 70 | - </ul> | |
| 71 | - </div> | |
| 72 | - <!-- users land image --> | |
| 73 | - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 74 | - <div class="form-layout signup-frm-spc"> | |
| 75 | - <form> | |
| 76 | - <h5>SignUp Using</h5> | |
| 77 | - <div class="social-login"> | |
| 78 | - <ul> | |
| 79 | - <li> | |
| 80 | - <a href="#"><img src="../assets/images/google.svg" /></a> | |
| 81 | - </li> | |
| 82 | - <li> | |
| 83 | - <a href="#"><img src="../assets/images/linkdin.svg" /></a> | |
| 84 | - </li> | |
| 85 | - <li> | |
| 86 | - <a href="#"><img src="../assets/images/twitter.svg" /></a> | |
| 87 | - </li> | |
| 88 | - </ul> | |
| 89 | - </div> | |
| 90 | - <h5>or Signup with email</h5> | |
| 91 | - <div class="fill-form"> | |
| 92 | - <label for="inputEmail" class="sr-only">Email address</label> | |
| 93 | - <input | |
| 94 | - type="email" | |
| 95 | - id="inputEmail" | |
| 96 | - class="form-control" | |
| 97 | - placeholder="Your Email ID" | |
| 98 | - autocomplete="off" | |
| 99 | - v-model="userData.email" | |
| 100 | - /> | |
| 101 | - <label for="inputPassword" class="sr-only">Password</label> | |
| 102 | - <input | |
| 103 | - type="password" | |
| 104 | - id="inputPassword" | |
| 105 | - class="form-control" | |
| 106 | - placeholder="Password" | |
| 107 | - v-model="userData.password" | |
| 108 | - /> | |
| 109 | - | |
| 110 | - <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup"> | |
| 111 | - <img src="../assets/images/user-plus.svg" /> Create Account | |
| 112 | - </a> | |
| 113 | - <p class=""> | |
| 114 | - By signing up I agree to the <a>Privacy Policy</a> and | |
| 115 | - <a>Terms of Service</a> | |
| 116 | - </p> | |
| 117 | - <h3>Have an account? <a @click="goToLogin">Login</a></h3> | |
| 118 | - </div> | |
| 119 | - </form> | |
| 120 | - </div> | |
| 121 | - </div> | |
| 122 | - <!-- sign up --> | |
| 123 | - </div> | |
| 124 | - </div> | |
| 125 | - <!-- body wrapper --> | |
| 126 | - </div> | |
| 127 | - </main> | |
| 128 | -</template> | |
| 129 | - | |
| 130 | -<script> | |
| 131 | -import Vue from "vue"; | |
| 132 | -import router from "../router"; | |
| 133 | -import axios from "axios"; | |
| 134 | - | |
| 135 | -export default { | |
| 136 | - name: "SignUp", | |
| 137 | - | |
| 138 | - data() { | |
| 139 | - return { | |
| 140 | - userData: {}, | |
| 141 | - }; | |
| 142 | - }, | |
| 143 | - mounted() {}, | |
| 144 | - methods: { | |
| 145 | - goToLogin() { | |
| 146 | - this.$router.push("/"); | |
| 147 | - }, | |
| 148 | - signup() { | |
| 149 | - axios | |
| 150 | - .post("/signup", this.userData) | |
| 151 | - .then((response) => { | |
| 152 | - this.$toaster.success(response.data.message); | |
| 153 | - if(response.data.status == 'success'){ | |
| 154 | - localStorage.setItem('spotlight_email', this.userData.email); | |
| 155 | - this.$router.push({ name: 'Otp', params: { flag: false }}); | |
| 156 | - } | |
| 157 | - }) | |
| 158 | - .catch( (error) =>{ | |
| 159 | - if (error.response) { | |
| 160 | - this.$toaster.error(error.response.data.message); | |
| 161 | - } | |
| 162 | - }); | |
| 163 | - }, | |
| 164 | - }, | |
| 165 | -}; | |
| 166 | -</script> |
src/components/SingleAuthor.vue
| ... | ... | @@ -1,129 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="single-author-comments"> | |
| 19 | - <img class="s-user-comments" src="../assets/images/u-info.png" /> | |
| 20 | - <div class="comments-a-wrp"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p> | |
| 24 | - <ul class="rly-comment-set"> | |
| 25 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 26 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 27 | - </ul> | |
| 28 | - </div><!-- comments box --> | |
| 29 | - </div><!-- single author comments --> | |
| 30 | - <div class="single-author-li-comments"> | |
| 31 | - <div class="a-intro-comments"> | |
| 32 | - <p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p> | |
| 33 | - <ul class="rly-comment-set"> | |
| 34 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 35 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- comments box --> | |
| 38 | - </div><!-- single author comments --> | |
| 39 | - <div class="single-author-li-comments"> | |
| 40 | - <div class="a-intro-comments"> | |
| 41 | - <p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p> | |
| 42 | - <ul class="rly-comment-set"> | |
| 43 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 44 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 45 | - </ul> | |
| 46 | - </div><!-- comments box --> | |
| 47 | - </div><!-- single author comments --> | |
| 48 | - </div> | |
| 49 | - </div><!-- single author comments --> | |
| 50 | - <div class="footer-nav"> | |
| 51 | - <div class="footer-top white-bg"> | |
| 52 | - <div class="row"> | |
| 53 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 54 | - <div class="row h-100p"> | |
| 55 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 56 | - <ul class="top-intro-bt"> | |
| 57 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 58 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 59 | - </ul> | |
| 60 | - </div> | |
| 61 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 62 | - <div class="ft-comments-group"> | |
| 63 | - <div class="c-with-photos"> | |
| 64 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 65 | - <ul class="comments-photos"> | |
| 66 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 67 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 68 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 69 | - </ul><!-- comment photos --> | |
| 70 | - </div> | |
| 71 | - <div class="comments-detail all-c-space"> | |
| 72 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 73 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 74 | - </div><!-- comments detail --> | |
| 75 | - | |
| 76 | - </div><!-- comments Group --> | |
| 77 | - </div></div> | |
| 78 | - </div> | |
| 79 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 80 | - | |
| 81 | - <div class="comment-frm no-c-frm"> | |
| 82 | - <div class="row"> | |
| 83 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 84 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 85 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 86 | - </div></div> | |
| 87 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 88 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 89 | - </div> | |
| 90 | - </div><!-- comment from --> | |
| 91 | - </div> </div></div> | |
| 92 | - </div><!-- footer top --> | |
| 93 | - <div class="footer-bottom"> | |
| 94 | - <ul> | |
| 95 | - <li class="active"></li> | |
| 96 | - <li></li> | |
| 97 | - </ul> | |
| 98 | - </div><!-- footer top --> | |
| 99 | - </div><!-- footer --> | |
| 100 | - | |
| 101 | - </div> | |
| 102 | - <!-- body wrapper --> | |
| 103 | - </div> | |
| 104 | - <!-- main wrapper --> | |
| 105 | - </main> | |
| 106 | -</template> | |
| 107 | - | |
| 108 | -<script> | |
| 109 | -import Vue from "vue"; | |
| 110 | -import router from "../router"; | |
| 111 | - | |
| 112 | -export default { | |
| 113 | - name: "SingleAuthor", | |
| 114 | - | |
| 115 | - data() { | |
| 116 | - return {}; | |
| 117 | - }, | |
| 118 | - mounted() {}, | |
| 119 | - methods: { | |
| 120 | - goToLogin() { | |
| 121 | - this.$router.push("/"); | |
| 122 | - }, | |
| 123 | - goToSignUp() { | |
| 124 | - this.$router.push("/signup"); | |
| 125 | - }, | |
| 126 | - | |
| 127 | - }, | |
| 128 | -}; | |
| 129 | -</script> |
src/components/SingleMobileInsight.vue
| ... | ... | @@ -1,137 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="single-mobileInsight"> | |
| 19 | - <img src="../assets/images/slide.png" class="slide-img" /> | |
| 20 | - <div class="single-left-Insight-comments"> | |
| 21 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 22 | - <div class="single-author-li-comments"> | |
| 23 | - <div class="a-intro-comments custom-c-style"> | |
| 24 | - <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> | |
| 25 | - <ul class="rly-comment-set"> | |
| 26 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 27 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 28 | - </ul> | |
| 29 | - </div><!-- comments box --> | |
| 30 | - </div><!-- single author comments --> | |
| 31 | - <div class="single-author-li-comments"> | |
| 32 | - <div class="a-intro-comments custom-c-style"> | |
| 33 | - <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> | |
| 34 | - <ul class="rly-comment-set"> | |
| 35 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 36 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 37 | - </ul> | |
| 38 | - </div><!-- comments box --> | |
| 39 | - </div><!-- single author comments --> | |
| 40 | - </div><!-- single mobile Left insight --> | |
| 41 | - <div class="single-m-Insight-comments"> | |
| 42 | - <div class="single-author-li-comments"> | |
| 43 | - <div class="a-intro-comments"> | |
| 44 | - <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> | |
| 45 | - <ul class="rly-comment-set"> | |
| 46 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 47 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 48 | - </ul> | |
| 49 | - </div><!-- comments box --> | |
| 50 | - </div><!-- single author comments --> | |
| 51 | - <div class="single-author-li-comments"> | |
| 52 | - <div class="a-intro-comments"> | |
| 53 | - <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> | |
| 54 | - <ul class="rly-comment-set"> | |
| 55 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 56 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 57 | - </ul> | |
| 58 | - </div><!-- comments box --> | |
| 59 | - </div><!-- single author comments --> | |
| 60 | - </div><!-- single mobile Right insight --> | |
| 61 | - </div><!-- Single Mobile Insight --> | |
| 62 | - <div class="footer-nav"> | |
| 63 | - <div class="footer-top white-bg"> | |
| 64 | - <div class="row"> | |
| 65 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 66 | - <div class="row h-100p"> | |
| 67 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 68 | - <ul class="top-intro-bt"> | |
| 69 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 70 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 71 | - </ul> | |
| 72 | - </div> | |
| 73 | - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> | |
| 74 | - <div class="ft-comments-group no-comment-count"> | |
| 75 | - <div class="row"> | |
| 76 | - | |
| 77 | - <div class="col-12"> | |
| 78 | - <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | |
| 79 | - <div class="comments-detail"> | |
| 80 | - <span class="no-c-yet">No comments yet</span> | |
| 81 | - <p>Be the first one to post a comment to start a discussion</p> | |
| 82 | - </div><!-- comments detail --> | |
| 83 | - </div> </div> | |
| 84 | - </div><!-- comments Group --> | |
| 85 | - </div></div> | |
| 86 | - </div> | |
| 87 | - <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | |
| 88 | - | |
| 89 | - <div class="comment-frm no-c-frm"> | |
| 90 | - <div class="row"> | |
| 91 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 92 | - <div class="form-group frm-wdth"> | |
| 93 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 94 | - </div></div> | |
| 95 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 96 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 97 | - </div> | |
| 98 | - </div><!-- comment from --> | |
| 99 | - </div> </div></div> | |
| 100 | - </div><!-- footer top --> | |
| 101 | - <div class="footer-bottom"> | |
| 102 | - <ul> | |
| 103 | - <li class="active"></li> | |
| 104 | - <li></li> | |
| 105 | - </ul> | |
| 106 | - </div><!-- footer top --> | |
| 107 | - </div><!-- footer --> | |
| 108 | - | |
| 109 | - </div> | |
| 110 | - <!-- body wrapper --> | |
| 111 | - </div> | |
| 112 | - <!-- main wrapper --> | |
| 113 | - </main> | |
| 114 | -</template> | |
| 115 | - | |
| 116 | -<script> | |
| 117 | -import Vue from "vue"; | |
| 118 | -import router from "../router"; | |
| 119 | - | |
| 120 | -export default { | |
| 121 | - name: "SingleMobileInsight", | |
| 122 | - | |
| 123 | - data() { | |
| 124 | - return {}; | |
| 125 | - }, | |
| 126 | - mounted() {}, | |
| 127 | - methods: { | |
| 128 | - goToLogin() { | |
| 129 | - this.$router.push("/"); | |
| 130 | - }, | |
| 131 | - goToSignUp() { | |
| 132 | - this.$router.push("/signup"); | |
| 133 | - }, | |
| 134 | - | |
| 135 | - }, | |
| 136 | -}; | |
| 137 | -</script> |
src/components/SingleMobileScreenChatComments.vue
| ... | ... | @@ -1,142 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="single-mobileInsight"> | |
| 19 | - <img src="../assets/images/slide.png" class="slide-img" /> | |
| 20 | - <div class="single-left-Insight-comments single-chat-c-left"> | |
| 21 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 22 | - <div class="single-author-li-comments"> | |
| 23 | - <div class="a-intro-comments custom-c-style"> | |
| 24 | - <img src="../assets/images/user.png" class="user-t-1" /> | |
| 25 | - <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> | |
| 26 | - <ul class="rly-comment-set"> | |
| 27 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 28 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 29 | - </ul> | |
| 30 | - </div><!-- comments box --> | |
| 31 | - </div><!-- single author comments --> | |
| 32 | - <div class="single-author-li-comments"> | |
| 33 | - <div class="a-intro-comments custom-c-style"> | |
| 34 | - <img src="../assets/images/user.png" class="user-t-1" /> | |
| 35 | - <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> | |
| 36 | - <ul class="rly-comment-set"> | |
| 37 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 38 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 39 | - </ul> | |
| 40 | - </div><!-- comments box --> | |
| 41 | - </div><!-- single author comments --> | |
| 42 | - </div><!-- single mobile Left insight --> | |
| 43 | - <div class="single-m-Insight-comments single-chat-c-right"> | |
| 44 | - <img src="../assets/images/user-2.svg" class="author2-thoughts" /> | |
| 45 | - <div class="single-author-li-comments "> | |
| 46 | - <div class="a-intro-comments cust-user2-style"> | |
| 47 | - <img src="../assets/images/user-2-set.svg" class="user-t-2" /> | |
| 48 | - <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> | |
| 49 | - <ul class="rly-comment-set"> | |
| 50 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 51 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 52 | - </ul> | |
| 53 | - </div><!-- comments box --> | |
| 54 | - </div><!-- single author comments --> | |
| 55 | - <div class="single-author-li-comments"> | |
| 56 | - <div class="a-intro-comments cust-user2-style"> | |
| 57 | - <img src="../assets/images/user-2-set.svg" class="user-t-2" /> | |
| 58 | - <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> | |
| 59 | - <ul class="rly-comment-set"> | |
| 60 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 61 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 62 | - </ul> | |
| 63 | - </div><!-- comments box --> | |
| 64 | - </div><!-- single author comments --> | |
| 65 | - </div><!-- single mobile Right insight --> | |
| 66 | - </div><!-- Single Mobile Insight --> | |
| 67 | - <div class="footer-nav"> | |
| 68 | - <div class="footer-top white-bg"> | |
| 69 | - <div class="row"> | |
| 70 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 71 | - <div class="row h-100p"> | |
| 72 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 73 | - <ul class="top-intro-bt"> | |
| 74 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 75 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 76 | - </ul> | |
| 77 | - </div> | |
| 78 | - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> | |
| 79 | - <div class="ft-comments-group no-comment-count"> | |
| 80 | - <div class="row"> | |
| 81 | - | |
| 82 | - <div class="col-12"> | |
| 83 | - <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | |
| 84 | - <div class="comments-detail"> | |
| 85 | - <span class="no-c-yet">No comments yet</span> | |
| 86 | - <p>Be the first one to post a comment to start a discussion</p> | |
| 87 | - </div><!-- comments detail --> | |
| 88 | - </div> </div> | |
| 89 | - </div><!-- comments Group --> | |
| 90 | - </div></div> | |
| 91 | - </div> | |
| 92 | - <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | |
| 93 | - | |
| 94 | - <div class="comment-frm no-c-frm"> | |
| 95 | - <div class="row"> | |
| 96 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 97 | - <div class="form-group frm-wdth"> | |
| 98 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 99 | - </div></div> | |
| 100 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 101 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 102 | - </div> | |
| 103 | - </div><!-- comment from --> | |
| 104 | - </div> </div></div> | |
| 105 | - </div><!-- footer top --> | |
| 106 | - <div class="footer-bottom"> | |
| 107 | - <ul> | |
| 108 | - <li class="active"></li> | |
| 109 | - <li></li> | |
| 110 | - </ul> | |
| 111 | - </div><!-- footer top --> | |
| 112 | - </div><!-- footer --> | |
| 113 | - | |
| 114 | - </div> | |
| 115 | - <!-- body wrapper --> | |
| 116 | - </div> | |
| 117 | - <!-- main wrapper --> | |
| 118 | - </main> | |
| 119 | -</template> | |
| 120 | - | |
| 121 | -<script> | |
| 122 | -import Vue from "vue"; | |
| 123 | -import router from "../router"; | |
| 124 | - | |
| 125 | -export default { | |
| 126 | - name: "SingleMobileScreenChatComments", | |
| 127 | - | |
| 128 | - data() { | |
| 129 | - return {}; | |
| 130 | - }, | |
| 131 | - mounted() {}, | |
| 132 | - methods: { | |
| 133 | - goToLogin() { | |
| 134 | - this.$router.push("/"); | |
| 135 | - }, | |
| 136 | - goToSignUp() { | |
| 137 | - this.$router.push("/signup"); | |
| 138 | - }, | |
| 139 | - | |
| 140 | - }, | |
| 141 | -}; | |
| 142 | -</script> | |
| 143 | 0 | \ No newline at end of file |
src/components/SingleMobileScreenInsightOne.vue
| ... | ... | @@ -1,321 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <!-- chat box --> | |
| 19 | - <div class="bounce-board-wrp" id="cht_box_close"> | |
| 20 | - <div class="inner-wrp-bc"> | |
| 21 | -<div class="bc-top-head"> | |
| 22 | - <span class="bc-head"> | |
| 23 | - <img src="../assets/images/bounce-icon.svg" /> Bounce Board | |
| 24 | - </span> | |
| 25 | - <div class="action-sort"> | |
| 26 | - <span class="sort-by">SORT BY</span> <div class="btn-group"> | |
| 27 | - <button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| 28 | - BEST | |
| 29 | - </button> | |
| 30 | - <div class="dropdown-menu short_by"> | |
| 31 | - <a class="dropdown-item" href="#">BEST 1</a> | |
| 32 | - <a class="dropdown-item" href="#">BEST 2</a> | |
| 33 | - <a class="dropdown-item" href="#">BEST 3</a> | |
| 34 | - </div> | |
| 35 | -</div> | |
| 36 | -<a href="javasript:void(0);" @click="chtbox_close" class="close_chat_bx"><img src="../assets/images/close.png" alt="close" /></a><!-- close --> | |
| 37 | - </div><!-- action sort --> | |
| 38 | - </div><!-- top head --> | |
| 39 | -<div class="bounce-board-body"> | |
| 40 | - <ul class="bounced-user-comments"> | |
| 41 | -<li class="bc_border"> | |
| 42 | - <div class="lbord"></div><!-- border --> | |
| 43 | - <div class="parent-full-width parent_bg"> | |
| 44 | - <div class="full-width"> | |
| 45 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 46 | - <span class="head-content">wanderingirl </span> | |
| 47 | -<ul> | |
| 48 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 49 | - <li> <span></span>3days ago</li> | |
| 50 | - <li> <span class="au">Author</span></li> | |
| 51 | -</ul> | |
| 52 | - | |
| 53 | - | |
| 54 | - </div><!-- header --> | |
| 55 | - <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> | |
| 56 | - <div class="joined_wrapper"> | |
| 57 | - <ul class="joined-info info_bc_spc"> | |
| 58 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 59 | - <li> <a href="#"> 4</a> </li> | |
| 60 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 61 | - <li> <a href="#"> 6</a> </li> | |
| 62 | - </ul> | |
| 63 | - <div class="add_rply"> | |
| 64 | - <input type="text" placeholder="Add your reply" /> | |
| 65 | - </div><!-- rly form --> | |
| 66 | - </div><!-- joined wrapper --> | |
| 67 | - </div><!-- full width --> | |
| 68 | - </div><!-- parent --> | |
| 69 | - <div class="child-full-width"> | |
| 70 | - <div class="full-width"> | |
| 71 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 72 | - <span class="head-content">Onenoisyboi </span> | |
| 73 | -<ul> | |
| 74 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 75 | - <li> <span></span>3days ago</li> | |
| 76 | - <li> <span class="red">Mod</span></li> | |
| 77 | -</ul> | |
| 78 | - | |
| 79 | - | |
| 80 | - </div><!-- header --> | |
| 81 | - <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | |
| 82 | - <div class="joined_wrapper"> | |
| 83 | - <ul class="joined-info info_bc_spc"> | |
| 84 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 85 | - <li> <a href="#"> 4</a> </li> | |
| 86 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 87 | - <li> <a href="#"> 6</a> </li> | |
| 88 | - </ul> | |
| 89 | - <div class="add_rply"> | |
| 90 | - <input type="text" placeholder="Add your reply" /> | |
| 91 | - </div><!-- rly form --> | |
| 92 | - </div><!-- joined wrapper --> | |
| 93 | - </div><!-- full width --> | |
| 94 | - </div><!-- child wrapper --> | |
| 95 | -</li> | |
| 96 | - | |
| 97 | - </ul><!-- all user comments --> | |
| 98 | - <ul class="bounced-user-comments"> | |
| 99 | -<li class="bc_border"> | |
| 100 | - <div class="bc_brd_l"></div><!-- border --> | |
| 101 | - <div class="parent-full-width "> | |
| 102 | - <div class="full-width"> | |
| 103 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 104 | - <span class="head-content">wanderingirl </span> | |
| 105 | -<ul> | |
| 106 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 107 | - <li> <span></span>3days ago</li> | |
| 108 | - | |
| 109 | -</ul> | |
| 110 | - | |
| 111 | - | |
| 112 | - </div><!-- header --> | |
| 113 | - <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> | |
| 114 | - <div class="joined_wrapper"> | |
| 115 | - <ul class="joined-info info_bc_spc"> | |
| 116 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 117 | - <li> <a href="#"> 4</a> </li> | |
| 118 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 119 | - <li> <a href="#"> 6</a> </li> | |
| 120 | - </ul> | |
| 121 | - <div class="add_rply"> | |
| 122 | - <input type="text" placeholder="Add your reply" /> | |
| 123 | - </div><!-- rly form --> | |
| 124 | - </div><!-- joined wrapper --> | |
| 125 | - </div><!-- full width --> | |
| 126 | - </div><!-- parent --> | |
| 127 | - <div class="child-full-width"> | |
| 128 | - <div class="full-width"> | |
| 129 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 130 | - <span class="head-content">Onenoisyboi </span> | |
| 131 | -<ul> | |
| 132 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 133 | - <li> <span></span>3days ago</li> | |
| 134 | - | |
| 135 | -</ul> | |
| 136 | - | |
| 137 | - | |
| 138 | - </div><!-- header --> | |
| 139 | - <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | |
| 140 | - <div class="joined_wrapper"> | |
| 141 | - <ul class="joined-info info_bc_spc"> | |
| 142 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 143 | - <li> <a href="#"> 4</a> </li> | |
| 144 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 145 | - <li> <a href="#"> 6</a> </li> | |
| 146 | - </ul> | |
| 147 | - <div class="add_rply"> | |
| 148 | - <input type="text" placeholder="Add your reply" /> | |
| 149 | - </div><!-- rly form --> | |
| 150 | - </div><!-- joined wrapper --> | |
| 151 | - </div><!-- full width --> | |
| 152 | - </div><!-- child wrapper --> | |
| 153 | - <div class="child-full-width"> | |
| 154 | - <div class="full-width"> | |
| 155 | - <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | |
| 156 | - <span class="head-content">Onenoisyboi </span> | |
| 157 | -<ul> | |
| 158 | - <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | |
| 159 | - <li> <span></span>3days ago</li> | |
| 160 | - | |
| 161 | -</ul> | |
| 162 | - | |
| 163 | - | |
| 164 | - </div><!-- header --> | |
| 165 | - <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | |
| 166 | - <div class="joined_wrapper"> | |
| 167 | - <ul class="joined-info info_bc_spc"> | |
| 168 | - <li> <img src="../assets/images/purple-heart.png"> </li> | |
| 169 | - <li> <a href="#"> 4</a> </li> | |
| 170 | - <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | |
| 171 | - <li> <a href="#"> 6</a> </li> | |
| 172 | - </ul> | |
| 173 | - <div class="add_rply"> | |
| 174 | - <input type="text" placeholder="Add your reply" /> | |
| 175 | - </div><!-- rly form --> | |
| 176 | - </div><!-- joined wrapper --> | |
| 177 | - </div><!-- full width --> | |
| 178 | - </div><!-- child wrapper --> | |
| 179 | -</li> | |
| 180 | - | |
| 181 | - </ul><!-- all user comments --> | |
| 182 | - </div><!-- bounce board body --> | |
| 183 | - <div class="comments-footer"> | |
| 184 | - <textarea></textarea> | |
| 185 | - <div class="comments-footer-wrp"> | |
| 186 | - <a href="#" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 187 | - </div> | |
| 188 | - </div><!-- comments footer --> | |
| 189 | - </div> | |
| 190 | - </div><!-- bounceboard wrp --> | |
| 191 | - <!-- chat box --> | |
| 192 | - <div class="single-mobileInsight"> | |
| 193 | - <img src="../assets/images/slide.png" class="slide-img" /> | |
| 194 | - <div class="single-left-Insight-comments"> | |
| 195 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 196 | - <div class="single-author-li-comments"> | |
| 197 | - <div class="a-intro-comments custom-c-style"> | |
| 198 | - <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> | |
| 199 | - <ul class="rly-comment-set"> | |
| 200 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 201 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 202 | - </ul> | |
| 203 | - </div><!-- comments box --> | |
| 204 | - </div><!-- single author comments --> | |
| 205 | - <div class="single-author-li-comments"> | |
| 206 | - <div class="a-intro-comments custom-c-style"> | |
| 207 | - <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> | |
| 208 | - <ul class="rly-comment-set"> | |
| 209 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 210 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 211 | - </ul> | |
| 212 | - </div><!-- comments box --> | |
| 213 | - </div><!-- single author comments --> | |
| 214 | - </div><!-- single mobile Left insight --> | |
| 215 | - <div class="c-product-insight-wrp"> | |
| 216 | - <div class="single-author-li-comments "> | |
| 217 | - <div class="a-intro-comments custom-selected-style"> | |
| 218 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 219 | - <div class="top-wrp"> | |
| 220 | - PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 221 | - </div> | |
| 222 | - <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> | |
| 223 | - <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. | |
| 224 | -<br><br> | |
| 225 | -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> | |
| 226 | -</p> | |
| 227 | -<div class="footer"> | |
| 228 | - <a href="#" class="cit-16">16 Citations</a> | |
| 229 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 230 | - </div><!-- footer --> | |
| 231 | - | |
| 232 | - </div><!-- comments box --> | |
| 233 | - </div><!-- single author comments --> | |
| 234 | - | |
| 235 | - </div><!-- single mobile Right insight --> | |
| 236 | - </div><!-- Single Mobile Insight --> | |
| 237 | - <div class="footer-nav"> | |
| 238 | - <div class="footer-top white-bg"> | |
| 239 | - <div class="row"> | |
| 240 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 241 | - <div class="row h-100p"> | |
| 242 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 243 | - <ul class="top-intro-bt"> | |
| 244 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 245 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 246 | - </ul> | |
| 247 | - </div> | |
| 248 | - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r c_hide"> | |
| 249 | - <div class="ft-comments-group no-comment-count "> | |
| 250 | - <div class="row"> | |
| 251 | - | |
| 252 | - <div class="col-12"> | |
| 253 | - <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | |
| 254 | - <div class="comments-detail"> | |
| 255 | - <span class="no-c-yet">No comments yet</span> | |
| 256 | - <p>Be the first one to post a comment to start a discussion</p> | |
| 257 | - </div><!-- comments detail --> | |
| 258 | - </div> </div> | |
| 259 | - </div><!-- comments Group --> | |
| 260 | - </div></div> | |
| 261 | - </div> | |
| 262 | - <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | |
| 263 | - | |
| 264 | - <div class="comment-frm no-c-frm"> | |
| 265 | - <div class="row"> | |
| 266 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 267 | - <div class="form-group frm-wdth"> | |
| 268 | - <input type="text" class="form-control" @click="open_ct_box" placeholder="Kathy, Something on your mind?" id="open_ct_box"> | |
| 269 | - </div></div> | |
| 270 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 271 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 272 | - </div> | |
| 273 | - </div><!-- comment from --> | |
| 274 | - </div> </div></div> | |
| 275 | - </div><!-- footer top --> | |
| 276 | - <div class="footer-bottom"> | |
| 277 | - <ul> | |
| 278 | - <li class="active"></li> | |
| 279 | - <li></li> | |
| 280 | - </ul> | |
| 281 | - </div><!-- footer top --> | |
| 282 | - </div><!-- footer --> | |
| 283 | - | |
| 284 | - </div> | |
| 285 | - <!-- body wrapper --> | |
| 286 | - </div> | |
| 287 | - <!-- main wrapper --> | |
| 288 | - </main> | |
| 289 | -</template> | |
| 290 | - | |
| 291 | -<script> | |
| 292 | -import Vue from "vue"; | |
| 293 | -import router from "../router"; | |
| 294 | - | |
| 295 | -export default { | |
| 296 | - name: "SingleMobileScreenInsightOne", | |
| 297 | - | |
| 298 | - data() { | |
| 299 | - return {}; | |
| 300 | - }, | |
| 301 | - mounted() {}, | |
| 302 | - methods: { | |
| 303 | - goToLogin() { | |
| 304 | - this.$router.push("/"); | |
| 305 | - }, | |
| 306 | - goToSignUp() { | |
| 307 | - this.$router.push("/signup"); | |
| 308 | - }, | |
| 309 | - chtbox_close(){ | |
| 310 | -$("#cht_box_close").removeClass("cht_close"); | |
| 311 | -$("#open_ct_box, .c_hide").show(); | |
| 312 | -$(".footer-top").addClass("white-bg"); | |
| 313 | - }, | |
| 314 | - open_ct_box(){ | |
| 315 | -$("#cht_box_close").addClass("cht_close"); | |
| 316 | -$("#open_ct_box, .c_hide").hide(); | |
| 317 | -$(".footer-top").removeClass("white-bg"); | |
| 318 | - }, | |
| 319 | - }, | |
| 320 | -}; | |
| 321 | -</script> |
src/components/SingleScreengrabOneInsight.vue
| ... | ... | @@ -1,130 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="screengrab-wrp"> | |
| 19 | - <img src="../assets/images/saved-for-letter.png" /> | |
| 20 | - <div class="single-left-Insight-comments screengrab-lspc"> | |
| 21 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 22 | - <div class="single-author-li-comments"> | |
| 23 | - <div class="a-intro-comments custom-c-style"> | |
| 24 | - <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> | |
| 25 | - <ul class="rly-comment-set"> | |
| 26 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 27 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 28 | - </ul> | |
| 29 | - </div><!-- comments box --> | |
| 30 | - </div><!-- single author comments --> | |
| 31 | - | |
| 32 | - </div><!-- single mobile Left insight --> | |
| 33 | - <div class="c-product-insight-wrp screengrab-rspc"> | |
| 34 | - <div class="single-author-li-comments "> | |
| 35 | - <div class="a-intro-comments custom-selected-style"> | |
| 36 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 37 | - <div class="top-wrp"> | |
| 38 | - PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 39 | - </div> | |
| 40 | - <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> | |
| 41 | - <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. | |
| 42 | -<br><br> | |
| 43 | -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> | |
| 44 | -</p> | |
| 45 | -<div class="footer"> | |
| 46 | - <a href="#" class="cit-16">16 Citations</a> | |
| 47 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 48 | - </div><!-- footer --> | |
| 49 | - | |
| 50 | - </div><!-- comments box --> | |
| 51 | - </div><!-- single author comments --> | |
| 52 | - | |
| 53 | - </div><!-- single mobile Right insight --> | |
| 54 | - </div><!-- Single Mobile Insight --> | |
| 55 | - <div class="footer-nav"> | |
| 56 | - <div class="footer-top white-bg"> | |
| 57 | - <div class="row"> | |
| 58 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 59 | - <div class="row h-100p"> | |
| 60 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 61 | - <ul class="top-intro-bt"> | |
| 62 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 63 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 64 | - </ul> | |
| 65 | - </div> | |
| 66 | - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> | |
| 67 | - <div class="ft-comments-group no-comment-count"> | |
| 68 | - <div class="row"> | |
| 69 | - | |
| 70 | - <div class="col-12"> | |
| 71 | - <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | |
| 72 | - <div class="comments-detail"> | |
| 73 | - <span class="no-c-yet">No comments yet</span> | |
| 74 | - <p>Be the first one to post a comment to start a discussion</p> | |
| 75 | - </div><!-- comments detail --> | |
| 76 | - </div> </div> | |
| 77 | - </div><!-- comments Group --> | |
| 78 | - </div></div> | |
| 79 | - </div> | |
| 80 | - <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | |
| 81 | - | |
| 82 | - <div class="comment-frm no-c-frm"> | |
| 83 | - <div class="row"> | |
| 84 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 85 | - <div class="form-group frm-wdth"> | |
| 86 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 87 | - </div></div> | |
| 88 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 89 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 90 | - </div> | |
| 91 | - </div><!-- comment from --> | |
| 92 | - </div> </div></div> | |
| 93 | - </div><!-- footer top --> | |
| 94 | - <div class="footer-bottom"> | |
| 95 | - <ul> | |
| 96 | - <li class="active"></li> | |
| 97 | - <li></li> | |
| 98 | - </ul> | |
| 99 | - </div><!-- footer top --> | |
| 100 | - </div><!-- footer --> | |
| 101 | - | |
| 102 | - </div> | |
| 103 | - <!-- body wrapper --> | |
| 104 | - </div> | |
| 105 | - <!-- main wrapper --> | |
| 106 | - </main> | |
| 107 | -</template> | |
| 108 | - | |
| 109 | -<script> | |
| 110 | -import Vue from "vue"; | |
| 111 | -import router from "../router"; | |
| 112 | - | |
| 113 | -export default { | |
| 114 | - name: "SingleScreengrabOneInsight", | |
| 115 | - | |
| 116 | - data() { | |
| 117 | - return {}; | |
| 118 | - }, | |
| 119 | - mounted() {}, | |
| 120 | - methods: { | |
| 121 | - goToLogin() { | |
| 122 | - this.$router.push("/"); | |
| 123 | - }, | |
| 124 | - goToSignUp() { | |
| 125 | - this.$router.push("/signup"); | |
| 126 | - }, | |
| 127 | - | |
| 128 | - }, | |
| 129 | -}; | |
| 130 | -</script> |
src/components/SingleWebScreenInsightOne.vue
| ... | ... | @@ -1,130 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="s-web-screen-wrp"> | |
| 19 | - | |
| 20 | - <div class="single-left-Insight-comments web-comment-spc"> | |
| 21 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 22 | - <div class="single-author-li-comments "> | |
| 23 | - <div class="a-intro-comments custom-c-style"> | |
| 24 | - <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> | |
| 25 | - <ul class="rly-comment-set"> | |
| 26 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 27 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 28 | - </ul> | |
| 29 | - </div><!-- comments box --> | |
| 30 | - </div><!-- single author comments --> | |
| 31 | - | |
| 32 | - </div><!-- single mobile Left insight --> | |
| 33 | - <div class="c-product-insight-wrp web-ps-insight-spc"> | |
| 34 | - <div class="single-author-li-comments "> | |
| 35 | - <div class="a-intro-comments custom-selected-style"> | |
| 36 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 37 | - <div class="top-wrp"> | |
| 38 | - PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 39 | - </div> | |
| 40 | - <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> | |
| 41 | - <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. | |
| 42 | -<br><br> | |
| 43 | -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> | |
| 44 | -</p> | |
| 45 | -<div class="footer"> | |
| 46 | - <a href="#" class="cit-16">16 Citations</a> | |
| 47 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 48 | - </div><!-- footer --> | |
| 49 | - | |
| 50 | - </div><!-- comments box --> | |
| 51 | - </div><!-- single author comments --> | |
| 52 | - | |
| 53 | - </div><!-- single mobile Right insight --> | |
| 54 | - </div><!-- Single Mobile Insight --> | |
| 55 | - <div class="footer-nav"> | |
| 56 | - <div class="footer-top white-bg"> | |
| 57 | - <div class="row"> | |
| 58 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 59 | - <div class="row h-100p"> | |
| 60 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 61 | - <ul class="top-intro-bt"> | |
| 62 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 63 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 64 | - </ul> | |
| 65 | - </div> | |
| 66 | - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> | |
| 67 | - <div class="ft-comments-group no-comment-count"> | |
| 68 | - <div class="row"> | |
| 69 | - | |
| 70 | - <div class="col-12"> | |
| 71 | - <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | |
| 72 | - <div class="comments-detail"> | |
| 73 | - <span class="no-c-yet">No comments yet</span> | |
| 74 | - <p>Be the first one to post a comment to start a discussion</p> | |
| 75 | - </div><!-- comments detail --> | |
| 76 | - </div> </div> | |
| 77 | - </div><!-- comments Group --> | |
| 78 | - </div></div> | |
| 79 | - </div> | |
| 80 | - <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | |
| 81 | - | |
| 82 | - <div class="comment-frm no-c-frm"> | |
| 83 | - <div class="row"> | |
| 84 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 85 | - <div class="form-group frm-wdth"> | |
| 86 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 87 | - </div></div> | |
| 88 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 89 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 90 | - </div> | |
| 91 | - </div><!-- comment from --> | |
| 92 | - </div> </div></div> | |
| 93 | - </div><!-- footer top --> | |
| 94 | - <div class="footer-bottom"> | |
| 95 | - <ul> | |
| 96 | - <li class="active"></li> | |
| 97 | - <li></li> | |
| 98 | - </ul> | |
| 99 | - </div><!-- footer top --> | |
| 100 | - </div><!-- footer --> | |
| 101 | - | |
| 102 | - </div> | |
| 103 | - <!-- body wrapper --> | |
| 104 | - </div> | |
| 105 | - <!-- main wrapper --> | |
| 106 | - </main> | |
| 107 | -</template> | |
| 108 | - | |
| 109 | -<script> | |
| 110 | -import Vue from "vue"; | |
| 111 | -import router from "../router"; | |
| 112 | - | |
| 113 | -export default { | |
| 114 | - name: "SingleWebScreenInsightOne", | |
| 115 | - | |
| 116 | - data() { | |
| 117 | - return {}; | |
| 118 | - }, | |
| 119 | - mounted() {}, | |
| 120 | - methods: { | |
| 121 | - goToLogin() { | |
| 122 | - this.$router.push("/"); | |
| 123 | - }, | |
| 124 | - goToSignUp() { | |
| 125 | - this.$router.push("/signup"); | |
| 126 | - }, | |
| 127 | - | |
| 128 | - }, | |
| 129 | -}; | |
| 130 | -</script> |
src/components/ToAddYourComment.vue
| ... | ... | @@ -1,115 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="single-mobileInsight"> | |
| 19 | - <img src="../assets/images/slide.png" class="slide-img" /> | |
| 20 | - <div class="single-left-Insight-comments"> | |
| 21 | - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | |
| 22 | - <div class="single-author-li-comments"> | |
| 23 | - <div class="a-intro-comments custom-c-style"> | |
| 24 | - <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> | |
| 25 | - <ul class="rly-comment-set"> | |
| 26 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 27 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 28 | - </ul> | |
| 29 | - </div><!-- comments box --> | |
| 30 | - </div><!-- single author comments --> | |
| 31 | - <div class="single-author-li-comments"> | |
| 32 | - <div class="a-intro-comments custom-c-style"> | |
| 33 | - <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> | |
| 34 | - <ul class="rly-comment-set"> | |
| 35 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 36 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 37 | - </ul> | |
| 38 | - </div><!-- comments box --> | |
| 39 | - </div><!-- single author comments --> | |
| 40 | - </div><!-- single mobile Left insight --> | |
| 41 | - <div class="c-product-insight-wrp add_comments-spc_r"> | |
| 42 | - <div class="single-author-li-comments "> | |
| 43 | - <div class="a-intro-comments custom-selected-style"> | |
| 44 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 45 | - <div class="top-wrp"> | |
| 46 | - PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 47 | - </div> | |
| 48 | - <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> | |
| 49 | - <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. | |
| 50 | -<br><br> | |
| 51 | -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> | |
| 52 | -</p> | |
| 53 | -<div class="footer"> | |
| 54 | - <a href="#" class="cit-16">16 Citations</a> | |
| 55 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 56 | - </div><!-- footer --> | |
| 57 | - | |
| 58 | - </div><!-- comments box --> | |
| 59 | - </div><!-- single author comments --> | |
| 60 | - <a href="#" class="add-comments-bt"><img src="../assets/images/rotate.svg" /> To add your comment</a> | |
| 61 | - </div><!-- single mobile Right insight --> | |
| 62 | - </div><!-- Single Mobile Insight --> | |
| 63 | - <div class="footer-nav"> | |
| 64 | - <div class="footer-top"> | |
| 65 | - <div class="row"> | |
| 66 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 67 | - <div class="row h-100p"> | |
| 68 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 69 | - <ul class="top-intro-bt"> | |
| 70 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 71 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Next</a></li> | |
| 72 | - </ul> | |
| 73 | - </div> | |
| 74 | - | |
| 75 | - </div> | |
| 76 | - </div> | |
| 77 | - </div> | |
| 78 | - </div><!-- footer top --> | |
| 79 | - <div class="footer-bottom"> | |
| 80 | - <ul> | |
| 81 | - <li class=""></li> | |
| 82 | - <li></li> | |
| 83 | - </ul> | |
| 84 | - </div><!-- footer top --> | |
| 85 | - </div><!-- footer --> | |
| 86 | - | |
| 87 | - </div> | |
| 88 | - <!-- body wrapper --> | |
| 89 | - </div> | |
| 90 | - <!-- main wrapper --> | |
| 91 | - </main> | |
| 92 | -</template> | |
| 93 | - | |
| 94 | -<script> | |
| 95 | -import Vue from "vue"; | |
| 96 | -import router from "../router"; | |
| 97 | - | |
| 98 | -export default { | |
| 99 | - name: "ToAddYourComment", | |
| 100 | - | |
| 101 | - data() { | |
| 102 | - return {}; | |
| 103 | - }, | |
| 104 | - mounted() {}, | |
| 105 | - methods: { | |
| 106 | - goToLogin() { | |
| 107 | - this.$router.push("/"); | |
| 108 | - }, | |
| 109 | - goToSignUp() { | |
| 110 | - this.$router.push("/signup"); | |
| 111 | - }, | |
| 112 | - | |
| 113 | - }, | |
| 114 | -}; | |
| 115 | -</script> |
src/components/TwoAuthor.vue
| ... | ... | @@ -1,98 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="smasung-g-10wrp"> | |
| 19 | - <div class="author-two"> | |
| 20 | - <div class="comment-box-s-1 custom-2-author"> | |
| 21 | - <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> | |
| 22 | - <div class="footer"> | |
| 23 | - <img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a> | |
| 24 | - </div><!-- footer --> | |
| 25 | - </div><!-- comment box 1 --> | |
| 26 | - | |
| 27 | - <div class="user-photo"> | |
| 28 | - <img src="../assets/images/author-two.svg" class="author-two-photo" /> | |
| 29 | - </div> | |
| 30 | - </div><!-- comment box --> | |
| 31 | - <div class="samsung-compare-c"> | |
| 32 | - <div class="logo-1"><img src="../assets/images/logo-1.png" /></div><!-- logo 1 --> | |
| 33 | - <div class="vs">vs</div><!-- vs --> | |
| 34 | - <div class="logo-2"><img src="../assets/images/logo-2.png" /></div><!-- logo 2 --> | |
| 35 | - </div><!-- compare --> | |
| 36 | - | |
| 37 | - <div class="comment-box author-one"> | |
| 38 | - <div class="comment-box-s-1"> | |
| 39 | - <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> | |
| 40 | - <div class="footer"> | |
| 41 | - <img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a> | |
| 42 | - </div><!-- footer --> | |
| 43 | - </div><!-- comment box 1 --> | |
| 44 | - <div class="comment-box-s-1 comment-w-397"> | |
| 45 | - <p> | |
| 46 | - Use arrow keys to navigate <br/> | |
| 47 | -<img src="../assets/images/key-arrow.jpg" class="key-arrow" /> | |
| 48 | - </p> | |
| 49 | - </div><!-- comment box 1 --> | |
| 50 | - <div class="user-photo"> | |
| 51 | - <img src="../assets/images/comment-photo.png" /> | |
| 52 | - </div> | |
| 53 | - </div><!-- comment box --> | |
| 54 | - </div><!-- samsung g 10 --> | |
| 55 | - <div class="footer-nav"> | |
| 56 | - <div class="footer-top"> | |
| 57 | - <ul class="top-intro-bt"> | |
| 58 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 59 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 60 | - </ul> | |
| 61 | - </div><!-- footer top --> | |
| 62 | - <div class="footer-bottom"> | |
| 63 | - <ul> | |
| 64 | - <li></li> | |
| 65 | - <li></li> | |
| 66 | - </ul> | |
| 67 | - </div><!-- footer top --> | |
| 68 | - </div><!-- footer --> | |
| 69 | - | |
| 70 | - </div> | |
| 71 | - <!-- body wrapper --> | |
| 72 | - </div> | |
| 73 | - <!-- main wrapper --> | |
| 74 | - </main> | |
| 75 | -</template> | |
| 76 | - | |
| 77 | -<script> | |
| 78 | -import Vue from "vue"; | |
| 79 | -import router from "../router"; | |
| 80 | - | |
| 81 | -export default { | |
| 82 | - name: "TwoAuthor", | |
| 83 | - | |
| 84 | - data() { | |
| 85 | - return {}; | |
| 86 | - }, | |
| 87 | - mounted() {}, | |
| 88 | - methods: { | |
| 89 | - goToLogin() { | |
| 90 | - this.$router.push("/"); | |
| 91 | - }, | |
| 92 | - goToSignUp() { | |
| 93 | - this.$router.push("/signup"); | |
| 94 | - }, | |
| 95 | - | |
| 96 | - }, | |
| 97 | -}; | |
| 98 | -</script> |
src/components/TwoAuthorDesktop.vue
| ... | ... | @@ -1,96 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="two-author-desktop"> | |
| 19 | - <div class="author-two-desktop"> | |
| 20 | - <div class="comment-box-s-1 custom-2-author"> | |
| 21 | - <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> | |
| 22 | - <div class="footer"> | |
| 23 | - <img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a> | |
| 24 | - </div><!-- footer --> | |
| 25 | - </div><!-- comment box 1 --> | |
| 26 | - | |
| 27 | - <div class="user-photo"> | |
| 28 | - <img src="../assets/images/author-two.svg" class="author-two-photo" /> | |
| 29 | - </div> | |
| 30 | - </div><!-- comment box --> | |
| 31 | - <div class="samsung-compare-c desktop-two-logo-spc"> | |
| 32 | - <div class="logo-1"><img src="../assets/images/segment.png" /></div><!-- logo 1 --> | |
| 33 | - </div><!-- compare --> | |
| 34 | - | |
| 35 | - <div class="comment-box author-one-desktop"> | |
| 36 | - <div class="comment-box-s-1"> | |
| 37 | - <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> | |
| 38 | - <div class="footer"> | |
| 39 | - <img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a> | |
| 40 | - </div><!-- footer --> | |
| 41 | - </div><!-- comment box 1 --> | |
| 42 | - <div class="comment-box-s-1 comment-w-397"> | |
| 43 | - <p> | |
| 44 | - Use arrow keys to navigate <br/> | |
| 45 | -<img src="../assets/images/key-arrow.jpg" class="key-arrow" /> | |
| 46 | - </p> | |
| 47 | - </div><!-- comment box 1 --> | |
| 48 | - <div class="user-photo"> | |
| 49 | - <img src="../assets/images/comment-photo.png" /> | |
| 50 | - </div> | |
| 51 | - </div><!-- comment box --> | |
| 52 | - </div><!-- samsung g 10 --> | |
| 53 | - <div class="footer-nav"> | |
| 54 | - <div class="footer-top"> | |
| 55 | - <ul class="top-intro-bt"> | |
| 56 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 57 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 58 | - </ul> | |
| 59 | - </div><!-- footer top --> | |
| 60 | - <div class="footer-bottom"> | |
| 61 | - <ul> | |
| 62 | - <li></li> | |
| 63 | - <li></li> | |
| 64 | - </ul> | |
| 65 | - </div><!-- footer top --> | |
| 66 | - </div><!-- footer --> | |
| 67 | - | |
| 68 | - </div> | |
| 69 | - <!-- body wrapper --> | |
| 70 | - </div> | |
| 71 | - <!-- main wrapper --> | |
| 72 | - </main> | |
| 73 | -</template> | |
| 74 | - | |
| 75 | -<script> | |
| 76 | -import Vue from "vue"; | |
| 77 | -import router from "../router"; | |
| 78 | - | |
| 79 | -export default { | |
| 80 | - name: "TwoAuthorDesktop", | |
| 81 | - | |
| 82 | - data() { | |
| 83 | - return {}; | |
| 84 | - }, | |
| 85 | - mounted() {}, | |
| 86 | - methods: { | |
| 87 | - goToLogin() { | |
| 88 | - this.$router.push("/"); | |
| 89 | - }, | |
| 90 | - goToSignUp() { | |
| 91 | - this.$router.push("/signup"); | |
| 92 | - }, | |
| 93 | - | |
| 94 | - }, | |
| 95 | -}; | |
| 96 | -</script> |
src/components/TwoAuthorReadingNow.vue
| ... | ... | @@ -1,74 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid episode-intro app-discovery-bg"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 6 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 7 | - <span class="navbar-toggler-icon"></span> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - </button> | |
| 11 | - <div class="user-profile-photo insights-profile"> | |
| 12 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 13 | - </div> | |
| 14 | - </nav> | |
| 15 | - <!-- menu wrapper --> | |
| 16 | - <div class="intro-startup"> | |
| 17 | - <div class="spot-light-top"> | |
| 18 | - <img src="../assets/images/spot-light-top.svg" /> | |
| 19 | - <div class="app-discovery"> | |
| 20 | - <div class="top-user"> | |
| 21 | - <img src="../assets/images/app-photo.svg" /> | |
| 22 | - </div><!-- top user --> | |
| 23 | - <h1 class="author-two-head-spc">App Discovery</h1> | |
| 24 | - <h2>01</h2> | |
| 25 | - <img src="../assets/images/author-t.svg" class="author-app-img" /> | |
| 26 | - <img src="../assets/images/discovery.svg" class="discovery-app-img" /> | |
| 27 | - </div><!-- app Disovery --> | |
| 28 | - | |
| 29 | - </div><!-- spot light top --> | |
| 30 | - <img src="../assets/images/popcorn-set.svg" class="popcorn-set" /> | |
| 31 | - <div class="footer-nav"> | |
| 32 | - <div class="footer-top"> | |
| 33 | - <ul class="top-intro-bt"> | |
| 34 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 35 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- footer top --> | |
| 38 | - <div class="footer-bottom"> | |
| 39 | - <ul> | |
| 40 | - <li class="active"></li> | |
| 41 | - <li></li> | |
| 42 | - </ul> | |
| 43 | - </div><!-- footer top --> | |
| 44 | - </div><!-- footer --> | |
| 45 | - | |
| 46 | - </div> | |
| 47 | - <!-- body wrapper --> | |
| 48 | - </div> | |
| 49 | - <!-- main wrapper --> | |
| 50 | - </main> | |
| 51 | -</template> | |
| 52 | - | |
| 53 | -<script> | |
| 54 | -import Vue from "vue"; | |
| 55 | -import router from "../router"; | |
| 56 | - | |
| 57 | -export default { | |
| 58 | - name: "TwoAuthorReadingNow", | |
| 59 | - | |
| 60 | - data() { | |
| 61 | - return {}; | |
| 62 | - }, | |
| 63 | - mounted() {}, | |
| 64 | - methods: { | |
| 65 | - goToLogin() { | |
| 66 | - this.$router.push("/"); | |
| 67 | - }, | |
| 68 | - goToSignUp() { | |
| 69 | - this.$router.push("/signup"); | |
| 70 | - }, | |
| 71 | - | |
| 72 | - }, | |
| 73 | -}; | |
| 74 | -</script> |
src/components/TwoScreenWithInsight.vue
| ... | ... | @@ -1,144 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="allMWrp"> | |
| 19 | -<div class="mobile-screen-one p-left"> | |
| 20 | - <div class="m-screen-comments"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 24 | - <ul class="rly-comment-set"> | |
| 25 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 26 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 27 | - </ul> | |
| 28 | - </div><!-- comments box --> | |
| 29 | - </div><!-- single author comments --> | |
| 30 | - <div class="single-author-li-comments"> | |
| 31 | - <div class="a-intro-comments"> | |
| 32 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 33 | - <ul class="rly-comment-set"> | |
| 34 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 35 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- comments box --> | |
| 38 | - </div><!-- single author comments --> | |
| 39 | - </div><!-- comments --> | |
| 40 | - <img src="../assets/images/help-screen.png" class="m-screen" /> | |
| 41 | - <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> | |
| 42 | - </div><!-- mobile screen one --> | |
| 43 | - <div class="mobile-screen-one p-right"> | |
| 44 | - <div class="view-ticket-wrp-ps"> | |
| 45 | - <div class="single-author-li-comments "> | |
| 46 | - <div class="a-intro-comments custom-selected-style"> | |
| 47 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 48 | - <div class="top-wrp"> | |
| 49 | - Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 50 | - </div> | |
| 51 | - <div class="top-head">Jakob’s law</div> | |
| 52 | - <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> | |
| 53 | -<div class="footer"> | |
| 54 | - <a href="#" class="cit-16">16 Citations</a> | |
| 55 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 56 | - </div><!-- footer --> | |
| 57 | - | |
| 58 | - </div><!-- comments box --> | |
| 59 | - </div><!-- single author comments --> | |
| 60 | - </div><!-- comments --> | |
| 61 | - <img src="../assets/images/slide2.png" class="m-screen" /> | |
| 62 | - | |
| 63 | - </div><!-- mobile screen Two --> | |
| 64 | - </div> | |
| 65 | - <div class="footer-nav"> | |
| 66 | - <div class="footer-top white-bg"> | |
| 67 | - <div class="row"> | |
| 68 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 69 | - <div class="row h-100p"> | |
| 70 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 71 | - <ul class="top-intro-bt"> | |
| 72 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 73 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 74 | - </ul> | |
| 75 | - </div> | |
| 76 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 77 | - <div class="ft-comments-group"> | |
| 78 | - <div class="c-with-photos"> | |
| 79 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 80 | - <ul class="comments-photos"> | |
| 81 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 82 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 83 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 84 | - </ul><!-- comment photos --> | |
| 85 | - </div> | |
| 86 | - <div class="comments-detail all-c-space"> | |
| 87 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 88 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 89 | - </div><!-- comments detail --> | |
| 90 | - | |
| 91 | - </div><!-- comments Group --> | |
| 92 | - </div></div> | |
| 93 | - </div> | |
| 94 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 95 | - | |
| 96 | - <div class="comment-frm no-c-frm"> | |
| 97 | - <div class="row"> | |
| 98 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 99 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 100 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 101 | - </div></div> | |
| 102 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 103 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 104 | - </div> | |
| 105 | - </div><!-- comment from --> | |
| 106 | - </div> </div></div> | |
| 107 | - </div><!-- footer top --> | |
| 108 | - <div class="footer-bottom"> | |
| 109 | - <ul> | |
| 110 | - <li class="active"></li> | |
| 111 | - <li></li> | |
| 112 | - </ul> | |
| 113 | - </div><!-- footer top --> | |
| 114 | - </div><!-- footer --> | |
| 115 | - | |
| 116 | - </div> | |
| 117 | - <!-- body wrapper --> | |
| 118 | - </div> | |
| 119 | - <!-- main wrapper --> | |
| 120 | - </main> | |
| 121 | -</template> | |
| 122 | - | |
| 123 | -<script> | |
| 124 | -import Vue from "vue"; | |
| 125 | -import router from "../router"; | |
| 126 | - | |
| 127 | -export default { | |
| 128 | - name: "TwoScreenWithInsight", | |
| 129 | - | |
| 130 | - data() { | |
| 131 | - return {}; | |
| 132 | - }, | |
| 133 | - mounted() {}, | |
| 134 | - methods: { | |
| 135 | - goToLogin() { | |
| 136 | - this.$router.push("/"); | |
| 137 | - }, | |
| 138 | - goToSignUp() { | |
| 139 | - this.$router.push("/signup"); | |
| 140 | - }, | |
| 141 | - | |
| 142 | - }, | |
| 143 | -}; | |
| 144 | -</script> |
src/components/TwoScreenWithoutInsight.vue
| ... | ... | @@ -1,147 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="allMWrp"> | |
| 19 | -<div class="mobile-screen-one p-left"> | |
| 20 | - <div class="m-screen-comments"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 24 | - <ul class="rly-comment-set"> | |
| 25 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 26 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 27 | - </ul> | |
| 28 | - </div><!-- comments box --> | |
| 29 | - </div><!-- single author comments --> | |
| 30 | - <div class="single-author-li-comments"> | |
| 31 | - <div class="a-intro-comments"> | |
| 32 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 33 | - <ul class="rly-comment-set"> | |
| 34 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 35 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- comments box --> | |
| 38 | - </div><!-- single author comments --> | |
| 39 | - </div><!-- comments --> | |
| 40 | - <img src="../assets/images/m-screen-1.png" class="m-screen" /> | |
| 41 | - <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> | |
| 42 | - </div><!-- mobile screen one --> | |
| 43 | - <div class="mobile-screen-one p-right"> | |
| 44 | - <div class="m-screen-right"> | |
| 45 | - <div class="single-author-li-comments"> | |
| 46 | - <div class="a-intro-comments"> | |
| 47 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 48 | - <ul class="rly-comment-set"> | |
| 49 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 50 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 51 | - </ul> | |
| 52 | - </div><!-- comments box --> | |
| 53 | - </div><!-- single author comments --> | |
| 54 | - <div class="single-author-li-comments"> | |
| 55 | - <div class="a-intro-comments"> | |
| 56 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 57 | - <ul class="rly-comment-set"> | |
| 58 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 59 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 60 | - </ul> | |
| 61 | - </div><!-- comments box --> | |
| 62 | - </div><!-- single author comments --> | |
| 63 | - </div><!-- comments --> | |
| 64 | - <img src="../assets/images/slide2.png" class="m-screen" /> | |
| 65 | - <img src="../assets/images/user-easy-1.png" class="user-photo-bottom-r" /> | |
| 66 | - </div><!-- mobile screen Two --> | |
| 67 | - </div> | |
| 68 | - <div class="footer-nav"> | |
| 69 | - <div class="footer-top white-bg"> | |
| 70 | - <div class="row"> | |
| 71 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 72 | - <div class="row h-100p"> | |
| 73 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 74 | - <ul class="top-intro-bt"> | |
| 75 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 76 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 77 | - </ul> | |
| 78 | - </div> | |
| 79 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 80 | - <div class="ft-comments-group"> | |
| 81 | - <div class="c-with-photos"> | |
| 82 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 83 | - <ul class="comments-photos"> | |
| 84 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 85 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 86 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 87 | - </ul><!-- comment photos --> | |
| 88 | - </div> | |
| 89 | - <div class="comments-detail all-c-space"> | |
| 90 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 91 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 92 | - </div><!-- comments detail --> | |
| 93 | - | |
| 94 | - </div><!-- comments Group --> | |
| 95 | - </div></div> | |
| 96 | - </div> | |
| 97 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 98 | - | |
| 99 | - <div class="comment-frm no-c-frm"> | |
| 100 | - <div class="row"> | |
| 101 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 102 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 103 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 104 | - </div></div> | |
| 105 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 106 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 107 | - </div> | |
| 108 | - </div><!-- comment from --> | |
| 109 | - </div> </div></div> | |
| 110 | - </div><!-- footer top --> | |
| 111 | - <div class="footer-bottom"> | |
| 112 | - <ul> | |
| 113 | - <li class="active"></li> | |
| 114 | - <li></li> | |
| 115 | - </ul> | |
| 116 | - </div><!-- footer top --> | |
| 117 | - </div><!-- footer --> | |
| 118 | - | |
| 119 | - </div> | |
| 120 | - <!-- body wrapper --> | |
| 121 | - </div> | |
| 122 | - <!-- main wrapper --> | |
| 123 | - </main> | |
| 124 | -</template> | |
| 125 | - | |
| 126 | -<script> | |
| 127 | -import Vue from "vue"; | |
| 128 | -import router from "../router"; | |
| 129 | - | |
| 130 | -export default { | |
| 131 | - name: "TwoScreenWithoutInsight", | |
| 132 | - | |
| 133 | - data() { | |
| 134 | - return {}; | |
| 135 | - }, | |
| 136 | - mounted() {}, | |
| 137 | - methods: { | |
| 138 | - goToLogin() { | |
| 139 | - this.$router.push("/"); | |
| 140 | - }, | |
| 141 | - goToSignUp() { | |
| 142 | - this.$router.push("/signup"); | |
| 143 | - }, | |
| 144 | - | |
| 145 | - }, | |
| 146 | -}; | |
| 147 | -</script> |
src/components/TwoScreengrabWithComments.vue
| ... | ... | @@ -1,139 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="allMWrp screenGrb-comments-wrp"> | |
| 19 | -<div class="mobile-screen-one p-left bc-transparent"> | |
| 20 | - <div class="m-screen-comments comments-left-without-bc"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 24 | - <ul class="rly-comment-set"> | |
| 25 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 26 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 27 | - </ul> | |
| 28 | - </div><!-- comments box --> | |
| 29 | - </div><!-- single author comments --> | |
| 30 | - <div class="single-author-li-comments"> | |
| 31 | - <div class="a-intro-comments"> | |
| 32 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 33 | - <ul class="rly-comment-set"> | |
| 34 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 35 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- comments box --> | |
| 38 | - </div><!-- single author comments --> | |
| 39 | - </div><!-- comments --> | |
| 40 | - <img src="../assets/images/comment-grab.png" class="m-screen spc-grbscreen1" /> | |
| 41 | - <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> | |
| 42 | - </div><!-- mobile screen one --> | |
| 43 | - <div class="mobile-screen-one p-right bc-transparent"> | |
| 44 | - <div class="view-ticket-wrp-ps comments-right-without-bc"> | |
| 45 | - <div class="single-author-li-comments "> | |
| 46 | - <div class="a-intro-comments custom-selected-style"> | |
| 47 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 48 | - <div class="top-wrp"> | |
| 49 | - Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 50 | - </div> | |
| 51 | - <div class="top-head">Jakob’s law</div> | |
| 52 | - <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> | |
| 53 | -<div class="footer"> | |
| 54 | - <a href="#" class="cit-16">16 Citations</a> | |
| 55 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 56 | - </div><!-- footer --> | |
| 57 | - | |
| 58 | - </div><!-- comments box --> | |
| 59 | - </div><!-- single author comments --> | |
| 60 | - </div><!-- comments --> | |
| 61 | - <img src="../assets/images/grab2.png" class="m-screen" /> | |
| 62 | - | |
| 63 | - </div><!-- mobile screen Two --> | |
| 64 | - </div> | |
| 65 | - <div class="footer-nav"> | |
| 66 | - <div class="footer-top white-bg"> | |
| 67 | - <div class="row"> | |
| 68 | - <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | |
| 69 | - <div class="row h-100p"> | |
| 70 | - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | |
| 71 | - <ul class="top-intro-bt"> | |
| 72 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 73 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 74 | - </ul> | |
| 75 | - </div> | |
| 76 | - <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> | |
| 77 | - <div class="ft-comments-group no-comment-count"> | |
| 78 | - <div class="row"> | |
| 79 | - | |
| 80 | - <div class="col-12"> | |
| 81 | - <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | |
| 82 | - <div class="comments-detail"> | |
| 83 | - <span class="no-c-yet">No comments yet</span> | |
| 84 | - <p>Be the first one to post a comment to start a discussion</p> | |
| 85 | - </div><!-- comments detail --> | |
| 86 | - </div> </div> | |
| 87 | - </div><!-- comments Group --> | |
| 88 | - </div></div> | |
| 89 | - </div> | |
| 90 | - <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | |
| 91 | - | |
| 92 | - <div class="comment-frm no-c-frm"> | |
| 93 | - <div class="row"> | |
| 94 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 95 | - <div class="form-group frm-wdth"> | |
| 96 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 97 | - </div></div> | |
| 98 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 99 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 100 | - </div> | |
| 101 | - </div><!-- comment from --> | |
| 102 | - </div> </div></div> | |
| 103 | - </div><!-- footer top --> | |
| 104 | - <div class="footer-bottom"> | |
| 105 | - <ul> | |
| 106 | - <li class="active"></li> | |
| 107 | - <li></li> | |
| 108 | - </ul> | |
| 109 | - </div><!-- footer top --> | |
| 110 | - </div><!-- footer --> | |
| 111 | - </div> | |
| 112 | - <!-- body wrapper --> | |
| 113 | - </div> | |
| 114 | - <!-- main wrapper --> | |
| 115 | - </main> | |
| 116 | -</template> | |
| 117 | - | |
| 118 | -<script> | |
| 119 | -import Vue from "vue"; | |
| 120 | -import router from "../router"; | |
| 121 | - | |
| 122 | -export default { | |
| 123 | - name: "TwoScreengrabWithComments", | |
| 124 | - | |
| 125 | - data() { | |
| 126 | - return {}; | |
| 127 | - }, | |
| 128 | - mounted() {}, | |
| 129 | - methods: { | |
| 130 | - goToLogin() { | |
| 131 | - this.$router.push("/"); | |
| 132 | - }, | |
| 133 | - goToSignUp() { | |
| 134 | - this.$router.push("/signup"); | |
| 135 | - }, | |
| 136 | - | |
| 137 | - }, | |
| 138 | -}; | |
| 139 | -</script> |
src/components/TwoScreensWithTwoAuthor.vue
| ... | ... | @@ -1,151 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="allMWrp"> | |
| 19 | -<div class="mobile-screen-one p-left"> | |
| 20 | - <div class="m-screen-comments"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <img src="../assets/images/user.png" class="user-b-1" /> | |
| 24 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 25 | - <ul class="rly-comment-set"> | |
| 26 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 27 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 28 | - </ul> | |
| 29 | - </div><!-- comments box --> | |
| 30 | - </div><!-- single author comments --> | |
| 31 | - <div class="single-author-li-comments"> | |
| 32 | - <div class="a-intro-comments"> | |
| 33 | - <img src="../assets/images/user.png" class="user-b-1" /> | |
| 34 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 35 | - <ul class="rly-comment-set"> | |
| 36 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 37 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 38 | - </ul> | |
| 39 | - </div><!-- comments box --> | |
| 40 | - </div><!-- single author comments --> | |
| 41 | - </div><!-- comments --> | |
| 42 | - <img src="../assets/images/help-screen.png" class="m-screen" /> | |
| 43 | - <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> | |
| 44 | - </div><!-- mobile screen one --> | |
| 45 | - <div class="mobile-screen-one p-right"> | |
| 46 | - <div class="help-view-ticket-right"> | |
| 47 | - <div class="single-author-li-comments "> | |
| 48 | - <div class="a-intro-comments cust-user2-style"> | |
| 49 | - <img src="../assets/images/user-2-set.svg" class="user-t-2" /> | |
| 50 | - <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> | |
| 51 | - <ul class="rly-comment-set"> | |
| 52 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 53 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 54 | - </ul> | |
| 55 | - </div><!-- comments box --> | |
| 56 | - </div><!-- single author comments --> | |
| 57 | - <div class="single-author-li-comments"> | |
| 58 | - <div class="a-intro-comments cust-user2-style"> | |
| 59 | - <img src="../assets/images/user-2-set.svg" class="user-t-2" /> | |
| 60 | - <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> | |
| 61 | - <ul class="rly-comment-set"> | |
| 62 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 63 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 64 | - </ul> | |
| 65 | - </div><!-- comments box --> | |
| 66 | - </div><!-- single author comments --> | |
| 67 | - </div> | |
| 68 | - <img src="../assets/images/slide2.png" class="m-screen" /> | |
| 69 | - | |
| 70 | - </div><!-- mobile screen Two --> | |
| 71 | - </div> | |
| 72 | - <div class="footer-nav"> | |
| 73 | - <div class="footer-top white-bg"> | |
| 74 | - <div class="row"> | |
| 75 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 76 | - <div class="row h-100p"> | |
| 77 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 78 | - <ul class="top-intro-bt"> | |
| 79 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 80 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 81 | - </ul> | |
| 82 | - </div> | |
| 83 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 84 | - <div class="ft-comments-group"> | |
| 85 | - <div class="c-with-photos"> | |
| 86 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 87 | - <ul class="comments-photos"> | |
| 88 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 89 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 90 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 91 | - </ul><!-- comment photos --> | |
| 92 | - </div> | |
| 93 | - <div class="comments-detail all-c-space"> | |
| 94 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 95 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 96 | - </div><!-- comments detail --> | |
| 97 | - | |
| 98 | - </div><!-- comments Group --> | |
| 99 | - </div></div> | |
| 100 | - </div> | |
| 101 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 102 | - | |
| 103 | - <div class="comment-frm no-c-frm"> | |
| 104 | - <div class="row"> | |
| 105 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 106 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 107 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 108 | - </div></div> | |
| 109 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 110 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 111 | - </div> | |
| 112 | - </div><!-- comment from --> | |
| 113 | - </div> </div></div> | |
| 114 | - </div><!-- footer top --> | |
| 115 | - <div class="footer-bottom"> | |
| 116 | - <ul> | |
| 117 | - <li class="active"></li> | |
| 118 | - <li></li> | |
| 119 | - </ul> | |
| 120 | - </div><!-- footer top --> | |
| 121 | - </div><!-- footer --> | |
| 122 | - | |
| 123 | - </div> | |
| 124 | - <!-- body wrapper --> | |
| 125 | - </div> | |
| 126 | - <!-- main wrapper --> | |
| 127 | - </main> | |
| 128 | -</template> | |
| 129 | - | |
| 130 | -<script> | |
| 131 | -import Vue from "vue"; | |
| 132 | -import router from "../router"; | |
| 133 | - | |
| 134 | -export default { | |
| 135 | - name: "TwoScreensWithTwoAuthor", | |
| 136 | - | |
| 137 | - data() { | |
| 138 | - return {}; | |
| 139 | - }, | |
| 140 | - mounted() {}, | |
| 141 | - methods: { | |
| 142 | - goToLogin() { | |
| 143 | - this.$router.push("/"); | |
| 144 | - }, | |
| 145 | - goToSignUp() { | |
| 146 | - this.$router.push("/signup"); | |
| 147 | - }, | |
| 148 | - | |
| 149 | - }, | |
| 150 | -}; | |
| 151 | -</script> |
src/components/TwoWebScreenWithInsight.vue
| ... | ... | @@ -1,142 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - | |
| 4 | - <div class="container-fluid episode-intro"> | |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 16 | - <!-- menu wrapper --> | |
| 17 | - <div class="intro-startup"> | |
| 18 | - <div class="two-webscreen-insight"> | |
| 19 | - <div class="mobile-screen-one p-left bc-transparent"> | |
| 20 | - <div class="m-screen-comments two-webs-l-spc"> | |
| 21 | - <div class="single-author-li-comments"> | |
| 22 | - <div class="a-intro-comments"> | |
| 23 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 24 | - <ul class="rly-comment-set"> | |
| 25 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 26 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 27 | - </ul> | |
| 28 | - </div><!-- comments box --> | |
| 29 | - </div><!-- single author comments --> | |
| 30 | - <div class="single-author-li-comments"> | |
| 31 | - <div class="a-intro-comments"> | |
| 32 | - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> | |
| 33 | - <ul class="rly-comment-set"> | |
| 34 | - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | |
| 35 | - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | |
| 36 | - </ul> | |
| 37 | - </div><!-- comments box --> | |
| 38 | - </div><!-- single author comments --> | |
| 39 | - </div><!-- comments --> | |
| 40 | - | |
| 41 | - <img src="../assets/images/top-user-demo.svg" class="two-screen-user-photo-bottom" /> | |
| 42 | - </div><!-- mobile screen one --> | |
| 43 | - <div class="two-webscreen-r-insight"> | |
| 44 | - <div class="view-ticket-wrp-ps comments-right-without-bc"> | |
| 45 | - <div class="single-author-li-comments "> | |
| 46 | - <div class="a-intro-comments custom-selected-style"> | |
| 47 | - <img src="../assets/images/rect.svg" class="rect" /> | |
| 48 | - <div class="top-wrp"> | |
| 49 | - Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | |
| 50 | - </div> | |
| 51 | - <div class="top-head">Jakob’s law</div> | |
| 52 | - <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> | |
| 53 | -<div class="footer"> | |
| 54 | - <a href="#" class="cit-16">16 Citations</a> | |
| 55 | - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | |
| 56 | - </div><!-- footer --> | |
| 57 | - | |
| 58 | - </div><!-- comments box --> | |
| 59 | - </div><!-- single author comments --> | |
| 60 | - </div><!-- comments --> | |
| 61 | - </div><!-- single mobile Right insight --> | |
| 62 | - </div><!-- Single Mobile Insight --> | |
| 63 | - <div class="footer-nav"> | |
| 64 | - <div class="footer-top white-bg"> | |
| 65 | - <div class="row"> | |
| 66 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> | |
| 67 | - <div class="row h-100p"> | |
| 68 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 69 | - <ul class="top-intro-bt"> | |
| 70 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 71 | - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | |
| 72 | - </ul> | |
| 73 | - </div> | |
| 74 | - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> | |
| 75 | - <div class="ft-comments-group"> | |
| 76 | - <div class="c-with-photos"> | |
| 77 | - <span class="count-comments">16+ Comments</span><!-- count commets --> | |
| 78 | - <ul class="comments-photos"> | |
| 79 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 80 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 81 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 82 | - </ul><!-- comment photos --> | |
| 83 | - </div> | |
| 84 | - <div class="comments-detail all-c-space"> | |
| 85 | - <span>Saudrika commented <a href="#">View All</a></span> | |
| 86 | - <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> | |
| 87 | - </div><!-- comments detail --> | |
| 88 | - | |
| 89 | - </div><!-- comments Group --> | |
| 90 | - </div></div> | |
| 91 | - </div> | |
| 92 | - <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> | |
| 93 | - | |
| 94 | - <div class="comment-frm no-c-frm"> | |
| 95 | - <div class="row"> | |
| 96 | - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | |
| 97 | - <div class="form-group frm-wdth addfrm-spc"> | |
| 98 | - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | |
| 99 | - </div></div> | |
| 100 | - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | |
| 101 | - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | |
| 102 | - </div> | |
| 103 | - </div><!-- comment from --> | |
| 104 | - </div> </div></div> | |
| 105 | - </div><!-- footer top --> | |
| 106 | - <div class="footer-bottom"> | |
| 107 | - <ul> | |
| 108 | - <li class="active"></li> | |
| 109 | - <li></li> | |
| 110 | - </ul> | |
| 111 | - </div><!-- footer top --> | |
| 112 | - </div><!-- footer --> | |
| 113 | - | |
| 114 | - </div> | |
| 115 | - <!-- body wrapper --> | |
| 116 | - </div> | |
| 117 | - <!-- main wrapper --> | |
| 118 | - </main> | |
| 119 | -</template> | |
| 120 | - | |
| 121 | -<script> | |
| 122 | -import Vue from "vue"; | |
| 123 | -import router from "../router"; | |
| 124 | - | |
| 125 | -export default { | |
| 126 | - name: "TwoWebScreenWithInsight", | |
| 127 | - | |
| 128 | - data() { | |
| 129 | - return {}; | |
| 130 | - }, | |
| 131 | - mounted() {}, | |
| 132 | - methods: { | |
| 133 | - goToLogin() { | |
| 134 | - this.$router.push("/"); | |
| 135 | - }, | |
| 136 | - goToSignUp() { | |
| 137 | - this.$router.push("/signup"); | |
| 138 | - }, | |
| 139 | - | |
| 140 | - }, | |
| 141 | -}; | |
| 142 | -</script> |
src/components/outro.vue
| ... | ... | @@ -1,160 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <main class="landing-page"> | |
| 3 | - <div class="container-fluid episode-intro"> | |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | |
| 6 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 7 | - <span class="navbar-toggler-icon"></span> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - </button> | |
| 11 | - <div class="user-profile-photo insights-profile"> | |
| 12 | - <a href="#"><img src="../assets/images/user.png"></a> | |
| 13 | - </div> | |
| 14 | - </nav> | |
| 15 | - <!-- menu wrapper --> | |
| 16 | - <div class="intro-startup"> | |
| 17 | -<div class="thanks-wrapper"> | |
| 18 | - <div class="thanks-l-wrp"> | |
| 19 | - | |
| 20 | - <div class="thanks-pay-wrp"> | |
| 21 | - <img src="../assets/images/thanks.svg" class="thanks-img" /> | |
| 22 | - <div class="blacktext-wrp"> | |
| 23 | - CHeck out other case studies here <img src="../assets/images/arrow-bottom.svg" /> | |
| 24 | - </div> | |
| 25 | - <ul class=""> | |
| 26 | - <li> | |
| 27 | - <a href="#"> | |
| 28 | - <img src="../assets/images/phone-p.svg" /> | |
| 29 | - <span><img src="../assets/images/p-eye.svg" /> 19.4k Views</span> | |
| 30 | - </a> | |
| 31 | - </li> | |
| 32 | - <li class="payments-spc-57"> | |
| 33 | - <a href="#"> | |
| 34 | - <img src="../assets/images/g-pay.svg" /> | |
| 35 | - <span><img src="../assets/images/p-eye.svg" /> 19.4k Views</span> | |
| 36 | - </a> | |
| 37 | - </li> | |
| 38 | - <li> | |
| 39 | - <a href="#"> | |
| 40 | - <img src="../assets/images/bb.svg" /> | |
| 41 | - <span><img src="../assets/images/p-eye.svg" /> 19.4k Views</span> | |
| 42 | - </a> | |
| 43 | - </li> | |
| 44 | - | |
| 45 | - </ul><!-- payments options --> | |
| 46 | - <ul class=""> | |
| 47 | - | |
| 48 | - <li> | |
| 49 | - <a href="#"> | |
| 50 | - <img src="../assets/images/payment.svg" /> | |
| 51 | - <span><img src="../assets/images/p-eye.svg" /> 19.4k Views</span> | |
| 52 | - </a> | |
| 53 | - </li> | |
| 54 | - <li class="payments-spc-57"> | |
| 55 | - <a href="#"> | |
| 56 | - <img src="../assets/images/uc.svg" /> | |
| 57 | - <span><img src="../assets/images/p-eye.svg" /> 19.4k Views</span> | |
| 58 | - </a> | |
| 59 | - </li> | |
| 60 | - </ul><!-- payments options --> | |
| 61 | - </div><!-- thanks pay wrp --> | |
| 62 | - <img src="../assets/images/spot-light-bt.svg" class="payment-spot-light-bt" /> | |
| 63 | - </div><!-- thanks left wrp --> | |
| 64 | - <div class="thanks-r-section"> | |
| 65 | - <div class="logo-common-wrp"> | |
| 66 | - <a href="#"><img src="../assets/images/ps-growth.svg" /> | |
| 67 | - <span>Product Growth</span> | |
| 68 | - </a> | |
| 69 | - </div><!-- logo wrp --> | |
| 70 | - <div class="clearfix"></div> | |
| 71 | - <p>Don’t forget to <strong> join the discussion </strong> by scrolling back and adding your comments!</p> | |
| 72 | - <div class="clearfix"></div> | |
| 73 | - <a href="#" class="back-bt"> | |
| 74 | - <span class="s1"></span> | |
| 75 | - <span class="s2"></span> | |
| 76 | - <span class="s3"></span> | |
| 77 | - <span class="s4"></span> | |
| 78 | - <img src="../assets/images/refresh.svg" /> Back to home | |
| 79 | - | |
| 80 | - </a> | |
| 81 | - <ul class="rating-section"> | |
| 82 | - <li> | |
| 83 | - <p>Excited to <strong> create case studies</strong> or help build Product Growth?</p> <a href="#" class="publish">Publish</a> | |
| 84 | - </li> | |
| 85 | - <li> | |
| 86 | - <p class="wdth">How would you rate this case study?</p> | |
| 87 | - <span class="rating-list"> | |
| 88 | - <a href="#"><img src="../assets/images/f-review.svg" /></a> | |
| 89 | - <a href="#"><img src="../assets/images/f-review.svg" /></a> | |
| 90 | - <a href="#"><img src="../assets/images/f-review.svg" /></a> | |
| 91 | - <a href="#"><img src="../assets/images/e-review.svg" /></a> | |
| 92 | - </span> | |
| 93 | - </li> | |
| 94 | - </ul> | |
| 95 | - <div class="follow-us-py"> | |
| 96 | - <span>Follow us at</span> | |
| 97 | - <ul class="p-follows"> | |
| 98 | - <li><a href="#"> | |
| 99 | - <img src="../assets/images/p-rss.svg" /> | |
| 100 | - </a></li> | |
| 101 | - <li><a href="#"> | |
| 102 | - <img src="../assets/images/p-linkedin.svg" /> | |
| 103 | - </a></li> | |
| 104 | - <li><a href="#"> | |
| 105 | - <img src="../assets/images/p-twitter.svg" /> | |
| 106 | - </a></li> | |
| 107 | - </ul> | |
| 108 | - </div><!-- follow us --> | |
| 109 | - <div class="p-users"> | |
| 110 | - <span>Author</span><h1>Vamsi</h1> | |
| 111 | - <span>Author</span><h1>Pramod</h1> | |
| 112 | - <span>Author</span><h1>Sarthak</h1> | |
| 113 | - <span>Designer</span><h1>Akhilesh</h1> | |
| 114 | - <span>Illustrations</span><h1>Ram</h1> | |
| 115 | - </div><!-- users --> | |
| 116 | - </div><!-- thanks payment right section --> | |
| 117 | - </div><!--- thanks wrapper --> | |
| 118 | - <div class="footer-nav"> | |
| 119 | - <div class="footer-top"> | |
| 120 | - <ul class="top-intro-bt"> | |
| 121 | - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | |
| 122 | - </ul> | |
| 123 | - </div><!-- footer top --> | |
| 124 | - <div class="footer-bottom"> | |
| 125 | - <ul> | |
| 126 | - <li class="active"></li> | |
| 127 | - <li class="active"></li> | |
| 128 | - </ul> | |
| 129 | - </div><!-- footer top --> | |
| 130 | - </div><!-- footer --> | |
| 131 | - | |
| 132 | - </div> | |
| 133 | - <!-- body wrapper --> | |
| 134 | - </div> | |
| 135 | - <!-- main wrapper --> | |
| 136 | - </main> | |
| 137 | -</template> | |
| 138 | - | |
| 139 | -<script> | |
| 140 | -import Vue from "vue"; | |
| 141 | -import router from "../router"; | |
| 142 | - | |
| 143 | -export default { | |
| 144 | - name: "Outro", | |
| 145 | - | |
| 146 | - data() { | |
| 147 | - return {}; | |
| 148 | - }, | |
| 149 | - mounted() {}, | |
| 150 | - methods: { | |
| 151 | - goToLogin() { | |
| 152 | - this.$router.push("/"); | |
| 153 | - }, | |
| 154 | - goToSignUp() { | |
| 155 | - this.$router.push("/signup"); | |
| 156 | - }, | |
| 157 | - | |
| 158 | - }, | |
| 159 | -}; | |
| 160 | -</script> |
src/components/welcome.vue
| ... | ... | @@ -1,17 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <div class="component-card-section text-center full-height"> | |
| 3 | - <div class="row h-100 mr-0 ml-0"> | |
| 4 | - <div class="col-sm-12 my-auto welcome-content"> | |
| 5 | - <h3 class="mb-4">Welcome to Gigs For Me</h3> | |
| 6 | - <p class="mb-5"> | |
| 7 | - Before we recommend the right gigs, | |
| 8 | - <br />we need some information | |
| 9 | - </p> | |
| 10 | - <router-link class="yellow-btn btn-large" to="/profileWizard"> | |
| 11 | - Get Started | |
| 12 | - <!-- <img src="@/assets/img/onboarding/arrow.svg" width="20" /> --> | |
| 13 | - </router-link> | |
| 14 | - </div> | |
| 15 | - </div> | |
| 16 | - </div> | |
| 17 | -</template> |
src/router/index.js
| ... | ... | @@ -2,38 +2,8 @@ import Vue from 'vue' |
| 2 | 2 | import Router from 'vue-router' |
| 3 | 3 | import { authGuard } from "../auth/authGuard" |
| 4 | 4 | import LandingPage from '@/components/LandingPage' |
| 5 | -import SignUp from '@/components/SignUp' | |
| 6 | -import Reset from '@/components/Reset' | |
| 7 | 5 | import Profile from '@/components/Profile' |
| 8 | -import welcome from '@/components/welcome' | |
| 9 | -import Intermediate from '@/components/Intermediate' | |
| 10 | -import Insight from '@/components/Insight' | |
| 11 | -import ProductInsight from '@/components/ProductInsight' | |
| 12 | -import EpisodeIntro from '@/components/EpisodeIntro' | |
| 13 | -import AuthorIntro from '@/components/AuthorIntro' | |
| 14 | -import AuthorReadingNow from '@/components/AuthorReadingNow' | |
| 15 | -import SingleAuthor from '@/components/SingleAuthor' | |
| 16 | -import Outro from '@/components/Outro' | |
| 17 | -import SingleMobileInsight from '@/components/SingleMobileInsight' | |
| 18 | -import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight' | |
| 19 | -import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne' | |
| 20 | -import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne' | |
| 21 | -import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight' | |
| 22 | -import TwoScreenWithInsight from '@/components/TwoScreenWithInsight' | |
| 23 | -import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments' | |
| 24 | -import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight' | |
| 25 | -import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor' | |
| 26 | -import TwoAuthor from '@/components/TwoAuthor' | |
| 27 | -import TwoAuthorDesktop from '@/components/TwoAuthorDesktop' | |
| 28 | -import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow' | |
| 29 | -import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments' | |
| 30 | -import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor' | |
| 31 | -import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor' | |
| 32 | -import ToAddYourComment from '@/components/ToAddYourComment' | |
| 33 | -import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard' | |
| 34 | -import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat' | |
| 35 | -import Otp from '@/components/Otp' | |
| 36 | -import ChangePassword from '@/components/ChangePassword' | |
| 6 | + | |
| 37 | 7 | |
| 38 | 8 | import router from '../router' |
| 39 | 9 | Vue.use(Router) |
| ... | ... | @@ -53,161 +23,11 @@ export default new Router({ |
| 53 | 23 | // } |
| 54 | 24 | }, |
| 55 | 25 | { |
| 56 | - path: '/signup', | |
| 57 | - name: 'SignUp', | |
| 58 | - component: SignUp, | |
| 59 | - }, | |
| 60 | - { | |
| 61 | - path: '/intermediate', | |
| 62 | - name: 'Intermediate', | |
| 63 | - component: Intermediate | |
| 64 | - }, | |
| 65 | - { | |
| 66 | - path: '/reset', | |
| 67 | - name: 'Reset', | |
| 68 | - component: Reset, | |
| 69 | - }, | |
| 70 | - { | |
| 71 | 26 | path: '/profile', |
| 72 | 27 | name: 'Profile', |
| 73 | 28 | component: Profile, |
| 74 | 29 | }, |
| 75 | - { | |
| 76 | - path: '/insight', | |
| 77 | - name: 'Insight', | |
| 78 | - component: Insight, | |
| 79 | - }, | |
| 80 | - { | |
| 81 | - path: '/product-insight', | |
| 82 | - name: 'ProductInsight', | |
| 83 | - component: ProductInsight, | |
| 84 | - }, | |
| 85 | - { | |
| 86 | - path: '/episode-intro', | |
| 87 | - name: 'EpisodeIntro', | |
| 88 | - component: EpisodeIntro, | |
| 89 | - }, | |
| 90 | - , | |
| 91 | - { | |
| 92 | - path: '/author-intro', | |
| 93 | - name: 'AuthorIntro', | |
| 94 | - component: AuthorIntro, | |
| 95 | - }, | |
| 96 | - { | |
| 97 | - path: '/author-reading-now', | |
| 98 | - name: 'AuthorReadingNow', | |
| 99 | - component: AuthorReadingNow, | |
| 100 | - }, | |
| 101 | - { | |
| 102 | - path: '/single-author', | |
| 103 | - name: 'SingleAuthor', | |
| 104 | - component: SingleAuthor, | |
| 105 | - }, | |
| 106 | - { | |
| 107 | - path: '/outro', | |
| 108 | - name: 'Outro', | |
| 109 | - component: Outro, | |
| 110 | - }, | |
| 111 | - { | |
| 112 | - path: '/single-mobile-insight', | |
| 113 | - name: 'SingleMobileInsight', | |
| 114 | - component: SingleMobileInsight, | |
| 115 | - }, | |
| 116 | - { | |
| 117 | - path: '/two-screen-without-insight', | |
| 118 | - name: 'TwoScreenWithoutInsight', | |
| 119 | - component: TwoScreenWithoutInsight, | |
| 120 | - }, | |
| 121 | - { | |
| 122 | - path: '/single-m-screen-insight-one', | |
| 123 | - name: 'SingleMobileScreenInsightOne', | |
| 124 | - component: SingleMobileScreenInsightOne, | |
| 125 | - }, | |
| 126 | - { | |
| 127 | - path: '/single-web-screen-insight-one', | |
| 128 | - name: 'SingleWebScreenInsightOne', | |
| 129 | - component: SingleWebScreenInsightOne, | |
| 130 | - }, | |
| 131 | - { | |
| 132 | - path: '/single-screengrab-one-insight', | |
| 133 | - name: 'SingleScreengrabOneInsight', | |
| 134 | - component: SingleScreengrabOneInsight, | |
| 135 | - }, | |
| 136 | - { | |
| 137 | - path: '/two-screen-with-insight', | |
| 138 | - name: 'TwoScreenWithInsight', | |
| 139 | - component: TwoScreenWithInsight, | |
| 140 | - }, | |
| 141 | - { | |
| 142 | - path: '/two-screengrab-with-comments', | |
| 143 | - name: 'TwoScreengrabWithComments', | |
| 144 | - component: TwoScreengrabWithComments, | |
| 145 | - }, | |
| 146 | - { | |
| 147 | - path: '/two-webscreen-with-insight', | |
| 148 | - name: 'TwoWebScreenWithInsight', | |
| 149 | - component: TwoWebScreenWithInsight, | |
| 150 | - }, | |
| 151 | - { | |
| 152 | - path: '/noscreenshot-single-author', | |
| 153 | - name: 'NoScreenshotSingleAuthor', | |
| 154 | - component: NoScreenshotSingleAuthor, | |
| 155 | - }, | |
| 156 | - { | |
| 157 | - path: '/two-author-intro', | |
| 158 | - name: 'TwoAuthor', | |
| 159 | - component: TwoAuthor, | |
| 160 | - }, | |
| 161 | - { | |
| 162 | - path: '/two-author-desktop', | |
| 163 | - name: 'TwoAuthorDesktop', | |
| 164 | - component: TwoAuthorDesktop, | |
| 165 | - }, | |
| 166 | - { | |
| 167 | - path: '/two-author-reading-now', | |
| 168 | - name: 'TwoAuthorReadingNow', | |
| 169 | - component: TwoAuthorReadingNow, | |
| 170 | - }, | |
| 171 | - { | |
| 172 | - path: '/single-mobile-screen-chat-comments', | |
| 173 | - name: 'SingleMobileScreenChatComments', | |
| 174 | - component: SingleMobileScreenChatComments, | |
| 175 | - }, | |
| 176 | - { | |
| 177 | - path: '/two-screen-with-two-author', | |
| 178 | - name: 'TwoScreensWithTwoAuthor', | |
| 179 | - component: TwoScreensWithTwoAuthor, | |
| 180 | - }, | |
| 181 | - { | |
| 182 | - path: '/no-screenshot-two-author', | |
| 183 | - name: 'NoScreenshotTwoAuthor', | |
| 184 | - component: NoScreenshotTwoAuthor, | |
| 185 | - }, | |
| 186 | - { | |
| 187 | - path: '/to-add-your-comment', | |
| 188 | - name: 'ToAddYourComment', | |
| 189 | - component: ToAddYourComment, | |
| 190 | - }, | |
| 191 | - { | |
| 192 | - path: '/reading-flow-bounce-board', | |
| 193 | - name: 'ReadingFlowBounceBoard', | |
| 194 | - component: ReadingFlowBounceBoard, | |
| 195 | - }, | |
| 196 | - { | |
| 197 | - path: '/reading-flow-bounce-board-chat', | |
| 198 | - name: 'ReadingFlowBounceBoard_chat', | |
| 199 | - component: ReadingFlowBounceBoard_chat, | |
| 200 | - }, | |
| 201 | - { | |
| 202 | - path: '/otp/:flag', | |
| 203 | - name: 'Otp', | |
| 204 | - component: Otp, | |
| 205 | - }, | |
| 206 | - { | |
| 207 | - path: '/changepassword', | |
| 208 | - name: 'ChangePassword', | |
| 209 | - component: ChangePassword, | |
| 210 | - } | |
| 30 | + | |
| 211 | 31 | |
| 212 | 32 | |
| 213 | 33 | ... | ... |