Fix presskit (#9418)

* Move presskit to static folder

* Fix image location

* Add press kit FAQ strings

* Add faq section, fix images

* Update Images

* Add images to presskit page

* Remove unecessary parts

website/client/components/static/pressKit.vue

@@ -1,24 +1,33 @@
 <template lang="pug">
   .container-fluid
     h1 {{ $t('presskit') }}
-      p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
+    p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
-      p
+    p
-        a.btn.btn-lg.btn-success(href='~assets/images/presskit/presskit.zip') presskit.zip
+      a.btn.btn-lg.btn-success(href='/static/presskit/presskit.zip') presskit.zip
 
     div(v-for='(images, category) in imgs')
       h2 {{ $t('pk' + category) }}
       div(v-if='Array.isArray(images)')
         div(v-for='img in images')
-          img.img-rendering-auto.press-img(:src="`assets/images/presskit/${category}/${img}.png`")
+          img.img-fluid.img-rendering-auto.press-img(:src="`/static/presskit/${category}/${img}`")
       div(v-else)
-        div(v-for='(images, category) in images')
+        div(v-for='(images, secondaryCategory) in images')
-          h3 {{ $t('pk' + category) }}
+          h3 {{ $t('pk' + secondaryCategory) }}
           div(v-for='img in images')
-            img.img-rendering-auto.press-img(:src="~`assets/images/presskit/${category}/${img}.png`")
+            img.img-fluid.img-rendering-auto.press-img(:src="`/static/presskit/${category}/${secondaryCategory}/${img}`")
+
+    h1 {{ $t('FAQ') }}
+    
+    #faq(role='tablist')
+      div(v-for='(QA, index) in faq')
+        h2(v-b-toggle="QA.question", tabindex="0", role="button", v-html="$t(QA.question)")
+        b-collapse(:id="QA.question", accordion="pkAccordian", role="tabpanel")
+          p(v-html="$t(QA.answer)")
+    
+    p {{ $t('pkMoreQuestions') }}
 </template>
 
 <script>
-  // @TODO: How to use images?
   // @TODO: EMAILS.PRESS_ENQUIRY_EMAIL
   const PRESS_ENQUIRY_EMAIL = 'admin@habitica.com';
 
@@ -28,49 +37,89 @@
         PRESS_ENQUIRY_EMAIL,
         imgs: {
           Promo: [
-            'Promo',
+            'Promo.png',
-            'Promo - Thin',
+            'Promo - Thin.png',
           ],
           Logo: [
-            'Icon with Text',
+            'Icon with Text.png',
-            'Habitica Gryphon',
+            'Icon.png',
-            'iOS',
+            'Text.png',
-            'Android',
+            'Habitica Gryphon.png',
+            'iOS.png',
+            'Android.png',
           ],
           Boss: [
-            'Basi-List',
+            'Basi-List.png',
-            'Stagnant Dishes',
+            'Stagnant Dishes.png',
-            'SnackLess Monster',
+            'SnackLess Monster.png',
-            'Laundromancer',
+            'Laundromancer.png',
-            'Necro-Vice',
+            'Necro-Vice.png',
-            'Battling the Ghost Stag',
+            'Battling the Ghost Stag.png',
-            'Dread Drag\'on of Dilatory',
+            'Dread Drag\'on of Dilatory.png',
           ],
           Samples: {
             Website: [
-              'Tasks Page',
+              'CheckInIncentives.png',
-              'Equipment',
+              'Inventory.png',
-              'Market',
+              'Equipment.png',
-              'Guilds',
+              'Market.png',
-              'Challenges',
+              'Market2.png',
+              'Tavern.png',
+              'Guilds.png',
+              'Challenges.png',
             ],
             iOS: [
-              'Tasks Page',
+              'Tasks Page.png',
-              'Level Up',
+              'Level Up.png',
-              'Pets',
+              'Market.png',
-              'Party',
+              'Party.png',
-              'Boss',
+              'Boss.png',
             ],
             Android: [
-              'User',
+              'Login.png',
-              'Tasks Page',
+              'User.png',
-              'Reward',
+              'Tasks Page.png',
-              'Level Up',
+              'Add Tasks.png',
-              'Tavern',
+              'Stats.png',
-              'Party',
+              'Shops.png',
+              'Party.png',
             ],
           },
         },
+        faq: [
+          {
+            question: 'pkQuestion1',
+            answer: 'pkAnswer1',
+          },
+          {
+            question: 'pkQuestion2',
+            answer: 'pkAnswer2',
+          },
+          {
+            question: 'pkQuestion3',
+            answer: 'pkAnswer3',
+          },
+          {
+            question: 'pkQuestion4',
+            answer: 'pkAnswer4',
+          },
+          {
+            question: 'pkQuestion5',
+            answer: 'pkAnswer5',
+          },
+          {
+            question: 'pkQuestion6',
+            answer: 'pkAnswer6',
+          },
+          {
+            question: 'pkQuestion7',
+            answer: 'pkAnswer7',
+          },
+          {
+            question: 'pkQuestion8',
+            answer: 'pkAnswer8',
+          },
+        ],
       };
     },
   };

