Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 925647a3 authored by Plumtree3D's avatar Plumtree3D
Browse files

refactor: refactor of Result component

parent 9c35efa1
No related branches found
No related tags found
1 merge request!89Resolve "improve code readability"
This commit is part of merge request !89. Comments created here will be created in the context of that merge request.
......@@ -57,7 +57,7 @@ const CarouselList = [
export default function CarouselLibre() {
return (
<div className="homepage_section">
<div className="homepage-section">
<section className="sections container">
<h2 className={clsx("text--center")}>Restez libres !
</h2>
......
......@@ -52,18 +52,18 @@ const FeatureList = [
export default function HomepageFeatures() {
return (
<section className="sections container" id="features">
<h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
</h2>
<div className={styles["features-subtitle"]}>
<p className={"text--center"}>De la planification au déploiement en passant par le testing <br/>
</p>
<p className={"text--center"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique.
</p>
</div>
<Features list={FeatureList}/>
</section>
<div className="homepage-section">
<section className="sections container" id="features">
<h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
</h2>
<div className={styles["features-subtitle"]}>
<p className={"text--center"}>De la planification au déploiement en passant par le testing <br/>
</p>
<p className={"text--center"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique.
</p>
</div>
<Features list={FeatureList}/>
</section>
</div>
);
}
import React from "react";
import styles from "./HomepagePromises.module.css";
import bouclier from "@site/static/img/components/HomepagePromises/bouclier.svg";
import rgpd from "@site/static/img/components/HomepagePromises/rgpd.svg";
import liberte from "@site/static/img/components/HomepagePromises/liberte.svg";
......@@ -43,8 +41,8 @@ const PromiseList = [
export default function HomepagePromises() {
return (
<div className="row-overflow">
<h2 className={styles["homepage-promise-title"]}> {PromiseSectionTitle} </h2>
<div className="row-overflow homepage-section">
<h2 className="text--center"> {PromiseSectionTitle} </h2>
<section className="section-promises">
<div className="row">
{PromiseList.map((props, idx) => (
......
import React from "react";
import Results from "./Results";
import environment from "@site/static/img/components/HomepageResults/environment.png";
import advance from "@site/static/img/components/HomepageResults/advance.png";
import conversation from "@site/static/img/components/HomepageResults/conversation.png";
import styles from "./HomepageResults.module.css";
const ResultsList = [
{
title: "Alliez compétitivité et respect de l’environnement",
......@@ -40,27 +39,11 @@ const ResultsList = [
},
];
// eslint-disable-next-line
function Results({title, description, img, alt}) {
return (
<div className="sectionsReverse row">
<div className={"col col--5 " + styles.resultsCenter}>
<img className={styles.resultsImage} src={img} alt={alt}/>
</div>
<div className="col col--5">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}
export default function HomepageResults() {
return (
<div className="homepage_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>
<h2 className="text--center">Obtenez de meilleurs résultats, <br/>et pas seulement au niveau du code !</h2>
<div>
{ResultsList.map((props, idx) => (
<Results key={idx} {...props} />
......
import React from "react";
// eslint-disable-next-line
export default function Results({title, description, img, alt}) {
return (
<div className="sections-reverse row">
<div className="col col--5 results-center">
<img className="results-image" src={img} alt={alt}/>
</div>
<div className="col col--5">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}
......@@ -7,7 +7,7 @@
@import url("tarifs.css");
@import url("carousel.css");
@import url("features.css");
@import url("results.css");
html, body {
margin: 0;
......@@ -144,7 +144,7 @@ ul {
padding: 4rem 0;
width: var(--ifm-container-max-width);
}
.sectionsReverse {
.sections-reverse {
margin: 0 16px 0 16px;
padding: 4rem 0;
display: flex;
......@@ -153,7 +153,7 @@ ul {
text-align: end;
}
.sectionsReverse:nth-of-type(odd) {
.sections-reverse:nth-of-type(odd) {
flex-direction: row-reverse;
text-align: start;
}
......@@ -214,7 +214,7 @@ ul {
}
/* background color on homepage */
.homepage_section:nth-child(even) {
.homepage-section:nth-child(even) {
background-color: var(--section-background);
}
......
/**** RESULTS ****/
.homepage-promise-title {
.results-image {
width: 186px;
aspect-ratio: 1;
}
.results-center {
display: flex;
justify-content: center;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment