Update start a free trial pages

ee/app/helpers/ee/trial_helper.rb

@@ -41,7 +41,7 @@ module EE
         'Groups' => trialable_group_namespaces.map { |n| [n.name, n.id] }
       }
 
-      grouped_options_for_select(grouped_options, selected, prompt: _('Please select'))
+      grouped_options_for_select(grouped_options, selected, prompt: _('Please select a group'))
     end
 
     def show_trial_errors?(namespace, service_result)

ee/app/views/trials/_skip_trial.html.haml

-.gl-mt-6{ class: 'gl-md-mt-11!' }
+.gl-mt-4
   - if params[:glm_source] == 'gitlab.com'
-    = link_to s_('Trials|Go back to GitLab'), skip_trials_path, class: 'block center py-2'
-    .label
+    = link_to s_('Trials|Go back to GitLab'), skip_trials_path, class: 'block py-2'
+    .gl-font-sm.gl-text-gray-700
       = s_("Trials|You can always resume this process by selecting your avatar and choosing 'Start an Ultimate trial'")
   - else
-    = link_to s_('Trials|Skip Trial'), skip_trials_path, class: 'block center py-2'
-    .label
+    = link_to s_('Trials|Skip Trial'), skip_trials_path, class: 'block py-2'
+    .gl-font-sm.gl-text-gray-700
       = s_("Trials|You won't get a free trial right now but you can always resume this process by selecting your avatar and choosing 'Start an Ultimate trial'")

ee/app/views/trials/new.html.haml

@@ -4,37 +4,42 @@
   = render "layouts/one_trust"
 
 .row
-  .col-md-6.offset-md-3
-    %h3.gl-text-center.gl-mt-0
+  .col-md-6.m-sm-6
+    %h2.gl-pb-5.gl-my-0
       = _("Start your Free Ultimate Trial")
 
-    %p.gl-text-center
+    %p.gl-text-gray-700.gl-font-lg
       = s_('Trial|Your GitLab Ultimate trial lasts for 30 days, but you can keep your free GitLab account forever. We just need some additional information to activate your trial.')
 
     = render 'errors'
 
     = form_tag create_lead_trials_path(glm_params), method: :post do |f|
-      .form-group
+      .form-row
+        .col-12.col-sm-6.form-group
           = label_tag :first_name, s_('Trial|First name'), for: :first_name, class: 'col-form-label'
           = text_field_tag :first_name, params[:first_name] || current_user.first_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'first_name' }
-      .form-group
+        .col-12.col-sm-6.form-group
           = label_tag :last_name, s_('Trial|Last name'), for: :last_name, class: 'col-form-label'
           = text_field_tag :last_name, params[:last_name] || current_user.last_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'last_name' }
       .form-group
         = label_tag :company_name, s_('Trial|Company name'), for: :company_name, class: 'col-form-label'
         = text_field_tag :company_name, params[:company_name] || current_user.organization, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'company_name' }
-      .form-group.gl-select2-html5-required-fix
+      .form-row
+        .col-12.col-sm-6.form-group.gl-select2-html5-required-fix
           = label_tag :company_size, s_('Trial|Number of employees'), for: :company_size, class: 'col-form-label'
           = select_tag :company_size, company_size_options_for_select(params[:company_size]), class: 'select2', required: true, data: { qa_selector: 'number_of_employees' }
+        .col-12.col-sm-6.form-group
+          = label_tag :number_of_users, s_('Trial|Number of trial users'), for: :number_of_users, class: 'col-form-label'
+          = number_field_tag :number_of_users, params[:number_of_users], class: 'form-control gl-border-gray-400', required: true, min: 1, data: { qa_selector: 'number_of_users' }
+      .form-group.gl-select2-html5-required-fix
+        = render 'select_country'
       .form-group
         = label_tag :phone_number, s_('Trial|Telephone number'), for: :phone_number, class: 'col-form-label'
         = telephone_field_tag :phone_number, params[:phone_number], pattern: '^(\+)*[0-9-\s]+$', class: 'form-control gl-form-input', required: true, data: { qa_selector: 'telephone_number' }
         %p.gl-text-gray-500= _('Allowed characters: +, 0-9, -, and spaces.')
-      .form-group
-        = label_tag :number_of_users, s_('Trial|How many users will be evaluating the trial?'), for: :number_of_users, class: 'col-form-label'
-        = number_field_tag :number_of_users, params[:number_of_users], class: 'form-control gl-form-input', required: true, min: 1, data: { qa_selector: 'number_of_users' }
-      .form-group.gl-select2-html5-required-fix
-        = render 'select_country'
-      = submit_tag s_('Trial|Continue'), class: 'btn gl-button btn-confirm btn-block', data: { qa_selector: 'continue' }
+      = submit_tag s_('Trial|Continue'), class: 'btn gl-button btn-confirm gl-w-20', data: { qa_selector: 'continue' }
 
     = render 'skip_trial'