website/common/locales/en/front.json

@@ -141,6 +141,23 @@
   "presskit": "Press Kit",
   "presskitDownload": "Download all images:",
   "presskitText": "Thanks for your interest in Habitica! The following images can be used for articles or videos about Habitica. For more information, please contact Siena Leslie at <%= pressEnquiryEmail %>.",
+  "pkQuestion1": "What inspired Habitica? How did it start?",
+  "pkAnswer1": "If you’ve ever invested time in leveling up a character in a game, it’s hard not to wonder how great your life would be if you put all of that effort into improving your real-life self instead of your avatar. We starting building Habitica to address that question. <br /> Habitica officially launched with a Kickstarter in 2013, and the idea really took off. Since then, it’s grown into a huge project, supported by our awesome open-source volunteers and our generous users.",
+  "pkQuestion2": "Why does Habitica work?",
+  "pkAnswer2": "Forming a new habit is hard because people really need that obvious, instant reward. For example, it’s tough to start flossing, because even though our dentist tells us that it's healthier in the long run, in the immediate moment it just makes your gums hurt. <br /> Habitica's gamification adds a sense of instant gratification to everyday objectives by rewarding a tough task with experience, gold… and maybe even a random prize, like a dragon egg! This helps keep people motivated even when the task itself doesn't have an intrinsic reward, and we've seen people turn their lives around as a result. You can check out success stories here: https://habitversary.tumblr.com",
+  "pkQuestion3": "Why did you add social features?",
+  "pkAnswer3": "Social pressure is a huge motivating factor for a lot of people, so we knew that we wanted to have a strong community that would hold each other accountable for their goals and cheer for their successes. Luckily, one of the things that multiplayer video games do best is foster a sense of community among their users! Habitica’s community structure borrows from these types of games; you can form a small Party of close friends, but you can also join a larger, shared-interest groups known as a Guild. Although some users choose to play solo, most decide to form a support network that encourages social accountability through features such as Quests, where Party members pool their productivity to battle monsters together.",
+  "pkQuestion4": "Why does skipping tasks remove your avatar’s health?",
+  "pkAnswer4": "If you skip one of your daily goals, your avatar will lose health the following day. This serves as an important motivating factor to encourage people to follow through with their goals because people  really hate hurting their little avatar! Plus, the social accountability is critical for a lot of people: if you’re fighting a monster with your friends, skipping your tasks hurts their avatars, too.",
+  "pkQuestion5": "What distinguishes Habitica from other gamification programs?",
+  "pkAnswer5": "One of the ways that Habitica has been most successful at using gamification is that we've put a lot of effort into thinking about the game aspects to ensure that they are actually fun. We've also included many social components, because we feel that some of the most motivating games let you play with friends, and because research has shown that it's easier to form habits when you have accountability to other people.",
+  "pkQuestion6": "Who is the typical user of Habitica?",
+  "pkAnswer6": "Lots of different people use Habitica! More than half of our users are ages 18 to 34, but we have grandparents using the site with their young grandkids and every age in-between. Often families will join a party and battle monsters together. <br /> Many of our users have a background in games, but surprisingly, when we ran a survey a while back, 40% of our users identified as non-gamers! So it looks like our method can be effective for anyone who wants productivity and wellness to feel more fun.",
+  "pkQuestion7": "Why does Habitica use pixel art?",
+  "pkAnswer7": "Habitica uses pixel art for several reasons. In addition to the fun nostalgia factor, pixel art is very approachable to our volunteer artists who want to chip in. It's much easier to keep our pixel art consistent even when lots of different artists contribute, and it lets us quickly generate a ton of new content!",
+  "pkQuestion8": "How has Habitica affected people's real lives?",
+  "pkAnswer8": "You can find lots of testimonials for how Habitica has helped people here: https://habitversary.tumblr.com",
+  "pkMoreQuestions": "Do you have a question that’s not on this list? Send an email to leslie@habitica.com!",
   "pkVideo": "Video",
   "pkPromo": "Promos",
   "pkLogo": "Logos",