Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update static features pages (#15451)

Browse Source 
* update images on static features page

* small layout changes

* Update feature texts

* layout tweaks

* refactor(client): move to Vite by @phillipthelen

* update images on static features page

* make text more comfortable to read

* update capitalization

* fix(whitespace): add EOF CR

---------

Co-authored-by: Phillip Thelen <phillip@habitica.com>
This commit is contained in:
Kalista Payne
2025-06-12 13:11:16 -05:00
committed by GitHub
parent ebbcbef6d5
commit 836807aa1e
4 changed files with 135 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/static/features.vue
+80 -59
View File
@@ -6,127 +6,145 @@
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="@/assets/images/marketing/screenshot.png">
<div class="col-12 mb-5 mb-md-0">
<img :src="makeUrl('features_taskboard.png')" class="img-fluid">
<h2>{{ $t('marketing1Lead1Title') }}</h2>
<p>{{ $t('marketing1Lead1') }}</p>
<div class="row justify-content-md-center">
<p class="col col-lg-8 col-xl-6 margin-auto description">{{ $t('marketing1Lead1') }}</p>
</div>
</div>
<div class="col-md-6">
<img src="@/assets/images/marketing/gear.png">
</div>
<div class="row">
<div class="col-md-6 mb-5 mb-md-0">
<img :src="makeUrl('features_gear.png')">
<h2>{{ $t('marketing1Lead2Title') }}</h2>
<p>{{ $t('marketing1Lead2') }}</p>
<img
src="@/assets/images/marketing/drops.png"
style="max-height: 200px;"
>
<p class="description">{{ $t('marketing1Lead2') }}</p>
</div>
<div class="col-md-6 mb-5 mb-md-0">
<img :src="makeUrl('features_items.png')">
<h2>{{ $t('marketing1Lead3Title') }}</h2>
<p>{{ $t('marketing1Lead3') }}</p>
<p class="description">{{ $t('marketing1Lead3') }}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="col-12">
<h1>{{ $t('marketing2Header') }}</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row mb-5">
<div class="col-12">
<h2>{{ $t('marketing2Lead1Title') }}</h2>
<p>{{ $t('marketing2Lead1') }}</p>
<img src="@/assets/images/marketing/vice3.png">
<h2>{{ $t('marketing2Lead2Title') }}</h2>
<p v-markdown="$t('marketing2Lead2')"></p>
<p class="description">{{ $t('marketing2Lead1') }}</p>
</div>
<div class="col-md-6">
<img src="@/assets/images/marketing/challenge.png">
</div>
<div class="row">
<div class="col-md-6 mb-5 mb-md-0">
<img :src="makeUrl('features_monsters.png')">
<h2>{{ $t('marketing2Lead2Title') }}</h2>
<p class="description" v-markdown="$t('marketing2Lead2')"></p>
</div>
<div class="col-md-6 mb-5 mb-md-0">
<img :src="makeUrl('features_challenges.png')">
<h2>{{ $t('marketing2Lead3Title') }}</h2>
<p>{{ $t('marketing2Lead3') }}</p>
<p class="description">{{ $t('marketing2Lead3') }}</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="col-12">
<h1>{{ $t('marketing3Header') }}</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="@/assets/images/marketing/android_iphone.png">
<h2>{{ $t('footerMobile') }}</h2>
<p v-markdown="$t('marketing3Lead1')"></p>
<div class="col-md-6 mb-5 mb-md-0">
<img :src="makeUrl('features_mobile.png')">
<h2>{{ $t('marketing3Lead1Title') }}</h2>
<p class="description" v-markdown="$t('marketing3Lead1')"></p>
</div>
<div class="col-md-6">
<img src="@/assets/images/marketing/integration.png">
<div class="col-md-6 mb-5 mb-md-0">
<img :src="makeUrl('features_opensource.png')">
<h2>{{ $t('marketing3Lead2Title') }}</h2>
<p v-markdown="$t('marketing3Lead2')"></p>
<p class="description" v-markdown="$t('marketing3Lead2')"></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="col-12">
<h1>{{ $t('marketing4Header') }}</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-6 mb-5 mb-md-0">
<div class="media">
<img src="@/assets/images/marketing/education.png">
<div class="media-body">
<h2>{{ $t('marketing4Lead1Title') }}</h2>
<p>{{ $t('marketing4Lead1') }}</p>
<p class="description">{{ $t('marketing4Lead1') }}</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-6 mb-5 mb-md-0">
<div class="media">
<img src="@/assets/images/marketing/wellness.png">
<div class="media-body">
<h2>{{ $t('marketing4Lead2Title') }}</h2>
<p>{{ $t('marketing4Lead2') }}</p>
<p class="description">{{ $t('marketing4Lead2') }}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<h2>{{ $t('marketing4Lead3Title') }}</h2>
<img src="@/assets/images/marketing/lefnire.png">
<p class="span">
<span>{{ $t('marketing4Lead3-1') }}</span>
<div class="row mt-5">
<div class="col-md-6 offset-md-3 mb-5 mb-md-0">
<h1>{{ $t('marketing4Lead3Title') }}</h1>
<img :src="makeUrl('features_gamify.png')">
<div class="cta-container">
<h2>{{ $t('marketing4Lead3-1') }}</h2>
<button
class="btn btn-primary"
class="btn btn-lg btn-primary"
@click="playButtonClick()"
>
{{ $t('playButton') }}
{{ $t('marketing4Lead3Button') }}
</button>
</p>
<p class="span">
<span>{{ $t('marketing4Lead3-2') }}</span>
<a
class="btn btn-primary"
href="/static/plans"
target="_blank"
>{{ $t('contactUs') }}</a>
</p>
</div>
</div>
</div>
</div>
</template>
<style lang='scss' scoped>
.btn {
margin-left: 1em;
}
img {
box-shadow: 0 0 10px 5px #888;
margin: 0.5em;
max-width: 500px;
max-width: 350px;
@media (max-width: 1200px) {
max-width: 100%;
width: 100%;
}
}
.img-fluid {
width: 100%;
max-width: 900px;
}
.cta-container {
text-align: center;
margin: 2em auto;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.description {
max-width: 600px;
margin: auto;
font-size: 1.1rem;
line-height: 1.6rem;
}
</style>
<script>
@@ -145,6 +163,9 @@ export default {
playButtonClick () {
this.$router.push('/register');
},
makeUrl (filename) {
return `https://habitica-assets.s3.amazonaws.com/assets/${filename}`;
},
},
};
</script>