Adjust sign up page design

Adds marketing language and adjusts the design to the current
checkout flow. It also removes part of the registration view
from the experimental sign up flow layout to reuse the
layout later in a follow-up MR.

app/assets/stylesheets/pages/experimental_separate_sign_up.scss

@@ -3,33 +3,8 @@
     background-color: $gray-light;
   }
 
-  .gitlab-logo {
-    width: 80px;
-    height: 80px;
-  }
-
   .signup-box-container {
-    max-width: 900px;
-
-    &.navless-container {
-      padding: 35px $gl-padding;
-      // overriding .devise-layout-html.navless-container to support the sticky footer
-      // without having a header on size xs
-      @include media-breakpoint-down(xs) {
-        padding: 65px $gl-padding; // height of footer
-        padding-top: $gl-padding;
-      }
-    }
-  }
-
-  .signup-heading h2 {
-    font-weight: $gl-font-weight-bold;
-    padding: 0 $gl-padding;
-    font-size: $gl-font-size-28;
-
-    @include media-breakpoint-down(md) {
-      font-size: $gl-font-size-large;
-    }
+    max-width: 960px;
   }
 
   .signup-box {

app/views/devise/registrations/new.html.haml

 - page_title "Sign up"
 - if experiment_enabled?(:signup_flow)
+  .row
+    .col-lg-7
+      %h1.mb-3.font-weight-bold.text-6.mt-0
+        = _("Speed up your DevOps<br>with GitLab").html_safe
+      %p.text-3
+        = _("GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security.")
+    .col-lg-5.order-12
+      .text-center.mb-3
+        %h2.font-weight-bold.gl-font-size-20= _('Register for GitLab')
       = render 'devise/shared/experimental_separate_sign_up_flow_box'
+      = render 'devise/shared/sign_in_link'
 - else
   = render 'devise/shared/signup_box'
-
-= render 'devise/shared/sign_in_link'
+  = render 'devise/shared/sign_in_link'

app/views/devise/shared/_experimental_separate_sign_up_flow_box.html.haml

-- content_for(:page_title, _('Register for GitLab'))
 - max_first_name_length = max_last_name_length = 127
 - max_username_length = 255
 .signup-box.p-3.mb-2

app/views/layouts/devise_experimental_separate_sign_up_flow.html.haml

 !!! 5
 %html.devise-layout-html.navless{ class: system_message_class }
   = render "layouts/head"
-  %body.ui-indigo.signup-page.application.navless{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'signup_page' } }
-    = header_message
+  %body.ui-indigo.signup-page{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'signup_page' } }
+    = render "layouts/header/logo_with_title"
     = render "layouts/init_client_detection_flags"
     .page-wrap
-      .container.signup-box-container.navless-container.mt-0
+      .container.signup-box-container.navless-container
         = render "layouts/broadcast"
         .content
           = render "layouts/flash"
-          .row.mb-6
-            .col-sm-8.offset-sm-2.col-md-6.offset-md-3.new-session-forms-container
-              = render_if_exists 'layouts/devise_help_text'
-              .text-center.signup-heading.mb-3
-                = image_tag(image_url('logo.svg'), class: 'gitlab-logo', alt: 'GitLab Logo')
-                - if content_for?(:page_title)
-                  %h2= yield :page_title
           = yield
       %hr.footer-fixed
       .footer-container

locale/gitlab.pot

@@ -9144,6 +9144,9 @@ msgstr ""
 msgid "GitLab for Slack"
 msgstr ""
 
+msgid "GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security."
+msgstr ""
+
 msgid "GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later."
 msgstr ""
 
@@ -18008,6 +18011,9 @@ msgstr ""
 msgid "Specify the following URL during the Runner setup:"
 msgstr ""
 
+msgid "Speed up your DevOps<br>with GitLab"
+msgstr ""
+
 msgid "Squash commit message"
 msgstr ""