adding header files and some assets

src/components/App.css

@@ -1,3 +1,4 @@
 .body {
   background-color: #2a9d8f;
+  height: 100vh;
 }

src/components/App.jsx

@@ -1,11 +1,23 @@
 import React from 'react';
+import Header from './Header';
 import ContactForm from './contactForm';
+import WinSquad from './squadPictures';
+import styles from './about.module.css';
 import './App.css';
 
 function App() {
   return (
-    <div>
-      <ContactForm />
+    <div className={styles.body}>
+      <Header />
+      <div>
+        <h1>À propos de nous</h1>
+      </div>
+      <div className="winSquad">
+        <WinSquad />
+        <div className="Form">
+          <ContactForm />
+        </div>
+      </div>
     </div>
   );
 }

src/components/Header.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import logo from './logo_WIN.png';
+import styles from './Header.module.css';
+
+function Header() {
+  return (
+    <div className={styles.headerItems}>
+      <img className={styles.logo} src={logo} alt="logo" />
+    </div>
+  );
+}
+
+export default Header;

src/components/Header.module.css

@@ -0,0 +1,8 @@
+.headerItems {
+  justify-items: center;
+}
+.logo {
+  height: 10vh;
+  width: auto;
+  border-radius: 3vh;
+}

src/components/about.module.css

@@ -1,12 +1,28 @@
 .body {
   background-color: #2a9d8f;
+  height: 100vh;
 }
 .contactForm {
   background-color: #2a9d8f;
 }
-.membersPictures {
+.squad {
   background-color: #e9c46a;
+  height: 50vh;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: space-evenly;
 }
 li {
   display: none;
 }
+.pictures {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+.membersPictures {
+  height: 15vh;
+  width: auto;
+  border-radius: 3vh;
+}

src/components/contactForm.jsx

@@ -3,20 +3,25 @@ import styles from './about.module.css';
 
 function ContactForm() {
   return (
-    <div className={styles.body}>
-      <h1>ABOUT</h1>
-      <div className={styles.contactForm}>
-        <h1>Contact us !</h1>
-        <form>
-          <label>
-            Nom :
-            <input type="text" name="name" />
-          </label>
-          <input type="submit" value="Envoyer" />
-        </form>
-      </div>
+    <div className={styles.contactForm}>
+      <h1>Contact us !</h1>
+      <form>
+        <label>
+          <select>
+            <option value="Question">Une question à poser</option>
+            <option value="Proposition">De quoi nous améliorer</option>
+            <option selected value="Dites-nous tout">
+              Faites un choix
+            </option>
+          </select>
+          Nom :
+          <input type="text" />
+          Message :
+          <input type="text" />
+        </label>
+        <input type="submit" value="Envoyer" onClick="Thanks for ur message" />
+      </form>
     </div>
   );
 }
-
 export default ContactForm;

src/components/squadPictures.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './about.module.css';
+import citrouille from './assets/citrouille.png';
+import citrouilleMan from './assets/citrouilleMan.png';
+import epouvantail from './assets/epouvantail.png';
+import witch from './assets/witch.png';
+
+function WinSquad() {
+  return (
+    <div className={styles.squad}>
+      <h2>WIN SQUAD</h2>
+      <div className={styles.pictures}>
+        <img className={styles.membersPictures} src={citrouille} alt="citrouille" />
+        <img className={styles.membersPictures} src={citrouilleMan} alt="citrouilleMan" />
+      </div>
+      <div className={styles.pictures}>
+        <img className={styles.membersPictures} src={epouvantail} alt="epouvantail" />
+        <img className={styles.membersPictures} src={witch} alt="sorcière" />
+      </div>
+    </div>
+  );
+}
+
+export default WinSquad;