ajout de contenu

src/components/about.jsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-const About = () => {
-	return (
-		<div>
-			<p>Qui sommes nous ?</p>
-		</div>
-	);
-};
-
-export default About;

src/components/contact.jsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-const Contact = () => {
-	return (
-		<div>
-			<p>Contact</p>
-		</div>
-	);
-};
-
-export default Contact;

src/components/contactForm/index.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import "./index.scss";
+
+const ContactForm = () => {
+	return (
+		<div id="contact">
+			<form id="contact-form" action="">
+				<div className="form-group">
+					<label className="form-label" htmlFor="name">
+						Nom
+					</label>
+					<input type="text" placeholder="Nom" className="form-input" />
+				</div>
+				<div className="form-group">
+					<label className="form-label" htmlFor="email">
+						Adresse email
+					</label>
+					<input type="email" placeholder="Email" className="form-input" />
+				</div>
+				<div className="form-group">
+					<label className="form-label" htmlFor="message">
+						Message
+					</label>
+					<textarea placeholder="Message" className="form-textarea"></textarea>
+				</div>
+				<button type="submit" className="form-submit-btn">
+					Envoyer
+				</button>
+			</form>
+		</div>
+	);
+};
+
+export default ContactForm;

src/components/contactForm/index.scss

@@ -0,0 +1,38 @@
+#contact {
+	width: 30%;
+	padding: 10px;
+	border-radius: 10px;
+	background-color: #fff;
+	margin: 0 auto;
+}
+
+.form-group {
+	position: relative;
+	margin: 20px auto;
+
+	.form-input,
+	.form-textarea {
+		display: block;
+		line-height: 2em;
+		margin: 0;
+		padding-left: 10px;
+		width: 100%;
+		font-size: 500;
+		border: 1px solid #111;
+		background-color: #f4f4f4;
+		border-radius: 5px;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+
+		&:focus {
+			// border: 1px solid #2c7ac9;
+			outline: none;
+		}
+
+		&::placeholder {
+			font-size: 0.9rem;
+			font-weight: 400;
+		}
+	}
+}

src/components/header/index.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./index.scss";
+
+const Header = () => {
+	return (
+		<div className="headers">
+			<h1 className="headers-title">
+				<Link to="/">CLI</Link>
+			</h1>
+			<h2 className="headers-subtitle">
+				Coopérative Strasbourgeoise du numérique
+			</h2>
+			<div className="container">
+				<ul className="menu">
+					<li>
+						<Link to="/cooperative">La coopérative</Link>
+					</li>
+					<li>
+						<Link to="/services">Nos prestations</Link>
+					</li>
+					<li>
+						<Link to="/contact">Nous contacter</Link>
+					</li>
+					<li>
+						<Link to="/status">Nos statuts</Link>
+					</li>
+				</ul>
+			</div>
+		</div>
+	);
+};
+
+export default Header;

src/components/header/index.scss

@@ -0,0 +1,54 @@
+.headers {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	margin-top: 100px;
+	font-family: "Cutive Mono";
+
+	.headers-title {
+		margin: 0;
+		font-size: 2.5rem;
+		font-weight: normal;
+	}
+
+	.headers-subtitle {
+		margin-top: 15px;
+		margin-bottom: 100px;
+		font-size: 1.5rem;
+		font-weight: normal;
+	}
+}
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	.menu {
+		margin: 0;
+		padding: 0 10px;
+		list-style: none;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 70vw;
+		height: 2.5rem;
+
+		// border: 1px solid black;
+
+		.menu-button {
+			height: 2.5em;
+			padding: 0.5rem;
+			text-decoration: none;
+			position: relative;
+			background: white;
+			border: none;
+			z-index: auto;
+			font-family: "Raleway", "sans-serif";
+			font-size: 1rem;
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+	}
+}

