Added sources page, improved wording on homepage

package.json

 {
-  "name": "-",
+  "name": "retribute.me",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/components/Navigation.vue

@@ -12,7 +12,7 @@
       >
         <img
           alt="Retribute Logo"
-          src="../assets/logo_fleur.png"
+          src="../assets/logos/logo_fleur.png"
           @click="showMenu - !showMenu"
         />
         Retribute
@@ -22,6 +22,16 @@
         <i v-else class="fa fa-bars"></i>
       </button>
       <ul :class="['pure-menu-list', { hide: !showMenu }]">
+        <li class="pure-menu-item">
+          <router-link
+            class="pure-menu-link"
+            :to="{ name: 'platforms', params: { locale: $language.current } }"
+          >
+            <translate translate-context="Navigation/Link"
+              >Supported Platforms</translate
+            >
+          </router-link>
+        </li>
         <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
           <a href="#" id="menuLink1" class="pure-menu-link">
             <translate translate-context="Navigation/Link">Resources</translate>

src/router.js

@@ -35,6 +35,16 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () =>
         import(/* webpackChunkName: "contact" */ "./views/Contact.vue")
+    },
+    {
+      path: "/:locale?/platforms",
+      props: true,
+      name: "platforms",
+      // route level code-splitting
+      // this generates a separate chunk (contact.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () =>
+        import(/* webpackChunkName: "contact" */ "./views/Platforms.vue")
     }
   ]
 });

src/style/1-core/_typography.scss

@@ -87,4 +87,4 @@ button, .pure-button, a, .link {
 }
 .header {
   color: $text-color;
-}
\ No newline at end of file
+}

src/style/3-base/_layout.scss

