Skip to content

Commit 8f9ab0e

Browse files
AchoArnoldAchoArnold
committed
Add pricing to landing page
1 parent b269733 commit 8f9ab0e

6 files changed

Lines changed: 714 additions & 416 deletions

File tree

‎web/assets/img/httpsms-github.png‎

218 KB
Loading

‎web/layouts/website.vue‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
<template>
2+
<v-app dark>
3+
<v-app-bar elevate-on-scroll color="#121212" height="70" fixed>
4+
<v-container>
5+
<v-row>
6+
<v-col class="w-full d-flex">
7+
<v-badge class="logo-badge mt-5" color="primary" content="Beta">
8+
<nuxt-link to="/" class="text-decoration-none d-flex">
9+
<v-avatar
10+
v-if="$vuetify.breakpoint.lgAndUp"
11+
tile
12+
size="33"
13+
class="mt-1"
14+
>
15+
<v-img
16+
contain
17+
:src="require('@/assets/img/logo.svg')"
18+
></v-img>
19+
</v-avatar>
20+
<h3 class="text-h4 ml-1 text--primary">httpSMS</h3>
21+
</nuxt-link>
22+
</v-badge>
23+
<v-spacer></v-spacer>
24+
<v-btn
25+
v-if="$vuetify.breakpoint.lgAndUp"
26+
large
27+
text
28+
color="primary"
29+
class="my-5 mr-2"
30+
@click="goToPricing"
31+
>
32+
Pricing
33+
</v-btn>
34+
<v-btn
35+
exact-path
36+
color="primary"
37+
class="my-5"
38+
:large="$vuetify.breakpoint.lgAndUp"
39+
:to="{ name: 'login' }"
40+
>
41+
Get Started
42+
<span v-if="$vuetify.breakpoint.lgAndUp">&nbsp;For Free</span>
43+
</v-btn>
44+
</v-col>
45+
</v-row>
46+
</v-container>
47+
</v-app-bar>
48+
<v-main>
49+
<Nuxt />
50+
</v-main>
51+
<v-footer class="pt-4">
52+
<v-container>
53+
<v-row>
54+
<v-col cols="12" md="3">
55+
<v-badge
56+
class="logo-badge"
57+
:class="{ 'logo-badge--mobile': $vuetify.breakpoint.mdAndDown }"
58+
color="primary"
59+
content="Beta"
60+
>
61+
<nuxt-link to="/" class="text-decoration-none d-flex">
62+
<v-avatar tile size="33" class="mt-1">
63+
<v-img
64+
contain
65+
:src="require('@/assets/img/logo.svg')"
66+
></v-img>
67+
</v-avatar>
68+
<h3 class="text-h4 ml-1 text--primary">httpSMS</h3>
69+
</nuxt-link>
70+
</v-badge>
71+
<p class="subtitle-2 text--secondary">
72+
Made With <v-icon color="#cf1112">{{ mdiHeart }}</v-icon> in
73+
Tallinn
74+
<v-img
75+
class="d-inline-block"
76+
width="20"
77+
src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Flag_of_Estonia.svg"
78+
></v-img>
79+
</p>
80+
<p class="mt-n3">
81+
<v-btn
82+
href="https://twitter.com/acho_arnold"
83+
icon
84+
color="#1DA1F2"
85+
>
86+
<v-icon>{{ mdiTwitter }}</v-icon>
87+
</v-btn>
88+
<v-btn
89+
:href="$store.getters.getAppData.githubUrl"
90+
icon
91+
large
92+
color="#ffffff"
93+
>
94+
<v-icon>{{ mdiGithub }}</v-icon>
95+
</v-btn>
96+
</p>
97+
</v-col>
98+
<v-col cols="12" md="3">
99+
<h2 class="text-h6 mb-2">Resources</h2>
100+
<ul style="list-style: none" class="pa-0">
101+
<li class="mb-2">
102+
<v-hover v-slot="{ hover }">
103+
<a
104+
class="text--primary text-decoration-none"
105+
:class="{ 'text-decoration-underline': hover }"
106+
@click.stop="goToPricing"
107+
>
108+
Pricing
109+
<v-icon small>{{ mdiCreditCardOutline }}</v-icon>
110+
</a>
111+
</v-hover>
112+
</li>
113+
<li class="mb-2">
114+
<v-hover v-slot="{ hover }">
115+
<a
116+
href="https://status.httpsms.com"
117+
class="text--primary text-decoration-none"
118+
:class="{ 'text-decoration-underline': hover }"
119+
>
120+
Site status
121+
<v-icon color="success" x-small>{{ mdiCircle }}</v-icon>
122+
</a>
123+
</v-hover>
124+
</li>
125+
</ul>
126+
</v-col>
127+
<v-col cols="12" md="3">
128+
<h2 class="text-h6 mb-2">Developers</h2>
129+
<ul style="list-style: none" class="pa-0">
130+
<li class="mb-2">
131+
<v-hover v-slot="{ hover }">
132+
<a
133+
:href="$store.getters.getAppData.documentationUrl"
134+
class="text--primary text-decoration-none"
135+
:class="{ 'text-decoration-underline': hover }"
136+
>
137+
Documentation
138+
<v-icon small>{{ mdiBookOpenVariant }}</v-icon>
139+
</a>
140+
</v-hover>
141+
</li>
142+
<li class="mb-2">
143+
<v-hover v-slot="{ hover }">
144+
<a
145+
:href="$store.getters.getAppData.githubUrl"
146+
class="text--primary text-decoration-none"
147+
:class="{ 'text-decoration-underline': hover }"
148+
>
149+
Github
150+
<v-icon small>{{ mdiGithub }}</v-icon>
151+
</a>
152+
</v-hover>
153+
</li>
154+
</ul>
155+
</v-col>
156+
<v-col cols="12" md="3">
157+
<h2 class="text-h6 mb-2">Legal</h2>
158+
<ul style="list-style: none" class="pa-0">
159+
<li class="mb-2">
160+
<v-hover v-slot="{ hover }">
161+
<nuxt-link
162+
class="text--primary text-decoration-none"
163+
:class="{ 'text-decoration-underline': hover }"
164+
to="/terms-and-conditions"
165+
>
166+
Terms & Conditions
167+
<v-icon small>{{ mdiScaleBalance }}</v-icon>
168+
</nuxt-link>
169+
</v-hover>
170+
</li>
171+
<li>
172+
<v-hover v-slot="{ hover }">
173+
<nuxt-link
174+
class="text--primary text-decoration-none"
175+
:class="{ 'text-decoration-underline': hover }"
176+
to="/privacy-policy"
177+
>
178+
Privacy Policy
179+
<v-icon small>{{ mdiEyeOffOutline }}</v-icon>
180+
</nuxt-link>
181+
</v-hover>
182+
</li>
183+
<li class="mt-2">
184+
<v-hover v-slot="{ hover }">
185+
<a
186+
class="text--primary text-decoration-none"
187+
:class="{ 'text-decoration-underline': hover }"
188+
href="mailto:support@httpsms.com"
189+
>
190+
Contact Support
191+
<v-icon small>{{ mdiEmailOutline }}</v-icon>
192+
</a>
193+
</v-hover>
194+
</li>
195+
</ul>
196+
</v-col>
197+
</v-row>
198+
</v-container>
199+
</v-footer>
200+
</v-app>
201+
</template>
202+
203+
<script lang="ts">
204+
import Vue from 'vue'
205+
import {
206+
mdiLoginVariant,
207+
mdiArrowRight,
208+
mdiGithub,
209+
mdiCircle,
210+
mdiTwitter,
211+
mdiHeart,
212+
mdiEyeOffOutline,
213+
mdiCreditCardOutline,
214+
mdiScaleBalance,
215+
mdiEmailOutline,
216+
mdiBookOpenVariant,
217+
} from '@mdi/js'
218+
219+
export default Vue.extend({
220+
name: 'WebsiteLayout',
221+
data() {
222+
return {
223+
mdiLoginVariant,
224+
mdiArrowRight,
225+
mdiGithub,
226+
mdiTwitter,
227+
mdiHeart,
228+
mdiScaleBalance,
229+
mdiEyeOffOutline,
230+
mdiCreditCardOutline,
231+
mdiEmailOutline,
232+
mdiCircle,
233+
mdiBookOpenVariant,
234+
}
235+
},
236+
methods: {
237+
goToPricing() {
238+
if (this.$route.name === 'index') {
239+
this.$vuetify.goTo('#pricing')
240+
} else {
241+
this.$router.push('/#pricing')
242+
}
243+
},
244+
},
245+
})
246+
</script>
247+
248+
<style lang="scss">
249+
.v-application {
250+
.logo-badge {
251+
.v-badge__wrapper {
252+
span {
253+
margin-bottom: -8px;
254+
}
255+
}
256+
}
257+
}
258+
</style>

‎web/nuxt.config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default {
55
// Global page headers: https://go.nuxtjs.dev/config-head
66
head: {
77
titleTemplate: '%s',
8-
title: 'HTTP SMS - Convert your android phone into an SMS Gateway.',
8+
title: 'Convert your android phone into an SMS gateway - httpSMS',
99
htmlAttrs: {
1010
lang: 'en',
1111
},
@@ -36,12 +36,12 @@ export default {
3636
{
3737
hid: 'og:title',
3838
name: 'og:title',
39-
content: 'HTTP SMS - Convert your android phone into an SMS Gateway.',
39+
content: 'Convert your android phone into an SMS gateway - httpSMS',
4040
},
4141
{
4242
hid: 'twitter:title',
4343
name: 'twitter:title',
44-
content: 'HTTP SMS - Convert your android phone into an SMS Gateway.',
44+
content: 'Convert your android phone into an SMS gateway - httpSMS',
4545
},
4646
{
4747
hid: 'twitter:description',

0 commit comments

Comments
 (0)