Commit 114e3a2a authored by Eugen Rochko's avatar Eugen Rochko

Add sponsors page

parent 05701b52
import React from 'react';
import {
BrowserRouter as Router,
Link
Route
} from 'react-router-dom';
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/logo_full.svg';
import wiredLogo from './assets/wired-logo.svg';
import productHuntLogo from './assets/product-hunt-logo-horizontal-black.png';
import theVergeLogo from './assets/the-verge-logo.svg';
import motherboardLogo from './assets/motherboard-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png';
import Home from './Home';
import Sponsorship from './Sponsorship';
const App = () => (
<Router>
<div className='app'>
<div className='intro'>
<div className='navbar container'>
<ul className='left'>
<li>
<Link className='brand' to='/'>
<img className='link-logo' src={mastodonLogo} alt='Mastodon'/>
</Link>
</li>
</ul>
<ul className='right'>
<li><a href='https://discourse.joinmastodon.org'>Support</a></li>
<li><a href='https://github.com/tootsuite/documentation'>Documentation</a></li>
<li><a href='https://www.stickermule.com/marketplace/18010-mastodon-fluffy-elephant-friend'>Merch</a></li>
<li>
<a href='https://github.com/tootsuite/mastodon'>
Source code <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</div>
<div className='text'>
<h1>Giving social networking back to <strong>you</strong></h1>
<p>With thousands of interconnected communities to choose from, and the tools to make your own, Mastodon is the world&rsquo;s largest free, open-source, decentralized microblogging network.</p>
<a href='#getting-started' className='cta button'>Get started</a>
<a href='#how-it-works' className='cta button alt'>How it works</a>
</div>
<div className='hero'>
<div className='hero__floats'>
<img src={cloud2} className='float-1' alt='Cloud 1' />
<img src={cloud4} className='float-2' alt='Cloud 2' />
<img src={cloud3} className='float-3' alt='Cloud 3' />
</div>
<img className='desktop' src={screenshotFull} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on mobile'/>
</div>
</div>
<div className='as-seen-on'>
<div className='container'>
<h2>As seen on</h2>
<div className='logo-grid'>
<div>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
</div>
<div>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a>
</div>
</div>
</div>
</div>
<Features />
<Wizard />
<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 />
<Route exact path='/' component={Home} />
<Route path='/sponsors' component={Sponsorship} />
</div>
</Router>
);
......
import React from 'react';
import { Link } from 'react-router-dom';
const Credits = () => (
<div className='credits' id='credits'>
<div className='container row optional-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>
<p>Mastodon is free, open-source software. There is no advertising, monetizing, or venture capital. Your donations directly support full-time development of the project.</p>
<a href='https://patreon.com/mastodon' className='cta button'>Support on Patreon</a> <Link to='/sponsors' className='cta button alt'>View sponsors</Link>
</div>
<div className='branding'>
......
import React from 'react';
import Features from './Features';
import Wizard from './WizardContainer';
import HowItWorks from './HowItWorks';
import Credits from './Credits';
import Navigation from './Navigation';
import wiredLogo from './assets/wired-logo.svg';
import productHuntLogo from './assets/product-hunt-logo-horizontal-black.png';
import theVergeLogo from './assets/the-verge-logo.svg';
import motherboardLogo from './assets/motherboard-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png';
const Home = () => (
<div>
<div className='intro'>
<Navigation />
<div className='text'>
<h1>Giving social networking back to <strong>you</strong></h1>
<p>With thousands of interconnected communities to choose from, and the tools to make your own, Mastodon is the world&rsquo;s largest free, open-source, decentralized microblogging network.</p>
<a href='#getting-started' className='cta button'>Get started</a>
<a href='#how-it-works' className='cta button alt'>How it works</a>
</div>
<div className='hero'>
<div className='hero__floats'>
<img src={cloud2} className='float-1' alt='Cloud 1' />
<img src={cloud4} className='float-2' alt='Cloud 2' />
<img src={cloud3} className='float-3' alt='Cloud 3' />
</div>
<img className='desktop' src={screenshotFull} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on mobile'/>
</div>
</div>
<div className='as-seen-on'>
<div className='container'>
<h2>As seen on</h2>
<div className='logo-grid'>
<div>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
</div>
<div>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a>
</div>
</div>
</div>
</div>
<Features />
<Wizard />
<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>
);
export default Home;
import React from 'react';
import { Link } from 'react-router-dom';
import githubLogo from './assets/github-logo.svg';
import mastodonLogo from './assets/logo_full.svg';
const Navigation = () => (
<div className='navbar container'>
<ul className='left'>
<li>
<Link className='brand' to='/'>
<img className='link-logo' src={mastodonLogo} alt='Mastodon'/>
</Link>
</li>
</ul>
<ul className='right'>
<li><a href='https://discourse.joinmastodon.org'>Support</a></li>
<li><a href='https://github.com/tootsuite/documentation'>Documentation</a></li>
<li><a href='https://www.stickermule.com/marketplace/18010-mastodon-fluffy-elephant-friend'>Merch</a></li>
<li>
<a href='https://github.com/tootsuite/mastodon'>
Source code <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</div>
);
export default Navigation;
This diff is collapsed.
@import url('https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:500|Roboto:400,500');
@import url('https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:500|Roboto:400,500,700');
@import url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
@import 'scss/variables.scss';
......@@ -8,3 +8,4 @@
@import 'scss/Wizard.scss';
@import 'scss/HowItWorks.scss';
@import 'scss/Credits.scss';
@import 'scss/Sponsorship.scss';
@import './variables.scss';
.sponsorship {
.text {
text-align: center;
strong {
font-weight: 500;
}
}
.cta-text {
padding-top: 40px;
}
.final-cta {
background: darken($darkest, 4%);
padding: 40px 0;
padding-bottom: 100px;
}
h2, h3 {
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lightest;
}
p {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
strong {
font-weight: 700;
}
&.lead {
margin-bottom: 40px;
}
}
h3 {
font-size: 18px;
line-height: 24px;
}
.tier {
margin: 40px 0;
}
.row .tier {
margin: 0;
}
.sponsor-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $white;
text-decoration: none;
text-align: center;
background: $vibrant;
font-size: 16px;
line-height: 21px;
padding: 16px;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
&:hover,
&:active,
&:focus {
background: lighten($vibrant, 8%);
}
img,
strong,
span {
display: block;
}
img {
margin-bottom: 10px;
}
strong {
font-weight: 500;
}
}
.sponsors-list--logos {
margin: 40px 0;
margin-bottom: -40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
a {
color: inherit;
text-decoration: none;
display: block;
margin: 0 40px;
margin-bottom: 40px;
img {
filter: grayscale(100%);
height: 40px;
width: auto;
transition: filter 200ms ease;
}
&:hover,
&:focus,
&:active {
img {
filter: grayscale(0%);
}
}
}
}
.sponsors-list--names {
margin-bottom: 15px;
border: 1px solid darken($darkest, 4%);
background: lighten($darkest, 8%);
border-radius: 4px;
font-size: 14px;
overflow: hidden;
ul {
background: lighten($darkest, 4%);
columns: 3;
column-gap: 0;
&.highlighted {
background: transparent;
color: $lightest;
font-weight: 700;
}
}
li {
padding: 10px;
border-bottom: 1px solid lighten($darkest, 2%);
}
}
hr {
background: transparent;
border: 0;
border-top: 1px solid lighten($darkest, 4%);
margin: 40px 0;
}
.sponsors-list--badges {
margin: 40px 0;
ul {
columns: 3;
}
li {
margin-bottom: 10px;
}
li > a {
display: flex;
background: lighten($darkest, 4%);
border-radius: 4px;
color: $lightest;
text-decoration: none;
line-height: 17px;
font-size: 14px;
padding: 6px 4px;
&:focus {
background: mix($darkest, $vibrant);
color: $white;
}
&:hover {
color: $white;
background: lighten($darkest, 8%);
}
img {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
}
& > span {
flex: 1 1 auto;
padding-left: 10px;
strong {
display: block;
font-weight: 700;
}
span {
color: $lighter;
}
}
}
}
}
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