Commit c307fc19 authored by Eugen Rochko's avatar Eugen Rochko

Multiple adjustments

- Add "for individual/for organization" section
- Update "additional features"
- Add "find Twitter friends" link below wizard
- Replace "how it works" section
parent 7de8343f
import React from 'react';
import { FormattedHTMLMessage as FormattedMessage } from 'react-intl';
import AnchorLink from './AnchorLink';
const Features = () => (
<div id='features'>
<div className='container feature'>
<div className='feature-angle-container'>
<div className='feature-angle'>
<i className='ion-md-book' />
<h3><FormattedMessage id='features.for_individual' defaultMessage='Mastodon for the individual' /></h3>
<p><FormattedMessage id='features.for_individual_text' defaultMessage='Without an incentive to sell you things, Mastodon allows you to consume content you enjoy uninterrupted. Your feed is chronological, ad-free and non-algorithmic—you decide who you want to see!' /></p>
<AnchorLink href='#getting-started' className='link-button'><FormattedMessage id='features.join_server' defaultMessage='Join a server' /> <i className='ion-ios-arrow-forward' /></AnchorLink>
</div>
<div className='feature-angle'>
<i className='ion-md-business' />
<h3><FormattedMessage id='features.for_organization' defaultMessage='Mastodon for the organization' /></h3>
<p><FormattedMessage id='features.for_organization_text' defaultMessage='Host your own social media platform on your own infrastructure. Don&apos;t let your business or non-profit depend on a company that could change the rules of the game—write your own rules!' /></p>
<AnchorLink href='#install' className='link-button'><FormattedMessage id='features.install_server' defaultMessage='Install a server' /> <i className='ion-ios-arrow-forward' /></AnchorLink>
</div>
</div>
</div>
<hr />
<div className='feature container'>
<div className='right visual'><i className='ion-android-globe' /></div>
<div className='right visual'><i className='ion-md-globe' /></div>
<div className='left text'>
<h2><FormattedMessage id='features.find_your_community' defaultMessage='Find your perfect community' /></h2>
<p><FormattedMessage id='features.find_your_community_text' defaultMessage='Mastodon isn’t one place and one set of rules: it’s <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>
......@@ -12,7 +33,7 @@ const Features = () => (
</div>
<div className='feature container'>
<div className='left visual'><i className='ion-chatboxes' /></div>
<div className='left visual'><i className='ion-md-chatboxes' /></div>
<div className='right text'>
<h2><FormattedMessage id='features.take_control' defaultMessage='Take control of your content' /></h2>
<p><FormattedMessage id='features.take_control_text' defaultMessage='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>
......@@ -28,26 +49,31 @@ const Features = () => (
</div>
<div className='feature container'>
<div className='left visual'><i className='ion-bonfire' /></div>
<div className='left visual'><i className='ion-ios-bonfire' /></div>
<div className='right text'>
<h2><FormattedMessage id='features.safety' defaultMessage='Feel safe in your community' /></h2>
<p><FormattedMessage id='features.safety_text' defaultMessage='Mastodon comes with <strong>effective anti-abuse tools</strong> to help protect yourself from online abuse. With small, interconnected communities, it means that there are <strong>more moderators</strong> 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>
<hr />
<div className='feature container'>
<div className='additional-features'>
<h3><FormattedMessage id='features.additional' defaultMessage='Additional features' /></h3>
<ul>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.anti_abuse' defaultMessage='Robust anti-abuse tools' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.post_filtering' defaultMessage='Flexible post filtering' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.huge_audience' defaultMessage='A huge audience' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.deploy_own' defaultMessage='Easily deploy your own' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.toots' defaultMessage='They’re called toots' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.media_embedding' defaultMessage='Embed media in your posts' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.open_standards' defaultMessage='Built on open web standards' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.spoiler_warnings' defaultMessage='Spoiler warnings' /></div></li>
<li><i className='ion-android-checkbox' /><div><FormattedMessage id='features.relevancy' defaultMessage='You decide what’s relevant' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.anti_abuse' defaultMessage='Robust anti-abuse tools' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.post_filtering' defaultMessage='Granular post privacy' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.huge_audience' defaultMessage='Over a million people' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.deploy_own' defaultMessage='Easily deploy your own' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.toots' defaultMessage='They’re called toots' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.media_embedding' defaultMessage='Embed media in your posts' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.open_standards' defaultMessage='Built on open web standards' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.spoiler_warnings' defaultMessage='Spoiler warnings' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.relevancy' defaultMessage='You decide what’s relevant' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.custom_emoji' defaultMessage='Custom emoji' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.focal_points' defaultMessage='Focal points' /></div></li>
<li><i className='ion-md-checkbox' /><div><FormattedMessage id='features.delete_redraft' defaultMessage='Delete & redraft' /></div></li>
</ul>
</div>
</div>
......
......@@ -94,10 +94,10 @@ export default class Home extends PureComponent {
<div className='text'>
<h1><FormattedMessage id='home.headline' defaultMessage='Social networking, <strong>back in your hands</strong>' /></h1>
<p><FormattedMessage id='home.tagline' defaultMessage='The world’s largest free, open-source, decentralized microblogging network' /></p>
<p><FormattedMessage id='home.tagline' defaultMessage='Your self-hosted, globally interconnected microblogging community' /></p>
<AnchorLink href='#getting-started' className='cta button'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></AnchorLink>
<button className='cta button alt' onClick={this.handleHowItWorksClick}><span className='icon-circled'><span className='ion-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button>
<button className='cta button alt' onClick={this.handleHowItWorksClick}><span className='icon-circled'><span className='ion-md-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button>
</div>
<div className='hero'>
......@@ -153,11 +153,12 @@ export default class Home extends PureComponent {
<Wizard />
<div className='bottom-cta'>
<div className='bottom-cta' id='install'>
<div className='container'>
<h3><FormattedMessage id='home.install_your_own' defaultMessage='Install your own' /></h3>
<p><FormattedMessage id='home.install_your_own_text' defaultMessage='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'><FormattedMessage id='home.read_the_docs' defaultMessage='Read the docs' /></a>
<p><FormattedMessage id='home.install_your_own_text' defaultMessage='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, which means it&apos;s quite scalable and resource-efficient.' /></p>
<a href='https://github.com/tootsuite/documentation#running-mastodon' className='cta button'><FormattedMessage id='home.read_the_docs' defaultMessage='Read the docs' /></a>
<a href='https://masto.host/' target='_blank' rel='nofollow' className='cta button alt'><FormattedMessage id='home.hosting' defaultMessage='Fully-managed Mastodon hosting' /></a>
</div>
</div>
......
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { HashLink as Link } from 'react-router-hash-link';
import elephantGrid from './assets/instance_badges2.png';
const HowItWorks = () => (
<div className='how-it-works' id='how-it-works'>
<div className='container'>
<div className='row'>
<div className='specs'>
<h2><FormattedMessage id='how_it_works.how_it_works' defaultMessage='How it works' /></h2>
<p><FormattedMessage id='how_it_works.how_it_works_text1' defaultMessage='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><FormattedMessage id='how_it_works.how_it_works_text2' defaultMessage='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><FormattedMessage id='how_it_works.how_it_works_text3' defaultMessage='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 className='container feature' style={{ marginBottom: 45 }}>
<div className='feature-angle-container'>
<div className='feature-angle'>
<i className='ion-md-planet' />
<h3><FormattedMessage id='how_it_works.server' defaultMessage='Each server is independent' /></h3>
<p><FormattedMessage id='how_it_works.server_text' defaultMessage='Mastodon is free, open-source software that anyone can install on a server. Independent operation, independent rules.' /></p>
</div>
<div className='network-grid'>
<img src={elephantGrid} alt='Fediverse' />
<div className='feature-angle'>
<i className='ion-md-git-network' />
<h3><FormattedMessage id='how_it_works.network' defaultMessage='The network is interoperable' /></h3>
<p><FormattedMessage id='how_it_works.network_text' defaultMessage='Using a suit of standard protocols, Mastodon servers can exchange information with each other, allowing users to interact seamlessly.' /></p>
</div>
</div>
</div>
<div className='benefits'>
<h3><FormattedMessage id='how_it_works.why_its_cool' defaultMessage='Why is that cool?' /></h3>
<p><FormattedMessage id='how_it_works.why_its_cool_text' defaultMessage='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 yet another platform.' /></p>
</div>
<div className='container feature' style={{ marginTop: 0 }}>
<div className='feature-angle-container'>
<div className='feature-angle'>
<i className='ion-md-rocket' />
<h3><FormattedMessage id='how_it_works.future' defaultMessage='Mastodon is future-proof' /></h3>
<p><FormattedMessage id='how_it_works.future_text' defaultMessage='Thanks to standard protocols, the network is not limited to Mastodon servers. If better software comes along, it can continue with the same social graph.' /></p>
</div>
<Link to='/#getting-started' className='cta button alt'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></Link>
<div className='feature-angle'>
<i className='ion-md-megaphone' />
<h3><FormattedMessage id='how_it_works.robust' defaultMessage='Mastodon is robust' /></h3>
<p><FormattedMessage id='how_it_works.robust_text' defaultMessage='The network is resistant to financial, technical and organizational issues, as well as government interference, due to its diversified nature.' /></p>
</div>
</div>
</div>
</div>
);
......
......@@ -70,7 +70,7 @@ class Wizard extends React.PureComponent {
);
return (
<div className='wizard-page' id='getting-started'>
<h1><i className='ion-person-add' /> <FormattedMessage id='wizard.sign_up' defaultMessage='Sign up' /></h1>
<h1><i className='ion-md-person-add' /> <FormattedMessage id='wizard.sign_up' defaultMessage='Sign up' /></h1>
<form className='wizard-controls'>
<div className='row'>
......@@ -134,13 +134,19 @@ class Wizard extends React.PureComponent {
</Scrollbars>
</div>
<div className='wizard-hint'>
<div className='wizard-hint__icon'>
<i className='ion-information-circled' />
<div style={{ display: 'flex' }}>
<div className='wizard-hint'>
<div className='wizard-hint__icon'>
<i className='ion-md-information-circle' />
</div>
<div className='wizard-hint__text'>
<FormattedMessage id='wizard.hint' defaultMessage="This is like picking an e-mail hosting provider, but more social since you'll see your neighbours. The domain will also be part of your username!" />
</div>
</div>
<div className='wizard-hint__text'>
<FormattedMessage id='wizard.hint' defaultMessage="This is like picking an e-mail hosting provider, but more social since you'll see your neighbours. The domain will also be part of your username!" />
<div style={{ flex: '0 0 auto', marginLeft: 15, marginTop: 30 }}>
<a target='_blank' href='https://bridge.joinmastodon.org' className='cta button' style={{ marginBottom: 0 }}>Find Twitter friends</a>
</div>
</div>
</div>
......
@import url('https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:400,600|Roboto:400,500,700');
@import url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
@import url('https://unpkg.com/ionicons@4.2.0/dist/css/ionicons.min.css');
@import 'scss/variables.scss';
@import 'scss/reset.scss';
......@@ -10,3 +10,4 @@
@import 'scss/Credits.scss';
@import 'scss/Sponsorship.scss';
@import 'scss/LanguageSelect.scss';
@import 'scss/Features.scss';
......@@ -12,10 +12,10 @@
"features.deploy_own": "Easily deploy your own",
"features.find_your_community": "Find your perfect community",
"features.find_your_community_text": "Mastodon isn’t one place and one set of rules: it’s <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!",
"features.huge_audience": "A huge audience",
"features.huge_audience": "Over a million people",
"features.media_embedding": "Embed media in your posts",
"features.open_standards": "Built on open web standards",
"features.post_filtering": "Flexible post filtering",
"features.post_filtering": "Granular post privacy",
"features.relevancy": "You decide what’s relevant",
"features.safety": "Feel safe in your community",
"features.safety_text": "Mastodon comes with <strong>effective anti-abuse tools</strong> to help protect yourself from online abuse. With small, interconnected communities, it means that there are <strong>more moderators</strong> 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.",
......@@ -30,10 +30,10 @@
"home.headline": "Social networking, <strong>back in your hands</strong>",
"home.how_it_works": "How it works",
"home.install_your_own": "Install your own",
"home.install_your_own_text": "If you are interested in running your own instance — for your friends, family or organization — you can get started by reading the installation documentation. You only host your own users and the content that they subscribe to.",
"home.install_your_own_text": "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, which means it&apos;s quite scalable and resource-efficient.",
"home.read_the_docs": "Read the docs",
"home.sponsored_by": "Sponsored by",
"home.tagline": "The world’s largest free, open-source, decentralized microblogging network",
"home.tagline": "Your self-hosted, globally interconnected microblogging community",
"how_it_works.how_it_works": "How it works",
"how_it_works.how_it_works_text1": "Anyone can run a server of Mastodon. Each server hosts individual user accounts, the content they produce, and the content they subscribe to.",
"how_it_works.how_it_works_text2": "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).",
......@@ -83,4 +83,4 @@
"wizard_row.stability.intermittent": "Intermittent",
"wizard_row.stability.stable": "Stable",
"wizard_row.user_count": "{population} {count, plural, one {person} other {people}}"
}
\ No newline at end of file
}
@import './variables.scss';
.feature-angle-container {
display: flex;
margin: 0 -15px;
}
#features hr {
background: transparent;
border: 0;
border-top: 1px solid lighten($darkest, 8%);
}
.feature-angle {
flex: 1 1 50%;
text-align: center;
padding: 0 15px;
& > i {
display: block;
font-size: 44px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
margin-bottom: 20px;
margin-top: 20px;
font-size: 21px;
line-height: 1.38105;
letter-spacing: .011em;
}
a.link-button {
display: inline-block;
margin-top: 20px;
font-size: 21px;
color: lighten($vibrant, 8%);
text-decoration: none;
i {
margin-left: 5px;
}
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}
......@@ -81,13 +81,13 @@
}
.wizard-hint {
background: lighten($darkest, 14%);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 4px;
//background: lighten($darkest, 14%);
//box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
//border-radius: 4px;
display: flex;
align-items: center;
color: darken($lighter, 8%);
padding: 10px 16px;
//padding: 10px 16px;
margin-top: 30px;
font-size: 14px;
line-height: 21px;
......
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