Poursuit design page d'accueil

configs/simplifions/config.yaml

@@ -38,7 +38,7 @@ website:
     subtitle: |+
         <div class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-content-media__img fr-col-lg-2 fr-col-4">
-            <img class="fr-responsive-img" src="/simplifions/assets/accueil-image-ecosystem.png" alt="Capture d'écran du swagger API Entreprise" style="display: block; width: 100%; height: auto; border-radius: 4px;" />
+            <img class="fr-responsive-img" src="/simplifions/assets/accueil-picto-ecosystem.png" alt="" style="display: block; width: 100%; height: auto;" />
         </div>
         <div  class="fr-col-lg-8 fr-col-12" style="font-family: Marianne,arial,sans-serif !important; font-style: normal;">
           <p class="fr-text--lead"> Simplifiez les démarches et services des citoyens, entreprises et associations en récupérant pour eux leurs informations administratives grâce aux API et aux données ! Vous gagnerez aussi du temps !</p>
@@ -49,7 +49,7 @@ website:
     sections:
       - title:
         content: >-
-          <h2 class="fr-h1 fr-my-5w" style="color: black; text-align: center;">Améliorer les services à destination :</h2>
+          <h2 class="fr-h1 fr-mt-15w fr-mb-5w" style="color: black; text-align: center;">Améliorer les services à destination :</h2>
 
           <p class="fr-text--lg" style="text-align: center;">
           Le portail <i>simplifions.data.gouv.fr</i> vous accompagne pour simplifier, avec de la donnée, les démarches des citoyens.<br/>Retrouvez tous les cas d'usages selon le public concerné :
@@ -87,7 +87,7 @@ website:
             <div class="fr-tile__body">
               <div class="fr-tile__content">
               <h3 class="fr-tile__title fr-h3">
-                <a href="/cas-d-usages?tags=spf-users-particuliers">Des associations<br/>🎭</a>
+                <a href="/cas-d-usages?tags=spf-users-particuliers">Des associations<br/>🤝</a>
               </h3>
               <p class="fr-tile__detail fr-h6">Tous les cas d'usages concernant les associations</p>
               </div>
@@ -101,32 +101,115 @@ website:
             class: 'fr-btn fr-btn--icon-left fr-btn--lg fr-icon-checkbox-circle-fill'
       - title:
         content: >-
-          <h2 class="fr-h1 fr-my-5w" style="color: black; text-align: center;">Quelques soient vos ressources, il existe des solutions !</h2>
+          <h2 class="fr-h1 fr-mt-15w fr-mb-5w" style="color: black; text-align: center;">Quelques soient vos ressources, il existe des solutions !</h2>
 
-          <p class="fr-text--lg">
-          Ce portail s'adresse à l'ensemble des acteurs publics, qu'ils disposent ou non d'un service informatique ou d'un prestataire.
+          <p class="fr-text--lg" style="text-align: center;">
+          Ce portail s'adresse à l'ensemble des acteurs publics, qu'ils disposent ou non de ressources informatiques.
           <br/>
-          Pour chacun des cas d'usages, un indicateur vous permet de savoir quelles sont les possibilités d'intégration :
+          Filtrez les cas d'usages et les solutions selon vos possibilités d'intégration :
           </p>
 
