Improved landing page

5 files changed, 124 insertions, 9 deletions

diff --git a/app/assets/images/fluffy-elephant-friend.png b/app/assets/images/fluffy-elephant-friend.png
new file mode 100644
index 000000000..11787e936
--- /dev/null
+++ b/app/assets/images/fluffy-elephant-friend.png
Binary files differdiff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
index f29090f1a..ce443fab4 100644
--- a/app/assets/stylesheets/about.scss
+++ b/app/assets/stylesheets/about.scss
@@ -95,6 +95,7 @@
 
   .actions {
     overflow: hidden;
+    margin-bottom: 20px;
 
     .info {
       float: right;
@@ -273,3 +274,61 @@
     }
   }
 }
+
+.features-list {
+  display: flex;
+  margin-bottom: 20px;
+
+  .features-list__column {
+    flex: 1 1 0;
+
+    ul {
+      list-style: none;
+    }
+
+    li {
+      margin: 0;
+    }
+  }
+}
+
+.screenshot-with-signup {
+  display: flex;
+  margin-bottom: 20px;
+
+  .mascot {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    img {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  .simple_form {
+    width: 300px;
+    flex: 0 0 auto;
+    background: rgba(darken($color1, 7%), 0.5);
+    padding: 14px;
+    border-radius: 4px;
+    box-shadow: 0 0 15px rgba($color8, 0.4);
+
+    .actions {
+      margin-bottom: 0;
+    }
+
+    .info {
+      text-align: center;
+
+      a {
+        color: $color2;
+      }
+    }
+  }
+}
diff --git a/app/views/about/index.html.haml b/app/views/about/index.html.haml
index 2d861d8a8..84f8e788f 100644
--- a/app/views/about/index.html.haml
+++ b/app/views/about/index.html.haml
@@ -20,17 +20,64 @@
     Mastodon
 
   %p= t('about.about_mastodon').html_safe
-  %p= t('about.about_instance', instance: Rails.configuration.x.local_domain).html_safe
 
-  .screenshot= image_tag 'screenshot.png'
+  .screenshot-with-signup
+    .mascot= image_tag 'fluffy-elephant-friend.png'
+
+    = simple_form_for(:user, url: user_registration_path) do |f|
+      = f.simple_fields_for :account do |ff|
+        = ff.input :username, autofocus: true, placeholder: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
+
+      = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }
+      = f.input :password, autocomplete: "off", placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password') }
+      = f.input :password_confirmation, autocomplete: "off", placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password') }
+
+      .actions
+        = f.button :button, t('about.get_started'), type: :submit
+
+      .info
+        = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
+        ·
+        = link_to t('about.about_this'), about_more_path
+
+  %h3= t('about.features_headline')
+
+  .features-list
+    .features-list__column
+      %ul.fa-ul
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.chronology'
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.public'
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.characters'
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.gifv'
+    .features-list__column
+      %ul.fa-ul
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.privacy'
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.blocks'
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.ethics'
+        %li
+          = fa_icon('li check-square')
+          = t 'about.features.api'
 
   - unless @description.blank?
+    %h3= t('about.description_headline', domain: Rails.configuration.x.local_domain)
     %p= @description.html_safe
 
   .actions
     .info
-      = link_to t('about.learn_more'), about_more_path
-      ·
       = link_to t('about.terms'), terms_path
       ·
       = link_to t('apps'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/Apps.md'
@@ -38,6 +85,3 @@
       = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
       ·
       = link_to t('about.other_instances'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/List-of-Mastodon-instances.md'
-
-    = link_to t('about.get_started'), new_user_registration_path, class: 'button webapp-btn'
-    = link_to t('auth.login'), new_user_session_path, class: 'button webapp-btn'
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index a17279b1e..116ede532 100644
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -7,7 +7,7 @@
   .fields-group
     = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
 
-    = f.input :setting_default_privacy, collection: Status.visibilities.keys, wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false
+    = f.input :setting_default_privacy, collection: Status.visibilities.keys - [:direct], wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false
 
   .fields-group
     = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 00ae0ad8e..eaaf853b1 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2,11 +2,23 @@
 en:
   about:
     about_instance: "<em>%{instance}</em> is a Mastodon instance."
-    about_mastodon: Mastodon is a <em>free, open-source</em> social network server. A <em>decentralized</em> alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Anyone can run Mastodon and participate in the <em>social network</em> seamlessly.
+    about_mastodon: Mastodon is a <em>free, open-source</em> social network. A <em>decentralized</em> alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Pick a server that you trust &mdash; whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the <em>social network</em> seamlessly.
+    about_this: About this instance
     business_email: 'Business e-mail:'
     contact: Contact
+    description_headline: What is %{domain}?
     domain_count_after: other instances
     domain_count_before: Connected to
+    features:
+      api: Open API for apps and services
+      blocks: Rich block and muting tools
+      characters: 500 characters per post
+      chronology: Timelines are chronological
+      ethics: 'Ethical design: no ads, no tracking'
+      gifv: GIFV sets and short videos
+      privacy: Granular, per-post privacy settings
+      public: Public timelines
+    features_headline: What sets Mastodon apart
     get_started: Get started
     learn_more: Learn more
     links: Links