Initial commit 🚀

components/Home/process/process.js

@@ -0,0 +1,42 @@
+import React from "react";
+import "./process.scss";
+import Tag from "../tag/tag";
+
+const Process = () => {
+    return (
+        <section id="process">
+            <Tag color="#ff00f2" background="#fac0ff" left={true}>Mon procédé</Tag>
+            <div className="process-container">
+                <div className="process-right">
+                    <img src="/assets/process.png" alt="Process Photo" />
+                </div>
+                <div className="process-left">
+                    <div className="processus">
+                        <h1>1. Réception</h1>
+                        <p>J'examine votre commande et nous discutons de vos <span className="color">attentes</span>,
+                            vos <span className="color">contraintes</span>, votre <span className="color">délais</span> et votre <span className="color">budget</span>.
+                            Une fois que nous sommes en <span className="color">accord</span>, je commence le <span className="color">brainstorming</span> autour de votre commande.</p>
+                    </div>
+                    <div className="processus">
+                        <h1>2. Brainstorming</h1>
+                        <p>Je conçois la <span className="color">maquette</span> de votre projet afin d'avoir un rapide aperçu.
+                            Une fois <span className="color">satisfait</span> de celle-ci, je commence le <span className="color">développement</span>.</p>
+                    </div>
+                    <div className="processus">
+                        <h1>3. Réalisation</h1>
+                        <p>Je développe avec les <span className="color">technologies</span> précédemment choisies.
+                            Avant la livraison, une <span className="color">vision en direct</span> vous sera disponible pour voir le résultat
+                            afin de corriger les petits <span className="color">détails</span> vous dérangeant.</p>
+                    </div>
+                    <div className="processus">
+                        <h1>4. Livraison</h1>
+                        <p>Une fois le projet fini, je vous le <span className="color">livre</span>.
+                            Je fournis également un <span className="color">service d'installation</span> du site web sur votre machine, avec un coût supplémentaire.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default Process;

components/Home/process/process.scss

@@ -0,0 +1,94 @@
+#process {
+  height: 90vh;
+  width: 100%;
+  background-color: #1c1c1c;
+  color: rgba(255, 255, 255, 0.3);
+
+  @media screen and (max-width: 700px) {
+    height: 130vh;
+  }
+
+  .process-container {
+    width: 100%;
+    height: 90vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    flex-direction: row;
+
+    @media screen and (max-width: 700px) {
+      height: 130vh;
+      padding: 10px;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .process-left {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: center;
+
+      @media screen and (max-width: 700px) {
+        width: 100%;
+        height: 130vh;
+      }
+
+      .processus {
+        width: 80%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-self: center;
+        padding-bottom: 30px;
+
+        .color {
+          color: #fcd9ff;
+        }
+
+        h1 {
+          color: white;
+          font-size: 1.5rem;
+          align-self: center;
+
+          &:after {
+            margin: 7px auto;
+            width: 40px;
+            height: 2px;
+            display: block;
+            content: "";
+            background-color: #ff00f2;
+          }
+        }
+
+        p {
+          align-self: center;
+          text-align: justify;
+          font-size: 1.2rem;
+        }
+      }
+    }
+
+    .process-right {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: center;
+
+      @media screen and (max-width: 700px) {
+        display: none;
+      }
+
+      img {
+        margin: 0 auto;
+        width: 65%;
+      }
+    }
+
+  }
+}