src/components/realisationCard/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Specs from "../../images/undraw_Specs.png";
+
+import "./index.scss";
+
+const RealisationCard = ({ cardName, cardDescription, techTag }) => {
+	const displayTag = (tagList) => {
+		let tagArr = tagList.split(",");
+		tagArr.map((tag) => `<span className="tech-tag">${tag}</span>`);
+	};
+
+	return (
+		<div className="item-card">
+			<img src={Specs} alt="Someone drawing" className="item-card-image" />
+			<div className="item-text">
+				<p className="item-card-name">{cardName}</p>
+				<p className="item-card-description">{cardDescription}</p>
+			</div>
+			<div className="tech-tag-list">{displayTag(techTag)}</div>
+			{console.log(displayTag(techTag))}
+		</div>
+	);
+};
+
+export default RealisationCard;

src/components/realisationCard/index.scss

@@ -0,0 +1,50 @@
+.item-card {
+	max-width: 40vw;
+	margin-top: 15px;
+	margin-left: auto;
+	margin-right: auto;
+
+	&:first-child {
+		margin-top: 0px;
+	}
+
+	img {
+		height: auto;
+		max-width: 40vw;
+	}
+
+	.item-text {
+		padding: 5px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.item-card-name {
+			font-size: 1.1rem;
+			font-weight: bold;
+			margin-top: 0;
+			margin-bottom: 10px;
+		}
+		.item-card-description {
+			font-size: 0.8rem;
+			font-weight: normal;
+			margin-top: 0;
+			margin-bottom: 10px;
+		}
+	}
+	.tech-tag-list {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+
+		.tech-tag {
+			display: block;
+			margin: 0 7px;
+			padding: 1px 10px;
+			background: lightgray;
+			color: lightseagreen;
+			font-size: 0.8rem;
+			border-radius: 6rem;
+		}
+	}
+}

src/components/service.jsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-const Service = () => {
-	return (
-		<div>
-			<p>Nos prestations</p>
-		</div>
-	);
-};
-
-export default Service;

src/components/status.jsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-
-const Status = () => {
-	return (
-		<div>
-			<p>Statuts de l'association</p>
-		</div>
-	);
-};
-export default Status;

src/pages/contact.jsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import Header from "../components/header";
+import ContactForm from "../components/contactForm";
+
+const Contact = () => {
+	return (
+		<main>
+			<title>Nous contacter</title>
+			<Header />
+			<ContactForm />
+		</main>
+	);
+};
+
+export default Contact;

src/pages/cooperative.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import Header from "../components/header";
+
+const Cooperative = () => {
+	return (
+		<main>
+			<title>La coopérative</title>
+			<Header />
+			<div>
+				<p>La coopérative</p>
+			</div>
+		</main>
+	);
+};
+
+export default Cooperative;

src/pages/index.jsx

@@ -1,72 +1,44 @@
-import React, { useState } from "react";
+import React from "react";
 
