Commit f9d97240 authored by Eugen Rochko's avatar Eugen Rochko

Add additional features

parent a96b69f8
......@@ -3,42 +3,51 @@ import React from 'react';
const Features = () => (
<div id='features'>
<div className='feature container'>
<div className='right visual'><i className='ion-chatboxes' /></div>
<div className='right visual'><i className='ion-android-globe' /></div>
<div className='left text'>
<h2>Built for real conversation</h2>
<p>With <strong>500 characters per post</strong>, you get plenty of space to go deep into topics, instead of constraining statuses to surface-level quips. Built-in support for levels of <strong>audience selection</strong>, from posting in the public stream to selecting more specific audiences, and <strong>content and spoiler warnings</strong> let you share sensitive discussions and media with only those who want to see them. Oh, and the posts are <strong>displayed in order</strong> too.</p>
<h2>Find your perfect community</h2>
<p>Mastodon isnt one place and one set of rules: its <strong>thousands of unique, interconnected communities</strong> to choose from, filled with different people, interests, languages, and needs. Don’t like the rules? You’re free to join any community you like, or better yet: you can host your own, on your own terms!</p>
</div>
</div>
<div className='feature container'>
<div className='left visual'><i className='ion-android-globe' /></div>
<div className='left visual'><i className='ion-chatboxes' /></div>
<div className='right text'>
<h2>Find your perfect place</h2>
<p>Similar to how everyones emails work across different companies, Mastodon is a <strong>federated network</strong> of different @people, #interests, needs, and languages, <strong>self-hosted by you, others and organizations</strong>. Pick an instance community that suits you out of a diverse pool from all over the world. Regardless of which one you choose, <strong>you can always interact with everyone else</strong>.</p>
<h2>Take control of your content</h2>
<p>With powerful tools to <strong>control who sees your posts</strong> and a <strong>500-character limit</strong>, Mastodon empowers you to share your ideas, unabridged. The best part? <strong>All posts are in chronological order</strong>, not “optimized” to push ads into your timeline. With apps for iOS, Android, and every other platform imaginable, <strong>Mastodon is always at your fingertips</strong>.</p>
</div>
</div>
<div className='feature container'>
<div className='right visual'><i className='ion-leaf' /></div>
<div className='right visual'><i className='ion-ios-people' /></div>
<div className='left text'>
<h2>Start your own community</h2>
<p>Not satisfied by the existing ones? You find their terms too restrictive or too lax? Or you just want to regroup people with a specific interest? Start your instance, write down your rules and join the federation by yourself! For your friends, your family or just you, for your local association, your school or your town, or just for fun and the pleasure of setting up your own silly rules.</p>
<h2>Putting the user first</h2>
<p>Youre a person, not a product. Mastodon is a free, open-source development that has been crowdfunded, not financed. All instances are <strong>independently owned, operated, and moderated</strong>. There is no monopoly by a single commercial company, no ads, and no tracking. <strong>Mastodon works for you</strong>, and not the other way around.</p>
</div>
</div>
<div className='feature container'>
<div className='left visual'><i className='ion-ios-people' /></div>
<div className='left visual'><i className='ion-bonfire' /></div>
<div className='right text'>
<h2>You&rsquo;re a person, not a product</h2>
<p>Mastodon is free, open source software. The development is crowdfunded. All instances are <strong>independently owned, hosted, and moderated</strong>. There is no monopoly by a single commercial company, no ads, no tracking. The software works for you, and not the other way around.</p>
<h2>Feel safe in your community</h2>
<p>Mastodon comes with power anti-abuse tools to help protect yourself from online abuse. With small, interconnected communities, it means that there are more moderators you can approach to help with a situation. This also means you can choose who sees your posts: friends, your community, or the entire fediverse.</p>
</div>
</div>
<div className='feature container'>
<div className='right visual'><i className='ion-iphone' /></div>
<div className='left text'>
<h2>Always within reach</h2>
<p>With <strong>multiple apps available</strong> for iOS, Android, and every platform you can think of, Mastodon is easy to use everywhere you go. A <strong>simple and open API</strong> ensures a rich ecosystem of 3rd party apps.</p>
<div className='additional-features'>
<h3>Additional features</h3>
<ul>
<li><i className='ion-android-checkbox' /><div>Robust anti-abuse tools</div></li>
<li><i className='ion-android-checkbox' /><div>Flexible post filtering</div></li>
<li><i className='ion-android-checkbox' /><div>A huge audience</div></li>
<li><i className='ion-android-checkbox' /><div>Easily deploy your own</div></li>
<li><i className='ion-android-checkbox' /><div>They're called toots</div></li>
<li><i className='ion-android-checkbox' /><div>Embed media in your posts</div></li>
<li><i className='ion-android-checkbox' /><div>Built on open web standards</div></li>
<li><i className='ion-android-checkbox' /><div>Spoiler warnings</div></li>
<li><i className='ion-android-checkbox' /><div>You decide what's relevant</div></li>
</ul>
</div>
</div>
</div>
......
......@@ -24,8 +24,8 @@ const Home = () => (
<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>
<h1>Social networking, <strong>back in your hands</strong></h1>
<p>The worlds 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>
......
......@@ -32,30 +32,16 @@ export default class Wizard extends React.PureComponent {
return (
<div className='wizard-page' id='getting-started'>
<h2>Choose an instance</h2>
<p>Each instance is a separate, independently owned gateway into the fediverse. You can talk to your friends regardless of which one you choose, but they have different moderation policies and interest groups.</p>
<div className='wizard'>
<div className='wizard-header'>
<div className='wizard-column'>Server</div>
<div className='wizard-column'>Stability</div>
<div className='wizard-column'>Population</div>
<div className='wizard-column'>Theme</div>
</div>
<Scrollbars className='wizard-content' style={{ height: 500 }} renderThumbVertical={this.renderThumb}>
{instances.map(item =>
<WizardRow key={item._id} instance={item} />
)}
</Scrollbars>
</div>
<h2><strong>Get started:</strong> Choose an instance</h2>
<p>Each server is a separate, independently owned gateway into the fediverse. You can talk to your friends regardless of which one you choose, but each will have different moderation policies and interests, so choose the one that feels the most comfortable to you. </p>
<div className='wizard-controls'>
<div classname='external-wizard'>
<a className='cta button' target='_blank' href="https://instances.social">
Help me choose
</a>
<a className='cta button' target='_blank' href="https://instances.social">Help me choose</a>
</div>
<div className='spacer'></div>
<div className='search'>
<label for='instance-search' className='accessibly-hidden'>Search for an instance</label>
<input
......@@ -73,6 +59,23 @@ export default class Wizard extends React.PureComponent {
</div>
</div>
</div>
<div className='wizard'>
<div className='wizard-header'>
<div className='wizard-column'>Server</div>
<div className='wizard-column'>Stability</div>
<div className='wizard-column'>Population</div>
<div className='wizard-column'>Theme</div>
</div>
<Scrollbars className='wizard-content' style={{ height: 500 }} renderThumbVertical={this.renderThumb}>
{instances.map(item =>
<WizardRow key={item._id} instance={item} />
)}
</Scrollbars>
</div>
<p className='hint'><strong>Tip:</strong><span>This isn't just your home, it's also the address that other people can find you by. It'll be <samp>@username@example.com</samp> like choosing an email address.</span></p>
</div>
);
}
......
......@@ -349,12 +349,37 @@ $phi: 1.6180339887498948482;
}
}
h2 {
h2, h3 {
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lightest;
}
h3 {
font-size: 18px;
line-height: 24px;
}
.additional-features {
width: 100%;
ul {
columns: 3;
column-gap: 15px;
}
li {
display: flex;
i {
display: block;
flex: 0 0 auto;
margin-right: 10px;
color: lighten($darkest, 30%);
}
}
}
}
.hero__floats {
......@@ -486,6 +511,40 @@ $phi: 1.6180339887498948482;
.visual {
display: none;
}
.additional-features {
text-align: center;
box-sizing: border-box;
padding: 0 20px;
ul {
columns: 3;
}
}
}
}
@media only screen and (max-width: 740px) {
.feature {
.additional-features {
ul {
columns: 2;
}
}
}
}
@media only screen and (max-width: 510px) {
.feature {
.additional-features {
ul {
columns: 1;
}
li {
justify-content: center;
}
}
}
}
......
......@@ -9,19 +9,40 @@
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lightest;
color: $lighter;
strong {
color: $lightest;
}
}
p {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
&.hint {
color: $lighter;
margin: 30px 0;
display: flex;
strong {
display: block;
flex: 0 0 auto;
font-weight: 700;
color: $lightest;
margin-right: 10px;
}
span {
display: block;
}
}
}
}
.wizard {
margin: 50px auto;
margin-bottom: 15px;
margin: 15px auto;
border: 1px solid darken($darkest, 4%);
background: lighten($darkest, 8%);
border-radius: 10px;
......@@ -140,7 +161,7 @@
}
.wizard-controls {
margin-bottom: 50px;
margin-top: 20px;
display: flex;
.cta.button {
......
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