Adjust public hashtag pages (#5357)

2 files changed, 90 insertions, 68 deletions

diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index a15afc32c..358d86eec 100644
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@@ -704,7 +704,6 @@
     .features #mastodon-timeline {
       height: 70vh;
       width: 100%;
-      min-width: 330px;
       margin-bottom: 50px;
 
       .column {
@@ -718,85 +717,96 @@
   }
 
   &.tag-page {
-    .brand {
-      padding-top: 20px;
-      margin-bottom: 20px;
+    .features {
+      padding: 30px 0;
 
-      img {
-        height: 48px;
-        width: auto;
-      }
-    }
+      .container {
+        max-width: 820px;
 
-    .container {
-      max-width: 690px;
-    }
+        #mastodon-timeline {
+          margin-right: 0;
+          border-top-right-radius: 0;
+        }
 
-    .cta {
-      margin: 40px 0;
-      margin-bottom: 80px;
+        .about-mastodon {
+          .about-hashtag {
+            background: darken($ui-base-color, 4%);
+            padding: 0 20px 20px 30px;
+            border-radius: 0 5px 5px 0;
 
-      .button {
-        margin-right: 4px;
-      }
-    }
+            .brand {
+              padding-top: 20px;
+              margin-bottom: 20px;
 
-    .about-mastodon {
-      max-width: 330px;
+              img {
+                height: 48px;
+                width: auto;
+              }
+            }
 
-      p {
-        strong {
-          color: $ui-secondary-color;
-          font-weight: 700;
+            p {
+              strong {
+                color: $ui-secondary-color;
+                font-weight: 700;
+              }
+            }
+
+            .cta {
+              margin: 0;
+
+              .button {
+                margin-right: 4px;
+              }
+            }
+          }
+
+          .features-list {
+            margin-left: 30px;
+            margin-right: 10px;
+          }
         }
       }
     }
 
     @media screen and (max-width: 675px) {
-      .container {
-        display: flex;
-        flex-direction: column;
-      }
-
       .features {
-        padding: 20px 0;
-      }
+        padding: 10px 0;
 
-      .about-mastodon {
-        order: 1;
-        flex: 0 0 auto;
-        max-width: 100%;
-      }
+        .container {
+          display: flex;
+          flex-direction: column;
 
-      #mastodon-timeline {
-        order: 2;
-        flex: 0 0 auto;
-        height: 60vh;
-      }
+          #mastodon-timeline {
+            order: 2;
+            flex: 0 0 auto;
+            height: 60vh;
+            margin-bottom: 20px;
+            border-top-right-radius: 4px;
+          }
 
-      .cta {
-        margin: 20px 0;
-        margin-bottom: 30px;
-      }
+          .about-mastodon {
+            order: 1;
+            flex: 0 0 auto;
+            max-width: 100%;
 
-      .features-list {
-        display: none;
-      }
+            .about-hashtag {
+              background: unset;
+              padding: 0;
+              border-radius: 0;
+
+              .cta {
+                margin: 20px 0;
+              }
+            }
 
-      .stripe {
-        display: none;
+            .features-list {
+              display: none;
+            }
+          }
+        }
       }
     }
   }
-
-  .stripe {
-    width: 100%;
-    height: 360px;
-    overflow: hidden;
-    background: darken($ui-base-color, 4%);
-    position: absolute;
-    z-index: -1;
-  }
 }
 
 @keyframes floating {
diff --git a/app/views/tags/show.html.haml b/app/views/tags/show.html.haml
index 6266d3c0c..ea8b0faa3 100644
--- a/app/views/tags/show.html.haml
+++ b/app/views/tags/show.html.haml
@@ -7,31 +7,43 @@
   = render 'og'
 
 .landing-page.tag-page
-  .stripe
   .features
     .container
       #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
 
       .about-mastodon
-        .brand
-          = link_to root_url do
-            = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+        .about-hashtag
+          .brand
+            = link_to root_url do
+              = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 
-        %p= t 'about.about_hashtag_html', hashtag: @tag.name
+          %p= t 'about.about_hashtag_html', hashtag: @tag.name
 
-        .cta
-          = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary'
-          = link_to t('about.learn_more'), root_url, class: 'button button-alternative'
+          .cta
+            = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary'
+            = link_to t('about.learn_more'), root_url, class: 'button button-alternative'
 
         .features-list
           .features-list__row
             .text
+              %h6= t 'about.features.real_conversation_title'
+              = t 'about.features.real_conversation_body'
+            .visual
+              = fa_icon 'fw comments'
+          .features-list__row
+            .text
               %h6= t 'about.features.not_a_product_title'
               = t 'about.features.not_a_product_body'
             .visual
               = fa_icon 'fw users'
           .features-list__row
             .text
+              %h6= t 'about.features.within_reach_title'
+              = t 'about.features.within_reach_body'
+            .visual
+              = fa_icon 'fw mobile'
+          .features-list__row
+            .text
               %h6= t 'about.features.humane_approach_title'
               = t 'about.features.humane_approach_body'
             .visual