a-propos: redesign | màj de package.json

package.json

@@ -16,19 +16,19 @@
 	},
 	"dependencies": {
 		"emailjs-com": "^3.2.0",
-		"gatsby": "^3.2.0",
-		"gatsby-plugin-react-helmet": "^3.10.0",
-		"gatsby-plugin-sass": "^3.2.0",
-		"gatsby-source-filesystem": "^2.11.1",
-		"gatsby-transformer-remark": "^4.8.0",
+		"gatsby": "^4.0",
+		"gatsby-plugin-react-helmet": "^5.3.0",
+		"gatsby-plugin-sass": "^5.3.0",
+		"gatsby-source-filesystem": "^4.3.0",
+		"gatsby-transformer-remark": "^5.3.0",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
 		"react-helmet": "^6.1.0",
 		"react-intersection-observer": "^8.32.0",
-		"react-toastify": "^7.0.4",
+		"react-toastify": "^8.1.0",
 		"sass": "^1.37.5"
 	},
 	"devDependencies": {
-		"gatsby-plugin-manifest": "^2.12.1"
+		"gatsby-plugin-manifest": "^4.3.0"
 	}
 }

src/components/btnMailto/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./index.scss";
+// import "../../scss/main.scss";
+
+const BtnMailto = ({ mail, label }) => {
+	const handleMailto = (x) => {
+		return `mailto:${x}`;
+	};
+	return (
+		<Link
+			to="#"
+			onClick={(e) => {
+				window.location = handleMailto(mail);
+				e.preventDefault();
+			}}
+			className="btn-mailto"
+		>
+			{label}
+		</Link>
+	);
+};
+
+export default BtnMailto;

src/components/btnMailto/index.scss

@@ -0,0 +1,26 @@
+@use "../../scss/abstracts/colors" as *;
+
+@font-face {
+	font-family: Raleway-Semibold;
+	src: url(../../fonts/Raleway-SemiBold.ttf);
+}
+
+.btn-mailto {
+	font-family: Raleway-Semibold;
+	font-size: 1em;
+	color: $light;
+	background: $primary;
+	border: none;
+	border-radius: 0.15rem;
+	padding: 0.55em 1.4em;
+	font-weight: 900;
+	font-variant: small-caps;
+	transition: all 300ms ease-in-out;
+}
+
+.btn-mailto:hover {
+	cursor: pointer;
+	background: $primary;
+	border: 1px solid $primary;
+	box-shadow: 0 0 2px 1px $primary;
+}

src/components/header/index.scss

