Skip to content

Commit 9e5181c

Browse files
author
Vue Play
committed
Stored by Vue Play
1 parent 1765797 commit 9e5181c

File tree

1 file changed

+174
-0
lines changed

1 file changed

+174
-0
lines changed

‎src/views/Pricing.vue

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<template>
2+
<div class="space-y-0 bg-slate-100 flex flex-col h-screen">
3+
<Meta
4+
description="Try out the playground or use the full playground without any limitations."
5+
title="Pricing"
6+
>
7+
</Meta>
8+
<VueNavigator class="z-10" />
9+
<header>
10+
<h1 class="text-6xl mt-12 mb-6">
11+
Pricing
12+
</h1>
13+
</header>
14+
<main class="bg-slate-100 grow">
15+
<section
16+
style="text-align:left"
17+
class="bg-slate-100"
18+
>
19+
<Pricing style="margin-bottom:50px;max-width:786px;text-align:left;margin-right:auto;margin-left:auto" />
20+
</section>
21+
<p
22+
data-v-d443ee1d=""
23+
style="margin-top:80px;margin-bottom:50px"
24+
>
25+
Upgrade to Premium on
26+
your profile in
27+
Studio
28+
</p>
29+
<section
30+
style="text-align:center;margin-top:50px;margin-bottom:10px"
31+
class="pb-12 bg-slate-100"
32+
>
33+
<button
34+
@click="$router.push('/features')"
35+
class="bg-slate-200 transition-shadow hover:drop-shadow-lg drop-shadow"
36+
>
37+
Features
38+
</button> <button
39+
@click="open('https://studio.vueplay.com')"
40+
class="bg-purple-500 from-blue-500 bg-gradient-to-br hover:bg-purple-600 hover:from-blue-600 text-white duration-300 transition hover:drop-shadow-lg drop-shadow"
41+
>
42+
Get Started
43+
<svg
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 24 24"
46+
fill="currentColor"
47+
class="w-4 h-4 ml-1 -mt-1 inline-block"
48+
>
49+
<path
50+
fill-rule="evenodd"
51+
d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z"
52+
clip-rule="evenodd"
53+
/>
54+
<path d="M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z" />
55+
</svg> </button>
56+
</section>
57+
</main>
58+
<Footer class="pb-12" />
59+
</div>
60+
</template>
61+
<script>
62+
import VueNavigator from "@/components/Navigator.vue";
63+
import Pricing from "@/components/Pricing.vue";
64+
import Footer from "@/components/Footer.vue";
65+
import Meta from "@/components/Meta.vue";
66+
export default {
67+
components: {
68+
VueNavigator,
69+
Pricing,
70+
Footer,
71+
Meta
72+
},
73+
data: () => ({}),
74+
methods: {
75+
open(url) {
76+
location.href = url;
77+
}
78+
},
79+
head() {
80+
return {
81+
title: '2Pricing',
82+
titleTemplate: '%s | Health Tips',
83+
meta: [{
84+
property: 'og:title',
85+
content: 'My Awesome Pricing'
86+
}, {
87+
property: 'og:description',
88+
content: 'This is an amazing website!'
89+
}, {
90+
property: 'og:image',
91+
content: 'https://example.com/image.jpg'
92+
}, {
93+
property: 'og:url',
94+
content: 'https://example.com/page'
95+
}, {
96+
property: 'og:type',
97+
content: 'website'
98+
}, {
99+
name: 'twitter:card',
100+
content: 'summary_large_image'
101+
}, {
102+
name: 'twitter:title',
103+
content: 'My Awesome Page'
104+
}, {
105+
name: 'twitter:description',
106+
content: 'This is an amazing website!'
107+
}, {
108+
name: 'twitter:image',
109+
content: 'https://example.com/image.jpg'
110+
}]
111+
};
112+
}
113+
};
114+
115+
</script>
116+
<style scoped>
117+
body,
118+
html,
119+
#app {
120+
margin-top: 0px;
121+
margin-left: 0px;
122+
margin-bottom: 0px;
123+
margin-right: 0px;
124+
}
125+
126+
main {
127+
display: inline-block;
128+
text-align: center;
129+
width: 100%;
130+
padding: 10px;
131+
box-sizing: border-box;
132+
margin-bottom: 50px;
133+
}
134+
135+
header {
136+
text-align: center;
137+
font-family: verdana;
138+
padding-top: 10px;
139+
padding-bottom: 10px;
140+
}
141+
142+
p {
143+
font-size: 20px;
144+
color: #6b6b6bff;
145+
margin-top: 50px;
146+
margin-bottom: 15px;
147+
}
148+
149+
em {
150+
font-style: normal;
151+
color: rgba(238, 76, 215, 1);
152+
}
153+
154+
section button {
155+
border: none;
156+
padding-top: 10px;
157+
padding-right: 15px;
158+
padding-bottom: 10px;
159+
padding-left: 15px;
160+
border-top-left-radius: 8px;
161+
border-top-right-radius: 8px;
162+
border-bottom-left-radius: 8px;
163+
border-bottom-right-radius: 8px;
164+
font-size: 17px;
165+
margin-right: 20px;
166+
cursor: pointer;
167+
transition: .5s ease background;
168+
}
169+
170+
section button:last-child {
171+
margin-right: 0px;
172+
}
173+
174+
</style>

0 commit comments

Comments
 (0)