le formulaire de contact est fonctionnel

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .cache/
 public
-.vscode
+.vscode
+.env.*

gatsby-config.js

@@ -1,3 +1,7 @@
+require("dotenv").config({
+	path: `.env.${process.env.NODE_ENV}`
+});
+
 module.exports = {
 	siteMetadata: {
 		siteUrl: `https://www.yourdomain.tld`,

package.json

@@ -15,12 +15,14 @@
 		"clean": "gatsby clean"
 	},
 	"dependencies": {
+		"emailjs-com": "^3.2.0",
 		"gatsby": "^3.11.1",
 		"gatsby-plugin-sass": "^4.11.0",
 		"gatsby-source-filesystem": "^3.11.0",
 		"gatsby-transformer-remark": "^4.8.0",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
+		"react-toastify": "^7.0.4",
 		"sass": "^1.37.5"
 	},
 	"devDependencies": {

src/components/contactForm/index.jsx

@@ -1,27 +1,88 @@
-import React from "react";
+import emailjs from "emailjs-com";
+import React, { useState } from "react";
 import "./index.scss";
 
 const ContactForm = () => {
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [message, setMessage] = useState("");
+
+	const handleNameChange = (e) => {
+		setName(e.target.value);
+	};
+
+	const handleEmailChange = (e) => {
+		setEmail(e.target.value);
+	};
+
+	const handleMessageChange = (e) => {
+		setMessage(e.target.value);
+	};
+
+	const sendEmail = (data) => {
+		emailjs
+			.send(
+				process.env.SERVICE_ID,
+				process.env.TEMPLATE_ID,
+				data,
+				process.env.USER_ID
+			)
+			.then(
+				(result) => {
+					return true;
+				},
+				(error) => {
+					return false;
+				}
+			);
+	};
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+
+		const data = {
+			from_name: name,
+			from_email: email,
+			from_message: message
+		};
+
+		if (sendEmail) e.target.reset();
+	};
+
 	return (
 		<div id="contact">
-			<form id="contact-form" action="">
+			<form id="contact-form" action="" onSubmit={handleSubmit}>
 				<div className="form-group">
 					<label className="form-label" htmlFor="name">
 						Nom
 					</label>
-					<input type="text" placeholder="Nom" className="form-input" />
+					<input
+						type="text"
+						placeholder="Nom"
+						className="form-input"
+						onChange={handleNameChange}
+					/>
 				</div>
 				<div className="form-group">
 					<label className="form-label" htmlFor="email">
 						Adresse email
 					</label>
-					<input type="email" placeholder="Email" className="form-input" />
+					<input
+						type="email"
+						placeholder="Email"
+						className="form-input"
+						onChange={handleEmailChange}
+					/>
 				</div>
 				<div className="form-group">
 					<label className="form-label" htmlFor="message">
 						Message
 					</label>
-					<textarea placeholder="Message" className="form-textarea"></textarea>
+					<textarea
+						placeholder="Message"
+						className="form-textarea"
+						onChange={handleMessageChange}
+					/>
 				</div>
 				<button type="submit" className="form-submit-btn">
 					Envoyer

src/components/contactForm/index.scss

@@ -1,9 +1,19 @@
 #contact {
-	width: 30%;
-	padding: 10px;
 	border-radius: 10px;
 	background-color: #fff;
 	margin: 0 auto;
+	padding: 10px;
+	width: 300px;
+
+	#contact-form {
+		width: 100%;
+	}
+
+	#contact-form > * {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
 }
 
 .form-group {
@@ -13,14 +23,14 @@
 	.form-input,
 	.form-textarea {
 		display: block;
-		line-height: 2em;
+		line-height: 2rem;
 		margin: 0;
 		padding-left: 10px;
 		width: 100%;
-		font-size: 500;
+		font-size: 1rem;
 		border: 1px solid #111;
 		background-color: #f4f4f4;
-		border-radius: 5px;
+		border-radius: 0.5rem;
 		-webkit-box-sizing: border-box;
 		-moz-box-sizing: border-box;
 		box-sizing: border-box;
@@ -35,4 +45,8 @@
 			font-weight: 400;
 		}
 	}
+
+	.form-textarea {
+		height: 8rem;
+	}
 }