+
+  .col-md-4.gl-display-inline-flex.gl-vertical-align-middle
+    = image_tag 'illustrations/gitlab-features-orbiting-browser.svg', class: 'd-none d-md-inline'

ee/app/views/trials/select.html.haml

@@ -4,11 +4,11 @@
 = render "layouts/google_tag_manager_body"
 
 .row
-  .col-md-6.offset-md-3
-    %h3.gl-text-center.gl-mt-0
+  .col-md-6.m-sm-6
+    %h2.gl-pb-5.gl-my-0
       = _('Almost there')
 
-    %p.gl-text-center
+    %p.gl-text-gray-700.gl-font-lg
       = trial_selection_intro_text
 
     = render 'errors'
@@ -23,14 +23,17 @@
         = text_field_tag :new_group_name, nil, class: 'form-control', required: !show_trial_namespace_select?, data: { qa_selector: 'new_group_name' }
       - if should_ask_company_question?
         .form-group
-          = label_tag :trial_entity, _('Is this GitLab trial for your company?')
+          = label_tag :trial_entity, _('Who will be using GitLab?')
           .gl-form-checkbox-group
             .gl-form-checkbox.form-check.form-check-inline
               = radio_button_tag :trial_entity, :company, params[:trial_entity]=='company', required: true, class: 'form-check-input'
-              = label_tag :trial_entity_company, _('Yes'), class: 'form-check-label'
+              = label_tag :trial_entity_company, _('My company or team'), class: 'form-check-label'
             .gl-form-checkbox.form-check.form-check-inline
               = radio_button_tag :trial_entity, :individual, params[:trial_entity]=='individual', required: true, class: 'form-check-input', data: { qa_selector: 'trial_individual' }
-              = label_tag :trial_entity_individual, _('No'), class: 'form-check-label'
-      = submit_tag _('Start your free trial'), class: 'gl-button btn btn-confirm btn-block', data: { qa_selector: 'start_your_free_trial' }
+              = label_tag :trial_entity_individual, _('Just me'), class: 'form-check-label'
+      = submit_tag _('Start your free trial'), class: 'gl-button btn btn-confirm gl-w-20', data: { qa_selector: 'start_your_free_trial' }
 
     = render 'skip_trial'
+
+  .col-md-4.gl-display-inline-flex.gl-vertical-align-middle
+    = image_tag 'illustrations/gitlab-features-orbiting-browser.svg', class: 'd-none d-md-inline'

ee/spec/features/trials/select_namespace_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Trial Select Namespace', :js do
 
     context 'when source is not about.gitlab.com' do
       it 'shows company/individual question' do
-        expect(page).to have_content('Is this GitLab trial for your company?')
+        expect(page).to have_content('Who will be using GitLab?')
       end
     end
 
@@ -35,7 +35,7 @@ RSpec.describe 'Trial Select Namespace', :js do
       let(:url_params) { { glm_source: 'about.gitlab.com' } }
 
       it 'hides company/individual duplicate question' do
-        expect(page).not_to have_content('Is this GitLab trial for your company?')
+        expect(page).not_to have_content('Who will be using GitLab?')
       end
     end
 
@@ -46,7 +46,7 @@ RSpec.describe 'Trial Select Namespace', :js do
 
       it 'shows the new group name input' do
         expect(page).to have_field('New Group Name')
-        expect(page).to have_content('Is this GitLab trial for your company?')
+        expect(page).to have_content('Who will be using GitLab?')
       end
 
       context 'enters a valid new group name' do
@@ -125,7 +125,7 @@ RSpec.describe 'Trial Select Namespace', :js do
       context 'without trial plan' do
         it 'does not show the new group name input' do
           expect(page).not_to have_field('New Group Name')
-          expect(page).to have_content('Is this GitLab trial for your company?')
+          expect(page).to have_content('Who will be using GitLab?')
         end
 
         it 'applies trial and redirects to dashboard' do

locale/gitlab.pot

@@ -19577,9 +19577,6 @@ msgstr ""
 msgid "Is blocked by"
 msgstr ""
 
-msgid "Is this GitLab trial for your company?"
-msgstr ""
-
 msgid "Is using license seat:"
 msgstr ""
 
@@ -26470,6 +26467,9 @@ msgstr ""
 msgid "Please select a file"
 msgstr ""
 
+msgid "Please select a group"
+msgstr ""
+
 msgid "Please select a group."
 msgstr ""
 
@@ -37289,15 +37289,15 @@ msgstr ""
 msgid "Trial|How many employees will use Gitlab?"
 msgstr ""
 
-msgid "Trial|How many users will be evaluating the trial?"
-msgstr ""
-
 msgid "Trial|Last name"
 msgstr ""
 
 msgid "Trial|Number of employees"
 msgstr ""
 
+msgid "Trial|Number of trial users"
+msgstr ""
+
 msgid "Trial|Please select a country"
 msgstr ""