@@ -33,7 +33,7 @@ footer.main-footer {
 }
 .row.strong {
   background: $page-background;
-  background: linear-gradient(90deg, #f2c600 0%, #f6da5c 100%);
+  background: linear-gradient(90deg, #64B01C 0%, #79d522 100%);
   @media screen and (min-width: $tablet-width) {
     padding: $content-padding * 2;
   }

src/style/5-screens/_platforms.scss

+
+
+.apps-list .app-card {
+  display: flex;
+  padding: $content-padding / 2;
+  border: 1px solid $divider-color;
+  &:not(:last-child) {
+    margin-bottom: $content-padding / 2;
+  }
+  > .img-wrapper {
+    margin-right: $content-padding;
+    img {
+      width: 4em;
+    }
+  }
+  .content {
+    flex: 1;
+    padding: 0 $content-padding / 4;
+    font-size: 1em;
+    h3 {
+      margin: 0 0 $content-padding / 2;
+      font-size: 1.2em;
+      a {
+        color: $text-color;
+      }
+    }
+  }
+  .tag {
+    background-color: rgba($color: $link-color, $alpha: 0.2);
+    border-radius: 2px;
+    color: $text-color;
+    padding: $content-padding / 6;
+    margin: $content-padding / 6;
+    font-size: 0.8em;
+  }
+}

src/style/_variables.scss

@@ -4,10 +4,11 @@ $very-large-content-width: 1300px;
 $content-separator-width: 1em;
 $content-padding: 1em;
 
-$page-background: #f2c600;
+$page-background: #F2C600;
 $light-background-color: #F2F3F5;
-$link-color: #006e62;
-$text-color: #000000;
+$link-color: #1C64B0;
+$header-link-color: #F2C600;
+$text-color: #171717;
 $text-background-color: #FBFBFB;
 $border-color: #FBFBFB;
 $primary-color: #e9e026;

src/style/main.scss

@@ -11,3 +11,4 @@
 @import "./3-base/layout";
 @import "./5-screens/home";
 @import "./5-screens/logos";
+@import "./5-screens/platforms";

src/views/Home.vue

@@ -11,12 +11,17 @@
           Retribute is a web application designed to make the job of supporting
           the creators you like easier.
         </p>
-        <a href="#learn-more">
+        <a class="pure-button" href="#get-started">
+          <translate translate-context="Content/Home/Button.label"
+            >Get Started!</translate
+          >
+        </a>
+        <a class="header-link" href="#learn-more">
           <translate translate-context="Content/Home/Button.Label"
             >Learn more…</translate
           >
         </a>
-        <img class="strong" src="../assets/appscreen.png" />
+        <img class="strong" src="../assets/screenshots/appscreen.png" />
       </section>
     </div>
     <div class="row" id="learn-more">
@@ -24,9 +29,10 @@
         <div class="feature">
           <div class="content">
             <h3>
-              <translate translate-context="Content/Home.Feature/Header">
-                Support your favorite people on your favorite platforms
-              </translate>
+              <translate translate-context="Content/Home.Feature/Header"
+                >Support your favorite people on your favorite
+                platforms</translate
+              >
             </h3>
             <p>
               <strong>
@@ -49,37 +55,46 @@
             </a>
           </div>
           <div class="image">
-            <img class="strong" src="../assets/icons.png" />
+            <img class="strong" src="../assets/logos/icons.png" />
           </div>
         </div>
         <div class="feature">
           <div class="content">
             <h3>
               <translate translate-context="Content/Home.Feature/Header"
-                >A wide range of support methods.</translate
+                >A wide range of support methods</translate
               >
             </h3>
             <p translate-context="Content/Home.Feature/Paragraph">
-              <strong
-                >Easily gather links to users' accounts on popular funding
-                sites.</strong
-              >
+              <strong>
+                Easily gather links to users' accounts on popular funding sites.
+              </strong>
             </p>
             <p translate-context="Content/Home.Feature/Paragraph">
               Retribute scans enabled services for links to a range of different
-              funding services - such as Liberpay, Patreon, Paypal, and Bandcamp
-              - allowing you to easily spread the love!
+              funding services - such as Liberapay, Patreon, Paypal, and
+              Bandcamp - allowing you to easily spread the love!
             </p>
+            <router-link
+              :to="{
+                name: 'platforms',
+                params: { locale: $language.current }
+              }"
+            >
+              <translate translate-context="Content/Home.Feature/Link"
+                >See Supported Platforms</translate
+              >
+            </router-link>
           </div>
           <div class="image">
-            <img src="../assets/pollen.jpg" />
+            <img src="../assets/mascots/pollen.jpg" />
           </div>
         </div>
         <div class="feature">
           <div class="content">
             <h3>
               <translate translate-context="Content/Home.Feature/Header"
-                >No tracking, no ads.</translate
+                >No tracking, no ads</translate
               >
             </h3>
             <p translate-context="Content/Home.Feature/Paragraph">
@@ -137,6 +152,55 @@
         </div>
       </section>
     </div>
+    <div class="row">
+      <section>
+        <h3>
+          <translate translate-context="Content/Home/Header"
+            >How does it work?</translate
+          >
+        </h3>
+        <p>
+          <strong>
+            <translate translate-context="Content/Home/Paragraph"
+              >Retribute connects to your existing fediverse accounts to suggest
+              people to support.</translate
+            >
+          </strong>
+          &nbsp;
+          <translate translate-context="Content/Home/Paragraph"
+            >Once you've signed in to your account, Retribute will assess your
+            interactions with individuals and creators and assign them a weight
+            based on the frequency of your interactions.</translate
+          >
+        </p>
+        <p>
+          <translate translate-context="Content/Home/Paragraph"
+            >Retribute uses links found in individuals' profiles to generate a
+            list of donation sources connected to that individual. As long as
+            they have a valid link, Retribute will return it.</translate
+          >
+        </p>
+        <p>
+          <translate translate-context="Content/Home/Paragraph"
+            >Once Retribute has sorted through your interactions, simply find
+            the person you wish to support and follow the link to their support
+            platform. It's that easy!</translate
+          >
+        </p>
+        <router-link
+          class="pure-button"
+          :to="{
+            name: 'platforms',
+            params: { locale: $language.current }
+          }"
+        >
+          <i class="fa fa-eur"></i>&nbsp;
+          <translate translate-context="Content/Home/*"
+            >See a list of supported platforms</translate
+          >
+        </router-link>
+      </section>
+    </div>
     <div class="row" id="more">
       <section>
         <p>
@@ -148,7 +212,7 @@
           </strong>
         </p>
         <div class="image centered">
-          <img src="../assets/betty.jpg" />
+          <img src="../assets/mascots/betty.jpg" />
         </div>
         <div class="centered">
           <a

src/views/Platforms.vue

+<template>
+  <div>
+    <div class="row">
+      <section>
+        <h1>
+          <translate translate-context="Content/Platforms/Header"
+            >Supported Applications</translate
+          >
+        </h1>
+        <p>
+          <translate translate-context="Content/Platforms/Paragraph"
+            >Retribute can be used with a range of existing Fediverse
+            applications and donation platforms, giving you plenty of options
+            for supporting your favorite people.</translate
+          >
+        </p>
+        <a class="pure-button" href="#fedi-apps">
+          <i class="fa fa-activitypub"></i>&nbsp;
+          <translate translate-context="Content/Platforms.FAQ/Link"
+            >Fediverse Applications</translate
+          >
+        </a>
+        <a class="pure-button" href="#donation-platforms">
+          <i class="fa fa-eur"></i>&nbsp;
+          <translate translate-context="Content/Platforms.FAQ/Link"
+            >Donation Platforms</translate
+          >
+        </a>
+        <h2 id="fedi-apps">Fediverse Applications</h2>
+        <div class="apps-list">
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/funkwhale.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://funkwhale.audio" target="blank" rel="noopener"
+                  >Funkwhale</a
+                >
+              </h3>
+
+              <p>
+                <translate translate-context="Content/Platforms/Paragraph"
+                  >A free, decentralized audio streaming platform</translate
+                >
+              </p>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/mastodon.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://joinmastodon.org" target="blank" rel="noopener"
+                  >Mastodon</a
+                >
+              </h3>
+              <p>
+                <translate translate-context="Content/Platforms/Paragraph"
+                  >A self-hosted, free social networking service</translate
+                >
+              </p>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/peertube.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a
+                  href="https://https://joinpeertube.org/"
+                  target="blank"
+                  rel="noopener"
+                  >Peertube</a
+                >
+              </h3>
+              <p>
+                <translate translate-context="Content/Platforms/Paragraph"
+                  >A free, decentralized video streaming platform</translate
+                >
+              </p>
+            </div>
+          </div>
+        </div>
+        <h2 id="donation-platforms">Donation Platforms</h2>
+        <div class="apps-list">
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/bandcamp.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://bandcamp.com" target="blank" rel="noopener"
+                  >Bandcamp</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/etsy.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://etsy.com" target="blank" rel="noopener"
+                  >Etsy</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/flattr.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://flattr.com" target="blank" rel="noopener"
+                  >Flattr</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/itchio.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://itch.io" target="blank" rel="noopener"
+                  >itch.io</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/kofi.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://ko-fi.com" target="blank" rel="noopener"
+                  >Ko-Fi</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/liberapay.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://liberapay.com" target="blank" rel="noopener"
+                  >Liberapay</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/opencollective.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a
+                  href="https://opencollective.com"
+                  target="blank"
+                  rel="noopener"
+                  >OpenCollective</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/patreon.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://patreon.com" target="blank" rel="noopener"
+                  >Patreon</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/paypal.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://paypal.com" target="blank" rel="noopener"
+                  >PayPal</a
+                >
+              </h3>
+            </div>
+          </div>
+          <div class="app-card">
+            <div class="img-wrapper">
+              <img src="../assets/logos/tipeee.png" />
+            </div>
+            <div class="content">
+              <h3>
+                <a href="https://tipeee.com" target="blank" rel="noopener"
+                  >Tipeee</a
+                >
+              </h3>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageMixin from "../PageMixin";
+
+export default {
+  mixins: [PageMixin],
+  methods: {
+    getInnerTitle() {
+      return this.$pgettext("HTML/Meta/Title", "Supported Platforms");
+    }
+  }
+};
+</script>