Commit e401d4f5 authored by Eugen Rochko's avatar Eugen Rochko

Add how it works section and footer

parent 05db2def
......@@ -6,6 +6,8 @@ import {
import Features from './Features';
import Wizard from './WizardContainer';
import HowItWorks from './HowItWorks';
import Credits from './Credits';
import githubLogo from './assets/github-logo.svg';
import mastodonLogo from './assets/mastodon-logo.svg';
......@@ -90,10 +92,14 @@ const App = () => (
<div className='bottom-cta'>
<div className='container'>
<h3>Install your own</h3>
<p>If you are interested in running your own instance &mdash; for your friends, family or organization &mdash; you can get started by reading the installation documentation. You only host your own users and the content that they subscribe to.</p>
<a href='https://github.com/tootsuite/documentation#running-mastodon' className='cta button alt'>Read the docs</a>
</div>
</div>
<HowItWorks />
<Credits />
</div>
</Router>
);
......
import React from 'react';
const Credits = () => (
<div className='credits' id='credits'>
<div className='container row'>
<div className='funding'>
<h3>Sponsors</h3>
<p>Mastodon is free, open-source software. There is no advertising, monetizing, or venture capital. The development is crowdfunded.</p>
<a href='https://patreon.com/mastodon' className='cta button'>Support on Patreon</a> <a href='https://github.com/tootsuite/documentation/blob/master/Contributing-to-Mastodon/Sponsors.md' className='cta button alt'>View sponsors</a>
</div>
<div className='branding'>
<h3>Branding</h3>
<p>Download logos, icons, and elephants</p>
<a href='#' className='cta button alt'>Download press kit</a>
</div>
</div>
<div className='container row'>
<div className='color-scheme color-1'>#282c37</div>
<div className='color-scheme color-2'>#9baec8</div>
<div className='color-scheme color-3'>#d9e1e8</div>
<div className='color-scheme color-4'>#2b90d9</div>
</div>
</div>
);
export default Credits;
import React from 'react';
const HowItWorks = () => (
<div className='how-it-works' id='how-it-works'>
<div className='container'>
<h2>How it works</h2>
<div className='specs'>
<p>Anyone can run a server of Mastodon. Each server hosts individual user accounts, the content they produce, and the content they subscribe to.</p>
<p>Each user account has a globally unique name (e.g. @user@example.com), consisting of the local username (@user), and the domain name of the server it is on (example.com).</p>
<p>Users can follow each other, regardless of where they're hosted &mdash; when a local user follows a user from a different server, the server subscribes to that user's updates for the first time.</p>
</div>
<div className='benefits'>
<h3>Why is that cool?</h3>
<p>Servers are run independently by different people and organizations. They can apply wildly different moderation policies, so you can find or make one that fits your taste perfectly. A decentralized network is harder for governments to censor. If one server goes bankrupt or starts acting unethically, the network persists so you never have to worry about migrating your friends and audience to a yet another platform again.</p>
</div>
</div>
</div>
);
export default HowItWorks;
......@@ -6,3 +6,5 @@
@import 'scss/global.scss';
@import 'scss/App.scss';
@import 'scss/Wizard.scss';
@import 'scss/HowItWorks.scss';
@import 'scss/Credits.scss';
......@@ -393,7 +393,16 @@ $phi: 1.6180339887498948482;
.bottom-cta {
background: darken($darkest, 4%);
padding: 30px 0;
padding: 50px 0;
padding-top: 70px;
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
color: $lighter;
}
p {
margin-bottom: 30px;
......
@import './variables.scss';
.credits {
padding: 100px 0;
background: darken($darkest, 4%);
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
color: $lighter;
}
p {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
.branding {
width: 30%;
}
.funding {
margin-right: 15px;
}
.color-scheme {
margin-top: 50px;
padding: 10px;
padding-top: 36px;
border-radius: 4px;
color: $white;
flex: 1 1 auto;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 24px;
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
.color-1 {
background: #282c37;
}
.color-2 {
background: #9baec8;
color: $darkest;
}
.color-3 {
background: #d9e1e8;
color: $darkest;
}
.color-4 {
background: #2b90d9;
}
}
.row {
display: flex;
justify-content: space-between;
}
@import './variables.scss';
.how-it-works {
margin: 100px auto;
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lighter;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
color: $lighter;
}
p {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
.specs {
width: 40%;
}
.benefits {
margin-top: 50px;
}
}
......@@ -3,7 +3,7 @@ $lightest: #d9e1e8 !default; // color2
$lighter: #9baec8 !default; // color3
$darkest: #1F232B !default; // color1
$black: #000 !default; // color8
$darker: mix($lighter, $darkest);
$darker: lighten($darkest, 30%);
$vibrant: #2b90d9 !default; // color4
$error: #df405a !default; // color6
......
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