Home.vue 6.18 KB
Newer Older
1
<template>
2
3
4
5
  <div>
    <div class="row strong">
      <section class="wide banner">
        <h2 class="header">
6
7
8
          <translate translate-context="Content/Home/Header"
            >A Community Wealth Sharing Platform</translate
          >
9
        </h2>
10
11
12
13
14
15
16
17
18
        <p class="big">
          Retribute is a web application designed to make the job of supporting
          the creators you like easier.
        </p>
        <a href="#learn-more">
          <translate translate-context="Content/Home/Button.Label"
            >Learn more…</translate
          >
        </a>
19
20
21
        <img class="strong" src="../assets/appscreen.png" />
      </section>
    </div>
22
23
    <div class="row" id="learn-more">
      <section class="wide">
24
25
        <div class="feature">
          <div class="content">
26
            <h3>
27
28
29
              <translate translate-context="Content/Home.Feature/Header">
                Support your favorite people on your favorite platforms
              </translate>
30
            </h3>
31
32
            <p>
              <strong>
33
34
35
36
                <translate translate-context="Content/Home.Feature/Paragraph">
                  Retribute helps you to support your favorite people on
                  platforms you already know and love
                </translate>
37
38
39
              </strong>
            </p>
            <p>
40
41
42
43
              <translate translate-context="Content/Home.Feature/Paragraph">
                Simply sign in to your Funkwhale, Mastodon, or Peertube account
                and let Retribute do the rest.
              </translate>
44
45
46
47
48
49
50
51
52
53
54
            </p>
            <a href="#get-started">
              <translate translate-context="Content/Home/Button.Label"
                >Get started</translate
              >
            </a>
          </div>
          <div class="image">
            <img class="strong" src="../assets/icons.png" />
          </div>
        </div>
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
        <div class="feature">
          <div class="content">
            <h3>
              <translate translate-context="Content/Home.Feature/Header"
                >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
              >
            </p>
            <p translate-context="Content/Home.Feature/Paragraph">
              Retribute scans enabled services for links to a range of different
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
70
              funding services - such as Liberpay, Patreon, Paypal, and Bandcamp
71
72
73
74
75
76
77
              - allowing you to easily spread the love!
            </p>
          </div>
          <div class="image">
            <img src="../assets/pollen.jpg" />
          </div>
        </div>
78
79
80
81
82
83
84
85
86
87
88
89
90
        <div class="feature">
          <div class="content">
            <h3>
              <translate translate-context="Content/Home.Feature/Header"
                >No tracking, no ads.</translate
              >
            </h3>
            <p translate-context="Content/Home.Feature/Paragraph">
              <strong
                >Retribute lets you keep control of your information</strong
              >
            </p>
            <p>
91
92
93
94
95
96
              <translate translate-context="Content/Home.Feature/Paragraph">
                All private and sensitive information is stored and processed in
                your web browser, including login information and suggestions.
                At the click of a button, this information can be completely
                removed.
              </translate>
97
98
99
100
101
102
            </p>
          </div>
          <div class="image"></div>
        </div>
      </section>
    </div>
103
    <div class="alternate row" id="get-started">
104
105
106
107
108
109
110
111
112
113
114
115
116
117
      <section class="very wide">
        <h3 class="centered">
          <translate translate-context="Content/Home.Feature/Header"
            >What Does Retribute Do?</translate
          >
        </h3>
        <div class="pure-g">
          <div class="pure-u-1 pure-u-md-1-2">
            <h4 class="centered">
              <translate translate-context="Content/Home/Header"
                >For Supporters</translate
              >
            </h4>
            <p class="centered">
118
119
120
121
              <translate translate-context="Content/Home/Paragraph">
                Retribute keeps track of who you engage with and provides you
                with their donation links
              </translate>
122
123
124
125
126
127
128
129
130
            </p>
          </div>
          <div class="pure-u-1 pure-u-md-1-2">
            <h4 class="centered">
              <translate translate-context="Content/Home/Header"
                >For Recipients</translate
              >
            </h4>
            <p class="centered">
131
132
133
134
              <translate translate-context="Content/Home/Paragraph">
                Retribute delivers the contribution links listed on your
                accounts online to potential supporters
              </translate>
135
            </p>
136
137
138
139
140
141
142
143
          </div>
        </div>
      </section>
    </div>
    <div class="row" id="more">
      <section>
        <p>
          <strong>
144
145
146
147
            <translate translate-context="Content/Home/Paragraph">
              Retribute is a decentralized and open effort to support creators.
              This project is part of the Funkwhale community.
            </translate>
148
149
150
151
152
153
154
155
156
157
158
          </strong>
        </p>
        <div class="image centered">
          <img src="../assets/betty.jpg" />
        </div>
        <div class="centered">
          <a
            class="pure-button centered"
            href="https://funkwhale.audio/en_US/code-of-conduct"
            target="_blank"
          >
159
160
161
            <translate translate-context="Content/Home/*"
              >Learn more about us</translate
            >
162
          </a>
163
164
165
166
167
          <a
            class="pure-button centered"
            href="https://funkwhale.audio/support-us"
            target="_blank"
          >
168
169
170
171
172
173
            <i class="fa fa-eur"></i>&nbsp;
            <translate translate-context="Content/Home/*">Support Us</translate>
          </a>
        </div>
      </section>
    </div>
174
175
176
177
178
  </div>
</template>

<script>
// @ is an alias to /src
Eliot Berriot's avatar
I18n    
Eliot Berriot committed
179
import PageMixin from "../PageMixin";
180
181

export default {
182
  mixins: [PageMixin]
183
184
};
</script>