diff --git a/package-lock.json b/package-lock.json index 63f83e24b630550855e46dbd335724e01cc8f428..ab6925eda8d5b08c341354f8c3ff6a97b517ce44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13047,6 +13047,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", + "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/ua-parser-js": { "version": "0.7.31", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", @@ -23724,6 +23737,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", + "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", + "peer": true + }, "ua-parser-js": { "version": "0.7.31", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", diff --git a/src/components/HomepageResults.js b/src/components/HomepageResults.js index 3a17b32ea7cd0c250d65db4645d036883e03e936..0ec7590ba3f061838a041f8415920f97070edf1d 100644 --- a/src/components/HomepageResults.js +++ b/src/components/HomepageResults.js @@ -1,4 +1,5 @@ import React from "react"; +import styles from "./HomepageResults.module.css"; const ResultsList = [ { @@ -7,7 +8,9 @@ const ResultsList = [ <> Froggit est pensé pour ceux qui regardent vers l'avenir et choisissent des solutions robustes, responsables, qui durent dans le temps. </> - ), + ), + img: require("../../static/img/components/HomepageResults/environment.png").default, + }, { title: "Intégrez facilement les pratiques DevOps", @@ -15,7 +18,9 @@ const ResultsList = [ <> Répondez plus vite aux besoins de vos clients avec notre forge logicielle agile pensée par des techs pour les techs. </> - ), + ), + img: require("../../static/img/components/HomepageResults/advance.png").default, + }, { title: "Bénéficiez d’un service de proximité", @@ -24,13 +29,18 @@ const ResultsList = [ Froggit c'est aussi un service client en français et une équipe qui améliore régulièrement l'offre en fonction de vos retours ! </> ), + img: require("../../static/img/components/HomepageResults/conversation.png").default, + }, ]; - -function Results({title, description}) { +// eslint-disable-next-line +function Results({title, description, img, alt}) { return ( - <div className="sectionsReverse row"> + <div className="sectionsReverse row"> + <div className={styles.resultsCenter}> + <img className={styles.resultsImage} src={img} alt={alt}/> + </div> <div className="col col--5"> <h3>{title}</h3> <p>{description}</p> @@ -42,13 +52,15 @@ function Results({title, description}) { export default function HomepageResults() { return ( - <section className="sections container" id="results"> - <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2> - <div> - {ResultsList.map((props, idx) => ( - <Results key={idx} {...props} /> - ))} - </div> - </section> + <div className="homepage_section"> + <section className="sections container" id="results"> + <h2 className="promise-title">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2> + <div> + {ResultsList.map((props, idx) => ( + <Results key={idx} {...props} /> + ))} + </div> + </section> + </div> ); } diff --git a/src/components/HomepageResults.module.css b/src/components/HomepageResults.module.css new file mode 100644 index 0000000000000000000000000000000000000000..2afad9d82a68d1d68c1abf89e038b7c29fd4809f --- /dev/null +++ b/src/components/HomepageResults.module.css @@ -0,0 +1,8 @@ +.resultsImage { + width: 186px; + aspect-ratio: 1; +} + +.resultsCenter { + margin: auto; +} diff --git a/static/img/components/HomepageResults/advance.png b/static/img/components/HomepageResults/advance.png new file mode 100644 index 0000000000000000000000000000000000000000..74d0f7d03803357e338ad99b33bd665c55d11c7e Binary files /dev/null and b/static/img/components/HomepageResults/advance.png differ diff --git a/static/img/components/HomepageResults/conversation.png b/static/img/components/HomepageResults/conversation.png new file mode 100644 index 0000000000000000000000000000000000000000..9c03d4067e68da2c06454f8a8f12490737db4ee9 Binary files /dev/null and b/static/img/components/HomepageResults/conversation.png differ diff --git a/static/img/components/HomepageResults/environment.png b/static/img/components/HomepageResults/environment.png new file mode 100644 index 0000000000000000000000000000000000000000..4e813896d187a08b48ad7dcb0ffa7a53b7bdfb22 Binary files /dev/null and b/static/img/components/HomepageResults/environment.png differ