contact page: ajout de contenu

src/pages/index.jsx

@@ -12,7 +12,7 @@ const IndexPage = () => {
 		<main>
 			<title>CLI: Association du numérique</title>
 			<Header />
-			<div className="pages-content">
+			<div className="page-content">
 				<section className="pages-sections">
 					<p className="section-paragraph">
 						La CLI est une association de travailleuses et travailleurs du

src/pages/nous-contacter.jsx

@@ -9,7 +9,25 @@ const NousContacter = () => {
 		<main>
 			<title>Nous contacter</title>
 			<Header />
-			<div className="pages-content">
+			<div className="page-content page-contact">
+				<div className="contact-instructions">
+					<div className="contact-instructions-header">
+						<p>
+							Afin de garantir une meilleure prise en charge de votre demande,
+							nous vous invitons à renseigner de suivre ces quelques conseils :
+						</p>
+					</div>
+					<ul className="instructions-list">
+						<li className="instruction-item">Quel est votre budget ?</li>
+						<li className="instruction-item">Quel est votre besoin ?</li>
+						<li className="instruction-item">Quel est le but recherché ?</li>
+						<li className="instruction-item">Quel est votre délais ?</li>
+						<li className="instruction-item">
+							Avez vous besoin d'une prestation unique, ou d'un suivi sur le
+							moyen ou long terme ?
+						</li>
+					</ul>
+				</div>
 				<ContactForm />
 			</div>
 			<Footer />

src/pages/statuts.jsx

@@ -8,7 +8,7 @@ const Statuts = () => {
 		<main>
 			<title>Nos statuts</title>
 			<Header />
-			<div className="pages-content">
+			<div className="page-content">
 				<section className="pages-sections status-section">
 					<h3 className="section-title">Les status de l'association</h3>
 					<h4 className="status-title">Constitution de l'association</h4>

src/pages/vos-besoins.jsx

@@ -2,15 +2,13 @@ import React from "react";
 
 import Header from "../components/header";
 import Footer from "../components/footer";
-import ServiceCard from "../components/serviceCard";
 
 const VosBesoins = () => {
 	return (
 		<main>
 			<title>Vos besoins</title>
 			<Header />
-			<div className="pages-content">
-				<h3>Nos prestations</h3>
+			<div className="page-content">
 				<section className="pages-sections">
 					<h3 className="section-title" id="web-dev">
 						Développement web

src/scss/index.scss

@@ -114,3 +114,16 @@ section.services-list {
 		}
 	}
 }
+
+.page-contact {
+	display: flex;
+	flex-wrap: wrap;
+
+	.contact-instructions {
+		margin: 1rem;
+
+		.instructions-list {
+			list-style: none;
+		}
+	}
+}

src/scss/main.scss

@@ -41,7 +41,7 @@ button:focus {
 	}
 }
 
-.pages-content {
+.page-content {
 	> section {
 		margin-top: 40px;
 		width: 100%;