@@ -7,7 +7,6 @@
 }
 
 header {
-	// width: 100vw;
 	width: calc(100vw - 16px); // HOW TO HANDLE THIS ANOTHER WAY ?
 	height: 100vh;
 	display: flex;
@@ -20,13 +19,11 @@ header {
 		justify-content: center;
 		align-items: center;
 		justify-content: space-evenly;
-		// padding-bottom: 10rem;
 		width: 100%;
 		height: 100vh;
 		text-align: center;
 
 		.hero-container {
-			// margin: 17rem auto auto auto;
 			max-width: 100vw;
 
 			.hero-logo {
@@ -35,7 +32,6 @@ header {
 			}
 
 			h1 {
-				// width: 30rem;
 				font-size: 2.5rem;
 				font-family: CutiveMono;
 				color: $dark;
@@ -69,7 +65,6 @@ header {
 			}
 		}
 		.robot-face-container {
-			// padding-top: 4rem;
 			margin-bottom: 0;
 			width: fit-content;
 			height: fit-content;
@@ -86,7 +81,6 @@ header {
 		.hero {
 			display: flex;
 			flex-direction: row;
-			// padding-top: 10rem;
 
 			.hero-container {
 				display: flex;
@@ -105,10 +99,6 @@ header {
 				margin: 0;
 				padding-left: 2rem;
 				margin-right: 2rem;
-
-				img {
-					// width: 70%;
-				}
 			}
 		}
 	}

src/components/navbar/index.scss

@@ -1,11 +1,15 @@
 @use "../../scss/abstracts/colors" as *;
-// @use "../../scss/abstracts/fonts" as *;
 
 @font-face {
 	font-family: CutiveMono;
 	src: url(../../fonts/CutiveMono-Regular.ttf);
 }
 
+@font-face {
+	font-family: Raleway-Semibold;
+	src: url(../../fonts/Raleway-SemiBold.ttf);
+}
+
 #navbar-container {
 	clear: both;
 	display: block;
@@ -58,6 +62,7 @@ nav {
 		padding-left: 99px;
 
 		button {
+			font-family: Raleway-Semibold;
 			background: $primary;
 			color: white;
 			border: none;
@@ -65,7 +70,7 @@ nav {
 		}
 
 		&:hover,
-		&:focus {
+		&:focus-visible {
 			button {
 				border: none;
 				box-shadow: 0 0 2px 1px $primary;

src/components/teamCard/index.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import "./index.scss";
+import BtnMailto from "../btnMailto";
+
+const TeamCard = ({ name, mail, description }) => {
+	return (
+		<div className="team-card">
+			<div className="member-details">
+				<h1 className="member-name">{name}</h1>
+				<h2 className="member-description">{description}</h2>
+			</div>
+			<BtnMailto label="Lui ecrire" mail={mail} />
+		</div>
+	);
+};
+
+export default TeamCard;

src/components/teamCard/index.scss

@@ -0,0 +1,51 @@
+@use "../../scss/abstracts/colors" as *;
+
+@font-face {
+	font-family: "Source Serif Pro Bold";
+	src: url(../../fonts/SourceSerifPro-Bold.ttf);
+}
+
+.team-card {
+	position: relative;
+	z-index: -2;
+	width: 250px;
+	height: 150px;
+	text-align: center;
+	margin: 1.5rem 1.5rem;
+	padding: 1.5rem;
+	border: 2px solid $primary;
+	box-shadow: 0px 0px 9px 1px rgba($primary, $alpha: 0.2);
+	background-color: white;
+
+	img.member-picture {
+		position: absolute;
+		top: -70px;
+		left: 60px;
+		height: 130px;
+		width: 130px;
+		margin-bottom: -100px;
+		border-radius: 100%;
+		border: 1px solid transparent;
+		object-fit: contain;
+		z-index: -1;
+	}
+
+	.member-details {
+		display: flex;
+		flex-direction: column;
+		background-image: linear-gradient(transparent, white);
+		margin-bottom: 1rem;
+
+		.member-name {
+			font-family: "Source Serif Pro Bold";
+			font-size: 1.7rem;
+			color: $primary-darker;
+			margin: 0;
+		}
+
+		.member-description {
+			font-size: 1rem;
+			margin: 0;
+		}
+	}
+}

src/pages/a-propos.jsx

@@ -2,37 +2,65 @@ import React from "react";
 
 import Layout from "../components/layout/index";
 import Seo from "../components/seo";
+import TeamCard from "../components/teamCard";
 import "../scss/a-propos.scss";
+import Aproposillustration from "../images/undraw_programmer.svg";
 
 const Apropos = () => {
 	return (
 		<Layout>
 			<Seo title="À notre propos"></Seo>
 			<div className="page-content">
-				<h2 className="page-title">À notre propos</h2>
-				<section className="page-section">
-					<p className="section-paragraph">
-						La CLI est une association de travailleuses et travailleurs du
-						numériques basée à Strasbourg. Nous sommes sensibles à l'éthique du
-						libre et à la qualité du travail.
-					</p>
-					<p className="section-paragraph">
-						Les enjeux majeurs contemporain sont en lien étroit avec le
-						numérique. Il s'agit par exemple du respect des données privées,
-						réduction de la fracture numérique, accessibilité, impact
-						écologique. La CLI et ses membres à titre individuel s'engagent à en
-						prendre conscience et à ainsi orienter leur manière de produire.
-						Nous croyons que le croissement de nos démarches nous enrichis
-						collectivement, notamment sur ces thématiques.
-					</p>
-					<p className="section-paragraph">
-						L'objectif de l'association est de fournir un cadre horizontal et
-						convivial pour permettre l'émergence de prestations collectives et
-						plus vertueuses, grâce à la libre association des unes avec les
-						autres. Cette organisation permet la mise à l'échelle de nos moyens
-						de production : important ou plus modeste, votre projet sera bien
-						traité par nos équipes.
-					</p>
+				<section className="a-propos">
+					<div className="a-propos-left">
+						<h2 className="a-propos-left-title">À notre propos</h2>
+						<p className="a-propos-paragraph">
+							La CLI est une association de travailleuses et travailleurs du
+							numériques basée à Strasbourg. Nous sommes sensibles à l'éthique du
+							libre et à la qualité du travail.
+						</p>
+						<p className="a-propos-paragraph">
+							Les enjeux majeurs contemporain sont en lien étroit avec le numérique.
+							Il s'agit par exemple du respect des données privées, réduction de la
+							fracture numérique, accessibilité, impact écologique. La CLI et ses
+							membres à titre individuel s'engagent à en prendre conscience et à ainsi
+							orienter leur manière de produire. Nous croyons que le croissement de
+							nos démarches nous enrichis collectivement, notamment sur ces
+							thématiques.
+						</p>
+						<p className="a-propos-paragraph">
+							L'objectif de l'association est de fournir un cadre horizontal et
+							convivial pour permettre l'émergence de prestations collectives et plus
+							vertueuses, grâce à la libre association des unes avec les autres. Cette
+							organisation permet la mise à l'échelle de nos moyens de production :
+							important ou plus modeste, votre projet sera bien traité par nos
+							équipes.
+						</p>
+					</div>
+					<div className="a-propos-right">
+						<img
+							src={Aproposillustration}
+							alt="illustration"
+							className="a-propos-illustration"
+						/>
+					</div>
+				</section>
+				<section className="team">
+					<h2 className="team-title">L'équipe</h2>
+					<div className="team-card-group">
+						<TeamCard
+							name="Justin"
+							mail="jules@cli.coop"
+							description="Développeur, formateur"
+						/>
+						<TeamCard name="Lou" mail="lou@cli.coop" description="Développeuse" />
+						<TeamCard
+							name="Aleks"
+							mail="alex@cli.coop"
+							description="Développeur, formateur"
+						/>
+						<TeamCard name="Julien" mail="julien@cli.coop" description="Gestionnaire" />
+					</div>
 				</section>
 			</div>
 		</Layout>

src/pages/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "gatsby";
 
 import Layout from "../components/layout/index";
 import Seo from "../components/seo";
@@ -7,7 +6,6 @@ import ParallaxContainer from "../components/parallaxContainer";
 import RealisationCard from "../components/realisationCard";
 import ContactForm from "../components/contactForm";
 import "../scss/index.scss";
-import Brooke from "../images/brooke.jpg";
 import Header from "../components/header";
 
 const IndexPage = () => {
@@ -71,58 +69,6 @@ const IndexPage = () => {
 						</div>
 					</div>
 				</section>
-
-				<section className="team index-section">
-					<div className="parallax-team">
-						<i className="parallax-object-2">
-							<svg
-								viewBox="0 0 551 142"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M3.57628e-07 0.499997H20.1V84.8C20.1 88.5 20.7 90.95 21.9 92.15C23.1 93.35 24.75 93.95 26.85 93.95C28.45 93.95 30.1 93.75 31.8 93.35C33.5 92.95 35 92.45 36.3 91.85L39 107.15C36.3 108.45 33.15 109.45 29.55 110.15C25.95 110.85 22.7 111.2 19.8 111.2C13.5 111.2 8.6 109.55 5.1 106.25C1.7 102.85 3.57628e-07 98.05 3.57628e-07 91.85V0.499997ZM40.0289 39.05L43.4789 20.75H37.4789V0.499997H57.5789V21.05L52.3289 39.05H40.0289ZM98.5629 111.5C90.0629 111.5 82.7129 109.65 76.5129 105.95C70.4129 102.25 65.6629 97.35 62.2629 91.25C58.8629 85.05 57.1629 78.35 57.1629 71.15C57.1629 63.75 58.8129 56.95 62.1129 50.75C65.5129 44.45 70.3129 39.45 76.5129 35.75C82.7129 31.95 90.1129 30.05 98.7129 30.05C107.313 30.05 114.663 31.95 120.763 35.75C126.863 39.45 131.513 44.4 134.713 50.6C138.013 56.7 139.663 63.3 139.663 70.4C139.663 73 139.513 75.25 139.213 77.15H78.4629C78.9629 83.25 81.2129 88.05 85.2129 91.55C89.3129 95.05 94.0129 96.8 99.3129 96.8C103.313 96.8 107.063 95.85 110.563 93.95C114.163 91.95 116.613 89.35 117.913 86.15L135.163 90.95C132.263 96.95 127.613 101.9 121.213 105.8C114.813 109.6 107.263 111.5 98.5629 111.5ZM78.0129 64.4H119.113C118.513 58.5 116.263 53.75 112.363 50.15C108.563 46.45 103.913 44.6 98.4129 44.6C93.0129 44.6 88.3629 46.45 84.4629 50.15C80.6629 53.75 78.5129 58.5 78.0129 64.4ZM105.013 22.25L92.1129 18.35L100.213 0.499997H118.963L105.013 22.25ZM181.608 111.5C174.908 111.5 168.958 109.65 163.758 105.95C158.558 102.25 154.508 97.3 151.608 91.1C148.708 84.9 147.258 78.05 147.258 70.55C147.258 63.05 148.858 56.25 152.058 50.15C155.258 43.95 159.608 39.05 165.108 35.45C170.708 31.85 177.008 30.05 184.008 30.05C190.008 30.05 195.308 31.45 199.908 34.25C204.508 36.95 208.258 40.55 211.158 45.05V31.4H228.708V141.95H208.608V96.2C202.608 106.4 193.608 111.5 181.608 111.5ZM189.108 94.4C193.408 94.4 197.158 93.2 200.358 90.8C203.658 88.4 206.408 85.3 208.608 81.5V62.9C207.908 59.9 206.508 57.25 204.408 54.95C202.308 52.55 199.858 50.65 197.058 49.25C194.358 47.85 191.608 47.15 188.808 47.15C184.708 47.15 181.058 48.3 177.858 50.6C174.758 52.8 172.308 55.75 170.508 59.45C168.708 63.05 167.808 66.95 167.808 71.15C167.808 75.45 168.708 79.4 170.508 83C172.308 86.5 174.808 89.3 178.008 91.4C181.208 93.4 184.908 94.4 189.108 94.4ZM246.226 80.6V31.4H266.326V76.25C266.326 88.35 270.676 94.4 279.376 94.4C283.276 94.4 287.026 93.25 290.626 90.95C294.326 88.55 297.326 84.95 299.626 80.15V31.4H319.726V87.5C319.726 89.7 320.076 91.25 320.776 92.15C321.476 92.95 322.726 93.45 324.526 93.65V110C322.526 110.4 320.826 110.65 319.426 110.75C318.126 110.85 316.926 110.9 315.826 110.9C312.226 110.9 309.276 110.1 306.976 108.5C304.776 106.8 303.476 104.5 303.076 101.6L302.626 95.3C299.126 100.7 294.626 104.75 289.126 107.45C283.626 110.15 277.576 111.5 270.976 111.5C262.876 111.5 256.726 108.9 252.526 103.7C248.326 98.4 246.226 90.7 246.226 80.6ZM339.701 20.45V0.499997H359.801V20.45H339.701ZM339.701 110V31.4H359.801V110H339.701ZM425.033 111.5C418.833 111.5 413.433 110.1 408.833 107.3C404.233 104.5 400.633 100.8 398.033 96.2V141.95H377.933V31.4H395.483V44.9C398.383 40.3 402.133 36.7 406.733 34.1C411.433 31.4 416.733 30.05 422.633 30.05C429.733 30.05 436.033 31.9 441.533 35.6C447.033 39.2 451.383 44.1 454.583 50.3C457.783 56.4 459.383 63.15 459.383 70.55C459.383 78.25 457.883 85.2 454.883 91.4C451.983 97.5 447.933 102.4 442.733 106.1C437.633 109.7 431.733 111.5 425.033 111.5ZM418.283 94.4C422.383 94.4 425.933 93.3 428.933 91.1C432.033 88.8 434.433 85.85 436.133 82.25C437.933 78.55 438.833 74.65 438.833 70.55C438.833 66.15 437.883 62.2 435.983 58.7C434.083 55.1 431.483 52.3 428.183 50.3C424.983 48.2 421.283 47.15 417.083 47.15C413.283 47.15 409.483 48.4 405.683 50.9C401.883 53.4 399.333 56.55 398.033 60.35V78.8C399.833 83.2 402.583 86.9 406.283 89.9C409.983 92.9 413.983 94.4 418.283 94.4ZM509.452 111.5C500.952 111.5 493.602 109.65 487.402 105.95C481.302 102.25 476.552 97.35 473.152 91.25C469.752 85.05 468.052 78.35 468.052 71.15C468.052 63.75 469.702 56.95 473.002 50.75C476.402 44.45 481.202 39.45 487.402 35.75C493.602 31.95 501.002 30.05 509.602 30.05C518.202 30.05 525.552 31.95 531.652 35.75C537.752 39.45 542.402 44.4 545.602 50.6C548.902 56.7 550.552 63.3 550.552 70.4C550.552 73 550.402 75.25 550.102 77.15H489.352C489.852 83.25 492.102 88.05 496.102 91.55C500.202 95.05 504.902 96.8 510.202 96.8C514.202 96.8 517.952 95.85 521.452 93.95C525.052 91.95 527.502 89.35 528.802 86.15L546.052 90.95C543.152 96.95 538.502 101.9 532.102 105.8C525.702 109.6 518.152 111.5 509.452 111.5ZM488.902 64.4H530.002C529.402 58.5 527.152 53.75 523.252 50.15C519.452 46.45 514.802 44.6 509.302 44.6C503.902 44.6 499.252 46.45 495.352 50.15C491.552 53.75 489.402 58.5 488.902 64.4Z"
-									fill="#A6D0D9"
-								/>
-							</svg>
-						</i>
-					</div>
-					<div className="team-card-group">
-						<div className="team-card">
-							<img src={Brooke} alt="member" className="member-picture" />
-							<div className="member-details">
-								<h1 className="member-name">***</h1>
-								<h2 className="member-email">***@cli.coop</h2>
-								<h2 className="member-description">Développeur, formateur</h2>
-							</div>
-						</div>
-						<div className="team-card">
-							<img src={Brooke} alt="member" className="member-picture" />
-							<div className="member-details">
-								<h1 className="member-name">Lou</h1>
-								<h2 className="member-email">lou@cli.coop</h2>
-								<h2 className="member-description">Développeuse, formatrice</h2>
-							</div>
-						</div>
-						<div className="team-card">
-							<img src={Brooke} alt="member" className="member-picture" />
-							<div className="member-details">
-								<h1 className="member-name">Julien</h1>
-								<h2 className="member-email">julien@cli.coop</h2>
-								<h2 className="member-description">Administratif</h2>
-							</div>
-						</div>
-						<div className="team-card">
-							<img src={Brooke} alt="member" className="member-picture" />
-							<div className="member-details">
-								<h1 className="member-name">Alex</h1>
-								<h2 className="member-email">alex@cli.coop</h2>
-								<h2 className="member-description">Développeur, formateur</h2>
-							</div>
-						</div>
-					</div>
-				</section>
-
 				<section className="realisation index-section">
 					<div className="parallax-realisation">
 						<i className="parallax-object-3">

src/scss/a-propos.scss

@@ -0,0 +1,94 @@
+@use "../scss/abstracts/colors" as *;
+
+@font-face {
+	font-family: CutiveMono;
+	src: url(../fonts/CutiveMono-Regular.ttf);
+}
+
+.a-propos {
+	position: relative;
+	margin-top: 6rem;
+	margin-left: auto;
+	margin-right: auto;
+	justify-content: center;
+	display: grid;
+	width: 80%;
+	text-align: justify;
+	justify-self: center;
+}
+
+.a-propos-left {
+	margin-top: 5rem;
+	line-height: 1.5em;
+}
+.a-propos-left-title {
+	font-family: CutiveMono;
+	font-variant: small-caps;
+	font-size: 2rem;
+	color: $dark;
+	text-shadow: 0 0 1px $dark;
+	text-align: center;
+}
+
+.a-propos-right {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%);
+	z-index: -1;
+}
+
+.a-propos-illustration {
+	height: 6rem;
+	width: 6rem;
+}
+.team {
+	position: relative;
+	align-content: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.team-title {
+	font-family: CutiveMono;
+	font-variant: small-caps;
+	font-size: 2rem;
+	color: $dark;
+	text-shadow: 0 0 1px $dark;
+	text-align: center;
+}
+
+.team-card-group {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	// z-index: 0;
+}
+
+@media screen and (min-width: 1200px) {
+	.a-propos {
+		grid-template-columns: 2fr 1fr;
+		gap: 2rem;
+		margin: 4rem auto 0 auto;
+		align-items: center;
+	}
+
+	.a-propos-left {
+		margin-top: 0;
+		margin-right: 2rem;
+		grid-column: 1;
+		width: 80%;
+		text-align: justify;
+		justify-self: center;
+	}
+
+	.a-propos-right {
+		position: relative;
+		z-index: 0;
+	}
+
+	.a-propos-illustration {
+		width: 100%;
+		height: 15rem;
+	}
+}

src/scss/index.scss

@@ -1,5 +1,4 @@
 @use "./abstracts/colors" as *;
-// @use "./abstracts/fonts" as *;
 
 @font-face {
 	font-family: "Source Serif Pro Bold";
@@ -114,7 +113,7 @@
 	height: 200px;
 	max-width: 22rem;
 	background-color: white;
-	border: 1px solid $primary;
+	border: 2px solid $primary;
 	box-shadow: 0px 0px 9px 1px rgba($primary, $alpha: 0.2);
 
 	.ethic-card-title {
@@ -132,80 +131,6 @@
 	}
 }
 
-.team {
-	position: relative;
-}
-
-.team:before {
-	content: "";
-	display: block;
-	position: absolute;
-	right: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	background-image: url(../images/background-index.svg);
-	background-position: 50% 0;
-	background-size: cover;
-	opacity: 40%;
-	transform: rotate(0.5turn);
-	z-index: -10;
-}
-
-.team-card-group {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	margin-top: 3rem;
-	padding-top: 170px;
-	padding-bottom: 100px;
-	z-index: 2;
-
-	.team-card {
-		position: relative;
-		z-index: -2;
-		width: 250px;
-		height: 150px;
-		text-align: center;
-		margin: 3rem 2rem;
-		border: 1px solid $primary;
-		box-shadow: 0px 0px 9px 1px rgba($primary, $alpha: 0.2);
-		background-color: white;
-
-		img.member-picture {
-			position: absolute;
-			top: -70px;
-			left: 60px;
-			height: 130px;
-			width: 130px;
-			margin-bottom: -100px;
-			border-radius: 100%;
-			border: 1px solid transparent;
-			object-fit: contain;
-			z-index: -1;
-		}
-
-		.member-details {
-			display: flex;
-			flex-direction: column;
-			background-image: linear-gradient(transparent, white);
-
-			.member-name {
-				font-family: "Source Serif Pro Bold";
-				font-size: 1.7rem;
-			}
-
-			.member-email {
-				font-size: 1rem;
-			}
-
-			.member-description {
-				font-size: 1rem;
-			}
-		}
-	}
-}
-
 .realisation:before {
 	content: "";
 	display: block;

src/scss/main.scss

@@ -47,16 +47,19 @@ main {
 }
 
 .btn {
-	border: 1px solid lightgray;
+	color: $light;
+	background: $primary;
+	border: 1px solid none;
 	border-radius: 0.15rem;
 	padding: 1em 1.4em;
 	font-weight: 900;
 	font-variant: small-caps;
 
-	&:hover {
+	&:hover,
+	:focus-visible {
 		cursor: pointer;
-		background: lightgray;
-		border: 1px solid darkgrey;
+		background: $primary;
+		border: 1px solid $primary;
 	}
 }