diff --git a/source/locales/en.yaml b/source/locales/en.yaml index 8512c3f31..4afeb17ff 100644 --- a/source/locales/en.yaml +++ b/source/locales/en.yaml @@ -1135,20 +1135,36 @@ simlateurs: impôt: tax Revenu (incluant les dépenses liées à l'activité): Revenue (including expenses related to the activity) Outils pour les développeurs: Tools for developers -page: - développeurs: - titre: Integrate social security law at the heart of your tools pages: développeurs: + home: + titre: Integrate social security law at the heart of your tools + choice: + iframe: >- + <0>Integrating a simulator</0><1>Integrate one of our simulators in + one click into your website, via a turnkey script.</1> + library: >- + <0>Using the calculation engine</0><1>The entire socio-fiscal + calculation engine developed by URSSAF, freely available in the form + of an NPM library.</1> + description: >- + In addition to the site mon-entreprise.fr, we develop free and open + source tools to be integrated seemlessly in the usual journey of your + users. choice: - iframe: >- - <0>Integrating a simulator</0><1>Integrate one of our simulators in one - click into your website, via a turnkey script.</1> library: >- <0>Using the calculation engine</0><1>The entire socio-fiscal calculation engine developed by URSSAF, freely available in the form of an NPM library.</1> - description: >- - In addition to the site mon-entreprise.fr, we develop free and open source - tools to be integrated seemlessly in the usual journey of your users. + iframe: >- + <0>Integrate the Web module</0><1>By adding a line to your web page + :</1><2></2><3>You can <2>choose the main color of the module</2> to blend + it into the visual theme of your page: just change the <4>data-color</4> + value above. To choose it, use our <7>interactive tool</7>.</3><4>The + attribute <1>data-lang="en"</1> allows you to choose English as the + default language of the simulator (it will remain modifiable by the + user).</4> + dévelopeurs: + bibliothèque: "<0>Integrate our calculation library</0><1>If you think that your site or service would benefit from displaying salary calculations, for example switching from gross salary to net salary, good news: all the contribution and tax calculations behind my-company.fr are free and <2>can be integrated in the form of an <2>NPM library</2></2>.</1><2>Put simply, your team's developers are able to integrate the calculation into your interface in 5 minutes{emoji('⌚')}, without having to deal with the complexity of payroll and the regular updating of calculation rules.</2><3>This library is a common digital library developed by the State and ACOSS. It is based on a new programming language, <2>publicodes</2>.</3><4>How to use it?</4><5>The following examples show you how to use the library on a very simple ReactJs site.</5><6>1) Make a very simple calculation: from gross to net</6><7><0></0></7><8>2) Browse online documentation</8><9>As you can see from the previous example, the recipe for a calculation is simple: input variables (gross wage), one or more output variables (net wage).</9><10>All these variables are listed and explained in our <2>online documentation</2>.</10><11>Use the search engine to find the right variable, then click on \"View source code\" to get all the documentation: default value, possible values when it's an enumeration of choice, unit when it's a number, description, associated user question, etc.</11><12>Let's run a calculation closer to a payslip: Here is a description of the input situation with links to the corresponding pages of the documentation :</12><13> An <3>executive</3> earning <7>€3,400 gross</7>, who benefits from the<10> bicycle mileage allowance</10> and works in a company with <14>12 employees</14>.</13><14>The calculation for this more complete example is as follows:</14><15><0></0></15><16>{emoji('ℹ️ ')} Note that in the previous example we have to specify the transport payment rate ourselves.</16><17>Whereas in the <2>employee</2> simulator, it is sufficient to fill in the municipality and the corresponding rate is automatically determined. It's intentional: to keep the library (and the site) light, we use two online APIs. The<4> Geo API - communes</4> to switch from the commune name to the common code. Then the<7> transport payout API</7>, developed and maintained by us, which is not documented but its use is very simple and understandable <10>in this React component that calls it</10>, a component that also uses the common API.</17><18>Making economic charts{emoji(' \U0001F4C8')}</18><19>It is also possible to use the library for economic or political analysis calculations. Here, the price of labour and the net wage is plotted against the gross wage.</19><20>We can see the progressiveness of the total wage, which is in percent lower for a minimum wage than for a high income. In other words, high-wage earners pay part of the social security contributions of low-wage earners.</20><21>{emoji('⚠️ ')}Beware, this example does a lot of calculations in one go, which can block your browser for a few seconds. To overcome this problem, you would have to call the library in a Web Worker, but this is not possible for the <3>moment</3> in these demos.</21><22><0></0></22>" Montant des cotisations: Amount of contributions +Quelques intégrations: Some integrations diff --git a/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx b/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx index 5400e6bf7..bf8b56d61 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/Iframe.tsx @@ -1,6 +1,7 @@ import { ScrollToTop } from 'Components/utils/Scroll' import urssafLogo from 'Images/urssaf.svg' import React from 'react' +import { Trans } from 'react-i18next' import { Link } from 'react-router-dom' import { IntegrationCode } from '../Dev/IntegrationTest' import './iframe.css' @@ -13,8 +14,8 @@ export default function Integration() { return ( <> <ScrollToTop /> - <section id="integration"> - <div> + <div> + <Trans i18nKey="pages.développeurs.iframe"> <h1>Intégrez le module Web</h1> <p>En ajoutant une ligne à votre page Web :</p> <IntegrationCode /> @@ -30,53 +31,55 @@ export default function Integration() { l'anglais comme langue par défaut du simulateur (elle restera modifiable par l'utilisateur). </p> + </Trans> + </div> + <div className="blocks" id="integrations"> + <h1> + <Trans>Quelques intégrations</Trans> + </h1> + <div id="integrationList"> + <article> + <a href="https://www.urssaf.fr/portail/home/utile-et-pratique/estimateur-de-cotisations-2019.html?ut=estimateurs"> + <img src={urssafLogo} alt="urssaf.fr" /> + <h2>Urssaf</h2> + </a> + </article> + <article> + <a href="http://les-aides.fr/embauche"> + <img src={cciLogo} alt="Les-aides.fr" /> + <h2>CCI de France</h2> + </a> + </article> + <article> + <a href="https://recruteurs.apec.fr/Recrutement/Pratique-RH/Tous-les-dossiers-Recrutement/Diagnostiquer/Vous-envisagez-de-recruter-calculez-le-cout-de-cette-embauche"> + <img src={apecLogo} alt="" /> + <h2>APEC</h2> + </a> + </article> + <article> + <a href="http://travail-emploi.gouv.fr/emploi/accompagnement-des-tpe-pme/tpe-pme/article/le-simulateur-du-cout-d-embauche"> + <img src={minTraLogo} alt="Ministère du travail" /> + <h2>Ministère du travail</h2> + </a> + </article> + <article> + <a href="https://entreprise.pole-emploi.fr/cout-salarie/"> + <img src={poleEmploiLogo} alt="Pôle Emploi" /> + <h2>Pôle Emploi</h2> + </a> + </article> + <article> + <a href="mailto:contact@mon-entreprise.beta.gouv.fr?subject=Proposition de réutilisation"> + <span className="question-mark">?</span> + <h2> + Une idée ? + <br /> + Contactez-nous ! + </h2> + </a> + </article> </div> - <div className="blocks" id="integrations"> - <h1>Quelques intégrations</h1> - <div id="integrationList"> - <article> - <a href="https://www.urssaf.fr/portail/home/utile-et-pratique/estimateur-de-cotisations-2019.html?ut=estimateurs"> - <img src={urssafLogo} alt="urssaf.fr" /> - <h2>Urssaf</h2> - </a> - </article> - <article> - <a href="http://les-aides.fr/embauche"> - <img src={cciLogo} alt="Les-aides.fr" /> - <h2>CCI de France</h2> - </a> - </article> - <article> - <a href="https://recruteurs.apec.fr/Recrutement/Pratique-RH/Tous-les-dossiers-Recrutement/Diagnostiquer/Vous-envisagez-de-recruter-calculez-le-cout-de-cette-embauche"> - <img src={apecLogo} alt="" /> - <h2>APEC</h2> - </a> - </article> - <article> - <a href="http://travail-emploi.gouv.fr/emploi/accompagnement-des-tpe-pme/tpe-pme/article/le-simulateur-du-cout-d-embauche"> - <img src={minTraLogo} alt="Ministère du travail" /> - <h2>Ministère du travail</h2> - </a> - </article> - <article> - <a href="https://entreprise.pole-emploi.fr/cout-salarie/"> - <img src={poleEmploiLogo} alt="Pôle Emploi" /> - <h2>Pôle Emploi</h2> - </a> - </article> - <article> - <a href="mailto:contact@mon-entreprise.beta.gouv.fr?subject=Proposition de réutilisation"> - <span className="question-mark">?</span> - <h2> - Une idée ? - <br /> - Contactez-nous ! - </h2> - </a> - </article> - </div> - </div> - </section> + </div> </> ) } diff --git a/source/sites/mon-entreprise.fr/pages/integration/Library.tsx b/source/sites/mon-entreprise.fr/pages/integration/Library.tsx index 00bb2328f..ea60ddc8d 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/Library.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/Library.tsx @@ -1,162 +1,165 @@ import { ScrollToTop } from 'Components/utils/Scroll' import React from 'react' import emoji from 'react-easy-emoji' +import { Trans } from 'react-i18next' export default function Library() { return ( <div css="iframe{margin-top: 1em; margin-bottom: 1em}"> <ScrollToTop /> - <h1>Intégrez notre bibliothèque de calcul</h1> - <p> - Si vous pensez que votre site ou service gagnerait à afficher des - calculs de salaire, par exemple passer du salaire brut au salaire net, - bonne nouvelle : tous les calculs de cotisations et impôts qui sont - derrière mon-entreprise.fr sont libres et{' '} - <b> - intégrables sous forme d'une{' '} - <a href="https://www.npmjs.com/package/mon-entreprise"> - bibliothèque NPM + <Trans i18nKey="pages.dévelopeurs.bibliothèque"> + <h1>Intégrez notre bibliothèque de calcul</h1> + <p> + Si vous pensez que votre site ou service gagnerait à afficher des + calculs de salaire, par exemple passer du salaire brut au salaire net, + bonne nouvelle : tous les calculs de cotisations et impôts qui sont + derrière mon-entreprise.fr sont libres et{' '} + <b> + intégrables sous forme d'une{' '} + <a href="https://www.npmjs.com/package/mon-entreprise"> + bibliothèque NPM + </a> + </b> + . + </p> + <p> + Dit plus simplement, les développeurs de votre équipe sont en mesure + d'intégrer le calcul dans votre interface en 5 minutes + {emoji('⌚')}, sans avoir à gérer la complexité de la paie et la mise + à jour régulière des règles de calcul. + </p> + <p> + Cette bibliothèque est un commun numérique développé par l'Etat et + l'ACOSS. Elle repose sur un nouveau langage de programmation,{' '} + <a href="https://publi.codes">publicodes</a>. + </p> + <h2>Comment l'utiliser ?</h2> + <p> + Les exemples suivants vous montrent comment utiliser la bibliothèque + sur un site ReactJs très simple. + </p> + <h3>1) Faire un calcul très simple : du brut au net</h3> + <div className="ui__ full-width"> + <iframe + src="https://codesandbox.io/embed/damp-bird-0m8gl?fontsize=14&hidenavigation=1" + title="mon-entreprise 1" + allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" + css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;" + sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" + ></iframe> + </div> + <h3>2) Parcourir la documentation en ligne</h3> + <p> + Vous l'aurez constaté dans l'exemple précédent, la recette d'un calcul + est simple : des variables d'entrée (le salaire brut), une ou + plusieurs variables de sorties (le salaire net). + </p> + <p> + Toutes ces variables sont listées et expliquées sur notre{' '} + <a target="_blank" href="/documentation"> + documentation en ligne </a> - </b> - . - </p> - <p> - Dit plus simplement, les développeurs de votre équipe sont en mesure - d'intégrer le calcul dans votre interface en 5 minutes - {emoji('⌚')}, sans avoir à gérer la complexité de la paie et la mise à - jour régulière des règles de calcul. - </p> - <p> - Cette bibliothèque est un commun numérique développé par l'Etat et - l'ACOSS. Elle repose sur un nouveau langage de programmation,{' '} - <a href="https://publi.codes">publicodes</a>. - </p> - <h2>Comment l'utiliser ?</h2> - <p> - Les exemples suivants vous montrent comment utiliser la bibliothèque sur - un site ReactJs très simple. - </p> - <h3>1) Faire un calcul très simple : du brut au net</h3> - <div className="ui__ full-width"> - <iframe - src="https://codesandbox.io/embed/damp-bird-0m8gl?fontsize=14&hidenavigation=1" - title="mon-entreprise 1" - allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" - css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;" - sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" - ></iframe> - </div> - <h3>2) Parcourir la documentation en ligne</h3> - <p> - Vous l'aurez constaté dans l'exemple précédent, la recette d'un calcul - est simple : des variables d'entrée (le salaire brut), une ou plusieurs - variables de sorties (le salaire net). - </p> - <p> - Toutes ces variables sont listées et expliquées sur notre{' '} - <a target="_blank" href="/documentation"> - documentation en ligne - </a> - . - </p> + . + </p> - <p> - Utilisez le moteur de recherche pour trouver la bonne variable, puis - cliquez sur "Voir le code source" pour obtenir l'ensemble de la - documentation : valeur par défaut, valeurs possibles quand c'est une - énumération de choix, unité quand c'est un nombre, description, question - utilisateur associée, etc. - </p> - <p> - Lançons un calcul plus proche d'une fiche de paie : voici une - description de la situation d'entrée annotée de liens vers les pages - correspondantes de la documentation : - </p> + <p> + Utilisez le moteur de recherche pour trouver la bonne variable, puis + cliquez sur "Voir le code source" pour obtenir l'ensemble de la + documentation : valeur par défaut, valeurs possibles quand c'est une + énumération de choix, unité quand c'est un nombre, description, + question utilisateur associée, etc. + </p> + <p> + Lançons un calcul plus proche d'une fiche de paie : voici une + description de la situation d'entrée annotée de liens vers les pages + correspondantes de la documentation : + </p> - <p css="background: #eee"> - {' '} - Un{' '} - <a href="https://mon-entreprise.fr/documentation/contrat-salarié/statut-cadre/choix-statut-cadre"> - cadre - </a>{' '} - gagnant{' '} - <a href="https://mon-entreprise.fr/documentation/contrat-salarié/rémunération/brut-de-base"> - 3 400€ bruts - </a>{' '} - , qui bénéficie de l' - <a href="https://mon-entreprise.fr/documentation/contrat-salarié/indemnité-kilométrique-vélo/active"> - indemnité kilométrique vélo - </a>{' '} - et qui travaille dans une entreprise de{' '} - <a href="https://mon-entreprise.fr/documentation/entreprise/effectif"> - 12 salariés - </a> - . - </p> - <p>Voici ce que donne le calcul pour cet exemple plus complet :</p> - <div className="ui__ full-width"> - <iframe - src="https://codesandbox.io/embed/mon-entreprise-2-60d6d?fontsize=14&hidenavigation=1" - title="mon-entreprise 2" - allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" - css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;" - sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" - ></iframe> - </div> - <p> - {emoji('ℹ️ ')} - Notez que dans l'exemple précédent nous devons spécifier nous-même le - taux de versement transport. - </p> - <p> - Alors que dans le simulateur{' '} - <a href="https://mon-entreprise.fr/simulateurs/salarié">salarié</a>, il - suffit de renseigner la commune et le taux correspondant est - automatiquement déterminé. C'est voulu : pour garder la bibliothèque (et - le site) légers, nous utilisons deux API en ligne. L' - <a href="https://api.gouv.fr/api/api-geo.html#doc_tech"> - API Géo - communes - </a>{' '} - pour passer du nom de la commune au code commune. Puis l' - <a href="">API versement transport</a>, développé et maintenu par nos - soins, qui n'est pas documenté mais son utilisation est très simple et - compréhensible{' '} - <a href="https://github.com/betagouv/mon-entreprise/blob/f3e79f42516c0822e8c6d8f6e9fc5646c82fd018/source/components/conversation/select/SelectGéo.js#L7-L14"> - dans ce composant React qui l'appelle - </a> - , composant qui fait aussi appel à l'API commune. - </p> - <h2>Faire des graphiques économiques{emoji(' 📈')}</h2> - <p> - Il est aussi possible d'utiliser la bibliothèque pour des calculs - d'analyse économique ou politique. Ici, on trace le prix du travail et - le salaire net en fonction du brut. - </p> - <p css="font-style: italic; border-left: 6px solid #eee; padding-left: .6rem"> - On peut constater la progressivité du salaire total, qui est en pourcent - plus faible pour un SMIC que pour un haut revenu. Autrement dit, les - hauts salaires paient une partie des cotisations sociales des bas - salaires. - </p> - <p> - {emoji('⚠️ ')}Attention, cet exemple fait pas mal de calculs d'un coup, - ce qui peut bloquer votre navigateur quelques secondes. Pour palier à ce - problème, il faudrait faire l'appel à la bibliothèque dans un Web - Worker, mais ça n'est pas possible{' '} - <a href="https://github.com/facebook/create-react-app/pull/5886"> - pour l'instant - </a>{' '} - dans ces démos. - </p> - <div className="ui__ full-width"> - <iframe - src="https://codesandbox.io/embed/mon-entreprise-3-248rg?fontsize=14&hidenavigation=1" - title="mon-entreprise 2" - allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" - css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;" - sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" - ></iframe> - </div> + <p css="background: #eee"> + {' '} + Un{' '} + <a href="https://mon-entreprise.fr/documentation/contrat-salarié/statut-cadre/choix-statut-cadre"> + cadre + </a>{' '} + gagnant{' '} + <a href="https://mon-entreprise.fr/documentation/contrat-salarié/rémunération/brut-de-base"> + 3 400€ bruts + </a>{' '} + , qui bénéficie de l' + <a href="https://mon-entreprise.fr/documentation/contrat-salarié/indemnité-kilométrique-vélo/active"> + indemnité kilométrique vélo + </a>{' '} + et qui travaille dans une entreprise de{' '} + <a href="https://mon-entreprise.fr/documentation/entreprise/effectif"> + 12 salariés + </a> + . + </p> + <p>Voici ce que donne le calcul pour cet exemple plus complet :</p> + <div className="ui__ full-width"> + <iframe + src="https://codesandbox.io/embed/mon-entreprise-2-60d6d?fontsize=14&hidenavigation=1" + title="mon-entreprise 2" + allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" + css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;" + sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" + ></iframe> + </div> + <p> + {emoji('ℹ️ ')} + Notez que dans l'exemple précédent nous devons spécifier nous-même le + taux de versement transport. + </p> + <p> + Alors que dans le simulateur{' '} + <a href="https://mon-entreprise.fr/simulateurs/salarié">salarié</a>, + il suffit de renseigner la commune et le taux correspondant est + automatiquement déterminé. C'est voulu : pour garder la bibliothèque + (et le site) légers, nous utilisons deux API en ligne. L' + <a href="https://api.gouv.fr/api/api-geo.html#doc_tech"> + API Géo - communes + </a>{' '} + pour passer du nom de la commune au code commune. Puis l' + <a href="">API versement transport</a>, développé et maintenu par nos + soins, qui n'est pas documenté mais son utilisation est très simple et + compréhensible{' '} + <a href="https://github.com/betagouv/mon-entreprise/blob/f3e79f42516c0822e8c6d8f6e9fc5646c82fd018/source/components/conversation/select/SelectGéo.js#L7-L14"> + dans ce composant React qui l'appelle + </a> + , composant qui fait aussi appel à l'API commune. + </p> + <h2>Faire des graphiques économiques{emoji(' 📈')}</h2> + <p> + Il est aussi possible d'utiliser la bibliothèque pour des calculs + d'analyse économique ou politique. Ici, on trace le prix du travail et + le salaire net en fonction du brut. + </p> + <p css="font-style: italic; border-left: 6px solid #eee; padding-left: .6rem"> + On peut constater la progressivité du salaire total, qui est en + pourcent plus faible pour un SMIC que pour un haut revenu. Autrement + dit, les hauts salaires paient une partie des cotisations sociales des + bas salaires. + </p> + <p> + {emoji('⚠️ ')}Attention, cet exemple fait pas mal de calculs d'un + coup, ce qui peut bloquer votre navigateur quelques secondes. Pour + palier à ce problème, il faudrait faire l'appel à la bibliothèque dans + un Web Worker, mais ça n'est pas possible{' '} + <a href="https://github.com/facebook/create-react-app/pull/5886"> + pour l'instant + </a>{' '} + dans ces démos. + </p> + <div className="ui__ full-width"> + <iframe + src="https://codesandbox.io/embed/mon-entreprise-3-248rg?fontsize=14&hidenavigation=1" + title="mon-entreprise 2" + allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" + css="width: 80%; margin-left: 10%; height: 600px; border:0; border-radius: 4px; overflow:hidden;" + sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" + ></iframe> + </div> + </Trans> </div> ) } diff --git a/source/sites/mon-entreprise.fr/pages/integration/Options.tsx b/source/sites/mon-entreprise.fr/pages/integration/Options.tsx index c7a39541d..679116dc4 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/Options.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/Options.tsx @@ -10,7 +10,7 @@ export default function Options() { return ( <> <h1 css="margin-bottom: 0"> - <Trans i18nKey="page.développeurs.titre"> + <Trans i18nKey="pages.développeurs.home.titre"> Intégrez le droit de la sécurité sociale au coeur de vos outils </Trans> </h1> @@ -18,7 +18,7 @@ export default function Options() { <img css="height: 250px" src={illustration} /> </div> <p> - <Trans i18nKey="pages.développeurs.description"> + <Trans i18nKey="pages.développeurs.home.description"> En plus du site mon-entreprise.fr, nous développons des outils gratuits et libres à intégrer directement chez vous, dans les parcours habituels de vos utilisateurs. @@ -31,7 +31,7 @@ export default function Options() { to={sitePaths.integration.iframe} > <div className="ui__ big box-icon">{emoji('📱')}</div> - <Trans i18nKey="pages.développeurs.choice.iframe"> + <Trans i18nKey="pages.développeurs.home.choice.iframe"> <h3>Intégrer un simulateur</h3> <p className="ui__ notice" css="flex: 1"> Intégrer l'un de nos simulateurs en un clic dans votre site Web, diff --git a/source/sites/mon-entreprise.fr/pages/integration/index.tsx b/source/sites/mon-entreprise.fr/pages/integration/index.tsx index d77bf0948..dce81bcfd 100644 --- a/source/sites/mon-entreprise.fr/pages/integration/index.tsx +++ b/source/sites/mon-entreprise.fr/pages/integration/index.tsx @@ -3,6 +3,7 @@ import { SitePathsContext } from 'Components/utils/withSitePaths' import React, { useContext } from 'react' import { Trans } from 'react-i18next' import { Route, Switch } from 'react-router' +import { Link } from 'react-router-dom' import Iframe from './Iframe' import Library from './Library' import Options from './Options' @@ -12,8 +13,14 @@ export default function Integration() { return ( <> <ScrollToTop /> - <div css="color: white; padding: .2rem 0 .1rem .6rem; border-radius: .3rem; background: linear-gradient(135deg,#1A237E, #9198e5); font-weight: 500; margin-bottom: -.6rem"> - <Trans>Outils pour les développeurs</Trans> + <div className="ui__ plain card" css="text-align: center"> + <h2> + 🛠{' '} + <Link className="ui__ simple button" to={sitePaths.integration.index}> + <Trans>Outils pour les développeurs</Trans> + </Link>{' '} + 🛠 + </h2> </div> <Switch> <Route exact path={sitePaths.integration.index} component={Options} />