Redesign: Static Pages (#8989)

* feat(pages): static Features * feat(static-pages): add header * feat(static-pages): Community Guidelines * fix(strings): tweaks
2025-12-17 14:47:53 +01:00 · 2017-08-26 09:03:43 -05:00
parent c35e4f5750
commit d24eb67fa2
37 changed files with 551 additions and 421 deletions
--- a/website/client/components/static/features.vue
+++ b/website/client/components/static/features.vue
@@ -1,105 +1,115 @@
 <template lang="pug">
-  .row#about-page
-    .col-md-12#aboutPage
-      .marketing
-        h1 {{ $t('marketing1Header') }}
-        .row
-          .col-md-6
-            a.gallery(href='/marketing/screenshot.png', :title="$t('marketing1Header')")
-              img.img-rendering-auto(src='/marketing/screenshot.png')
-            p.lead {{ $t('marketing1Lead1') }}
-          .col-md-6
-
-            a.gallery(href='/marketing/gear.png', :title="$t('marketing1Lead2Title')")
-              img.img-rendering-auto(src='/marketing/gear.png')
-            p.lead(v-html="$t('marketing1Lead2')")
-
-            a.gallery(href='/marketing/drops.png', :title="$t('marketing1Lead3Title')")
-              img.img-rendering-auto(src='/marketing/drops.png',style='max-height:200px')
-            p.lead(v-html="$t('marketing1Lead3')")
-
-            // TODO achievements
-        hr.clearfix
-
-        h1 {{ $t('marketing2Header') }}
-        .row
-          .col-md-6
-            a.gallery(href='/marketing/guild.png', :title="$t('marketing2Header')")
-              img.img-rendering-auto(src='/marketing/guild.png')
-            p.lead {{ $t('marketing2Lead1') }}
-            a.gallery(href='/marketing/vice3.png', :title="$t('marketing2Lead2Title')")
-              img(src='/marketing/vice3.png')
-            p.lead(v-html="$t('marketing2Lead2')")
-          .col-md-6
-            a.gallery(href='/marketing/challenge.png', :title="$t('challenges')")
-              img.img-rendering-auto(src='/marketing/challenge.png')
-            p.lead(v-html="$t('marketing2Lead3')")
-
-        hr.clearfix
-
-        h1 {{ $t('marketing3Header') }}
-        .row
-          .col-md-6
-            a.gallery(href='/marketing/android_iphone.png', :title="$t('marketing3LeadTitle')")
-              img.img-rendering-auto(src='/marketing/android_iphone.png',style='box-shadow:none;')
-            p.lead(v-html="$t('marketing3Lead1')")
-          .col-md-6
-            a.gallery(href='/marketing/integration.png', :title="$t('marketing3LeadTitle')")
-              img.img-rendering-auto(src='/marketing/integration.png')
-            p.lead(v-html="$t('marketing3Lead2')")
-
-        hr.clearfix
-
-        h1 {{ $t('marketing4Header') }}
-        .row
-          .col-md-6
-            h3 {{ $t('marketing4Lead1Title') }}
-            img.pull-left(src='/marketing/education.png')
-            p.lead {{ $t('marketing4Lead1') }}
-          .col-md-6
-            h3 {{ $t('marketing4Lead2Title') }}
-            img.pull-left(src='/marketing/wellness.png')
-            p.lead {{ $t('marketing4Lead2') }}
-        .row
-          .col-md-6.col-md-offset-3
-            h3 {{ $t('marketing4Lead3Title') }}
-            img.img-rendering-auto(src='/marketing/lefnire.png')
-            p.lead
-              | {{ $t('marketing4Lead3-1') }}
-              |&nbsp;
-              button.btn.btn-primary(ng-click='playButtonClick()') {{ $t('playButton') }}
-              |&nbsp;
-              | {{ $t('marketing4Lead3-2') }}
-              |&nbsp;
-              a.btn.btn-primary(href='/static/plans',target='_blank') {{ $t('contactUs') }}
-              |&nbsp;
-              | {{ $t('marketing4Lead3-3') }}
-              |&nbsp;
-              a.btn.btn-primary(href='/static/videos') {{ $t('watchVideos') }}
-
-
-        hr
-        p.lead {{ $t('landingp1') }}
-        h2 {{ $t('landingp2header') }}
-        //images in these parts could be useful, too
-        //if there's a language workaround, image headers? people like pictures!
-        p.lead
-          | {{ $t('landingp2') }}
-          |&nbsp;
-        h2 {{ $t('landingp3header') }}
-        //I'm not sold on "Consquences as the title here. Anyone got a better idea?
-        p.lead
-          | {{ $t('landingp3') }}
-          |&nbsp;
-        h2 {{ $t('landingp4header') }}
-        p.lead {{ $t('landingp4') }}
-        //- TODO
-          h2 {{ $t('landingend') }}
-          p.lead
-             {{ $t('landingend2') }}
-            a(href="FEATURESPAGEHERE") {{ $t('landingfeatureslink') }}
-             {{ $t('landingend3') }}
-            a(href="ENTERPRISEPAGEHERE") {{ $t('landingadminlink') }}
-            |&nbsp;
-             {{ $t('landingend4') }}
+  div
+    static-header
+    .container-fluid.text-center
+      .row
+        .col-md-12
+          h1 {{ $t('marketing1Header') }}
+      .row
+        .col-md-6
+          img(src='~assets/images/marketing/screenshot.png')
+          h2 {{ $t('marketing1Lead1Title') }}
+          p {{ $t('marketing1Lead1') }}
+        .col-md-6
+          img(src='~assets/images/marketing/gear.png')
+          h2 {{ $t('marketing1Lead2Title') }}
+          p {{ $t('marketing1Lead2') }}
+          img(src='~assets/images/marketing/drops.png', style='max-height: 200px;')
+          h2 {{ $t('marketing1Lead3Title') }}
+          p {{ $t('marketing1Lead3') }}
+      hr
+      .row
+        .col-md-12
+          h1 {{ $t('marketing2Header') }}
+      .row
+        .col-md-6
+          img(src='~assets/images/marketing/guild.png')
+          h2 {{ $t('marketing2Lead1Title') }}
+          p {{ $t('marketing2Lead1') }}
+          img(src='~assets/images/marketing/vice3.png')
+          h2 {{ $t('marketing2Lead2Title') }}
+          p(v-markdown='$t("marketing2Lead2")')
+        .col-md-6
+          img(src='~assets/images/marketing/challenge.png')
+          h2 {{ $t('marketing2Lead3Title') }}
+          p {{ $t('marketing2Lead3') }}
+      hr
+      .row
+        .col-md-12
+          h1 {{ $t('marketing3Header') }}
+      .row
+        .col-md-6
+          img(src='~assets/images/marketing/android_iphone.png')
+          h2 {{ $t('footerMobile') }}
+          p(v-markdown='$t("marketing3Lead1")')
+        .col-md-6
+          img(src='~assets/images/marketing/integration.png')
+          h2 {{ $t('marketing3Lead2Title') }}
+          p(v-markdown='$t("marketing3Lead2")')
+      hr
+      .row
+        .col-md-12
+          h1 {{ $t('marketing4Header') }}
+      .row
+        .col-md-6
+          .media
+            img(src='~assets/images/marketing/education.png')
+            .media-body
+              h2 {{ $t('marketing4Lead1Title') }}
+              p {{ $t('marketing4Lead1') }}
+        .col-md-6
+          .media
+            img(src='~assets/images/marketing/wellness.png')
+            .media-body
+              h2 {{ $t('marketing4Lead2Title') }}
+              p {{ $t('marketing4Lead2') }}
+      .row
+        .col-md-6.offset-md-3
+          h2 {{ $t('marketing4Lead3Title') }}
+          img(src='~assets/images/marketing/lefnire.png')
+          p.span
+            span {{ $t('marketing4Lead3-1') }}
+            button.btn.btn-primary(@click='playButtonClick()') {{ $t('playButton') }}
+          p.span
+            span {{ $t('marketing4Lead3-2') }}
+            a.btn.btn-primary(href='/static/plans',target='_blank') {{ $t('contactUs') }}
+          p.span
+            span {{ $t('marketing4Lead3-3') }}
+            a.btn.btn-primary(href='/static/videos') {{ $t('watchVideos') }}
+    app-footer
 </template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/static.scss';
+
+  .btn {
+    margin-left: 1em;
+  }
+
+  img {
+    box-shadow: 0 0 10px 5px #888;
+    margin: 0.5em;
+    max-width: 500px;
+  }
+</style>
+
+<script>
+  import AppFooter from 'client/components/appFooter';
+  import markdownDirective from 'client/directives/markdown';
+  import StaticHeader from './header.vue';
+
+  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
+    directives: {
+      markdown: markdownDirective,
+    },
+    methods: {
+      playButtonClick () {
+        this.$router.push('/register');
+      },
+    },
+  };
+</script>