mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-04-14 19:56:23 +00:00
Update static features pages (#15451)
* 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
GitHub
parent
ebbcbef6d5
commit
836807aa1e
4 changed files with 135 additions and 106 deletions
|
|
@ -316,3 +316,9 @@
|
|||
line-height: 2;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -26,32 +26,34 @@
|
|||
"invalidEmail": "A valid email address is required in order to perform a password reset.",
|
||||
"login": "Login",
|
||||
"logout": "Log Out",
|
||||
"marketing1Header": "Improve Your Habits by Playing a Game",
|
||||
"marketing1Lead1Title": "Your Life, the Role Playing Game",
|
||||
"marketing1Lead1": "Habitica is a video game to help you improve real life habits. It \"gamifies\" your life by turning all your tasks (Habits, Dailies, and To Do's) into little monsters you have to conquer. The better you are at this, the more you progress in the game. If you slip up in life, your character starts backsliding in the game.",
|
||||
"marketing1Lead2Title": "Get Sweet Gear",
|
||||
"marketing1Lead2": "Improve your habits to build up your avatar. Show off the sweet gear you've earned!",
|
||||
"marketing1Lead3Title": "Find Random Prizes",
|
||||
"marketing1Lead3": "For some, it's the gamble that motivates them: a system called \"stochastic rewards.\" Habitica accommodates all reinforcement and punishment styles: positive, negative, predictable, and random.",
|
||||
"marketing2Header": "Compete with Friends",
|
||||
"marketing2Lead1Title": "Social Productivity",
|
||||
"marketing2Lead1": "While you can play Habitica solo, the lights really turn on when you start collaborating, competing, and holding each other accountable. The most effective part of any self-improvement program is social accountability, and what better an environment for accountability and competition than a video game?",
|
||||
"marketing2Lead2Title": "Fight Monsters",
|
||||
"marketing2Lead2": "What's a Role Playing Game without battles? Fight monsters with your party. Monsters are \"super accountability mode\" - a day you miss the gym is a day the monster hurts *everyone!*",
|
||||
"marketing2Lead3Title": "Challenge Each Other",
|
||||
"marketing2Lead3": "Challenges let you compete with friends and strangers. Whoever does the best at the end of a challenge wins special prizes.",
|
||||
"marketing3Header": "Apps and Extensions",
|
||||
"marketing3Lead1": "The **iPhone & Android** apps let you take care of business on the go. We realize that logging into the website to click buttons can be a drag.",
|
||||
"marketing3Lead2Title": "Integrations",
|
||||
"marketing3Lead2": "Other **3rd Party Tools** tie Habitica into various aspects of your life. Our API provides easy integration for things like the [Chrome Extension](https://chrome.google.com/webstore/detail/habitica/pidkmpibnnnhneohdgjclfdjpijggmjj?hl=en-US), for which you lose points when browsing unproductive websites, and gain points when on productive ones. [See more here](https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations).",
|
||||
"marketing4Header": "Organizational Use",
|
||||
"marketing4Lead1": "Education is one of the best sectors for gamification. We all know how glued to phones and games students are these days; harness that power! Pit your students against each other in friendly competition. Reward good behavior with rare prizes. Watch their grades and behavior soar.",
|
||||
"marketing4Lead1Title": "Gamification In Education",
|
||||
"marketing4Lead2": "Health care costs are on the rise, and something's gotta give. Hundreds of programs are built to reduce costs and improve wellness. We believe Habitica can pave a substantial path towards healthy lifestyles.",
|
||||
"marketing4Lead2Title": "Gamification In Health and Wellness",
|
||||
"marketing4Lead3-1": "Want to gamify your life?",
|
||||
"marketing1Header": "Build better habits one level at a time!",
|
||||
"marketing1Lead1Title": "Gamify your life",
|
||||
"marketing1Lead1": "Habitica is the perfect app for anyone who struggles with to-do lists. We use familiar game mechanics like rewarding you with Gold, Experience, and items to help you feel productive and boost your sense of accomplishment when you complete tasks. The better you are at your tasks, the more you progress in the game.",
|
||||
"marketing1Lead2Title": "Gear up in style",
|
||||
"marketing1Lead2": "Collect swords, armor, and much more with the Gold you earn from completing tasks. With hundreds of pieces to collect and choose from, you'll never run out of combinations to try. Optimize for stats, style, or both! ",
|
||||
"marketing1Lead3Title": "Get rewarded for your effort",
|
||||
"marketing1Lead3": "Having something to look forward to can be the difference between getting a task done, or having it taunt you for weeks. When life doesn't offer a reward, Habitica has you covered! You’ll be rewarded for every task, but surprises are around every corner–so keep up your progress! ",
|
||||
"marketing2Header": "Team up with friends",
|
||||
"marketing2Lead1Title": "Social productivity",
|
||||
"marketing2Lead1": "Get a boost of motivation by collaborating, competing, and interacting with others! Habitica is built to harness the most effective part of any self-improvement program: social accountability.",
|
||||
"marketing2Lead2Title": "Battle monsters on Quests",
|
||||
"marketing2Lead2": "Take on one of our hundreds of Quests with a Party of friends to enter the fray. Quest monsters push your accountability to the max. Forgetting to floss means damage done to everyone!",
|
||||
"marketing2Lead3Title": "Challenge each other",
|
||||
"marketing2Lead3": "Join Challenges made by our community to get curated task lists that fit your interests and goals. Do your best to compete for the Gem prize awarded to the winner!",
|
||||
"marketing3Header": "More ways to use Habitica",
|
||||
"marketing3Lead1Title": "Android & iOS apps",
|
||||
"marketing3Lead1": "You can get Habitica on your Android or iOS device to check off tasks anywhere. Check out our award winning apps for a fresh approach to getting things done.",
|
||||
"marketing3Lead2Title": "Open-Source community",
|
||||
"marketing3Lead2": "We're proud to be an open-source project that welcomes contributions from our dedicated community. Make Habitica fit your own needs or contribute to improve the experience of all players around the world. Visit us on [GitHub](https://github.com/HabitRPG/habitica/wiki/Contributing-to-Habitica) to learn more!",
|
||||
"marketing4Header": "Beyond household chores",
|
||||
"marketing4Lead1": "Education is one of the best places for a little gamification! Break through the monotony of everyday classwork by adding some game play into the mix. Habitica can be a fun way to track homework, make classroom Challenges, and let your students show off their accomplishments.",
|
||||
"marketing4Lead1Title": "Gamification in education",
|
||||
"marketing4Lead2": "Building a healthier lifestyle can easily become an overwhelming endeavor. Habitica helps you track all aspects of your fitness goals with flexible scheduling and intensity to meet you where you are. So have some fun while you work your way towards better health!",
|
||||
"marketing4Lead2Title": "Gamification In health and wellness",
|
||||
"marketing4Lead3-1": "Ready to have fun getting things done?",
|
||||
"marketing4Lead3-2": "Interested in running a group in education, wellness, and more?",
|
||||
"marketing4Lead3Title": "Gamify Everything",
|
||||
"marketing4Lead3Title": "Start your journey!",
|
||||
"marketing4Lead3Button": "Get Started Today",
|
||||
"mobileAndroid": "Android App",
|
||||
"mobileIOS": "iOS App",
|
||||
"oldNews": "News",
|
||||
|
|
|
|||
|
|
@ -25,32 +25,32 @@
|
|||
"invalidEmail": "A valid email address is required in order to perform a password reset.",
|
||||
"login": "Login",
|
||||
"logout": "Log Out",
|
||||
"marketing1Header": "Improve Your Habits by Playing a Game",
|
||||
"marketing1Lead1Title": "Your Life, the Role Playing Game",
|
||||
"marketing1Lead1": "Habitica is a video game to help you improve real life habits. It \"gamifies\" your life by turning all your tasks (Habits, Dailies, and To Do's) into little monsters you have to conquer. The better you are at this, the more you progress in the game. If you slip up in life, your character starts backsliding in the game.",
|
||||
"marketing1Lead2Title": "Get Sweet Gear",
|
||||
"marketing1Lead2": "Improve your habits to build up your avatar. Show off the sweet gear you've earned!",
|
||||
"marketing1Lead3Title": "Find Random Prizes",
|
||||
"marketing1Lead3": "For some, it's the gamble that motivates them: a system called \"stochastic rewards.\" Habitica accommodates all reinforcement and punishment styles: positive, negative, predictable, and random.",
|
||||
"marketing2Header": "Compete with Friends",
|
||||
"marketing1Header": "Build better habits one level at a time!",
|
||||
"marketing1Lead1Title": "Gamify your life",
|
||||
"marketing1Lead1": "Habitica is the perfect app for anyone who struggles with to-do lists. We use familiar game mechanics like rewarding you with Gold, Experience, and items to help you feel productive and boost your sense of accomplishment when you complete tasks. The better you are at your tasks, the more you progress in the game.",
|
||||
"marketing1Lead2Title": "Gear up in style",
|
||||
"marketing1Lead2": "Collect swords, armor, and much more with the Gold you earn from completing tasks. With hundreds of pieces to collect and choose from, you'll never run out of combinations to try. Optimize for stats, style, or both! ",
|
||||
"marketing1Lead3Title": "Get rewarded for your effort",
|
||||
"marketing1Lead3": "Having something to look forward to can be the difference between getting a task done, or having it taunt you for weeks. When life doesn't offer a reward, Habitica has you covered! You’ll be rewarded for every task, but surprises are around every corner–so keep up your progress! ",
|
||||
"marketing2Header": "Team up with friends",
|
||||
"marketing2Lead1Title": "Social Productivity",
|
||||
"marketing2Lead1": "While you can play Habitica solo, the lights really turn on when you start collaborating, competing, and holding each other accountable. The most effective part of any self-improvement program is social accountability, and what better an environment for accountability and competition than a video game?",
|
||||
"marketing2Lead2Title": "Fight Monsters",
|
||||
"marketing2Lead2": "What's a Role Playing Game without battles? Fight monsters with your party. Monsters are \"super accountability mode\" - a day you miss the gym is a day the monster hurts *everyone!*",
|
||||
"marketing2Lead1": "Get a boost of motivation by collaborating, competing, and interacting with others! Habitica is built to harness the most effective part of any self-improvement program: social accountability.",
|
||||
"marketing2Lead2Title": "Battle monsters on Quests",
|
||||
"marketing2Lead2": "Take on one of our hundreds of Quests with a Party of friends to enter the fray. Quest monsters push your accountability to the max. Forgetting to floss means damage done to everyone!",
|
||||
"marketing2Lead3Title": "Challenge Each Other",
|
||||
"marketing2Lead3": "Challenges let you compete with friends and strangers. Whoever does the best at the end of a challenge wins special prizes.",
|
||||
"marketing3Header": "Apps and Extensions",
|
||||
"marketing3Lead1": "The **iPhone & Android** apps let you take care of business on the go. We realise that logging into the website to click buttons can be a drag.",
|
||||
"marketing3Lead2Title": "Integrations",
|
||||
"marketing3Lead2": "Other **3rd Party Tools** tie Habitica into various aspects of your life. Our API provides easy integration for things like the [Chrome Extension](https://chrome.google.com/webstore/detail/habitica/pidkmpibnnnhneohdgjclfdjpijggmjj?hl=en-US), for which you lose points when browsing unproductive websites, and gain points when on productive ones. [See more here](https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations).",
|
||||
"marketing4Header": "Organisational Use",
|
||||
"marketing4Lead1": "Education is one of the best sectors for gamification. We all know how glued to phones and games students are these days; harness that power! Pit your students against each other in friendly competition. Reward good behavior with rare prizes. Watch their grades and behavior soar.",
|
||||
"marketing2Lead3": "Join Challenges made by our community to get curated task lists that fit your interests and goals. Do your best to compete for the Gem prize awarded to the winner!",
|
||||
"marketing3Header": "Android & iOS Apps",
|
||||
"marketing3Lead1": "You can get Habitica on your Android or iOS device to check off tasks anywhere. Check out our award winning apps for a fresh approach to getting things done.",
|
||||
"marketing3Lead2Title": "Open-Source Community",
|
||||
"marketing3Lead2": "We're proud to be an open-source project that welcomes contributions from our dedicated community. Make Habitica fit your own needs or contribute to improve the experience of all players around the world. Visit us on [GitHub](https://github.com/habitrpg) to learn more!",
|
||||
"marketing4Header": "Beyond household chores",
|
||||
"marketing4Lead1": "Education is one of the best places for a little gamification! Break through the monotony of everyday classwork by adding some game play into the mix. Habitica can be a fun way to track homework, make classroom Challenges, and let your students show off their accomplishments.",
|
||||
"marketing4Lead1Title": "Gamification In Education",
|
||||
"marketing4Lead2": "Health care costs are on the rise, and something's gotta give. Hundreds of programmes are built to reduce costs and improve wellness. We believe Habitica can pave a substantial path towards healthy lifestyles.",
|
||||
"marketing4Lead2Title": "Gamification In Health And Wellness",
|
||||
"marketing4Lead3-1": "Want to gamify your life?",
|
||||
"marketing4Lead2": "Building a healthier lifestyle can easily become an overwhelming endeavor. Habitica helps you track all aspects of your fitness goals with flexible scheduling and intensity to meet you where you are. So have some fun while you work your way towards better health!",
|
||||
"marketing4Lead2Title": "Gamification In Health and Wellness",
|
||||
"marketing4Lead3-1": "Ready to have fun getting things done?",
|
||||
"marketing4Lead3-2": "Interested in running a group in education, wellness, and more?",
|
||||
"marketing4Lead3Title": "Gamify Everything",
|
||||
"marketing4Lead3Title": "Start Your Journey",
|
||||
"mobileAndroid": "Android App",
|
||||
"mobileIOS": "iOS App",
|
||||
"oldNews": "News",
|
||||
|
|
|
|||
Loading…
Reference in a new issue