src/images/arrobase.svg

@@ -0,0 +1,3 @@
+<svg width="1689" height="1689" viewBox="0 0 1689 1689" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1070.86 1027.25L1065.39 1019.48L1059.1 1026.6C1007.26 1085.29 932.426 1123 848.342 1123C692.649 1123 565.956 996.304 565.956 840.611C565.956 684.918 692.649 558.226 848.342 558.226C912.07 558.226 970.33 580.271 1017.75 616.163L1029.77 625.267V610.183V608.703C1029.77 580.799 1052.35 558.226 1080.25 558.226C1108.15 558.226 1130.73 580.799 1130.73 608.703V898.589C1130.73 966.652 1186.12 1022.04 1254.18 1022.04C1322.25 1022.04 1377.64 966.652 1377.64 898.589C1377.64 702.843 1312.82 555.892 1213.9 457.866C1115.05 359.908 982.645 311.317 848.342 311.317C556.467 311.317 319.047 548.736 319.047 840.611C319.047 1132.49 556.467 1369.91 848.342 1369.91C965.933 1369.91 1077.21 1332.23 1170.07 1260.9C1183.74 1250.47 1197.41 1248.07 1209.42 1250.44C1221.62 1252.84 1232.69 1260.29 1240.52 1270.54C1248.35 1280.79 1252.64 1293.44 1251.79 1305.84C1250.95 1318.05 1245.11 1330.58 1231.61 1340.94C1120.88 1425.94 988.411 1470.86 848.342 1470.86C500.829 1470.86 218.093 1188.12 218.093 840.611C218.093 493.099 500.829 210.363 848.342 210.363C1006.73 210.363 1164.24 268.767 1282.13 383.807C1399.94 498.766 1478.59 670.697 1478.59 898.589C1478.59 1022.35 1377.94 1123 1254.18 1123C1178.4 1123 1111.53 1085.02 1070.86 1027.25ZM844.475 7.5C382.226 7.5 7.5 382.226 7.5 844.475C7.5 1306.72 382.226 1681.45 844.475 1681.45C1306.72 1681.45 1681.45 1306.72 1681.45 844.475C1681.45 382.226 1306.72 7.5 844.475 7.5ZM848.342 659.18C748.29 659.18 666.91 740.56 666.91 840.611C666.91 940.663 748.29 1022.04 848.342 1022.04C948.393 1022.04 1029.77 940.663 1029.77 840.611C1029.77 740.56 948.393 659.18 848.342 659.18Z" fill="#B2B2B2" stroke="#B2B2B2" stroke-width="15"/>
+</svg>

src/images/profile.svg

@@ -0,0 +1,5 @@
+<svg width="1767" height="1767" viewBox="0 0 1767 1767" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M611.394 545.306C611.394 395.019 733.233 273.147 883.5 273.147C1033.85 273.147 1155.69 395.024 1155.69 545.306C1155.69 695.626 1033.86 817.466 883.5 817.466C733.23 817.466 611.394 695.632 611.394 545.306Z" fill="#B3B3B3"/>
+<path d="M431.551 1299.3C431.551 1146.85 554.871 1024.65 707.75 1024.65H1059.33C1212.18 1024.65 1335.05 1146.78 1335.05 1299.3C1335.05 1328.18 1322.43 1355.57 1300.45 1374.29L1300.44 1374.31L1300.42 1374.32C1188.08 1470.26 1042.4 1528.16 883.299 1528.16C724.238 1528.16 578.602 1470.26 466.206 1374.35L466.201 1374.35C444.229 1355.6 431.551 1328.11 431.551 1299.3Z" fill="#B3B3B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 883.5C0 853.003 1.54534 822.867 4.56198 793.166C47.5387 370.027 389.137 35.1696 815.225 2.59944C837.757 0.877029 860.526 0 883.5 0L883.545 1.90735e-06C1371.49 0.0241432 1767 395.561 1767 883.5C1767 913.997 1765.46 944.133 1762.44 973.834C1721.09 1381.07 1403.19 1706.53 999.474 1759.46C961.522 1764.43 922.811 1767 883.5 1767C761.517 1767 645.307 1742.28 539.607 1697.57C460.332 1664.04 386.969 1619.27 321.517 1565.25C125.16 1403.21 0 1157.97 0 883.5ZM883.5 213.147C700.083 213.147 551.394 361.895 551.394 545.306C551.394 728.761 700.085 877.466 883.5 877.466C1066.99 877.466 1215.69 728.766 1215.69 545.306C1215.69 361.889 1066.99 213.147 883.5 213.147ZM707.75 964.653C522.128 964.653 371.551 1113.32 371.551 1299.3C371.551 1345.69 391.935 1389.86 427.259 1419.99C550.08 1524.8 709.399 1588.16 883.299 1588.16C1057.24 1588.16 1216.6 1524.8 1339.39 1419.94C1374.77 1389.79 1395.05 1345.69 1395.05 1299.3C1395.05 1113.38 1245.06 964.653 1059.33 964.653H707.75Z" fill="#B3B3B3"/>
+</svg>

