Adapt homescreen block to use same texts as the admin page and change the structure of the block

app/assets/stylesheets/content/_widget_box.sass

@@ -101,11 +101,11 @@ $widget-box--enumeration-width: 20px
         @include varprop(color, alternative-color)
         width: $widget-box--enumeration-width
 
-
-    .widget-box--teaser-image
-      max-width: 30%
-      margin-left: auto
-      margin-right: auto
+    .widget-box--description
+      display: grid
+      grid-template-columns: auto auto
+      grid-column-gap: 20px
+      margin-bottom: 20px
 
 .widget-box--header
   font-weight: bold

app/assets/stylesheets/fonts/_openproject_icon_font.lsg

@@ -90,6 +90,7 @@
 <li><span class="icon icon-export-xls-with-relations"></span>export-xls-with-relations</li>
 <li><span class="icon icon-export-xls"></span>export-xls</li>
 <li><span class="icon icon-export"></span>export</li>
+<li><span class="icon icon-external-link"></span>external-link</li>
 <li><span class="icon icon-faq"></span>faq</li>
 <li><span class="icon icon-filter"></span>filter</li>
 <li><span class="icon icon-flag"></span>flag</li>

app/views/common/upsale.html.erb

@@ -10,18 +10,18 @@
       <%= feature_description %>
     </p>
 
-    <p><%= t('homescreen.blocks.upsale.description') %></p>
+    <p><%= t('js.admin.enterprise.upsale.benefits.description') %></p>
 
     <ul class="">
       <li>
-        <%= t('homescreen.blocks.upsale.additional_features') %>
+        <%= t('js.admin.enterprise.upsale.benefits.premium_features_text') %>
       </li>
       <li>
-        <%= t('homescreen.blocks.upsale.professional_support') %>
+        <%= t('js.admin.enterprise.upsale.benefits.professional_support_text') %>
       </li>
     </ul>
     <p>
