Commit b85d4b23 authored by Morgan Nichols's avatar Morgan Nichols

Added images, did some tweaks from user feedback

- Shortened line length for hero text
- Wording changes in feature item 2
- Reorganized layout to make it easier to make it responsive later
parent add0399e
......@@ -8,6 +8,9 @@ import mastodonLogo from './assets/mastodon-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
import elefriend from './assets/fluffy-elephant-friend.png';
import tootScreenshot from './assets/toot-screenshot.png';
const App = () => (
<Router>
<div className='app'>
......@@ -35,9 +38,11 @@ const App = () => (
</div>
<div className='intro'>
<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's largest free, open-source, decentralized micro-blogging network.</p>
<a href='https://instances.mastodon.xyz' className='cta button'>Get started</a>
<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's largest free, open-source, decentralized micro-blogging network.</p>
<a href='https://instances.mastodon.xyz' className='cta button'>Get started</a>
</div>
</div>
<div className='hero'>
......@@ -47,32 +52,32 @@ const App = () => (
</div>
<div className='feature container'>
<div className='text'>
<img className='right visual' src={elefriend} alt='Mastodon mascot'/>
<div className='left text'>
<h2>You're a person, not a product</h2>
<p>Mastodon communities, or instances, are independently owned, hosted, and moderated. Instances can seamlessly connect to each other, but nobody can own or control them all. That means no big corporation owns your data and you aren't being spied on or sold to advertisers.</p>
</div>
<div className='visual'/>
</div>
<div className='feature container'>
<div className='visual'/>
<div className='text'>
<h2>Built for nuanced conversation</h2>
<p>Longer 500 character posts give you more space to get deep into a topic, not just surface-level quips, and built in support for content warnings, lets you share sensitive discussions and media with only those who want to see them.</p>
<img className='left visual' src={tootScreenshot} alt='Screenshot of toot interface'/>
<div className='right text'>
<h2>Built for real conversation</h2>
<p>With 500 characters per post, you get plenty of space to go deep into topics, instead of just making surface-level quips. Built in support for content warnings, lets you share sensitive discussions and media with only those who want to see them.</p>
</div>
</div>
<div className='feature container'>
<div className='text'>
<div className='right visual'/>
<div className='left text'>
<h2>Find your perfect place</h2>
<p>Pick an instance that suits you, out of diverse options for all sorts of interests, needs, and languages. If you don't like how yours is being run, you can quickly and easily find another without losing any of the friends you've made. You can even make a new instance for the public, for your organisation, your friends, or even just yourself.</p>
</div>
<div className='visual'/>
</div>
<div className='feature container'>
<div className='visual'/>
<div className='text'>
<div className='right text'>
<h2>Always within reach</h2>
<p>With multiple apps available iOS, Android, and every platform you can think of, Mastodon is easy to use everywhere you go, and just like with instances, anyone can develop an app</p>
</div>
<div className='left visual'/>
</div>
<div className='bottom-cta'>
<a href='https://instances.mastodon.xyz' className='cta button'>Find an instance</a>
......
......@@ -3,13 +3,17 @@
$transition-in: 100ms linear;
$transition-out: 250ms linear;
$content-width: 950px;
$phi: 1.6180339887498948482;
.app {
font-size: 16px;
line-height: 30px;
}
.container {
max-width: 950px;
max-width: $content-width;
margin: 0 auto;
}
......@@ -125,6 +129,11 @@ $transition-out: 250ms linear;
background: linear-gradient( to bottom, $bgBase, $bgBase, $darkest);
color: $lighter;
.text {
width: 800px;
margin: 0 auto;
}
h1 {
font-size: 36px;
font-weight: 400;
......@@ -182,16 +191,25 @@ $transition-out: 250ms linear;
align-items: center;
justify-content: space-between;
.text, .visual {
margin: 0 30px;
overflow: hidden;
.left {
margin-right: 20px;
order: 1;
}
.right {
margin-left: 20px;
order: 2;
}
.text {
width: 60%;
width: percentage(1/$phi);
}
.visual {
width: percentage(1 - (1/$phi));
}
div.visual {
height: 300px;
}
......
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