Skip to content

Commit 83d5e4b

Browse files
AchoArnoldAchoArnold
committed
fix: make landing page mobile responsive
1 parent 42d4dc7 commit 83d5e4b

10 files changed

Lines changed: 54 additions & 39 deletions

‎web/app/layouts/website.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ function goToPricing() {
4343
<v-container>
4444
<v-row>
4545
<v-col class="w-full d-flex">
46-
<NuxtLink to="/" class="text-decoration-none d-flex">
46+
<NuxtLink to="/" class="text-decoration-none d-flex align-baseline">
4747
<v-avatar
4848
color="#121212"
49-
class="mt-6 pa-1"
49+
class="pa-1"
5050
rounded="0"
5151
:image="'/img/logo.svg'"
5252
:size="38"

‎web/app/pages/blog/end-to-end-encryption-to-sms-messages.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,11 @@ useHead({
3232

3333
<template>
3434
<VContainer v-highlight class="pt-8">
35-
<VRow class="mt-16">
35+
<VRow :class="{ 'mt-16': mdAndUp }">
3636
<VCol cols="12" md="9">
3737
<h1
3838
:class="
39-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
39+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
4040
"
4141
>
4242
Secure your conversations by encrypting your SMS messages end-to-end

‎web/app/pages/blog/forward-incoming-sms-from-phone-to-webhook.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ useHead({
3939

4040
<template>
4141
<VContainer class="pt-8">
42-
<VRow class="mt-16">
42+
<VRow :class="{ 'mt-16': mdAndUp }">
4343
<VCol cols="12" md="9">
4444
<VImg
4545
style="border-radius: 4px"
@@ -49,7 +49,7 @@ useHead({
4949

5050
<h1
5151
:class="
52-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
52+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
5353
"
5454
>
5555
How to forward a text message (SMS) from an android phone into your

‎web/app/pages/blog/grant-send-and-read-sms-permissions-on-android.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ useHead({
2626

2727
<template>
2828
<VContainer class="pt-8">
29-
<VRow class="mt-16">
29+
<VRow :class="{ 'mt-16': mdAndUp }">
3030
<VCol cols="12" md="9">
3131
<h1
3232
:class="
33-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
33+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
3434
"
3535
>
3636
How to grant SMS permissions on Android 15+

‎web/app/pages/blog/how-to-send-sms-messages-from-excel.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ useHead({
3434

3535
<template>
3636
<VContainer class="pt-8">
37-
<VRow class="mt-16">
37+
<VRow :class="{ 'mt-16': mdAndUp }">
3838
<VCol cols="12" md="9">
3939
<h1
4040
:class="
41-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
41+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
4242
"
4343
>
4444
How to send SMS messages to multiple phone numbers from Excel

‎web/app/pages/blog/index.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
const { mdAndUp } = useDisplay()
2+
const { mdAndUp, smAndDown } = useDisplay()
33
44
definePageMeta({
55
layout: 'website',
@@ -105,7 +105,9 @@ const sortedArticles = computed(() =>
105105
<VCol cols="12" md="9">
106106
<VRow>
107107
<VCol cols="12">
108-
<h1 class="text-display-large mb-2">Blog</h1>
108+
<h1 class="text-display-large mb-2" :class="{ 'mt-0': smAndDown }">
109+
Blog
110+
</h1>
109111
<h2
110112
class="text-medium-emphasis mt-2 mb-n4 text-title-large font-weight-light"
111113
>

‎web/app/pages/blog/send-bulk-sms-from-csv-file-with-no-code.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ useHead({
3434

3535
<template>
3636
<VContainer class="pt-8">
37-
<VRow class="mt-16">
37+
<VRow :class="{ 'mt-16': mdAndUp }">
3838
<VCol cols="12" md="9">
3939
<h1
4040
:class="
41-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
41+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
4242
"
4343
>
4444
Send multiple SMS messages from a CSV file with no code

‎web/app/pages/blog/send-sms-from-android-phone-with-python.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ useHead({
3737

3838
<template>
3939
<VContainer v-highlight class="pt-8">
40-
<VRow class="mt-16">
40+
<VRow :class="{ 'mt-16': mdAndUp }">
4141
<VCol cols="12" md="9">
4242
<VImg
4343
style="border-radius: 4px"
@@ -47,7 +47,7 @@ useHead({
4747

4848
<h1
4949
:class="
50-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
50+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
5151
"
5252
>
5353
Send an SMS from your Android phone with Python

‎web/app/pages/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ useHead({
3434

3535
<template>
3636
<VContainer v-highlight class="pt-8">
37-
<VRow class="mt-16">
37+
<VRow :class="{ 'mt-16': mdAndUp }">
3838
<VCol cols="12" md="9">
3939
<h1
4040
:class="
41-
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-1'
41+
mdAndUp ? 'text-display-medium mt-1' : 'text-display-small mt-n2'
4242
"
4343
>
4444
Send an SMS message when a new row is added to Google Sheets using

‎web/app/pages/index.vue‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ const planYearlyMonthlyPrice = computed(
7272
<h1
7373
class="text-display-large font-weight-bold pb-1 gradient-header"
7474
:class="{
75-
'mt-16': lgAndUp,
75+
'mt-16 font-size-45': lgAndUp,
7676
'mt-10': md,
77-
'mt-8': smAndDown,
77+
'mt-n8': smAndDown,
7878
}"
7979
>
8080
Convert your Android phone into an SMS gateway.
@@ -478,7 +478,7 @@ const planYearlyMonthlyPrice = computed(
478478
</VTimeline>
479479
</VCol>
480480
<VCol cols="12" md="7">
481-
<div class="w-100 mt-n8">
481+
<div class="w-100" :class="{ 'mt-n8': mdAndUp }">
482482
<VTabs
483483
v-model="selectedTab"
484484
color="primary"
@@ -765,7 +765,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
765765
<VBtn block to="/login" variant="tonal" size="large"
766766
>Get Started</VBtn
767767
>
768-
<p class="mt-6 text-body-large">
768+
<p class="mt-6 text-md-body-large text-title-medium">
769769
<VIcon
770770
color="primary"
771771
class="mt-n1"
@@ -774,7 +774,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
774774
/>
775775
Send or receive up to <b>200</b> SMS/month
776776
</p>
777-
<p class="text-body-large mt-n3">
777+
<p class="text-md-body-large text-title-medium mt-n3">
778778
<VIcon
779779
color="primary"
780780
class="mt-n1"
@@ -783,7 +783,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
783783
/>
784784
Offline notifications for your phone
785785
</p>
786-
<p class="text-body-large mt-n3">
786+
<p class="text-md-body-large text-title-medium mt-n3">
787787
<VIcon
788788
color="primary"
789789
class="mt-n1"
@@ -792,7 +792,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
792792
/>
793793
Forward received messages via webhook
794794
</p>
795-
<p class="text-body-large mt-n3">
795+
<p class="text-md-body-large text-title-medium mt-n3">
796796
<VIcon
797797
color="primary"
798798
class="mt-n1"
@@ -837,7 +837,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
837837
<VBtn block color="primary" to="/login" size="large"
838838
>Try For Free</VBtn
839839
>
840-
<p class="mt-6 text-body-large">
840+
<p class="mt-6 text-md-body-large text-title-medium">
841841
<VIcon
842842
color="primary"
843843
class="mt-n1"
@@ -846,7 +846,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
846846
/>
847847
Send or receive up to <b>5,000</b> SMS/month
848848
</p>
849-
<p class="text-body-large mt-n3">
849+
<p class="text-md-body-large text-title-medium mt-n3">
850850
<VIcon
851851
color="primary"
852852
class="mt-n1"
@@ -855,7 +855,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
855855
/>
856856
Offline notifications for your phone
857857
</p>
858-
<p class="text-body-large mt-n3">
858+
<p class="text-md-body-large text-title-medium mt-n3">
859859
<VIcon
860860
color="primary"
861861
class="mt-n1"
@@ -864,7 +864,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
864864
/>
865865
Forward received messages via webhook
866866
</p>
867-
<p class="text-body-large mt-n3">
867+
<p class="text-md-body-large text-title-medium mt-n3">
868868
<VIcon
869869
color="primary"
870870
class="mt-n1"
@@ -909,7 +909,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
909909
<VBtn block variant="tonal" to="/login" size="large"
910910
>Try For Free</VBtn
911911
>
912-
<p class="mt-6 text-body-large">
912+
<p class="mt-6 text-md-body-large text-title-medium">
913913
<VIcon
914914
color="primary"
915915
class="mt-n1"
@@ -919,7 +919,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
919919
Send or receive up to
920920
<b>{{ pricingLabels[pricing] }}</b> SMS/month
921921
</p>
922-
<p class="text-body-large mt-n3">
922+
<p class="text-md-body-large text-title-medium mt-n3">
923923
<VIcon
924924
color="primary"
925925
class="mt-n1"
@@ -928,7 +928,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
928928
/>
929929
Offline notifications for your phone
930930
</p>
931-
<p class="text-body-large mt-n3">
931+
<p class="text-md-body-large text-title-medium mt-n3">
932932
<VIcon
933933
color="primary"
934934
class="mt-n1"
@@ -937,7 +937,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
937937
/>
938938
Forward received messages via webhook
939939
</p>
940-
<p class="text-body-large mt-n3">
940+
<p class="text-md-body-large text-title-medium mt-n3">
941941
<VIcon
942942
color="primary"
943943
class="mt-n1"
@@ -1055,7 +1055,9 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
10551055
<VContainer class="pb-16">
10561056
<VRow>
10571057
<VCol md="8" offset-md="2">
1058-
<h2 class="text-display-large mb-4 text-center">
1058+
<h2
1059+
class="text-md-display-large mb-4 text-center text-display-medium"
1060+
>
10591061
Frequently Asked Questions
10601062
</h2>
10611063
<p class="text-center text-title-large mt-4 text-medium-emphasis">
@@ -1069,7 +1071,9 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
10691071
<VCol md="8" offset-md="2" class="mb-16">
10701072
<VExpansionPanels v-model="faqPanel">
10711073
<VExpansionPanel>
1072-
<VExpansionPanelTitle class="text-headline-small">
1074+
<VExpansionPanelTitle
1075+
class="text-title-large text-md-headline-small"
1076+
>
10731077
Can I install the app on my iPhone?
10741078
<template #actions>
10751079
<VIcon :icon="faqPanel === 0 ? mdiMinus : mdiPlus" />
@@ -1084,7 +1088,9 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
10841088
</VExpansionPanelText>
10851089
</VExpansionPanel>
10861090
<VExpansionPanel>
1087-
<VExpansionPanelTitle class="text-headline-small">
1091+
<VExpansionPanelTitle
1092+
class="text-title-large text-md-headline-small"
1093+
>
10881094
What's the minimum supported Android version?
10891095
<template #actions>
10901096
<VIcon :icon="faqPanel === 1 ? mdiMinus : mdiPlus" />
@@ -1099,7 +1105,9 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
10991105
</VExpansionPanelText>
11001106
</VExpansionPanel>
11011107
<VExpansionPanel>
1102-
<VExpansionPanelTitle class="text-headline-small">
1108+
<VExpansionPanelTitle
1109+
class="text-title-large text-md-headline-small"
1110+
>
11031111
Can I send unlimited number of messages per month?
11041112
<template #actions>
11051113
<VIcon :icon="faqPanel === 2 ? mdiMinus : mdiPlus" />
@@ -1116,7 +1124,9 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
11161124
</VExpansionPanelText>
11171125
</VExpansionPanel>
11181126
<VExpansionPanel>
1119-
<VExpansionPanelTitle class="text-headline-small">
1127+
<VExpansionPanelTitle
1128+
class="text-title-large text-md-headline-small"
1129+
>
11201130
Can I change the sender of the SMS message?
11211131
<template #actions>
11221132
<VIcon :icon="faqPanel === 3 ? mdiMinus : mdiPlus" />
@@ -1140,13 +1150,16 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
11401150

11411151
<style lang="scss">
11421152
.gradient-header {
1143-
font-size: 4.5rem;
11441153
color: #1ad37f;
11451154
background-image: -webkit-linear-gradient(0deg, #1ad37f 14%, #329ef4 55%);
11461155
-webkit-background-clip: text;
11471156
-webkit-text-fill-color: transparent;
11481157
}
11491158
1159+
.font-size-45 {
1160+
font-size: 4.5rem;
1161+
}
1162+
11501163
.gradient-underline {
11511164
color: white;
11521165
}

0 commit comments

Comments
 (0)