-        sub_section_datasets:
-        sub_section_cards:
-          title:
-          cards:
-            - name: 'Vous n’avez ni équipe technique, ni éditeur'
-              description: "Les cas d'usage accessibles avec des solutions clés en main, faciles à mettre en place par un agent non technique."
-              url: 'solutions?tags=spf-moyens-aucun'
-            - name: 'Vous passez par un éditeur'
-              description: "Les cas d'usages portés par des éditeurs qui s'occupent de l'intégration."
-              url: 'solutions?tags=spf-moyens-editeur'
-            - name: 'Vous avez votre service informatique'
-              description: "Les cas d'usages que vos services informatiques peuvent intégrer dans vos démarches et/ou votre système d’information."
-              url: 'solutions?tags=spf-moyens-techniques'
-        sub_section_tiles:
-        sub_section_buttons:
+          <div class="fr-grid-row fr-grid-row--gutters">
+            <div class="fr-col-12 fr-col-lg-4">
+              <div class="fr-card" style="background-color: #FAFAFA;">
+                <div class="fr-card__body">
+                  <div class="fr-card__content">
+                  <h3 class="fr-card__title">
+                    Vous n’avez ni équipe technique, ni éditeur
+                  </h3>
+                  <p class="fr-card__desc">Les cas d'usage accessibles avec des solutions clés en main, faciles à mettre en place par un agent non technique.</p>
+                  </div>
+                  <div class="fr-card__footer">
+                  <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
+                    <li>
+                    <a class="fr-btn" href="/cas-d-usages?tags=spf-budget-aucun-developpement">Cas d'usages</a>
+                    </li>
+                    <li>
+                    <a class="fr-btn fr-btn--secondary" href="/solutions?tags=spf-budget-aucun-developpement,spf-moyens-aucun">Solutions</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+               <div class="fr-card__header">
+                  <div style="display: flex; justify-content: center; align-items: center; height: 100px; overflow: hidden; margin-top: 10px;">
+                    <img 
+                      class="fr-responsive-img" 
+                      src="/simplifions/assets/accueil-picto-contract.png" 
+                      alt="" 
+                      style="max-height: 100%; width: auto;" />
+                  </div>
+               </div>
+              </div>
+            </div>
+
+            <div class="fr-col-12 fr-col-lg-4">
+              <div class="fr-card" style="background-color: #FAFAFA;">
+              <div class="fr-card__body">
+                <div class="fr-card__content">
+                <h3 class="fr-card__title">
+                  Vous passez par un éditeur
+                </h3>
+                <p class="fr-card__desc">Les cas d'usages portés par des éditeurs qui s'occupent de l'intégration.</p>
+                </div>
+                <div class="fr-card__footer">
+                <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
+                  <li>
+                  <a class="fr-btn" href="/cas-d-usages?tags=spf-budget-aucun-developpement">Cas d'usages</a>
+                  </li>
+                  <li>
+                  <a class="fr-btn fr-btn--secondary" href="/solutions?tags=spf-budget-aucun-developpement,spf-moyens-aucun">Solutions</a>
+                  </li>
+                </ul>
+                </div>
+              </div>
+              <div class="fr-card__header">
+                  <div style="display: flex; justify-content: center; align-items: center; height: 100px; overflow: hidden; margin-top: 10px;">
+                    <img 
+                      class="fr-responsive-img" 
+                      src="/simplifions/assets/accueil-picto-self-training.png" 
+                      alt="" 
+                      style="max-height: 100%; width: auto;" />
+                  </div>
+              </div>
+              </div>
+            </div>
+
+            <div class="fr-col-12 fr-col-lg-4">
+              <div class="fr-card" style="background-color: #FAFAFA;">
+              <div class="fr-card__body">
+                <div class="fr-card__content">
+                <h3 class="fr-card__title">
+                  Vous avez votre service informatique
+                </h3>
+                <p class="fr-card__desc">Les cas d'usages que vos services informatiques peuvent intégrer dans vos démarches et/ou votre système d’information.</p>
+                </div>
+                <div class="fr-card__footer">
+                <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
+                  <li>
+                  <a class="fr-btn" href="/cas-d-usages?tags=spf-budget-aucun-developpement">Cas d'usages</a>
+                  </li>
+                  <li>
+                  <a class="fr-btn fr-btn--secondary" href="/solutions?tags=spf-budget-aucun-developpement,spf-moyens-aucun">Solutions</a>
+                  </li>
+                </ul>
+                </div>
+              </div>
+              <div class="fr-card__header">
+                  <div style="display: flex; justify-content: center; align-items: center; height: 100px; overflow: hidden; margin-top: 10px;">
+                    <img 
+                      class="fr-responsive-img" 
+                      src="/simplifions/assets/accueil-picto-coding.png" 
+                      alt="" 
+                      style="max-height: 100%; width: auto;" />
+                  </div>
+              </div>
+              </div>
+            </div>
+
+          </div>
       - title:
         content: >-
-          ## Comment et pourquoi simplifier vos démarches ?
+          <h2 class="fr-h1 fr-mt-15w fr-mb-5w" style="color: black; text-align: center;">Comment et pourquoi simplifier vos démarches ?</h2>
 
           <p class="fr-text--lg">
           Administrations et collectivités, en intégrant des API ou des données dans vos démarches et/ou votre système d’information :
@@ -450,9 +533,9 @@ website:
     files_list: 6
   contact_email: [email protected]
   home_banner_colors:
-    - '#D6E3A1'
+    - '#f6f6f6'
+    - '#e3e3fd'
     - '#BFDCB7'
-    - '#A7D4CD'
   matomo:
     host: 'https://stats.data.gouv.fr'
     siteId: