amelioration(agent_connect): ameliore le design pour fitter aux maquettes ainsi que change le message comme quoi la feature est dispo pour tous

app/assets/stylesheets/auth.scss

@@ -10,12 +10,6 @@
   //
   // The procedure description can still be read from the /commencer
   // pages.
-  @media (max-width: $two-columns-breakpoint) {
-    .agent-intro {
-      display: none;
-    }
-  }
-
   .column {
     padding-top: $default-spacer;
   }
@@ -37,14 +31,6 @@
     margin-bottom: 0;
   }
 
-  hr {
-    margin-top: 30px;
-    margin-bottom: 30px;
-    background-color: $grey;
-    border: none;
-    height: 1px;
-  }
-
   .register {
     display: flex;
     justify-content: space-between;

app/views/agent_connect/agent/index.html.haml

@@ -3,33 +3,31 @@
 #agentconnect
   .two-columns
     .columns-container
-      .column.agent-intro
-        %h1.mt-2.mb-2.agent= t('.you_are_an_agent')
-        .box= t('.in_progress_html')
-
-        .center.mt-2
-          %span.citizen= t('.you_are_a_citizen')
-          %br
-          %br
-          = link_to t('.citizen_page'), new_user_session_path, class: "fr-btn fr-btn--secondary"
 
       .column
-        %h1.fr-my-2w
-          = t('.connect')
-
-        .fr-connect-group.fr-my-2w
-          = link_to(agent_connect_login_path, class: "fr-btn fr-connect") do
-            %span.fr-connect__login
-              = t('.signin_with')
-            %span.fr-connect__brand AgentConnect
-          %p
-            = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener"
-
-
-        %p.fr-hr-or= t('views.shared.france_connect_login.separator')
 
         #session-new.auth-form.sign-in-form
-          = form_for User.new, url: user_session_path do |f|
+          = form_for User.new, url: user_session_path, html: { class: "fr-pt-5w" }   do |f|
+
+            %h1.fr-h2= t('views.users.sessions.new.sign_in', application_name: APPLICATION_NAME)
+
+            .fr-mb-0.fr-fieldset
+              .fr-fieldset__legend
+                %h2.fr-h6= t('.cta')
+
+              .fr-fieldset__element
+                %p= t('.explanation')
+
+                .fr-connect-group.fr-my-2w
+                  = link_to(agent_connect_login_path, class: "fr-btn fr-connect") do
+                    %span.fr-connect__login
+                      = t('.signin_with')
+                    %span.fr-connect__brand AgentConnect
+                  %p
+                    = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener"
+
+
+            %p.fr-hr-or= t('views.shared.france_connect_login.separator')
 
             %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'new-account-legend' } }
               %legend.fr-fieldset__legend#new-account-legend
@@ -53,8 +51,22 @@
                     = f.check_box :remember_me
                     = f.label :remember_me, t('views.users.sessions.new.remember_me'), class: 'remember-me'
 
+            %ul.fr-btns-group
+              %li= f.submit t('views.users.sessions.new.connection'), class: "fr-btn"
+
+          %hr
+
+          %h2.fr-h6= t('.you_are_a_citizen')
+          %ul.fr-btns-group
+            %li= link_to t('.citizen_page'), new_user_session_path, class: "fr-btn fr-btn--secondary width-100"
+
+      .column.agent-intro
+        = render Dsfr::CalloutComponent.new(title: t('.full_deploy_title'), icon: 'fr-icon-information-line') do |c|
+          - c.with_body do
+            = t('.full_deploy_body')
+        %h2.fr-h6= t('.whats_ds', application_name: APPLICATION_NAME)
+        = image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo", alt: ""
 
-            = f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg"
 
 - content_for :footer do
   = render partial: 'users/dossiers/index_footer'

config/locales/views/agent_connect/agent/en.yml

@@ -3,18 +3,12 @@ en:
     agent:
       index:
         cta: Connect with AgentConnect
-        you_are_an_agent: Are you an employee of the state civil service or of a state operator?
+        explanation: Agent connect is the solution powered by the state to secure and simplify the connection to online services
-        in_progress_html: |
+        full_deploy_title: Agent connect is now fully available
-          <p>
+        full_deploy_body: All ministries and operators are able to use it
-            <b class="bold">AgentConnect is currently being deployed.</b>
+        you_are_a_citizen: Are you a citizen ?
-            <br>
-            The ministries and operators that can currently benefit from it are&nbsp;:
-          </p>
-          <ul>
-            <li>the Insee</li>
-          </ul>
-        you_are_a_citizen: You are an individual ?
         citizen_page: Go to our dedicated page
-        connect: Connect
+        signin_with: "Sign in with"
         whats_agentconnect: 'What is AgentConnect?'
+        whats_ds: '%{application_name}, the national platform to dematerialize administrative procedures'
         pro_email: Professional email

config/locales/views/agent_connect/agent/fr.yml

@@ -2,20 +2,13 @@ fr:
   agent_connect:
     agent:
       index:
-        cta: S’identifier avec AgentConnect
+        cta: Se connecter avec AgentConnect
-        you_are_an_agent: Vous êtes agent de la fonction publique dʼÉtat ou dʼun opérateur de lʼÉtat ?
+        explanation: AgentConnect est la solution proposée par l'État pour sécuriser et simplifier la connexion aux services en ligne
-        in_progress_html: |
+        full_deploy_title: AgentConnect est désormais entièrement deployé
-          <p>
+        full_deploy_body: Tous les ministères et opérateurs peuvent l'utiliser à ce jour
-            <b class="bold">AgentConnect est en cours de déploiement.</b>
-            <br>
-            Les ministères et opérateurs qui peuvent lʼutiliser à ce jour sont&nbsp;:
-          </p>
-          <ul>
-            <li>lʼInsee</li>
-          </ul>
         you_are_a_citizen: Vous êtes un particulier ?
-        citizen_page: Accéder à notre page dédiée
+        citizen_page: Se connecter sur votre espace
-        connect: Connectez-vous
         signin_with: "S’identifier avec"
         whats_agentconnect: 'Quʼest ce quʼAgentConnect ?'
+        whats_ds: '%{application_name}, la plate-forme nationale de dématérialisation des procédures administratives'
         pro_email: Adresse électronique professionnelle