Commit 69bf467d authored by Ciarán Ainsworth's avatar Ciarán Ainsworth

Added sources page, improved wording on homepage

parent efcc279b
Pipeline #5936 passed with stages
in 1 minute and 19 seconds
{
"name": "-",
"name": "retribute.me",
"version": "0.1.0",
"private": true,
"scripts": {
......
......@@ -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>
......
......@@ -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")
}
]
});
......@@ -87,4 +87,4 @@ button, .pure-button, a, .link {
}
.header {
color: $text-color;
}
\ No newline at end of file
}
......@@ -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;
}
......
.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;
}
}
......@@ -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;
......
......@@ -11,3 +11,4 @@
@import "./3-base/layout";
@import "./5-screens/home";
@import "./5-screens/logos";
@import "./5-screens/platforms";
......@@ -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
......
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment