ProductInsight.vue
5.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<template>
<main class="landing-page">
<div class="container-fluid inner-wrp">
<nav class="navbar navbar-expand-sm spotLight-nav">
<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png" /></a>
<div class="user-profile-photo insights-profile">
<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
</div>
</nav><!-- menu wrapper -->
<div class="row profile-tab-spc-top insights-spc">
<div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
<a href="javascript:void(0);" class="back-to-lib"><img src="../assets/images/arrow-left.svg" />Back to library</a>
<ul class="insights-list">
<li><a href="javascript:void(0);">PRODUCT Insight</a></li>
</ul>
<div class="insights-details">
<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
<br><br>
When the user is already onboarded and is in the <strong>engage stage</strong>, it may be better to use a single CTA for each use case in order to <strong>avoid ambiguity.</strong>
</p>
</div>
</div><!-- user profile -->
<div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
<div class="features-group">
<h3>Further Reading</h3>
<ul class="features-group-list">
<li><a href="javascript:void(0);">The Aesthetic-Usability Effect <img src="../assets/images/link.svg" /></a>
<span>Wikipedia</span>
</li>
<li><a href="javascript:void(0);">The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones. <img src="../assets/images/link.svg" /></a>
<span>Nielsen Norman Group</span>
</li>
</ul>
</div><!-- list style -->
</div>
</div>
<div class="clearfix"></div>
<div class="row top-brd profile-tab-spc-top">
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
<ul class="profile-tab">
<li class="active-green"><a href="javascript:void(0);">Citations(16)</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
<a href="javascript:void(0);" class="insights-rply"><img src="../assets/images/reply.svg" /> Share Insight</a>
</div>
</div><!-- tab style -->
<div class="profile-data-wrp">
<div class="container-fluid data-wrp">
<div class="row">
<div class="">
<div class="card-warpper">
<div class="company-detail">
<div class="c-logo">
<img src="../assets/images/image 46.png" />
</div>
<div class="c-tag">
<img src="../assets/images/c-tag.png" />
</div>
</div><!-- company detail-->
<h1>Urban Company</h1>
<div class="u-detail">
<img src="../assets/images/user-2.png" />
<h2>Murugan<br> Swaminathan</h2>
</div><!-- user detail -->
<p>Onboarding, Core usage,<br> Customer Suport</p>
<ul class="tags-list">
<li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
<li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
<li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
</ul>
<div class="clearfix"></div>
</div><!-- card wrpper -->
<div class="card-warpper">
<div class="company-detail">
<div class="c-logo">
<img src="../assets/images/image 46.png" />
</div>
<div class="c-tag">
<img src="../assets/images/c-tag.png" />
</div>
</div><!-- company detail-->
<h1>Urban Company</h1>
<div class="u-detail">
<img src="../assets/images/user-2.png" />
<h2>Murugan<br> Swaminathan</h2>
</div><!-- user detail -->
<p>Onboarding, Core usage,<br> Customer Suport</p>
<ul class="tags-list">
<li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
<li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
<li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
</ul>
<div class="clearfix"></div>
</div><!-- card wrpper -->
<div class="card-warpper">
<div class="company-detail">
<div class="c-logo">
<img src="../assets/images/image 46.png" />
</div>
<div class="c-tag">
<img src="../assets/images/c-tag.png" />
</div>
</div><!-- company detail-->
<h1>Urban Company</h1>
<div class="u-detail">
<img src="../assets/images/user-2.png" />
<h2>Murugan<br> Swaminathan</h2>
</div><!-- user detail -->
<p>Onboarding, Core usage,<br> Customer Suport</p>
<ul class="tags-list">
<li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
<li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
<li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
</ul>
<div class="clearfix"></div>
</div><!-- card wrpper -->
</div><!-- all card wrpper -->
</div>
</div>
</div><!-- data wrp -->
<!-- body wrapper -->
</div><!-- main wrapper -->
<!-- main wrapper -->
</main>
</template>
<script>
import Vue from "vue";
import router from "../router";
export default {
name: "ProductInsight",
data() {
return {};
},
mounted() {},
methods: {
goToLogin() {
this.$router.push("/login");
},
goToSignUp() {
this.$router.push("/");
},
},
};
</script>