src/pages/index.jsx

@@ -127,8 +127,6 @@ const IndexPage = () => {
 				</section>
 			</div>
 			<Footer />
-
-			<noscript>fuck you</noscript>
 		</main>
 	);
 };

src/pages/nous-contacter.jsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import Header from "../components/header";
 import ContactForm from "../components/contactForm";

src/pages/statuts.jsx

@@ -3,7 +3,7 @@ import "../scss/index.scss";
 import Header from "../components/header";
 import Footer from "../components/footer";
 
-const Statuts = () => {
+const StatutsPage = () => {
 	return (
 		<main>
 			<title>Nos statuts</title>
@@ -252,4 +252,4 @@ const Statuts = () => {
 		</main>
 	);
 };
-export default Statuts;
+export default StatutsPage;

src/scss/index.scss

@@ -117,7 +117,7 @@ section.services-list {
 
 .page-contact {
 	display: flex;
-	flex-wrap: wrap;
+	flex-wrap: wrap-reverse;
 
 	.contact-instructions {
 		margin: 1rem;

yarn.lock

@@ -999,7 +999,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.14.6", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
   integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
@@ -2926,6 +2926,11 @@ clone-response@1.0.2, clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -3842,6 +3847,11 @@ electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.793:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.806.tgz#21502100f11aead6c501d1cd7f2504f16c936642"
   integrity sha512-AH/otJLAAecgyrYp0XK1DPiGVWcOgwPeJBOLeuFQ5l//vhQhwC9u6d+GijClqJAmsHG4XDue81ndSQPohUu0xA==
 
+emailjs-com@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/emailjs-com/-/emailjs-com-3.2.0.tgz#a53cb22f1bc433c701c84c53d8b56eefd5ce7111"
+  integrity sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==
+
 "emoji-regex@>=6.0.0 <=6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
@@ -4906,6 +4916,13 @@ gatsby-page-utils@^1.11.0:
     lodash "^4.17.21"
     micromatch "^4.0.2"
 
+gatsby-plugin-layout@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-2.12.0.tgz#8564e6b012287f0108fbfadf4e269a581a570a08"
+  integrity sha512-zBj7JTrAC6ro5GJPA2WxFEc+VMa6P62SnbKsj1fOUo8oVgNSV3I2oX9UMGv+S58nquW0NX/pNjIU8wR4IRwYmw==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+
 gatsby-plugin-manifest@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-3.11.0.tgz#9dfc08f3573636edb7eba904291da9ca482524f4"
@@ -9135,6 +9152,13 @@ react-refresh@^0.9.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
+react-toastify@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-7.0.4.tgz#7d0b743f2b96f65754264ca6eae31911a82378db"
+  integrity sha512-Rol7+Cn39hZp5hQ/k6CbMNE2CKYV9E5OQdC/hBLtIQU2xz7DdAm7xil4NITQTHR6zEbE5RVFbpgSwTD7xRGLeQ==
+  dependencies:
+    clsx "^1.1.1"
+
 react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"