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 31df78af authored by Plumtree3D's avatar Plumtree3D
Browse files

refactor: :art: added title and redesigned component

parent f95bc860
No related branches found
No related tags found
1 merge request!78Draft: Resolve "(component) why froggit on index"
Pipeline #8226 passed
...@@ -6,25 +6,29 @@ const imgPath = "img/components/HomepageWhy/"; ...@@ -6,25 +6,29 @@ const imgPath = "img/components/HomepageWhy/";
const WhyList = [ const WhyList = [
{ {
id: 1, id: 1,
title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", title: "dummy why 1",
text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
icon: imgPath+"logo_froggit.svg", icon: imgPath+"logo_froggit.svg",
alt: "" alt: ""
}, },
{ {
id: 2, id: 2,
title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", title: "dummy why 2",
text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
icon: imgPath+"logo_froggit.svg", icon: imgPath+"logo_froggit.svg",
alt: "" alt: ""
}, },
{ {
id: 3, id: 3,
title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", title: "dummy why 3",
text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
icon: imgPath+"logo_froggit.svg", icon: imgPath+"logo_froggit.svg",
alt: "" alt: ""
}, },
{ {
id: 4, id: 4,
title: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", title: "dummy why 4",
text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
icon: imgPath+"logo_froggit.svg", icon: imgPath+"logo_froggit.svg",
alt: "" alt: ""
} }
...@@ -33,12 +37,12 @@ const WhyList = [ ...@@ -33,12 +37,12 @@ const WhyList = [
export default function HomepageWhy() { export default function HomepageWhy() {
return ( return (
<div> <div>
<h2 className={clsx("text--center")}> Pourquoi Froggit et pas Gitlab, Github? <section className="sections container overflow-hidden">
</h2> <h2 className={clsx("text--center")}> Pourquoi Froggit et pas Gitlab, Github?
<p className={"text--center"}> Parce que collaborer autour du code, cest bien plus que coder. </h2>
</p> <p className={"text--center homepageWhy_title"}> Parce que collaborer autour du code, cest bien plus que coder.
<section className="sections container"> </p>
<p className={"text--center homepageWhy_title"}>Pour mener à bien un projet, vous avez plusieurs choix : <p className={"text--center"}>Pour mener à bien un projet, vous avez plusieurs choix :
</p> </p>
<div className="row"> <div className="row">
{WhyList.map((props, idx) => ( {WhyList.map((props, idx) => (
......
...@@ -2,11 +2,16 @@ import React from "react"; ...@@ -2,11 +2,16 @@ import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl"; import useBaseUrl from "@docusaurus/useBaseUrl";
// eslint-disable-next-line // eslint-disable-next-line
export default function Why({title, icon, alt}) { export default function Why({title, text, icon, alt}) {
return ( return (
<div className="col col--6 text--center padding-horiz--lg"> <div className="col col--6 padding-horiz--lg margin-top--md">
<img src={useBaseUrl(icon)} className="why_img" alt={alt}/> <div className="row">
<p> {title} </p> <img src={useBaseUrl(icon)} className="why_img" alt={alt}/>
<div className="why_col padding-horiz--md">
<span className="why_title"> {title} </span>
<p> {text} </p>
</div>
</div>
</div> </div>
); );
} }
...@@ -210,3 +210,8 @@ ul { ...@@ -210,3 +210,8 @@ ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
/**** UTILITIES ****/
.overflow-hidden {
overflow: hidden;
}
/**** 'WHY' ELEMENT ****/ /**** 'WHY' ELEMENT ****/
.why_img { .why_img {
margin: 22px 0px 12px 0px ; margin: 8px 18px 0px 8px ;
max-width: 82px; max-width: 58px;
max-height: 82px; max-height: 58px;
pointer-events: none;
}
.why_title {
font-size: 1.2rem;
font-weight: 700;
} }
.homepageWhy_title { .homepageWhy_title {
...@@ -11,3 +18,9 @@ ...@@ -11,3 +18,9 @@
font-weight: 900; font-weight: 900;
padding-bottom: 15px; padding-bottom: 15px;
} }
.why_col {
display: flex;
flex-direction: column;
max-width: 78%;
}
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