-      <b><%= t('homescreen.blocks.upsale.become_hero') %></b> <%= t('homescreen.blocks.upsale.you_contribute') %>
+      <b><%= t('js.admin.enterprise.upsale.become_hero') %></b> <%= t('js.admin.enterprise.upsale.you_contribute') %>
     </p>
     <%= link_to( "#{OpenProject::Static::Links.links[:upsale][:href]}/?utm_source=unknown&utm_medium=community-edition&utm_campaign=#{feature_reference}",
                  { class: 'button -alt-highlight',

app/views/enterprises/_info.html.erb

@@ -54,7 +54,7 @@ See docs/COPYRIGHT.rdoc for more details.
 </div>
 
 <div class="info-boxes upsale-benefits">
-  <h3 class="info-boxes--title -no-border"><%= t('homescreen.blocks.upsale.description') %></h3>
+  <h3 class="info-boxes--title -no-border"><%= t('js.admin.enterprise.upsale.benefits.description') %></h3>
   <div class="info-boxes--container">
     <div class="info-boxes--item">
       <%= image_tag "security_features.png",

app/views/homescreen/blocks/_upsale.html.erb

@@ -1,28 +1,31 @@
 <%= render 'homescreen/blocks/header', title: t('homescreen.blocks.upsale.title') %>
 
-<%= image_tag "enterprise_edition.png", class: "widget-box--teaser-image" %>
-
-<p><%= t('homescreen.blocks.upsale.description') %></p>
-
-<ul class="widget-box--feature-list">
-  <li>
-    <%= t('homescreen.blocks.upsale.additional_features') %>
-  </li>
-  <li>
-    <%= t('homescreen.blocks.upsale.professional_support') %>
-  </li>
-</ul>
-<p>
-  <b><%= t('homescreen.blocks.upsale.become_hero') %></b> <%= t('homescreen.blocks.upsale.you_contribute') %>
-</p>
+<div class="widget-box--description">
+  <%= image_tag "enterprise_edition.png", class: "widget-box--teaser-image" %>
+  <p>
+    <%= t('homescreen.blocks.upsale.text') %>
+  </p>
+</div>
 
 <div class="widget-box--blocks--buttons">
+  <% if current_user.admin? %>
+    <%= link_to t('js.admin.enterprise.upsale.button_start_trial'), enterprise_path, class: 'button -alt-highlight' %>
+  <% end  %>
+
   <%= link_to "#{OpenProject::Static::Links.links[:upsale][:href]}/?utm_source=unknown&utm_medium=community-edition&utm_campaign=home-screen",
-        { class: 'button -alt-highlight',
+        { class: 'button -highlight',
           aria: {label: t('homescreen.blocks.upsale.more_info')},
           target: '_blank',
           title: t('homescreen.blocks.upsale.more_info')} do %>
-    <%= op_icon('button--icon icon-info2') %>
     <span class="button--text"><%= t('homescreen.blocks.upsale.more_info') %></span>
+    <%= op_icon('button--icon icon-external-link') %>
   <% end %>
 </div>
+
+<span><b><%= t('js.admin.enterprise.upsale.become_hero') %></b></span>
+
+<p><%= t('js.admin.enterprise.upsale.you_contribute') %></p>
+
+<p>
+  <b><%= t('homescreen.blocks.upsale.confidence') %></b>
+</p>

app/views/types/form/_form_configuration.html.erb

@@ -59,7 +59,7 @@ See docs/COPYRIGHT.rdoc for more details.
               </ul>
               <p>
                 <br/>
-                <b><%= t('homescreen.blocks.upsale.become_hero') %></b> <%= t('homescreen.blocks.upsale.you_contribute') %>
+                <b><%= t('js.admin.enterprise.upsale.become_hero') %></b> <%= t('js.admin.enterprise.upsale.you_contribute') %>
               </p>
               <%= link_to("#{OpenProject::Static::Links.links[:upsale][:href]}/?utm_source=unknown&utm_medium=community-edition&utm_campaign=form-configuration",
                           { class: 'button -alt-highlight',

config/locales/en.yml

@@ -1182,13 +1182,13 @@ en:
     blocks:
       community: "OpenProject community"
       upsale:
-        become_hero: "Become a hero!"
         title: "Upgrade to Enterprise Edition"
-        description: "What are the benefits?"
         more_info: "More information"
-        additional_features: "Additional powerful premium features"
-        professional_support: "Professional support from the OpenProject experts"
-        you_contribute: "Developers need to pay their bills, too. With Enterprise Edition you substantially contribute to this Open-Source community effort."
+        text: >
+          The OpenProject Enterprise Edition builds on top of the Community Edition.
+          It includes premium features and professional support mainly aimed at organizations with more 10 users that manage business critical projects with OpenProject.
+        confidence: >
+          We deliver the confidence of a tested and supported enterprise-class project management software - with open source and open mind.
     links:
       upgrade_enterprise_edition: "Upgrade to Enterprise Edition"
       postgres_migration: "Migrating your installation to PostgreSQL"

frontend/src/app/components/homescreen/blocks/new-features.component.sass

@@ -1,6 +1,4 @@
 .widget-box--description
-  display: flex
-
   .widget-box--teaser-image
     background-image: var(--new-feature-teaser-image)
     min-width: 170px

modules/ldap_groups/app/views/ldap_groups/synchronized_groups/upsale.html.erb

@@ -6,18 +6,18 @@
     <h3><%= t('admin.enterprise.upgrade_to_ee') %></h3>
     <%= image_tag "enterprise_edition.png", class: "widget-box--teaser-image" %>
 
-    <p><%= t('homescreen.blocks.upsale.description') %></p>
+    <p><%= t('js.admin.enterprise.upsale.benefits.description') %></p>
 
     <ul class="">
       <li>
-        <%= t('homescreen.blocks.upsale.additional_features') %>
+        <%= t('js.admin.enterprise.upsale.benefits.premium_features_text') %>
       </li>
       <li>
-        <%= t('homescreen.blocks.upsale.professional_support') %>
+        <%= t('js.admin.enterprise.upsale.benefits.professional_support_text') %>
       </li>
     </ul>
     <p>
-      <b><%= t('homescreen.blocks.upsale.become_hero') %></b> <%= t('homescreen.blocks.upsale.you_contribute') %>
+      <b><%= t('js.admin.enterprise.upsale.become_hero') %></b> <%= t('js.admin.enterprise.upsale.you_contribute') %>
     </p>
     <%= link_to( "#{OpenProject::Static::Links.links[:upsale][:href]}/?utm_source=unknown&utm_medium=community-edition&utm_campaign=enterprise-ldap-groups",
                  { class: 'button -alt-highlight',

modules/openid_connect/app/views/openid_connect/providers/upsale.html.erb

@@ -7,18 +7,18 @@
     <h3><%= t('admin.enterprise.upgrade_to_ee') %></h3>
     <%= image_tag "enterprise_edition.png", class: "widget-box--teaser-image" %>
 
-    <p><%= t('homescreen.blocks.upsale.description') %></p>
+    <p><%= t('js.admin.enterprise.upsale.benefits.description') %></p>
 
     <ul class="">
       <li>
-        <%= t('homescreen.blocks.upsale.additional_features') %>
+        <%= t('js.admin.enterprise.upsale.benefits.premium_features_text') %>
       </li>
       <li>
-        <%= t('homescreen.blocks.upsale.professional_support') %>
+        <%= t('js.admin.enterprise.upsale.benefits.professional_support_text') %>
       </li>
     </ul>
     <p>
-      <b><%= t('homescreen.blocks.upsale.become_hero') %></b> <%= t('homescreen.blocks.upsale.you_contribute') %>
+      <b><%= t('js.admin.enterprise.upsale.become_hero') %></b> <%= t('js.admin.enterprise.upsale.you_contribute') %>
     </p>
     <%= link_to( "#{OpenProject::Static::Links.links[:upsale][:href]}/?utm_source=unknown&utm_medium=community-edition&utm_campaign=enterprise-openid-connect",
                  { class: 'button -alt-highlight',

vendor/openproject-icon-font/src/external-link.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512" width="512" height="512"><defs><path d="M12 68.89C12 108.71 12 427.29 12 467.11C12 498.2 37.8 524 68.89 524C108.71 524 427.29 524 467.11 524C498.2 524 524 498.2 524 467.11C524 453.84 524 387.47 524 268L467.11 268L467.11 467.11L68.89 467.11L68.89 68.89L268 68.89L268 12L68.89 12C30.96 29.2 12 48.16 12 68.89ZM324.89 68.89L426.89 68.89L162.56 333.22L202.78 373.44L467.11 109.11L467.11 211.11L524 211.11L524 12L324.89 12L324.89 68.89Z" id="a4ClflbBbj"></path><path d="M12 20C12 25.6 12 70.4 12 76C12 80.37 15.63 84 20 84C25.6 84 70.4 84 76 84C80.37 84 84 80.37 84 76C84 74.13 84 64.8 84 48L76 48L76 76L20 76L20 20L48 20L48 12L20 12C14.67 14.42 12 17.09 12 20ZM56 20L70.34 20L33.17 57.17L38.83 62.83L76 25.66L76 40L84 40L84 12L56 12L56 20Z" id="aH6E9REk8"></path></defs><g><g><g><use xlink:href="#a4ClflbBbj" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a4ClflbBbj" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#aH6E9REk8" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#aH6E9REk8" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>