-import Service from "../components/service";
-import About from "../components/about";
-import Contact from "../components/contact";
-import Status from "../components/status";
+import Header from "../components/header";
+import RealisationCard from "../components/realisationCard";
 
 import "../scss/index.scss";
 
 const IndexPage = () => {
-	const [menuContent, setMenuContent] = useState("service");
-
-	const switchContent = (x) => {
-		setMenuContent(x);
-	};
-
-	const display = (item) => {
-		if (item === "service") {
-			return <Service />;
-		} else if (item === "about") {
-			return <About />;
-		} else if (item === "contact") {
-			return <Contact />;
-		} else if (item === "status") {
-			return <Status />;
-		}
-	};
-
 	return (
 		<main>
-			<title>CLI: Coopérative du numérique</title>
-			<div className="headers">
-				<h1 className="headers-title">CLI</h1>
-				<h2 className="headers-subtitle">
-					Coopérative Strasbourgeoise du numérique
-				</h2>
-			</div>
-			<div className="container">
-				<ul className="menu">
-					<li>
-						<button
-							className="menu-button"
-							onClick={() => switchContent("service")}>
-							Nos prestations
-						</button>
-					</li>
-					<li>
-						<button
-							className="menu-button"
-							onClick={() => switchContent("about")}>
-							Qui sommes nous ?
-						</button>
-					</li>
-					<li>
-						<button
-							className="menu-button"
-							onClick={() => switchContent("contact")}>
-							Nous contacter
-						</button>
-					</li>
-					<li>
-						<button
-							className="menu-button"
-							onClick={() => switchContent("status")}>
-							Nos statuts
-						</button>
-					</li>
-				</ul>
-				<section className="content">{display(menuContent)}</section>
+			<title>CLI: Association du numérique</title>
+			<Header />
+			<div>
+				<section>
+					<p>
+						La CLI est une association fournissant une multitude de services
+						liés au numérique.
+					</p>
+					<p>Accompagnement local dans vos projets</p>
+					<p>ajouter du blabla</p>
+				</section>
+				<section className="made-by-us">
+					<h3 className="section-title">Nos réalisations</h3>
+					<div className="list-card">
+						<RealisationCard
+							cardName="pyHeatPump"
+							cardDescription="Projet de remplacement du RPiPasserelle d'OTEC."
+							techTag="Python"
+						/>
+						<RealisationCard
+							cardName="Supervision"
+							cardDescription="Interface graphique de gestion pour pyHeatPump."
+							techTag="Python,Symphony"
+						/>
+						<RealisationCard
+							cardName="Chronobriq"
+							cardDescription="Un outil de gestion de comptabilité horaire."
+							techTag="Ruby on Rails,React.js,Redux,React-intl"
+						/>
+					</div>
+				</section>
 			</div>
 		</main>
 	);

src/pages/services.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import Header from "../components/header";
+
+const Service = () => {
+	return (
+		<main>
+			<title>Nos prestations</title>
+			<Header />
+			<div>
+				<p>Nos prestations</p>
+			</div>
+		</main>
+	);
+};
+
+export default Service;

src/pages/status.jsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import Header from "../components/header";
+
+const Status = () => {
+	return (
+		<main>
+			<title>Nos statuts</title>
+			<Header />
+			<div>
+				<p>Les status de la coopérative</p>
+			</div>
+		</main>
+	);
+};
+export default Status;

src/scss/index.scss

@@ -1,68 +1,12 @@
-@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&display");
-@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
+@import url(./main.scss);
 
-body {
-	font-size: 16px;
-	font-family: "Raleway", "sans-serif";
-}
-
-*::before {
-	box-sizing: border-box;
-}
-
-.headers {
-	display: flex;
-	flex-direction: column;
+.section-title {
+	font-size: 1.5rem;
+	font-weight: bold;
 	text-align: center;
-	margin-top: 100px;
-	font-family: "Cutive Mono";
-
-	.headers-title {
-		margin: 0;
-		font-size: 2.5rem;
-	}
-
-	.headers-subtitle {
-		margin-top: 15px;
-		margin-bottom: 100px;
-		font-size: 1.5rem;
-	}
 }
 
-.container {
+.list-card {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-
-	.menu {
-		margin: 0;
-		padding: 0 10px;
-		list-style: none;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 70vw;
-		height: 2.5rem;
-
-		// border: 1px solid black;
-
-		.menu-button {
-			height: 2.5em;
-			padding: 0.5rem;
-			text-decoration: none;
-			position: relative;
-			background: white;
-			border: none;
-			z-index: auto;
-
-			&:hover {
-				cursor: pointer;
-			}
-		}
-	}
-
-	.content {
-		margin-top: 70px;
-		width: 80vw;
-	}
 }

src/scss/main.scss

@@ -0,0 +1,23 @@
+@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
+
+:root {
+	background: white;
+	color: black;
+	font-size: 16px;
+	font-family: "Raleway", "sans-serif";
+}
+
+a {
+	text-decoration: none;
+	color: black;
+}
+
+*::before {
+	box-sizing: border-box;
+}
+input:focus,
+textarea:focus,
+button:focus {
+	outline: none;
+}