init

1 year ago · 0716c5187b
parent 15a899d2a3
commit 0716c5187b
54 changed files with 5019 additions and 2 deletions
--- a/403.php
+++ b/403.php
@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/403.html");
+?>
--- a/404.php
+++ b/404.php
@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/404.html");
+?>
--- a/500.php
+++ b/500.php
@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/500.html");
+?>
--- a/README.md
+++ b/README.md
@ -1,3 +1,3 @@
-# TeleQom.org
+# teleqom.org

-TeleQom.org website (https://teleqom.org)
+TeleQom's Official Website https://teleqom.org
--- a/config/PRIVATE/.htaccess.example
+++ b/config/PRIVATE/.htaccess.example
@ -0,0 +1,30 @@
+ErrorDocument 400 /err.php
+ErrorDocument 401 /err.php
+ErrorDocument 402 /err.php
+ErrorDocument 403 /403.php
+ErrorDocument 404 /404.php
+ErrorDocument 405 /err.php
+ErrorDocument 406 /err.php
+ErrorDocument 407 /err.php
+ErrorDocument 408 /err.php
+ErrorDocument 409 /err.php
+ErrorDocument 410 /err.php
+ErrorDocument 411 /err.php
+ErrorDocument 412 /err.php
+ErrorDocument 413 /err.php
+ErrorDocument 414 /err.php
+ErrorDocument 415 /err.php
+ErrorDocument 416 /err.php
+ErrorDocument 417 /err.php
+ErrorDocument 422 /err.php
+ErrorDocument 423 /err.php
+ErrorDocument 424 /err.php
+ErrorDocument 500 /500.php
+ErrorDocument 501 /err.php
+ErrorDocument 502 /err.php
+ErrorDocument 503 /err.php
+ErrorDocument 504 /err.php
+ErrorDocument 505 /err.php
+ErrorDocument 506 /err.php
+ErrorDocument 507 /err.php
+ErrorDocument 510 /err.php
--- a/config/PRIVATE/DB.php.example
+++ b/config/PRIVATE/DB.php.example
@ -0,0 +1,3 @@
+<?php
+    $pdo=new PDO("mysql:host=ADRESS_TO_HOST;dbname=DATABASE_NAME", "DATABASE_USER", "DATABASE_USER_PASSWORD");
+?>
--- a/config/PRIVATE/NEWSLETTER.php.example
+++ b/config/PRIVATE/NEWSLETTER.php.example
@ -0,0 +1,6 @@
+<?php
+
+$_ENV['newsletter_url_fr'] ='';
+$_ENV['newsletter_url_en'] ='';
+
+?>
--- a/css/pages/confirmation.css
+++ b/css/pages/confirmation.css
@ -0,0 +1,4 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/message.css";
--- a/css/pages/development.css
+++ b/css/pages/development.css
@ -0,0 +1,9 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/intro.css";
+@import "/css/sections/products.css";
+@import "/css/sections/call-to-action.css";
+@import "/css/sections/footer.css";
+
--- a/css/pages/errors.css
+++ b/css/pages/errors.css
@ -0,0 +1,4 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/message.css";
--- a/css/pages/index.css
+++ b/css/pages/index.css
@ -0,0 +1,11 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+
+@import "/css/sections/nav.css";
+@import "/css/sections/welcome.css";
+@import "/css/sections/about.css";
+@import "/css/sections/services.css";
+@import "/css/sections/projects.css";
+@import "/css/sections/contact.css";
+@import "/css/sections/footer.css";
--- a/css/pages/installation.css
+++ b/css/pages/installation.css
@ -0,0 +1,9 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/intro.css";
+@import "/css/sections/products.css";
+@import "/css/sections/call-to-action.css";
+@import "/css/sections/footer.css";
+
--- a/css/pages/repairs.css
+++ b/css/pages/repairs.css
@ -0,0 +1,9 @@
+@import "/css/utils/base.css";
+@import "/css/utils/buttons.css";
+@import "/css/utils/forms.css";
+@import "/css/sections/nav.css";
+@import "/css/sections/intro.css";
+@import "/css/sections/products.css";
+@import "/css/sections/call-to-action.css";
+@import "/css/sections/footer.css";
+
--- a/css/sections/about.css
+++ b/css/sections/about.css
@ -0,0 +1,25 @@
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.about h2 {
+  margin-bottom: 5rem;
+}
+
+.about div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 2rem;
+  text-align: center;
+  max-width: 80%;
+}
+
+.about h3 {
+  margin-bottom: 2rem;
+  text-decoration: 0.2rem solid var(--item-color-1) underline;  
+}
--- a/css/sections/call-to-action.css
+++ b/css/sections/call-to-action.css
@ -0,0 +1,12 @@
+#call-to-action {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+    justify-content: center;
+	text-align: center;
+    background-color: var(--background-color-2);
+}
+
+#call-to-action .description {
+    margin:2rem;
+}
--- a/css/sections/contact.css
+++ b/css/sections/contact.css
@ -0,0 +1,53 @@
+#contact {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color-2);
+}
+
+#contact h2 {
+    margin-bottom: 5rem;
+}
+
+#contact-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 80%;
+}
+
+#contact input[type=text], #contact input[type=email] {
+    width: 100%;
+    max-width: 25rem;
+}
+
+#contact textarea {
+    width: 100%;
+}
+
+.contact-radio-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.contact-radio-item {
+    display: flex;
+    flex-direction: column;
+    margin:1rem;
+}
+
+#contact label {
+    margin-bottom:0.5rem;
+}
+
+#contact h4 {
+    margin-top:2rem;
+}
+
+@media only screen and (max-width: 500px) {
+    #contact-form {
+        width: 90%;
+    }
+  }
--- a/css/sections/footer.css
+++ b/css/sections/footer.css
@ -0,0 +1,71 @@
+
+footer {
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+footer h5 {
+    font-size: 1rem;
+}
+
+footer .newsletter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+footer .newsletter p {
+    font-size: 0.8rem;
+}
+
+footer .newsletter form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+footer input[type=email] {
+    background-color: var(--background-color-2);
+    width: 100%;
+}
+
+footer .newsletter .btn {
+    font-size: 1rem;
+}
+
+footer .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2rem;
+}
+
+footer img {
+    margin:0.5rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+}
+
+.footer-language-div a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+@media only screen and (max-width: 900px) {
+
+    footer .section-container{
+        flex-direction: column;
+    }
+
+    footer .newsletter p {
+        margin: 0.5rem;
+    }
+    
+}
--- a/css/sections/intro.css
+++ b/css/sections/intro.css
@ -0,0 +1,26 @@
+#intro {
+    margin-top: var(--nav-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+#intro h2 {
+    max-width: 80%;
+    margin-bottom: 5rem;
+}
+
+#intro p {
+    max-width: 80%;
+    margin-bottom: 1rem;
+}
+
+@media only screen and (max-width: 500px) {
+    
+    #intro p {
+        max-width: 90%;
+    }
+    
+}
--- a/css/sections/message.css
+++ b/css/sections/message.css
@ -0,0 +1,27 @@
+#message {
+    margin:2rem auto;
+    max-width: 900px;
+}
+
+#message .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 2rem;
+}
+
+#message h2 {
+    margin: 2rem;
+}
+
+#message h4 {
+    margin: 1rem;
+}
+
+#message .btn {
+    margin: 2rem;
+}
+
+
--- a/css/sections/nav.css
+++ b/css/sections/nav.css
@ -0,0 +1,168 @@
+nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: var(--background-color-1);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--nav-height);
+  left: 50%;
+  transform: translatex(-50%);
+  max-width: var(--max-display-size);
+  box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.logo {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+nav img {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+nav ul {
+  position: absolute;
+  left: 50%;
+  transform: translatex(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+nav ul li {
+  display: inline-block;
+}
+
+nav ul li a:hover {
+  background-color: var(--item-color-1);
+}
+
+#mobile-navbar-btn {
+  display: none;
+}
+
+#navbar-action-btn {
+  margin-right: 1rem;
+}
+
+#mobile-nav-action-btn a,
+#navbar-action-btn a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+#mobile-nav-action-btn img,
+#navbar-action-btn img {
+  height: 3.5rem;
+  width: 3.5rem;
+}
+
+#mobile-nav-action-btn {
+  display: none;
+}
+
+#navbar-menu-btn {
+  display: none;
+}
+
+#menu-btn-close,
+#menu-btn-open {
+  display: none;
+  cursor: pointer;
+}
+
+#menu-btn-close img,
+#menu-btn-open img {
+  width: 2.8rem;
+  height: 2.8rem;
+}
+
+#qonsole-btn {
+  display: none;
+}
+
+
+@media only screen and (max-width: 1200px) {
+  .logo {
+    position: absolute;
+    left: 50%;
+    transform: translatex(-50%);
+  }
+
+  #nav-list {
+    width: 100%;
+    height: calc(100vh - var(--nav-height));
+    flex-direction: column;
+    justify-content: space-evenly;
+    transition: all 0.5s;
+    left: -100%;
+    top: var(--nav-height);
+    background: rgb(17, 26, 39, 0.8);
+    transform: none;
+  }
+
+  #nav-list li {
+    margin: 0.5rem 0;
+  }
+
+  #nav-list li a {
+    font-size: 2rem;
+  }
+
+  #mobile-nav-action-btn {
+    display: unset;
+  }
+
+  #navbar-action-btn {
+    display: none;
+  }
+
+  #menu-btn-open {
+    display: block;
+  }
+
+  #menu-btn-close {
+    display: none;
+  }
+
+  #navbar-menu-btn:checked~#nav-list {
+    left: 0;
+  }
+
+  #navbar-menu-btn:checked~#menu-btn-close {
+    display: block;
+  }
+
+  #navbar-menu-btn:checked~#menu-btn-open {
+    display: none;
+  }
+
+  .mobile-nav-action-btn {
+    display: inline-block;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .logo img {
+    height: 3rem;
+    width: 3rem;
+    margin-right: 0.5rem;
+  }
+
+  .logo h2 {
+    font-size: 2rem;
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  
+}
--- a/css/sections/products.css
+++ b/css/sections/products.css
@ -0,0 +1,164 @@
+.products {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background: var(--background-color-2);
+}
+
+.products.alt {
+    background-color: var(--background-color-1);
+}
+
+.products .explanation {
+    margin-bottom: 5rem;
+    max-width: 80%;
+}
+
+.products h2 {
+    margin-bottom: 5rem;
+}
+
+.products .wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-flow: row wrap;
+}
+
+.product {
+    text-align: center;
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 30rem;
+    padding: 2rem;
+    margin: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+    background-color: var(--background-color-1);
+}
+
+.product.alt {
+    background-color: var(--item-color-2);
+}
+
+.product .img-container {
+    height: 8rem;
+    width: 8rem;
+    margin: 2rem;
+}
+
+.product img {
+    height: 8rem;
+    width: 8rem;
+}
+
+.product h4 {
+    display: inline-block;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--text-color-1);
+    color: var(--item-color-1);
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.product .description {
+    margin: 1rem;
+}
+
+hr {
+    border: 0.2rem dotted var(--item-color-1);
+    border-radius: 0.5rem;
+    width: 100%;
+}
+
+.product h5 {
+    margin-bottom: 1rem;
+}
+
+.product .includes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 1rem;
+}
+
+.product .includes .includes-items {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+
+
+.product .includes p {
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    margin: 0.5rem;
+    display: inline-block;
+    border-radius: 0.3rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+    background: var(--background-color-2);
+}
+
+.product .includes p.alt {
+    background-color: var(--background-color-2);
+}
+
+.product .qontribution {
+    padding: 1rem;
+}
+
+.product .btn {
+    margin: 2rem 1rem 1rem 1rem;
+}
+
+span.green {
+    color: var(--background-color-success-1);
+}
+
+.products.alt {
+    background-color: var(--background-color-1);
+}
+
+.products.alt .product {
+    background-color: var(--background-color-2);
+}
+
+.products.alt .includes-items p{
+    background-color: var(--background-color-1);
+}
+
+.product .includes-items p.green {
+    background-color: var(--background-color-success-1);
+}
+
+.product .includes-items p.yellow {
+    background-color: var(--background-color-warning-1);
+}
+
+.product .includes-items p.red {
+    background-color: var(--background-color-danger-1);
+}
+
+.product .includes-items p.blue {
+    background-color: var(--item-color-1);
+}
+
+
+@media only screen and (max-width: 500px) {
+
+    .product {
+        margin: 1.5rem 0.5rem;
+        padding: 2rem 1rem;
+    }
+    
+    .products .explanation {
+        max-width: 90%;
+    }
+    
+}
--- a/css/sections/projects.css
+++ b/css/sections/projects.css
@ -0,0 +1,72 @@
+
+.projects {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.projects h2 {
+    margin-bottom: 5rem;
+}
+
+.projects .overview {
+    padding: 0 2rem;
+}
+
+.projects .wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-flow: row wrap;
+    margin: 2.5rem 0;
+}
+
+.projects .project {
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    max-width: 25rem;
+    padding: 2rem;
+    margin: 1.5rem;
+    border-radius: 1rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+    background-color: var(--background-color-2);
+}
+
+.projects .project img {
+    width: 8rem;
+    height: 8rem;
+}
+
+.projects .project h4 {
+    margin: 1.3rem;
+}
+
+.projects .project .description {
+    margin: 1rem 0;
+}
+
+.project p.status {
+    margin: 1rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.project p.status.hold {
+    background-color: var(--background-color-danger-2);
+}
+
+.project p.status.dev {
+    background-color: var(--background-color-warning-2);
+}
+
+.project p.status.test {
+    background-color: var(--background-color-warning-1);
+}
+
+.project p.status.prod {
+    background-color: var(--background-color-success-1);
+}
--- a/css/sections/services.css
+++ b/css/sections/services.css
@ -0,0 +1,66 @@
+.services {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color-2);
+}
+
+.services h2 {
+  margin-bottom: 5rem;
+}
+
+.services .service {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  max-width: 70%;
+  padding: 2rem;
+  margin: 2rem 0;
+  border-radius: 1rem;
+  background: var(--background-color-1);
+  box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
+}
+
+.services .service img {
+  width: 5rem;
+  height: 5rem;
+  margin: 1rem;
+}
+
+.services .service .service-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.services .service .service-content p {
+  margin: 2rem;
+}
+
+.services .service h3 {
+  margin-bottom: 1rem;
+}
+
+@media only screen and (max-width: 1200px) {
+  .services .service {
+    flex-direction: column;
+    text-align: center;
+    padding: 2rem 0.5rem;
+    max-width: 80%;
+  }
+
+  .services .service .service-content {
+    padding: 0.5rem;
+  }
+
+}
+
+@media only screen and (max-width: 500px) {
+  .services .service {
+    max-width: 90%;
+  }
+
+}
--- a/css/sections/welcome.css
+++ b/css/sections/welcome.css
@ -0,0 +1,54 @@
+#welcome {
+  margin-top: var(--nav-height);
+  padding: 0;
+  background: url("/media/images/welcome-background-1080p.jpg") center;
+  background-size: cover;
+  height: calc(100vh - var(--nav-height));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+#welcome-logo {
+  height: 15rem;
+  width: 15rem;
+}
+
+#welcome h1 {
+  margin-right: 20%;
+  padding: 2rem;
+}
+
+#welcome h4 {
+  margin: 0 0 0 20%;
+}
+
+#scroll-down {
+  position: absolute;
+  bottom: 2rem;
+  width: 3rem;
+  height: 2rem;
+}
+
+#scroll-down img {
+  width: 3rem;
+}
+
+@media only screen and (max-width: 1280px) {
+  #welcome .container {
+      background: url("/media/images/welcome-background-720p.jpg") center;
+  }
+  #welcome h4 {
+      margin: 2rem;
+  }
+  #welcome h1 {
+      margin: 0;
+  }
+}
+@media only screen and (max-width: 500px) {
+  #welcome .container {
+      background: url("/media/images/welcome-background-mobile.jpg") center;
+  }
+}
--- a/css/utils/base.css
+++ b/css/utils/base.css
@ -0,0 +1,123 @@
+/* FONTS IMPORT */
+
+@font-face {
+    font-family: Ubuntu;
+    src: url("/media/fonts/Ubuntu-Bold.ttf");
+    font-display: swap;
+}
+
+/* RESET */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: none;
+    text-decoration: none;
+    font-family: Ubuntu, sans-serif;
+    scroll-behavior: smooth;
+}
+
+:root {
+
+    /* Display Sizes */
+    --mobile-size: 500px;
+    --tablet-size: 900px;
+    --desktop-size: 1920px;
+    --max-display-size: 1920px;
+
+    /* Background Colors */
+    --background-color-1: #171a21;
+    --background-color-2: #1e222b;
+    --background-color-3: #333947;
+    --background-color-success-1: #1dad24;
+    --background-color-success-2: #16851c;
+    --background-color-warning-1: #a4a700;
+    --background-color-warning-2: #898b00;
+    --background-color-danger-1: #c90c0c;
+    --background-color-danger-2: #960b0b;
+
+
+    /* Item Colors */
+    --item-color-1: #5791FF;
+    --item-color-2: #3c64ad;
+    --item-color-3: #333947;
+
+    /* Text Colors */
+    --text-color-1: #eee;
+    --text-color-2: var(--item-color-1);
+
+    /* btn Color */
+    --btn-color-1: #5791FF;
+    --btn-color-1-hover: #3c64ad;
+    --btn-color-2: unset;
+    --btn-color-2-hover: #5791FF;
+    --btn-disabled: #3d414b;
+
+
+    /* Boxes */
+    --box-shadow: #0c0e11;
+    --border-radius: 0.5rem;
+
+    /* Custom */
+    --nav-height: 5rem;
+}
+
+html {
+    color: var(--text-color-1);
+    background-color: var(--background-color-1);
+    scroll-padding-top: var(--nav-height);
+}
+
+body {
+    max-width: var(--max-display-size);
+    margin: 0 auto;
+    text-align: center;
+}
+
+a {
+    color: var(--text-color-1);
+    text-decoration: none;
+}
+
+h1 {
+    font-size: 3rem;
+}
+
+h2 {
+    font-size: 2.5rem;
+}
+
+h3 {
+    font-size: 2rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 1.3rem;
+}
+
+p {
+    line-height: 1.7rem;
+}
+
+/* SECTIONS */
+
+section {
+    padding: 5rem 0 5rem 0;
+}
+
+
+/* CUSTOM */
+
+span {
+    color: var(--text-color-2);
+}
+
+.link {
+    text-decoration: underline;
+    color: var(--text-color-2);
+}
--- a/css/utils/buttons.css
+++ b/css/utils/buttons.css
@ -0,0 +1,64 @@
+.btn {
+    color: var(--text-color-1);
+    cursor: pointer;
+    font-size: 1.3rem;
+    padding: 0.6rem 0.7rem;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    transition: all 0.2s linear 0s;
+    box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--box-shadow);
+    margin: 0.5rem;
+}
+
+.btn-1 {
+    color: var(--text-color-1);
+    background-color: var(--btn-color-1);
+}
+
+.btn-1:hover {
+    background-color: var(--btn-color-1-hover);
+}
+
+.btn-2 {
+    color: var(--text-color-1);
+    background-color: var(--btn-color-2);
+    box-shadow: none;
+}
+
+.btn-2:hover {
+    background-color: var(--item-color-1);
+    box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--box-shadow);
+}
+
+.btn-success {
+    background-color: #1dad24;
+}
+
+.btn-success:hover {
+    background-color: #16851c;
+}
+
+.btn-warning {
+    background-color: #a4a700;
+}
+
+.btn-warning:hover {
+    background-color: #898b00;
+}
+
+.btn-danger {
+    background-color: #c90c0c;
+}
+
+.btn-danger:hover {
+    background-color: #960b0b;
+}
+
+.btn:disabled {
+    background-color: var(--background-color-3);
+    box-shadow: none;
+}
+
--- a/css/utils/forms.css
+++ b/css/utils/forms.css
@ -0,0 +1,19 @@
+input[type=text],input[type=email],textarea {
+    padding: 0.5rem;
+    margin: 1rem;
+    border-radius: 0.5rem;
+    border: none;
+    background-color: var(--background-color-1);
+    color: var(--text-color-1);
+    font-size: 1.2rem;
+    outline-color: var(--item-color-1);
+    box-shadow: 0.05rem 0.05rem 0.1rem 0.05rem var(--box-shadow);
+}
+
+input:focus {
+    outline-color: var(--item-color-1);
+}
+
+.catch {
+    display: none;
+}
--- a/err.php
+++ b/err.php
@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/err/general.html");
+?>
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.php
+++ b/index.php
@ -0,0 +1,7 @@
+<?php
+    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+    echo($language);
+    $accept = ['fr', 'en'];
+    $language = in_array($language, $accept) ? $language : 'fr';
+    header("location:/pages/{$language}/index.html");
+?>
--- a/pages/en/confirmation.html
+++ b/pages/en/confirmation.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Success! | Confirmation Page</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/confirmation.css"/>
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+          <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+          <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+          <img src="/media/images/logo.svg" alt="TeleQom Logo">
+          <h2>
+            Tele<span>Q</span>om
+          </h2>
+        </a>
+        <ul id="nav-list">
+          <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+      </nav>
+</header>
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>It's done!</h2>
+            <h4>Your request was transmitted successfully</h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+</html>
--- a/pages/en/err/403.html
+++ b/pages/en/err/403.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups (403) | Forbidden Error Page</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (403)</h2>
+            <h4>
+                A
+                <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
+                    rel="noreferrer noopener" class="link">403</a>
+                error means that this section is not available to the web server
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/en/err/404.html
+++ b/pages/en/err/404.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups (404) | Page Not Found Error</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (404)</h2>
+            <h4>
+                A
+                <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
+                    rel="noreferrer noopener" class="link">404</a>
+                error means that our server could not find the page you were looking for
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/en/err/500.html
+++ b/pages/en/err/500.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups (500) | Internal Server Error</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (500)</h2>
+            <h4>
+                A
+                <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
+                    rel="noreferrer noopener" class="link">500</a>
+                error means that our server encountered an internal error. We apologize for the inconvenience. This
+                server may be undergoing maintenance. If the problem persists<br />
+                <a href="/pages/en/index.html#contact" class="link">Contact Us</a>
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/en/err/contact.html
+++ b/pages/en/err/contact.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups | Contact Form Error</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups</h2>
+            <h4>An error occured while sending your message, please try again later. We apologize for the inconvenience.</h4>
+            <h4>If the problem persists, call us at <br/> 1 (833) PRJ-TL<span>Q</span>M</h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/en/err/general.html
+++ b/pages/en/err/general.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups | Unexpected Error Occured</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups</h2>
+            <h4>
+                An unexpected error occurred... Please try again later. We apologize for the inconvenience. This server
+                may be undergoing maintenance. If the problem persists<br />
+                <a href="/pages/en/index.html#contact" class="link">Contact Us</a>
+            </h4>
+            <h4>You may close this page or go back to the home page</h4>
+            <a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/en/index.html
+++ b/pages/en/index.html
@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>The TeleQom Project | Home</title>
+  <meta name="description"
+    content="The TeleQom Project is a Québec non-profit that offers paid services to fund its multiple Free/Libre Software projects" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/index.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src="/media/images/menu.png" alt="Menu Icon">
+      </label>
+      <label for="navbar-menu-btn" id="menu-btn-close">
+        <img src="/media/images/close.png" alt="Menu Icon">
+      </label>
+      <a href="#top" class="logo">
+        <img src="/media/images/logo.svg" alt="TeleQom Logo">
+        <h2>
+          Tele<span>Q</span>om
+        </h2>
+      </a>
+      <ul id="nav-list">
+        <li><a class="btn btn-2" href="#about">About</a></li>
+        <li><a class="btn btn-2" href="#services">Services</a></li>
+        <li><a class="btn btn-2" href="#projects">Projects</a></li>
+        <li><a class="btn btn-2" href="#contact">Contact</a></li>
+        <li><a class="btn btn-2" href="/pages/fr/index.html">FR</a></li>
+      </ul>
+      <div id="qonsole-btn">
+        <a href="https://qonsole.teleqom.org"><img src="/media/images/qonsole.png" alt="Qonsole"></a>
+      </div>
+    </nav>
+  </header>
+  <section id="welcome">
+    <h1>
+      The Tele<span>Q</span>om Project
+    </h1>
+    <h4>
+      Telecommunications with <span>Québec</span>'s Values
+    </h4>
+    <a href="#about" id="scroll-down">
+      <img src="/media/images/down.png" alt="Icone defilement">
+    </a>
+  </section>
+  <section class="about" id="about">
+    <h2>About Us</h2>
+    <div>
+      <h3>
+        What is Tele<span>Q</span>om?
+      </h3>
+      <p>
+        The Tele<span>Q</span>om Project, a Québec non-profit, is an ideal. We are attempting to restore ethics and
+        morals within the applications all of us use on a daily basis. From your favorite social platform, online
+        shopping, email or even messaging, almost all of them contain spying software. Robots read your emails and
+        your messages, some even listen to you talk. In our opinion, this is unacceptable and should be illegal but
+        you accepted these terms before using those applications and devices and that is why the law is powerless at
+        the moment. Since we don't have viable alternatives, we follow these technology giants with bad intentions. It
+        is in response to this severe lack of humanity that Tele<span>Q</span>om was born.
+      </p>
+    </div>
+    <div>
+      <h3>
+        Libre Software
+      </h3>
+      <p>
+        Tele<span>Q</span>om embraces a philosophy that has been around for quite some
+        time, we use only Libre/Free Software. To make it simple, a program is much like a food recipe. Libre
+        Software grants the public access to it's source code (the recipe, that we call our <a
+          href="https://qode.teleqom.org" target="_blank" rel="noreferrer noopener" class="link">Qode</a>) to audit
+        and discover security flaws, modify or improve with the only condition of sharing back what was improved.
+        Proprietary software on the other hand, is the complete opposite. They hide how it works, and forbid auditing
+        their source code. It is obviously much harder to discover what it truly does with your information.
+      </p>
+    </div>
+    <div>
+      <h3>
+        The Real Difference
+      </h3>
+      <p>
+        Our projects are designed in such a way that it is impossible for us to spy on you. What you do in your private
+        life does not concern us. Proprietary artifical intelligence programs can already anticipate your behavior,
+        modifiy your habits and the way you think by simply using this data that we all think harmless. Companies like
+        <a href="https://en.wikipedia.org/wiki/Facebook%E2%80%93Cambridge_Analytica_data_scandal" target="_blank"
+          rel="noreferrer noopener" class="link">Cambridge Analytica</a> already interfered in the United-States
+        elections, and this is only the beginning. <a href="https://en.wikipedia.org/wiki/Pegasus_(spyware)"
+          target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> gives unlimited access to those willing
+        to pay to the complete virtual life of anyone with the help of flaws in software. It is now urgent to get rid
+        of those chains, and that is where Tele<span>Q</span>om comes in.
+      </p>
+    </div>
+    <div>
+      <h3>
+        Telecommunication
+      </h3>
+      <p>
+        It's not pretty when you take a closer look at how these big corporations use us. But instead of admitting
+        defeat, we chose to remedy this situation with whatever freedom we still have left. We will start by securing
+        our telecommunications (email, social, messaging, videoconference and telephone). Then, <span>Q</span>ommerce
+        will help fund the infrastructure and development of our projects. Finally, a voting application, called
+        Politi<span>Q</span> that will give the power back to the people. Keep in mind, Tele<span>Q</span>om does not
+        sell your data and is a non-profit, so donations are necessary to its survival. We do what we can to offer our
+        projects for free, but it is not easy. All profits generated by the following services are invested in the
+        development of our projects!
+      </p>
+    </div>
+  </section>
+  <section  class="services" id="services">
+    <h2>Our Services</h2>
+    <div class="service">
+      <img src="/media/images/code.png" alt="code logo">
+      <div class="service-content">
+        <h4>Development</h4>
+        <p>A web site, a mobile application, an online shopping application, name it. Tele<span>Q</span>om uses Libre
+          Software as much as possible to build your project. This results in an application that respects its users,
+          is safer, more stable and much cheaper.</p>
+        <a class="btn btn-1" href="/pages/en/services/development.html">More</a>
+      </div>
+    </div>
+    <div class="service">
+      <img src="/media/images/repair.png" alt="repair logo">
+      <div class="service-content">
+        <h4>Repairs</h4>
+        <p>In the same way, we love to give your devices a second life. Broken phone display? Laptop not holding
+          charge? Computer doesn't start or is slower than before? We can fix all of that!</p>
+          <a class="btn btn-1" href="/pages/en/services/repairs.html">More</a>
+        </div>
+    </div>
+    <div class="service">
+      <img src="/media/images/support.png" alt="support logo">
+      <div class="service-content">
+        <h4>Support</h4>
+        <p>Paid support is also available for most technology related issues you may be facing. At
+          Tele<span>Q</span>om, we like to play around with techonology a lot. Could be your wi-fi network, your browser
+          is
+          out-of-date, you can't update apps on your phone, anything IT really. Just reach out to us, we might be able
+          to help you! :)</p>
+        <a class="btn btn-1" href="#contact">Contact</a>
+      </div>
+    </div>
+    <div class="service">
+      <img src="/media/images/installation.png" alt="installation logo">
+      <div class="service-content">
+        <h4>Installation</h4>
+        <p>It is now possible to replace most proprietary malware with Libre Software. Your computer's operating
+          system can be replaced by a GNU/Linux such as <a href="https://www.linuxmint.com/" target="_blank"
+            rel="noreferrer noopener" class="link">Linux Mint</a>. A selection of mobile devices are supported by <a
+            href="https://grapheneos.org/" target="_blank" rel="noreferrer noopener" class="link">GrapheneOS</a>, and
+          it will be possible to switch to a completely Libre alternative like the <a
+            href="https://puri.sm/products/librem-5/" target="_blank" rel="noreferrer noopener" class="link">Librem
+            5</a> or the <a href="https://www.pine64.org/pinephonepro/" target="_blank" rel="noreferrer noopener"
+            class="link">Pine Phone</a>. <a href="https://www.libreoffice.org/" target="_blank"
+            rel="noreferrer noopener" class="link">Libre Office</a> is a great alternative for all types of documents.
+          For image manipulation, <a href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener"
+            class="link">GIMP</a> is also a great choice.</p>
+        <a class="btn btn-1" href="/pages/en/services/installation.html">More</a>
+      </div>
+    </div>
+  </section>
+
+  <section class="projects" id="projects">
+      <h2>Our Projets</h2>
+      <p class="overview">The following projects are or will be available from your <span>Q</span>onsole. Come
+        back later to see if the Status of your favorite project changed!</p>
+      <div class="wrapper">
+        <div class="project">
+          <img src="/media/images/qonsole.png" alt="Qonsole Logo">
+          <h4><span>Q</span>onsole</h4>
+          <p class="description">The main dashboard where you can access all of your applications. The
+            <span>Q</span>onsole is in charge of displaying all your apps in the same location, in a uniform and simple
+            way.
+          </p>
+          <p class="status dev">In Development</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/disq.png" alt="DisQ Logo">
+          <h4>Dis<span>Q</span></h4>
+          <p class="description">This is where you store all your data, it's your personal hard drive but
+            hosted on an external server. All accessible only by you, the server can not see your data.</p>
+          <p class="status dev">In Development</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/interqom.png" alt="InterQom Logo">
+          <h4>Inter<span>Q</span>om</h4>
+          <p class="description">Inter<span>Q</span>om is the sane alternative to other social networks.
+            Your conversations are entirely private and even we don't have access to your data.</p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qommerce.png" alt="Qommerce Logo">
+          <h4><span>Q</span>ommerce</h4>
+          <p class="description">The center of exchange and online commerce. Local businesses and
+            individuals can share the fruit of their labour. We will accept cryptocurrencies as well as regular Canadian
+            money.</p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qonvo.png" alt="Qonvo Logo">
+          <h4><span>Q</span>onvo</h4>
+          <p class="description">Instant messaging is the easiest way we have to communicate with one
+            another. This project includes audio and video calls, all encrypted from you to your recipients.</p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qourrier.png" alt="Qourrier Logo">
+          <h4><span>Q</span>ourrier</h4>
+          <p class="description">The portal to access your emails, from your <span>Q</span>onsole. Emails
+            between users are fully encrypted and we support most providers.</p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/politiq.png" alt="PolitiQ Logo">
+          <h4>Politi<span>Q</span></h4>
+          <p class="description">Tele<span>Q</span>om is a round table where all Quebecers are invited. Your
+            opinion will finally be heard in the government. The real democracy at your fingertips!</p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qontact.png" alt="Qontact Logo">
+          <h4><span>Q</span>ontact</h4>
+          <p class="description">The good old address book. Here you store your contact information, email,
+            phone, <span>Q</span>onvo or Inter<span>Q</span>om identifier, and more.</p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
+          <h4><span>Q</span>alendrier</h4>
+          <p class="description">We all need a calendar. Here you can manage your personal or professional
+            life, schedule an appointment with another user and even see your future events on Inter<span>Q</span>om.
+          </p>
+          <p class="status hold">On Hold</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qable.png" alt="Qable Logo">
+          <h4><span>Q</span>able</h4>
+          <p class="description">The audio and video content delivery platform, which uses <a
+              href="https://en.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
+              class="link">Torrent</a> technology to lighten the load on the servers and therefore the resulting costs.
+            The more people watching it, the faster it gets!</p>
+          <p class="status hold">On Hold</p>
+        </div>
+      </div>
+  </section>
+  <section id="contact">
+    <h2>Contact</h2>
+    <form action="/php/contact.php" method="get" id="contact-form">
+      <input type="text" name="contact-language" value="en" hidden>
+      <input type="text" name="contact-name" placeholder="Name" id="contact-first-name" required>
+      <input type="email" name="contact-email" placeholder="Email" id="contact-email" required>
+      <input class="catch" type="email" name="contact-email-2" placeholder="Email" id="contact-email-2">
+      <textarea name="contact-message" id="contact-message" placeholder="Message..." cols="30" rows="10" required></textarea>
+      <input class="btn btn-1" type="submit" value="Send">
+    </form>
+  </section>
+  <footer>
+    <div class="newsletter">
+      <h5>Subscribe!</h5>
+      <p>We only send important news</p>
+      <form action="/php/newsletter.php" method="get">
+        <input type="text" name="newsletter-language" value="en" hidden>
+        <input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
+        <input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
+        <input type="submit" class="btn btn-1" value="Subscribe">
+      </form>
+    </div>
+    <div class="wrapper">
+      <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+          src="/media/images/git-white.png"></a>
+      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/CC-64.png">
+      </a>
+      <a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/onion-64.png">
+      </a>
+      <a href="/pages/fr/index.html">
+        <img src="/media/images/quebec.png" alt="Français Québec">
+      </a>
+    </div>
+  </footer>
+</body>
+
+</html>
--- a/pages/en/services/development.html
+++ b/pages/en/services/development.html
@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The TeleQom Project | Development Services</title>
+    <meta name="description" content="TeleQom's development services include Libre websites, mobile apps, e-commerce like OpenCart and Content Management Systems like Wordpress"/>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/development.css"/>
+  </head>
+  <body>
+    <!-- FOUC -->
+    <script>0</script>
+    <header>
+      
+      <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+          <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+          <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/en/index.html" class="logo">
+          <img src="/media/images/logo.svg" alt="TeleQom Logo">
+          <h2>
+            Tele<span>Q</span>om
+          </h2>
+        </a>
+        <ul id="nav-list">
+          <li><a class="btn btn-2" href="#websites">Websites</a></li>
+          <li><a class="btn btn-2" href="#e-commerce">E-commerce</a></li>
+          <li><a class="btn btn-2" href="#cms">CMS</a></li>
+          <li><a class="btn btn-2" href="#other">Other</a></li>
+          <li><a class="btn btn-2" href="/pages/fr/services/developpement.html">FR</a></li>
+          <li>
+            <div id="mobile-nav-action-btn">
+              <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+            </div>
+          </li>
+        </ul>
+        <div id="navbar-action-btn">
+          <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+        </div>
+      </nav>
+    </header>
+
+    <section id="intro">
+            <h2>Development Services</h2>
+            <p>
+              We offer various development services that could help you start or improve your project. At Tele<span>Q</span>om,
+              we prefer a more humane approach. Whenever you are ready, contact us and we will offer you the best option according to your needs. 
+              Oh and don't forget, all profits generated are invested in our multiple Libre Software Projects! By choosing us, you help yourself and the community :)
+            </p>
+    </section>
+    <section class="products" id="websites">
+        <h2>Websites</h2>
+        <p class="explanation">
+          Websites are a very simple way of appearing online. They allow your business to be searched for on the internet and you can share some of your products and leave your contact information there. You may explain what your business or organization does and give a rough idea of why you exist. This site is one example of a simple basic Website!
+        </p>
+        <div class="wrapper">
+          <div class="product">
+            <div>
+                <h4>Website - Basic</h4>
+                <p class="description">Simple Website, perfect for professionnals, construction companies, etc </p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5>Package</h5>
+              <div class="includes-items">
+                <p>Tele<span>Q</span>om Template<br>- OR -<br>Your Bootstrap 5 Template</p>
+                <p>Developer: <span class="green">3 Hours</span></p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Micro</h5>
+              <div class="includes-items">
+              <p>1GB</p>
+              <p>5 Emails</p>
+              <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">100$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">60$ / Year</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Website - Complete</h4>
+                <p class="description">A professionnal website, with many useful features</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5>Package</h5>
+              <div class="includes-items">
+              <p>Tele<span>Q</span>om Template<br>- OR -<br>Your Bootstrap 5 Template</p>
+              <p>Developer: <span class="green">5 Hours</span></p>
+              <p>Newsletter</p>
+              <p>Contact Form</p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+              <p>5GB</p>
+              <p>25 Emails</p>
+              <p>cPanel</p>
+              <p>Database</p>
+              <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">250$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">150$</span> / Year</p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Website - Custom</h4>
+                <p class="description">Custom development tailored to your needs. Great if you just need the website and prefer to manage your hosting, image cropping and everything else yourself</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <div class="includes-items">
+              <p>Built to Order</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Developer: <span class="green">50$ / Hour</span></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="products alt" id="e-commerce">
+        <h2>E-Commerce</h2>
+        <p class="explanation">
+          E-commerce Libre Software applications are the best to keep your online presence at a low cost. 
+          They are used and maintained by thousands which results in feature rich yet stable platforms.
+          <span>Q</span>ommerce will be linked to all platforms listed below through installable plugins so you may get increased visibility!
+        </p>
+        <div class="wrapper">
+          <div class="product bg">
+            <div>
+                <h4>OpenCart</h4>
+                <p class="description">Simple OpenCart shop, perfect for beginners and small businesses. Tele<span>Q</span>om's Bouti<span>Q</span> is an OpenCart instance</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <div class="includes-items">
+                <p>Developer: <span class="green">3 Hours</span></p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Emails</p>
+                <p>cPanel</p>
+                <p>Database</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">150$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+            </div>
+          </div>
+          <div class="product bg-2">
+            <div>
+                <h4>WooCommerce</h4>
+                <p class="description">A modified Wordpress instance that becomes a fully featured e-commerce solution</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <div class="includes-items">
+                <p>Developer: <span class="green">3 Hours</span></p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Emails</p>
+                <p>cPanel</p>
+                <p>Database</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">200$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section class="products" id="cms">
+        <h2>CMS</h2>
+        <p class="explanation">
+          Content Management Systems are very useful if you plan on changing the content often.
+          It allows you to customize everything yourself with little to no programming experience and thus saving in development costs.
+          The downside is that it does require a small degree of technical knowledge and it may get harder for you to maintain later on, resulting in a bad experience for your users.
+          Tele<span>Q</span>om does offer paid support if you find yourself blocked by something, so it is still a great way to kickstart your project.
+        </p>
+        <div class="wrapper">
+          <div class="product">
+            <div>
+                <h4>Wordpress</h4>
+                <p class="description">Simple Wordpress installation with everything you need to start blogging</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Emails</p>
+                <p>cPanel</p>
+                <p>Database</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">50$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Drupal</h4>
+                <p class="description">Drupal is another Libre Software CMS that can kickstart your project</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Emails</p>
+                <p>cPanel</p>
+                <p>Database</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">50$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Joomla</h4>
+                <p class="description">Another popular Libre Software content management system</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Emails</p>
+                <p>cPanel</p>
+                <p>Database</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Package: <span class="green">50$</span></p>
+              <p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="products alt" id="other">
+        <h2>Other</h2>
+        <p class="explanation">
+          Items in this category don't have a price list as they are not "one size fits most" solutions.
+          Everything is possible of course, but costs cannot be estimated before we know exactly what you wish to accomplish
+        </p>
+        <div class="wrapper">
+          <div class="product">
+            <div>
+                <h4>Web Applications</h4>
+                <p class="description">
+                  Say you have this great idea of starting your own podcast distribution platform.
+                  This would fall under the Web App category as it will require a fully customized database, interface and many more elements
+                </p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>IoT</h4>
+                <p class="description">
+                  IoT or Internet of Things includes all smaller gadgets and gizmos like sensors and gauges.
+                  An automated animal feeder or temperature sensors, it's IoT
+                </p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Mobile Apps</h4>
+                <p class="description">
+                  Tele<span>Q</span>om does offer mobile apps development, although we would advise going the Progressive Web App route.
+                  PWAs offer a wide range of fonctionnalities and work with most web applications and devices.
+                  If you already have a website or E-commerce shop, configuration and addtionnal costs are minimal compared to native applications, although sometimes a native application may be required
+                </p>
+            </div>
+          </div>
+        </div>
+    </section>
+    <section id="call-to-action">
+      <h2>Ready?</h2>
+      <p class="description">
+        Find some information confusing or ready to take the next steps? Time to contact us! Don't worry, we can help you make the ethical decision :)
+      </p>
+      <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+    </section>
+    
+    <footer>
+      <div class="newsletter">
+        <h5>Subscribe!</h5>
+        <p>We only send important news</p>
+        <form action="/php/newsletter.php" method="get">
+          <input type="text" name="newsletter-language" value="en" hidden>
+          <input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
+          <input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
+          <input type="submit" class="btn btn-1" value="Subscribe">
+        </form>
+      </div>
+      <div class="wrapper">
+        <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+            src="/media/images/git-white.png"></a>
+        <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+          <img src="/media/images/CC-64.png">
+        </a>
+        <a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
+          <img src="/media/images/onion-64.png">
+        </a>
+        <a href="/pages/fr/services/developpement.html">
+          <img src="/media/images/quebec.png" alt="Français Québec">
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
--- a/pages/en/services/installation.html
+++ b/pages/en/services/installation.html
@ -0,0 +1,650 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>The TeleQom Project | Installation Service</title>
+  <meta name="description"
+    content="The TeleQom Project offers an installation service to install Libre Software operating systems and applications of all sorts. Take a look!" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/installation.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src="/media/images/menu.png" alt="Menu Icon">
+      </label>
+      <label for="navbar-menu-btn" id="menu-btn-close">
+        <img src="/media/images/close.png" alt="Menu Icon">
+      </label>
+      <a href="/pages/en/index.html" class="logo">
+        <img src="/media/images/logo.svg" alt="TeleQom Logo">
+        <h2>
+          Tele<span>Q</span>om
+        </h2>
+      </a>
+      <ul id="nav-list">
+        <li><a class="btn btn-2" href="#os">OS</a></li>
+        <li><a class="btn btn-2" href="#apps">Apps</a></li>
+        <li><a class="btn btn-2" href="/pages/fr/services/installation.html">FR</a></li>
+        <li>
+          <div id="mobile-nav-action-btn">
+            <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+          </div>
+        </li>
+      </ul>
+      <div id="navbar-action-btn">
+        <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+      </div>
+    </nav>
+  </header>
+
+  <section id="intro">
+    <h2>Installation Services</h2>
+    <p>
+      Proprietary software has become a serious threat to freedom as we know it. We need to make the move to Libre
+      Software (Open, community written, transparent code recipes, shareable and user controlled software).
+      Tele<span>Q</span>om's devices and private servers run only Libre Software, so you can too! This is very
+      important, as it will determine how future generations will live. Here is not the place to discuss such matters,
+      but replacing software that spies on you and others around you is a very good place to start! 
+      Note that all those are Libre Software, you can install them yourself free of charge if you so desire.
+      The Qontribution we ask is only to cover the employee's salary that will install it for you and to fund our projects.
+    </p>
+  </section>
+
+  <section class="products" id="os">
+    <h2>Operating Systems</h2>
+    <p class="explanation">
+      What is that? Well, <a href="https://en.wikipedia.org/wiki/Operating_system" target="_blank"
+        rel="noreferrer noopener" class="link">Operating Systems</a>, or OS for short, are a group of software that
+      interacts with the hardware on your device. It is the most complex piece of code running on your machine, and a
+      compromised OS can spy and do whatever it wants with applications running on your system.
+      We recommend taking a look at <a href="https://www.whonix.org/wiki/Host_Operating_System_Selection"
+        target="_blank" rel="noreferrer noopener" class="link">this page from the Whonix Project</a>, a well known
+      security and privacy oriented project, as to why to choose a GNU/Linux as your OS.
+      The few listed here are only the tip of the iceberg, many more exist!
+    </p>
+    <div class="wrapper">
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/linux-mint-96.png" alt="Linux Mint Logo">
+        </div>
+        <h4>Linux Mint</h4>
+        <p class="description">
+          Linux Mint, just like Ubuntu (its parent) has proprietary compatibility which makes it an ideal choice for
+          beginners moving away from a commercial OS.
+          Its default Desktop Environment (Cinnamon) is very close to Windows in terms of general layout. This is our
+          first choice for beginners moving away from Windows 10
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p class="green">Level: Beginner</p>
+            <p>Desktop: Cinnamon</p>
+            <p>Similar: Windows</p>
+            <p>Packages: Debian (.deb)</p>
+            <p class="yellow">Libre: Almost</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://linuxmint.com/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/ubuntu-logo32.png" alt="Ubuntu Logo">
+        </div>
+        <h4>Ubuntu</h4>
+        <p class="description">
+          Ubuntu &reg; stands for "Humanity" and is exctly that, a more humane approach to operating systems. It is
+          supported by a company called Canonical &trade; famous (or infamous) in the Linux universe. Just like Linux Mint, it is
+          more flexible as to what software you can install so perfect for beginners. This one uses the GNOME Desktop
+          Environment, which can be tweaked to look very much like a MacOS
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p class="green">Level: Beginner</p>
+            <p>Desktop: GNOME</p>
+            <p>Similar: MacOS</p>
+            <p>Packages: Debian (.deb)</p>
+            <p class="yellow">Libre: Almost</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://ubuntu.com/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/debian-128.png" alt="Debian Logo">
+        </div>
+        <h4>Debian</h4>
+        <p class="description">
+          The next step is the parent to both Linux Mint and Ubuntu, Debian. Debian is known for its stability, security
+          and freedom. Here nothing stops you from installing proprietary software, but it isn't there by default. It is
+          our Distribution of choice here at Tele<span>Q</span>om.
+          Debian comes with images of most major Desktop Environments, so it can look like any commercial OS
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p class="yellow">Level: Intermediate</p>
+            <p>Desktop: GNOME</p>
+            <p>Similar: Any</p>
+            <p>Packages: Debian (.deb)</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.debian.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Qubes.png" alt="Qubes Logo">
+        </div>
+        <h4>Qubes</h4>
+        <p class="description">
+          This one differs from the others as it is not an operating system but a hypervisor that launches small
+          containerized operating systems within it. It has a steeper learning curve than the others, but can run all of
+          them within it. It does require more technical knowledge and better hardware
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p class="red">Level: Advanced</p>
+            <p>Desktop: XFCE</p>
+            <p>Similar: Nothing</p>
+            <p>Packages: Debian, RedHat</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.qubes-os.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+    </div>
+  </section>
+
+  <section class="products alt" id="apps">
+    <h2>Applications</h2>
+    <p class="explanation">
+      Now this could be a huge section. The Linux universe has so many Libre Applications, it's impossible to list them
+      all here. We will focus on what most people use on a daily basis. Here we go!
+    </p>
+    <div class="wrapper">
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/libreoffice.png" alt="LibreOffice Logo">
+        </div>
+        <h4>Libre Office</h4>
+        <p class="description">
+          Libre office is the first choice in terms of office applications. It has a word compatible text editor,
+          excel compatible spreadsheet editor and much more
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Office Suite</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.libreoffice.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/gimp.png" alt="GIMP Logo">
+        </div>
+        <h4>GIMP</h4>
+        <p class="description">
+          GIMP stands for GNU Image Manipulation Program and does pretty much everything in terms of image alteration.
+          It includes so many fonctionnalities, you may feel a little overwhelmed at first
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: PhotoShop</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Inkscape.png" alt="Inkscape Logo">
+        </div>
+        <h4>Inkscape</h4>
+        <p class="description">
+          Another very popular image manipulation program. Plays nice with vector SVG images and other formats
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: PhotoShop</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://inkscape.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/blender.png" alt="Blender Logo">
+        </div>
+        <h4>Blender</h4>
+        <p class="description">
+          Blender is one of the most used application in the world for 3D modeling, animation and much more
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Cinema 4D, SolidWorks</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.blender.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Firefox.png" alt="Firefox Logo">
+        </div>
+        <h4>Firefox</h4>
+        <p class="description">
+          Your proprietary internet browser is most likely the most privacy invading software on your computer.
+          Firefox is an old, very well known, stable, well supported, feature rich, privacy and freedom advocating
+          internet browser. It is our first choice!
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Chrome, Edge</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.mozilla.org/en-CA/firefox/" target="_blank"
+          rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Chromium.png" alt="Chromium Logo">
+        </div>
+        <h4>Chromium</h4>
+        <p class="description">
+          Chromium is the open source core of both Chrome and Edge browsers. It is stripped of all privacy invading
+          software but retains most of its features
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Chrome, Edge</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.chromium.org/Home/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/codium.png" alt="Codium Logo">
+        </div>
+        <h4>Codium</h4>
+        <p class="description">
+          Codium or VSCodium is the Libre version of the popular code editor, now microsoft supported and telemetry
+          (another word for spying) infested Visual Studio Code. It is stripped of everything proprietary and freely
+          available. We use it on a daily basis here at Tele<span>Q</span>om
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: VSCode, JetBrains</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://vscodium.com/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Rhythmbox.png" alt="Rhythmbox Logo">
+        </div>
+        <h4>Rhythmbox</h4>
+        <p class="description">
+          A universal audio player. Plays podcasts or local audio files, everything you need in a music application
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: iTunes, WMP</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://wiki.gnome.org/Apps/Rhythmbox/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/vlc.png" alt="VLC Logo">
+        </div>
+        <h4>VLC Player</h4>
+        <p class="description">
+          Don't let the cone fool you, it is not under construction! This is a great Libre Software media player,
+          awesome for videos and music alike
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: iTunes, WMP</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.videolan.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/mattermost.png" alt="Mattermost Logo">
+        </div>
+        <h4>Mattermost</h4>
+        <p class="description">
+          Mattermost is just like an IRC channel with a very nice user interface. Used mainly for team chats, task and
+          projects management, it is very feature rich
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Slack, Teams</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://mattermost.com/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/transmission.png" alt="Transmission Logo">
+        </div>
+        <h4>Transmission</h4>
+        <p class="description">
+          A simple Libre BitTorrent client to share files over the internet. It is the ultimate community expression
+          in software. It is best at sharing large files, as it increases in speed for each connected user. You can
+          download most Linux Distributions with Transmission, it is faster!
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: uTorrent, Vuze</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://transmissionbt.com/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/signal.png" alt="Signal Logo">
+        </div>
+        <h4>Signal</h4>
+        <p class="description">
+          Signal is a state of the art mobile (and now linux too) application for instant messaging. Unlike the
+          upcoming <span>Q</span>onvo Project, it requires a mobile device with a phone number to setup but it is
+          still the best out there at the moment
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: WhatsApp, iMessage</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://signal.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Audacity.png" alt="Audacity Logo">
+        </div>
+        <h4>Audacity</h4>
+        <p class="description">
+          Ever wanted to crop an audio file? Or perhaps only change the audio format? Audacity is a full fledged audio
+          manipulation application that is easy to use
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Garage Band, Audition</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.audacityteam.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/OpenShot.png" alt="OpenShot Logo">
+        </div>
+        <h4>OpenShot</h4>
+        <p class="description">
+          Video editing made simple. Transitions, effects, audio, name it. You can do pretty much anything with this
+          software and its user interface is just plain and easy to understand
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Details</h5>
+          <div class="includes-items">
+            <p>Similar: Premiere, Final Cut</p>
+            <p class="green">Libre: Yes</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.openshot.org/" target="_blank" rel="noreferrer noopener">Website</a>
+      </div>
+
+    </div>
+  </section>
+
+  <section id="call-to-action">
+    <h2>Ready?</h2>
+    <p class="description">
+      Find some information confusing or ready to take the next steps? Time to contact us! Don't worry, we can help you make the ethical decision :)
+    </p>
+    <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+  </section>
+
+  <footer>
+    <div class="newsletter">
+      <h5>Subscribe!</h5>
+      <p>We only send important news</p>
+      <form action="/php/newsletter.php" method="get">
+        <input type="text" name="newsletter-language" value="en" hidden>
+        <input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
+        <input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
+        <input type="submit" class="btn btn-1" value="Subscribe">
+      </form>
+    </div>
+    <div class="wrapper">
+      <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+          src="/media/images/git-white.png"></a>
+      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/CC-64.png">
+      </a>
+      <a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/onion-64.png">
+      </a>
+      <a href="/pages/fr/services/installation.html">
+        <img src="/media/images/quebec.png" alt="Français Québec">
+      </a>
+    </div>
+  </footer>
+</body>
+
+</html>
--- a/pages/en/services/repairs.html
+++ b/pages/en/services/repairs.html
@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>The TeleQom Project | Repairs Service</title>
+  <meta name="description"
+    content="The TeleQom Project offers low cost repairs for your cellphone or computer. If you need new hardware though, here is a list of ethical suppliers!" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/repairs.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src="/media/images/menu.png" alt="Menu Icon">
+      </label>
+      <label for="navbar-menu-btn" id="menu-btn-close">
+        <img src="/media/images/close.png" alt="Menu Icon">
+      </label>
+      <a href="/pages/en/index.html" class="logo">
+        <img src="/media/images/logo.svg" alt="TeleQom Logo">
+        <h2>
+          Tele<span>Q</span>om
+        </h2>
+      </a>
+      <ul id="nav-list">
+        <li><a class="btn btn-2" href="#top">Repairs</a></li>
+        <li><a class="btn btn-2" href="#phones">Phones</a></li>
+        <li><a class="btn btn-2" href="#computers">Computers</a></li>
+        <li><a class="btn btn-2" href="/pages/fr/services/reparation.html">FR</a></li>
+        <li>
+          <div id="mobile-nav-action-btn">
+            <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+          </div>
+        </li>
+      </ul>
+      <div id="navbar-action-btn">
+        <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+      </div>
+    </nav>
+  </header>
+
+  <section id="intro">
+    <h2>Repair Services</h2>
+    <p>
+      Ok, so you broke your display? No problem, we can probably fix it.
+      Most computers can be opened easily and parts replaced for a fraction of the price of a new computer.
+      You can bring your own parts, or leave the shopping to us. We can source pretty much any part, new or used.
+      "Ok, so you can fix anything, how about my intelligent washing machine?" you might ask. Well, no we don't fix washing machines.
+      We also <span>DO NOT FIX APPLE DEVICES</span>. For more information or to start the repair procedure, contact us.
+     </p>
+     <p>
+      If you find yourself in need of new hardware, we have put together a small list of ethical suppliers for you. None of them are affiliated with us, but they do share our moral standards. We apologize in advance, none of them sell intelligent washing machines...
+    </p>
+  </section>
+
+  <section class="products" id="phones">
+      <h2>Phones</h2>
+      <p class="explanation">
+        This is a domain where Libre Software is only beginning to show its face. While Linux is at the core of the 
+        <a class="link" href="https://source.android.com/" target="_blank" rel="noreferrer noopener">Android Open Source Project</a>,
+        with the amount of proprietary and spying software added on top of it by Google before it makes it to your phone disqualifies it.
+        Some distributions have been around for some time, and Ubuntu even tried to launch an Ubuntu Phone with little
+        success. We are now seeing an increased interest in Libre Phones that respect its users, so we recommend you
+        keep an eye on the following
+      </p>
+      <div class="wrapper">
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/nitrophone-128.png" alt="NitroPhone Logo">
+          </div>
+          <h4>NitroPhone</h4>
+          <p class="description">
+            The NitroPhone is a first choice in terms of compatibility with your Android applications. They have
+            multiple versions and they all run GrapheneOS, a security focused, Libre, google stripped Android
+            distribution
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Details</h5>
+            <div class="includes-items">
+              <p class="yellow">Level: Intermediate</p>
+              <p>OS: GrapheneOS</p>
+              <p>OS Family: Android</p>
+              <p class="yellow">Libre: Almost</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://www.nitrokey.com/" target="_blank" rel="noreferrer noopener">Website</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/pinephone-128.png" alt="PinePhone Logo">
+          </div>
+          <h4>PinePhone</h4>
+          <p class="description">
+            The PinePhone is a low cost community driven phone. It is still under heavy development and is currently
+            not comparable to Android. We believe it could be the first affordable fully featured Linux phone, but not
+            yet
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Details</h5>
+            <div class="includes-items">
+              <p class="red">Level: Advanced</p>
+              <p>OS: Mobian, PostmarketOS, etc</p>
+              <p>OS Family: GNU/Linux</p>
+              <p class="yellow">Libre: Almost</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://www.pine64.org/" target="_blank" rel="noreferrer noopener">Website</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/librem5-128.png" alt="Purism Logo">
+          </div>
+          <h4>Librem 5</h4>
+          <p class="description">
+            Purism is a pioneer in the Linux phone market with the Librem 5. They invest heavily in the development of
+            the Linux phone ecosystem. It is available for purchase on their website, but again we do not think it is
+            production ready yet
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Details</h5>
+            <div class="includes-items">
+              <p class="red">Level: Advanced</p>
+              <p>OS: PureOS, other</p>
+              <p>OS Family: GNU/Linux</p>
+              <p class="green">Libre: Yes</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Website</a>
+        </div>
+
+      </div>
+  </section>
+
+  <section class="products alt" id="computers">
+      <h2>Computers</h2>
+      <p class="explanation">
+        Many companies already exist that manufacture freedom respecting devices that you can buy if you are in need of
+        a new computer.
+        This is not a complete list, but we have chosen a few popular options for you to pick from.
+        It is important to mention that Libre BIOS and Hardware is just as important as all the rest. We keep a close
+        eye on the <a class="link" href="https://riscv.org/" target="_blank" rel="noreferrer noopener">RISC-V CPU</a>,
+        as it could very well replace mobile CPUs in the near future
+      </p>
+      <div class="wrapper">
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/system76.png" alt="System76 Logo">
+          </div>
+          <h4>System76</h4>
+          <p class="description">
+            A company that has been around for a long time. They offer devices that run coreboot as their BIOS and
+            their computers come with PopOS!, an Ubuntu derived distribution supported by System76. You can't go wrong
+            here. Laptops, desktops, servers, they have everything you need
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Details</h5>
+            <div class="includes-items">
+              <p class="green">Level: Beginner</p>
+              <p>OS: PopOS! (Ubuntu based)</p>
+              <p>Products: Server, PC, Laptop</p>
+              <p class="yellow">Libre: Almost</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://system76.com/" target="_blank" rel="noreferrer noopener">Website</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/purism-128.png" alt="Purism Logo">
+          </div>
+          <h4>Purism</h4>
+          <p class="description">
+            Purism is a corporation "with social purpose". They build freedom respecting laptops and desktops with
+            modern hardware like intel CPUs, but a little more focused on privacy and security. Pureboot is also a
+            great security feature
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Details</h5>
+            <div class="includes-items">
+              <p class="green">Level: Beginner</p>
+              <p>OS: PureOS</p>
+              <p>Products: Server, PC, Laptop</p>
+              <p class="yellow">Libre: Almost</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Website</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/raptor-128.png" alt="Raptor Logo">
+          </div>
+          <h4>Raptor</h4>
+          <p class="description">
+            Here is where it gets serious. This company managed to build a computer with both Libre Software and
+            Hardware (including the IBM Power9 open CPU), meaning every bit of code running on the machine is
+            auditable. This is the end goal of the Libre Software mouvement. Unfortunately, it comes at a price...
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Details</h5>
+            <div class="includes-items">
+              <p class="red">Level: Advanced</p>
+              <p class="red">OS: User installed</p>
+              <p>Products: Desktop, Server</p>
+              <p class="blue">Libre: Ultimate</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://www.raptorcs.com/TALOSII/" target="_blank" rel="noreferrer noopener">Website</a>
+        </div>
+
+      </div>
+  </section>
+
+  <section id="call-to-action">
+    <h2>Ready?</h2>
+    <p class="description">
+      Do you hesitate between repairing your computer or buying a new one? Get in touch with us, we will help you make the right choice :)
+    </p>
+    <a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
+  </section>
+
+  <footer>
+    <div class="newsletter">
+      <h5>Subscribe!</h5>
+      <p>We only send important news</p>
+      <form action="/php/newsletter.php" method="get">
+        <input type="text" name="newsletter-language" value="en" hidden>
+        <input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
+        <input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
+        <input type="submit" class="btn btn-1" value="Subscribe">
+      </form>
+    </div>
+    <div class="wrapper">
+      <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+          src="/media/images/git-white.png"></a>
+      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/CC-64.png">
+      </a>
+      <a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/onion-64.png">
+      </a>
+      <a href="/pages/fr/services/reparation.html">
+        <img src="/media/images/quebec.png" alt="Français Québec">
+      </a>
+    </div>
+  </footer>
+</body>
+
+</html>
--- a/pages/fr/confirmation.html
+++ b/pages/fr/confirmation.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Succès! | Page de Confirmation</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css"/>
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+          <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+          <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+          <img src="/media/images/logo.svg" alt="TeleQom Logo">
+          <h2>
+            Tele<span>Q</span>om
+          </h2>
+        </a>
+        <ul id="nav-list">
+          <li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
+        </ul>
+      </nav>
+</header>
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>C'est fait!</h2>
+            <h4>Votre requête a été transmise avec succès</h4>
+            <h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
+            <a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
+        </div>
+    </section>
+</body>
+</html>
--- a/pages/fr/err/403.html
+++ b/pages/fr/err/403.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups (403) | Page d'Accès Refusé</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (403)</h2>
+            <h4>
+                Une erreur
+                <a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank"
+                    rel="noreferrer noopener" class="link">403</a>
+                signifie que cette section n'est pas accessible au serveur web
+            </h4>
+            <h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
+            <a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/fr/err/404.html
+++ b/pages/fr/err/404.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups (404) | Erreur de Page Introuvable</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (404)</h2>
+            <h4>Une erreur
+                <a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank"
+                    rel="noreferrer noopener" class="link">404</a>
+                signifie que notre serveur ne trouve pas la page que vous avez demandé
+            </h4>
+            <h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
+            <a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/fr/err/500.html
+++ b/pages/fr/err/500.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups (500) | Erreur Interne du Serveur</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups (500)</h2>
+            <h4>
+                Une erreur
+                <a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank" rel="noreferrer noopener"
+                    class="link">500</a>
+                signifie que notre serveur a rencontré une faute interne, nous nous excusons de cet inconvénient. Il est
+                possible que ce serveur soit en maintenance. Si le problème persiste<br />
+                <a href="/pages/fr/index.html#contact" class="link">Contactez-Nous</a>
+            </h4>
+            <h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
+            <a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/fr/err/contact.html
+++ b/pages/fr/err/contact.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups | Erreur du Formulaire de Contact</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups</h2>
+            <h4>Une erreur est survenue lors de l'envoi de votre message, s'il vous plaît réessayez plus tard. Nous nous excusons de cet inconvénient.</h4>
+            <h4>Si le problème persiste, appelez-nous au <br/>1 (833) PRJ-TL<span>Q</span>M</h4>
+            <h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
+            <a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/fr/err/general.html
+++ b/pages/fr/err/general.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name='robots' content='noindex,follow' />
+    <title>Oups | Erreur du Formulaire de Contact</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/errors.css" />
+</head>
+<header>
+    <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+            <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+            <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+            <img src="/media/images/logo.svg" alt="TeleQom Logo">
+            <h2>
+                Tele<span>Q</span>om
+            </h2>
+        </a>
+        <ul id="nav-list">
+            <li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
+        </ul>
+    </nav>
+</header>
+
+<body>
+    <!-- Bypass FOUC on firefox -->
+    <script>0</script>
+    <section id="message">
+        <div class="wrapper">
+            <h2>Oups</h2>
+            <h4>
+                Une erreur imprévue est survenue... S'il vous plaît, réessayez plus tard. Nous nous excusons de cet
+                inconvénient. Il est possible que ce serveur soit en maintenance. Si le problème persiste<br />
+                <a href="/pages/fr/index.html#contact" class="link">Contactez-Nous</a>
+            </h4>
+            <h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
+            <a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
+        </div>
+    </section>
+</body>
+
+</html>
--- a/pages/fr/index.html
+++ b/pages/fr/index.html
@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Le Projet TeleQom | Accueil</title>
+  <meta name="description" content="TeleQom est un organsime à but non-lucratif Québécois qui offre des 
+      services informatiques pour financer ses nombreux projets de Logiciels Libres" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/index.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src="/media/images/menu.png" alt="Menu Icon">
+      </label>
+      <label for="navbar-menu-btn" id="menu-btn-close">
+        <img src="/media/images/close.png" alt="Menu Icon">
+      </label>
+      <a href="#top" class="logo">
+        <img src="/media/images/logo.svg" alt="TeleQom Logo">
+        <h2>
+          Tele<span>Q</span>om
+        </h2>
+      </a>
+      <ul id="nav-list">
+        <li><a class="btn btn-2" href="#apropos">À Propos</a></li>
+        <li><a class="btn btn-2" href="#services">Services</a></li>
+        <li><a class="btn btn-2" href="#projets">Projets</a></li>
+        <li><a class="btn btn-2" href="#contact">Contact</a></li>
+        <li><a class="btn btn-2" href="/pages/en/index.html">EN</a></li>
+      </ul>
+      <div id="qonsole-btn">
+        <a href="https://qonsole.teleqom.org"><img src="/media/images/qonsole.png" alt="Qonsole"></a>
+      </div>
+    </nav>
+  </header>
+  <section id="welcome">
+    <h1 class="welcome-title">
+      Le Projet Tele<span>Q</span>om
+    </h1>
+    <h4 class="welcome-text">
+      La Télécommunication aux Valeurs <span>Québécoises</span>
+    </h4>
+    <a href="#apropos" id="scroll-down">
+      <img src="/media/images/down.png" alt="Icone defilement">
+    </a>
+  </section>
+  <section class="about" id="apropos">
+    <h2>À Propos</h2>
+    <div>
+      <h3>
+        Tele<span>Q</span>om, c'est quoi?
+      </h3>
+      <p>
+        Le Projet Tele<span>Q</span>om, organisme à but non-lucratif Québécois, est un idéal. Nous cherchons à
+        restaurer les valeurs éthiques et morales dans les applications que nous utilisons tous quotidiennement. Que
+        ce soit votre plateforme sociale, de commerce en ligne, de courriel ou même de messagerie, tous ou presque
+        contiennent aujourd'hui des logiciels espions. Des robots lisent vos courriels et vos messages, et ils vous
+        écoutent même parler. C'est à notre avis inacceptable voir illégal mais vous avez accepté ces termes à la mise
+        en marche de vos appareils et services, c'est pourquoi la loi est impuissante actuellement. Faute
+        d'alternative, nous suivons tous ces géants des technologies aux mauvaises intentions. C'est en réponse à ces
+        graves manquements d'humanité que Tele<span>Q</span>om est né.
+      </p>
+    </div>
+    <div>
+      <h3>
+        Logiciels Libres
+      </h3>
+      <p>
+        Chez Tele<span>Q</span>om, nos projets embrassent une philosophie qui existe déjà
+        depuis longtemps, ils sont constitués uniquement de Logiciels Libres. De façon simple, un programme est un peu
+        comme une recette de cuisine. Un Logiciel Libre donne un accès complet au code source (la recette, que nous
+        appelons chez Tele<span>Q</span>om notre <a href="https://qode.teleqom.org" target="_blank"
+          rel="noreferrer noopener" class="link">Qode</a>) et la permission de l'auditer pour découvrir des failles de
+        sécurité, le modifier ou l'améliorer avec la seule condition de rendre également publique ce qui a été
+        amélioré. Les logiciels de type propriétaire par contre, c'est tout à fait le contraire. Ils dissimulent le
+        fonctionnement, et interdisent la vérification de leur code source. Il est donc très difficile d'identifier ce
+        que ce dernier fait vraiment de vos informations.
+      </p>
+    </div>
+    <div>
+      <h3>
+        La Véritable Différence
+      </h3>
+      <p>
+        Nos projets sont conçus de manière à ce qu'il nous soit impossible de vous espionner. Ce que vous faites dans
+        votre vie ne nous concerne pas. Des logiciels propriétaires d'intelligence artificielle peuvent prévoir vos
+        comportements, modifier vos habitudes et votre pensée juste avec ces données que nous croyons tous
+        innoffensives. Des compagnies comme <a
+          href="https://fr.wikipedia.org/wiki/Scandale_Facebook-Cambridge_Analytica" target="_blank"
+          rel="noreferrer noopener" class="link">Cambridge Analytica</a> ont déjà interféré dans les élections aux
+        États-Unis, et ce n'est que le début. <a href="https://fr.wikipedia.org/wiki/Pegasus_(logiciel_espion)"
+          target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> donne accès aux plus fortunés à la vie
+        virtuelle complète de n'importe qui, à l'aide de failles de sécurité dans les logiciels. Il est donc impératif
+        de se débarasser de ses chaînes, et c'est ici que Tele<span>Q</span>om entre en ligne de compte.
+      </p>
+    </div>
+    <div>
+      <h3>
+        La Télécommunication
+      </h3>
+      <p>
+        Ce n'est pas joli quand on regarde de plus près comment ces grandes corporations nous utilisent. Mais plutôt
+        que de baisser les bras, nous avons décidé d'y remédier avec le peu de liberté qu'il nous reste. Nous
+        commencerons par purifier les télécommunications (courriel, social, messagerie, vidéoconférence et téléphone).
+        Par la suite, <span>Q</span>ommerce, qui servira aussi à subventionner l'infrastructure et le développement de
+        nos projets. Et enfin, une application de vote, baptisée Politi<span>Q</span>, qui redonnera le pouvoir au
+        peuple. N'oubliez pas, Tele<span>Q</span>om ne vend pas vos données et est un organisme à but non-lucratif, il
+        est donc nécessaire à sa survie de recevoir des dons et des subventions. Nous faisons notre possible pour
+        offrir ces projets gratuitement, mais ce n'est certainement pas évident. Les profits générés par les services
+        suivants sont tous investis dans le développement de nos projets!
+      </p>
+    </div>
+  </section>
+  <section class="services" id="services">
+    <h2>Nos Services</h2>
+    <div class="service">
+      <img src="/media/images/code.png" alt="code logo">
+      <div class="service-content">
+        <h4>Développement</h4>
+        <p>
+          Un site web, une application mobile, une application de commerce en ligne, peu importe.
+          Tele<span>Q</span>om se sert autant que possible de Logiciels Libres pour construire votre projet. Ceci
+          résulte en une application qui respecte ses utilisateurs, est plus sécuritaire, plus stable et beaucoup
+          moins dispendieuse.
+        </p>
+        <a class="btn btn-1" href="/pages/fr/services/developpement.html">Plus</a>
+      </div>
+    </div>
+    <div class="service">
+      <img src="/media/images/repair.png" alt="repair logo">
+      <div class="service-content">
+        <h4>Réparation</h4>
+        <p>
+          Toujours dans la même optique, nous aimons donner une deuxième vie à votre matériel. Écran brisée? Votre
+          batterie
+          de portable de charge plus? Votre ordinateur ne démarre plus ou est devenu lent? Nous pouvons régler ça!
+        </p>
+        <a class="btn btn-1" href="/pages/fr/services/reparation.html">Plus</a>
+      </div>
+    </div>
+    <div class="service">
+      <img src="/media/images/support.png" alt="support logo">
+      <div class="service-content">
+        <h4>Soutien</h4>
+        <p>
+          Du soutien technique payant est disponible pour la plupart des troubles informatiques que vous aurez.
+          Chez Tele<span>Q</span>om, nous aimons nous amuser avec la technologie. Que ce soit votre réseau wi-fi,
+          votre navigateur a besoin d'une mise à jour, vous ne pouvez plus mettre à jour vos Apps sur votre téléphone,
+          peu importe. Contactez-nous, il est possible que nous puissions vous aider! :)
+        </p>
+        <a class="btn btn-1" href="#contact">Contact</a>
+      </div>
+    </div>
+    <div class="service">
+      <img src="/media/images/installation.png" alt="installation logo">
+      <div class="service-content">
+        <h4>Installation</h4>
+        <p>
+          Il est maintenant possible de remplacer la plupart des logiciels propriétaires malveillants par des
+          Logiciels Libres. Votre système d'exploitation d'ordinateur peut être remplacé par un GNU/Linux tel que <a
+            href="https://www.linuxmint.com/" target="_blank" rel="noreferrer noopener" class="link">Linux Mint</a>.
+          Certains téléphones cellulaires sont supportés par <a href="https://grapheneos.org/" target="_blank"
+            rel="noreferrer noopener" class="link">GrapheneOS</a>, et il sera possible de passer à un téléphone Libre
+          tel que le <a href="https://puri.sm/products/librem-5/" target="_blank" rel="noreferrer noopener"
+            class="link">Librem 5</a> ou bien le <a href="https://www.pine64.org/pinephonepro/" target="_blank"
+            rel="noreferrer noopener" class="link">Pine Phone</a>. <a href="https://fr.libreoffice.org/" target="_blank"
+            rel="noreferrer noopener" class="link">Libre Office</a> est une excellente alternative
+          pour vos documents de tout genre. Pour le traitement d'image, <a href="https://www.gimp.org/" target="_blank"
+            rel="noreferrer noopener" class="link">GIMP</a> est souvent même un premier choix!
+        </p>
+        <a class="btn btn-1" href="/pages/fr/services/installation.html">Plus</a>
+      </div>
+    </div>
+  </section>
+  <section class="projects" id="projets">
+      <h2>Nos Projets</h2>
+      <p class="overview">Les projets suivants sont ou seront disponibles à partir de votre
+        <span>Q</span>onsole. Repassez voir plus tard si le Statut de votre projet préféré a
+        changé!
+      </p>
+      <div class="wrapper">
+        <div class="project">
+          <img src="/media/images/qonsole.png" alt="Qonsole Logo">
+          <h4><span>Q</span>onsole</h4>
+          <p class="description">
+            Le tableau de bord principal d'où vous accédez à toutes vos applications. La <span>Q</span>onsole est en
+            charge de vous afficher le tout en un même endroit, de façon uniforme et simple.
+          </p>
+          <p>
+            <p class="status dev">En Développement</p>
+          </p>
+        </div>
+        <div class="project">
+          <img src="/media/images/disq.png" alt="DisQ Logo">
+          <h4>Dis<span>Q</span></h4>
+          <p class="description">
+            C'est ici que vous storez toutes vos données, c'est votre disque dur personnel mais hébergé sur un serveur
+            externe. Le tout accessible seulement par vous, le serveur ne peut voir vos données.
+          </p>
+          <p>
+            <p class="status dev">En Développement</p>
+          </p>
+        </div>
+        <div class="project">
+          <img src="/media/images/interqom.png" alt="InterQom Logo">
+          <h4>Inter<span>Q</span>om</h4>
+          <p class="description">
+            Inter<span>Q</span>om est le remplacement sain aux alternatives de réseaux sociaux. Vos conversations sont
+            entièrement privées et même nous n'avons pas accès à vos données.
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qommerce.png" alt="Qommerce Logo">
+          <h4><span>Q</span>ommerce</h4>
+          <p class="description">
+            La centrale de l'échange et du commerce en ligne. Commerces locaux et particuliers s'y retrouvent pour
+            partager le fruit de leur labeur. Acceptant la cryptomonnaie ainsi que l'argent Canadien.
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qonvo.png" alt="Qonvo Logo">
+          <h4><span>Q</span>onvo</h4>
+          <p class="description">
+            La messagerie instantanée est la façon la plus simple de communiquer avec nos compatriotes. Ce projet
+            inclus les appels audio et vidéo, le tout chiffré de vous à vos destinataires.
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qourrier.png" alt="Qourrier Logo">
+          <h4><span>Q</span>ourrier</h4>
+          <p class="description">
+            Le portail d'accès à vos courriels, à partir de votre <span>Q</span>onsole. Les courriels entre
+            utilisateurs sont entièrement chiffrés et nous supportons la plupart des fournisseurs.
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/politiq.png" alt="PolitiQ Logo">
+          <h4>Politi<span>Q</span></h4>
+          <p class="description">
+            Tele<span>Q</span>om est une table ronde où tous les Québécois sont invités, votre opinion sera enfin
+            entendue auprès du gouvernement. La réelle démocratie à portée de clavier!
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qontact.png" alt="Qontact Logo">
+          <h4><span>Q</span>ontact</h4>
+          <p class="description">
+            Le bon vieux carnet d'adresse. Ici vous storez vos informations de contact, courriel, téléphone,
+            identifiants de <span>Q</span>onvo ou Inter<span>Q</span>om, et plus encore.
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
+          <h4><span>Q</span>alendrier</h4>
+          <p class="description">
+            On a tous besoin d'un calendrier. Ici vous pouvez gérer votre vie personnelle ou professionnelle, céduler
+            un rendez-vous avec un autre utilisateur et même voir vos événements sur Inter<span>Q</span>om.
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+        <div class="project">
+          <img src="/media/images/qable.png" alt="Qable Logo">
+          <h4><span>Q</span>able</h4>
+          <p class="description">
+            Une plateforme de diffusion de contenu audio ou vidéo, qui utilise la technologie de <a
+              href="https://fr.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
+              class="link">Torrent</a> pour alléger la charge sur les serveurs et donc les frais qui en découlent. Plus
+            il y a d'utilisateurs, plus c'est rapide!
+          </p>
+          <p class="status hold">En Attente</p>
+        </div>
+      </div>
+  </section>
+  <section id="contact">
+    <h2>Contact</h2>
+    <form action="/php/contact.php" method="get" id="contact-form">
+      <input type="text" name="contact-language" value="fr" hidden>
+      <input type="text" name="contact-name" placeholder="Nom" id="contact-first-name" required>
+      <input type="email" name="contact-email" placeholder="Courriel" id="contact-email" required>
+      <input class="catch" type="email" name="contact-email-2" placeholder="Courriel" id="contact-email-2">
+      <textarea name="contact-message" id="contact-message" placeholder="Message..." cols="30" rows="10" required></textarea>
+      <input class="btn btn-1" type="submit" value="Envoyer">
+    </form>
+  </section>
+  <footer>
+    <div class="newsletter">
+      <h5>Abonnez-vous!</h5>
+      <p>Nous vous enverrons seulement les nouvelles importantes</p>
+      <form action="/php/newsletter.php" method="get">
+        <input type="text" name="newsletter-language" value="fr" hidden>
+        <input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
+        <input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel" id="newsletter-email-2">
+        <input type="submit" class="btn btn-1" value="S'abonner">
+      </form>
+    </div>
+    <div class="wrapper">
+      <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+          src="/media/images/git-white.png"></a>
+      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/CC-64.png">
+      </a>
+      <a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/onion-64.png">
+      </a>
+      <a href="/pages/en/index.html">
+        <img src="/media/images/canada.png" alt="English Canada">
+      </a>
+    </div>
+  </footer>
+</body>
+
+</html>
--- a/pages/fr/services/developpement.html
+++ b/pages/fr/services/developpement.html
@ -0,0 +1,384 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Le Project TeleQom | Services de Développement</title>
+    <meta name="description" content="Les services de développement de TeleQom inclus le développement de Logiciel Libres de site web, d'application mobiles , de commerces en ligne tel qu'OpenCart et de Plateforme de Gestion de Contenu tel que Wordpress"/>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pages/development.css"/>
+  </head>
+  <body>
+    <!-- FOUC -->
+    <script>0</script>
+    <header>
+      
+      <nav>
+        <input type="checkbox" id="navbar-menu-btn" />
+        <label for="navbar-menu-btn" id="menu-btn-open">
+          <img src="/media/images/menu.png" alt="Menu Icon">
+        </label>
+        <label for="navbar-menu-btn" id="menu-btn-close">
+          <img src="/media/images/close.png" alt="Menu Icon">
+        </label>
+        <a href="/pages/fr/index.html" class="logo">
+          <img src="/media/images/logo.svg" alt="TeleQom Logo">
+          <h2>
+            Tele<span>Q</span>om
+          </h2>
+        </a>
+        <ul id="nav-list">
+          <li><a class="btn btn-2" href="#sites-web">Sites Web</a></li>
+          <li><a class="btn btn-2" href="#e-commerce">E-commerce</a></li>
+          <li><a class="btn btn-2" href="#cms">CMS</a></li>
+          <li><a class="btn btn-2" href="#autres">Autres</a></li>
+          <li><a class="btn btn-2" href="/pages/en/services/developpement.html">EN</a></li>
+          <li>
+            <div id="mobile-nav-action-btn">
+              <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+            </div>
+          </li>
+        </ul>
+        <div id="navbar-action-btn">
+          <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+        </div>
+      </nav>
+    </header>
+
+    <section id="intro">
+            <h2>Services de Développement</h2>
+            <p>
+              Nous offrons plusieurs services de développement qui pourraient vous aider à démarrer ou améliorer votre projet.
+              Chez Tele<span>Q</span>om,
+              nous préférons une approche plus humaine. Lorsque vous vous sentirez prêt, contactez-nous et nous vous
+              offrirons la meilleure option selon vos besoins.
+              Oh et n'oubliez pas, tous les profits générés sont investis dans nos projets de Logiciels Libres! En nous
+              choisissant, vous vous aidez vous même ainsi que la communauté :)
+            </p>
+    </section>
+    <section class="products" id="sites-web">
+        <h2>Sites Web</h2>
+        <p class="explanation">
+          Les sites web sont une façon simple d'apparaître en ligne. Ils vous permettent d'être trouvé par les moteurs de recherche. Vous pouvez y partager quelques produits et y laisser vos informations de contact. Vous pouvez expliquer ce que votre entreprise ou organisme fait et donner une idée générale de pourquoi elle existe. Ce site est un exemple d'un site web de base!
+        </p>
+        <div class="wrapper">
+          <div class="product">
+            <div>
+                <h4>Site Web - Base</h4>
+                <p class="description">Site web simple, parfait pour les professionnels, les compagnies de construction, etc </p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5>Ensemble</h5>
+              <div class="includes-items">
+                <p>Modèle Tele<span>Q</span>om<br>- OU -<br>Votre Modèle Bootstrap 5</p>
+                <p>Développeur: <span class="green">3 Heures</span></p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Micro</h5>
+              <div class="includes-items">
+              <p>1GB</p>
+              <p>5 Courriels</p>
+              <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">100$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">60$ / An</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Site Web - Complet</h4>
+                <p class="description">Un site professionnel, avec plusieurs fonctionnalités utiles</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5>Ensemble</h5>
+              <div class="includes-items">
+              <p>Modèle Tele<span>Q</span>om<br>- OU -<br>Votre Modèle Bootstrap 5</p>
+              <p>Développeur: <span class="green">5 Heures</span></p>
+              <p>Infolettre</p>
+              <p>Formulaire Contact</p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+              <p>5GB</p>
+              <p>25 Courriels</p>
+              <p>cPanel</p>
+              <p>Base de Données</p>
+              <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">250$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Site Web - Personnalisé</h4>
+                <p class="description">Du développement entièrement personnalisé. Super si vous ne désirez que le site web et préférez gérer votre hébergement, formattage d'image et tout le reste vous même.</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <div class="includes-items">
+              <p>Adapté à vos besoin</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Développeur: <span class="green">50$ / Heure</span></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="products alt" id="e-commerce">
+        <h2>E-Commerce</h2>
+        <p class="explanation">
+          Les plateformes de commerce en ligne Libres sont les meilleures pour réduire les coûts de votre commerce en ligne.
+          Elles sont utilisées et maintenues par des milliers de personnes ce qui résulte en une plateforme stable et sécurisée.
+          <span>Q</span>ommerce pourra être connectée aux applications suivantes grâce à un "plugin" pour vous offrir une
+          meilleure visibilité!
+        </p>
+        <div class="wrapper">
+          <div class="product bg">
+            <div>
+                <h4>OpenCart</h4>
+                <p class="description">
+                  Commerce OpenCart simple, excellent pour tout type de commerce.
+                  La Bouti<span>Q</span> Tele<span>Q</span>om est une instance OpenCart
+                </p>
+            </div>
+            <hr>
+            <div class="includes">
+              <div class="includes-items">
+                <p>Développeur: <span class="green">3 Heures</span></p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Courriels</p>
+                <p>cPanel</p>
+                <p>Base de Données</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">150$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+            </div>
+          </div>
+          <div class="product bg-2">
+            <div>
+                <h4>WooCommerce</h4>
+                <p class="description">Une instance Wordpress modifiée afin de devenir un commerce en ligne complet</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <div class="includes-items">
+                <p>Développeur: <span class="green">3 Heures</span></p>
+              </div>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Courriels</p>
+                <p>cPanel</p>
+                <p>Base de Données</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">200$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section class="products" id="cms">
+        <h2>CMS</h2>
+        <p class="explanation">
+          Une plateforme de gestion de contenu, en anglais "Content Management System" ou CMS, est utile si vous planifiez
+          changer votre contenu régulièrement.
+          Elle vous permet de personnaliser vous-même votre site avec aucune expérience en programmation (ou presque), ce
+          qui vous permet de réaliser des économies en frais de développement. Toutefois, elle requiert tout de même un
+          minimum de connaissance technique et peut devenir plus difficile à maintenir à long terme, résultant en une
+          mauvaise
+          expérience pour vos clients.
+          Tele<span>Q</span>om offre tout de même du support payant si vous vous retrouvez bloqué, c'est donc quand même
+          une
+          excellente façon de démarrer votre projet.
+        </p>
+        <div class="wrapper">
+          <div class="product">
+            <div>
+                <h4>Wordpress</h4>
+                <p class="description">Installation de base de votre instance Wordpress avec tout ce dont vous avez besoin</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Courriels</p>
+                <p>cPanel</p>
+                <p>Base de Données</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">50$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Drupal</h4>
+                <p class="description">Drupal est une autre plateforme CMS Libre qui vous aidera à démarrer</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Courriels</p>
+                <p>cPanel</p>
+                <p>Base de Données</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">50$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>Joomla</h4>
+                <p class="description">Joomla aussi est une autre solution CMS Libre populaire</p>
+            </div>
+            <hr>
+            <div class="includes">
+              <h5><span>Q</span>ube Mini</h5>
+              <div class="includes-items">
+                <p>5GB</p>
+                <p>25 Courriels</p>
+                <p>cPanel</p>
+                <p>Base de Données</p>
+                <p>HTTPS</p>
+              </div>
+            </div>
+            <hr>
+            <div class="qontribution">
+              <h5><span>Q</span>ontribution</h5>
+              <p>Ensemble: <span class="green">50$</span></p>
+              <p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="products alt" id="autres">
+        <h2>Autres</h2>
+        <p class="explanation">
+          Les items dans cette catégorie n'ont pas de prix puisqu'il est impossible d'estimer avant d'avoir vu
+          l'étendu de votre projet. Tout est possible bien sûr, toutefois vous devrez entrer en contact avec nous pour une
+          évaluation
+        </p>
+        <div class="wrapper">
+          <div class="product">
+            <div>
+                <h4>Applications Web</h4>
+                <p class="description">
+                  Vous avez donc une excellente idée de plateforme de distribution de Podcast. Ce serait donc une
+                  Application Web puisqu'elle requiert une base de données et plusieurs éléments entièrement personnalisés
+                </p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>IoT</h4>
+                <p class="description">
+                  IoT, de l'anglais Internet of Things comprend tous les petits appareils tel que des capteurs et jauges.
+                  Une machine qui alimente les animaux ou des capteurs de température, c'est du IoT
+                </p>
+            </div>
+          </div>
+          <div class="product">
+            <div>
+                <h4>App Mobile</h4>
+                <p class="description">
+                  Tele<span>Q</span>om offre le développement d'App Mobile, toutefois nous vous recommandons de choisir la
+                  voie de l'Application Web Progressive.
+                  Une PWA offre la plupart des fonctionnalités d'une App "Native" et fonctionne sur la grande majorité des
+                  appareils mobile. La configuration est minime si vous avez déjà un site web dans la plupart des cas.
+                  Il est toutefois possible qu'une App "Native" soit requise pour votre projet
+                </p>
+            </div>
+          </div>
+        </div>
+    </section>
+    <section id="call-to-action">
+      <h2>Prêt?</h2>
+      <p class="description">
+        Vous trouvez certaines informations complexes ou vous êtes prêt pour les prochaines étapes? C'est le moment de
+        nous contacter! Soyez sans crainte, nous vous aiderons à prendre la décision éthique :)
+      </p>
+      <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+    </section>
+    
+    <footer>
+      <div class="newsletter">
+        <h5>Abonnez-vous!</h5>
+        <p>Nous vous enverrons seulement les nouvelles importantes</p>
+        <form action="/php/newsletter.php" method="get">
+          <input type="text" name="newsletter-language" value="fr" hidden>
+          <input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
+          <input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel id="newsletter-email-2">
+          <input type="submit" class="btn btn-1" value="S'abonner">
+        </form>
+      </div>
+      <div class="wrapper">
+        <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+            src="/media/images/git-white.png"></a>
+        <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+          <img src="/media/images/CC-64.png">
+        </a>
+        <a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
+          <img src="/media/images/onion-64.png">
+        </a>
+        <a href="/pages/en/services/development.html">
+          <img src="/media/images/canada.png" alt="English Canada">
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
--- a/pages/fr/services/installation.html
+++ b/pages/fr/services/installation.html
@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Le Projet TeleQom | Service d'Installation</title>
+  <meta name="description"
+    content="Le Projet TeleQom offre un service d'installation de Logiciels Libres. Nous installons des systèmes d'exploitation et des apps de tout genres. Venez voir!" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/installation.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src="/media/images/menu.png" alt="Menu Icon">
+      </label>
+      <label for="navbar-menu-btn" id="menu-btn-close">
+        <img src="/media/images/close.png" alt="Menu Icon">
+      </label>
+      <a href="/pages/fr/index.html" class="logo">
+        <img src="/media/images/logo.svg" alt="TeleQom Logo">
+        <h2>
+          Tele<span>Q</span>om
+        </h2>
+      </a>
+      <ul id="nav-list">
+        <li><a class="btn btn-2" href="#os">OS</a></li>
+        <li><a class="btn btn-2" href="#apps">Apps</a></li>
+        <li><a class="btn btn-2" href="/pages/en/services/installation.html">EN</a></li>
+        <li>
+          <div id="mobile-nav-action-btn">
+            <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+          </div>
+        </li>
+      </ul>
+      <div id="navbar-action-btn">
+        <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+      </div>
+    </nav>
+  </header>
+
+  <section id="intro">
+    <h2>Services d'Installation</h2>
+    <p>
+      Les logiciels propriétaires sont devenus une véritable menace pour nos droits et libertés. Nous devons nous
+      diriger vers les Logiciels Libres (ouverts, écrit par la communauté, recette de code transparente, partageable
+      et contrôlé par l'utilisateur). Nos ordinateurs et serveurs privés chez Tele<span>Q</span>om n'utilisent que des
+      Logiciels Libres, alors vous le pouvez aussi! Ces petites décisions impacterons sérieusement la vie des
+      générations futures. Ce n'est pas le bon endroit pour en discuter, mais remplacer les logiciels qui vous
+      espionnent vous et vos proches est un très bon point de départ! Notez que ces Logiciels Libres sont gratuits,
+      vous pouvez donc tout installer gratuitement vous-même si vous le voulez. La demande de Qontribution ne sert qu'à
+      couvrir les honoraires de notre employé qui l'installera pour vous, ainsi qu'à financer nos projets.
+    </p>
+  </section>
+
+  <section class="products" id="os">
+    <h2>Systèmes d'Exploitation</h2>
+    <p class="explanation">
+      C'est quoi? Un <a href="https://fr.wikipedia.org/wiki/Operating_system" target="_blank"
+      rel="noreferrer noopener" class="link">système d'exploitation</a>, aussi appelé un OS, est un regroupement de logiciels qui intéragissent
+        avec votre matériel (les composantes physiques de votre ordinateur). C'est sans doute la plus grande pièce de
+        code qui s'execute sur votre machine, et un OS corrompu peut vous espionner et faire ce qu'il veut de vos
+        données et applications sur votre système. Nous vous recommandons <a
+          href="https://www.whonix.org/wiki/Host_Operating_System_Selection" target="_blank" rel="noreferrer noopener"
+          class="link">cette page du Projet Whonix</a>, un project connu pour sa sécurité et son accent sur la vie
+        privée pour comprendre pourquoi GNU/Linux est un excellent choix. Voici quelques exemples, mais il en existe
+        beaucoup d'autres!
+    </p>
+    <div class="wrapper">
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/linux-mint-96.png" alt="Linux Mint Logo">
+        </div>
+        <h4>Linux Mint</h4>
+        <p class="description">
+          Linux Mint, tout comme Ubuntu (son parent), est compatible avec plusieurs applications propriétaires ce
+          qui en fait un excellent choix pour débutant qui quitte les OS commerciaux. Son bureau ressemble
+          beaucoup à Windows en terme d'emplacement général. C'est notre premier choix pour ceux qui quittent Windows 10
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p class="green">Niveau: Débutant</p>
+            <p>Bureau: Cinnamon</p>
+            <p>Similaire: Windows</p>
+            <p>Paquets: Debian (.deb)</p>
+            <p class="yellow">Libre: Presque</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://linuxmint.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/ubuntu-logo32.png" alt="Ubuntu Logo">
+        </div>
+        <h4>Ubuntu</h4>
+        <p class="description">
+          Ubuntu &reg;, "Humanité" en langue Africaine, est une approche plus humaine d'un OS. Il est supporté
+          par Canonical &trade; qui est bien (ou mal) connu dans l'univers Linux. Tout comme Linux Mint, il est plus flexible
+          en terme des logiciels disponibles, donc parfait pour un débutant. Son bureau est GNOME, qui ressemble un
+          peu plus à MacOS
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p class="green">Niveau: Débutant</p>
+            <p>Bureau: GNOME</p>
+            <p>Similaire: MacOS</p>
+            <p>Paquets: Debian (.deb)</p>
+            <p class="yellow">Libre: Presque</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://ubuntu.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/debian-128.png" alt="Debian Logo">
+        </div>
+        <h4>Debian</h4>
+        <p class="description">
+          La prochaine étape est le parent d'Ubuntu et Linux Mint, Debian. Debian est connu pour sa stabilité, sa
+          sécurité et sa liberté. Ici rien ne vous empêche d'installer des logiciels propriétaire si vous le
+          désirez, mais ce n'est pas disponible par défaut. C'est notre distribution de choix chez
+          Tele<span>Q</span>om.
+          Debian vient également en plusieurs saveurs, il peut ressembler à n'importe quel OS commercial
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p class="yellow">Niveau: Intermédiaire</p>
+            <p>Bureau: GNOME</p>
+            <p>Similaire: Plusieurs</p>
+            <p>Paquets: Debian (.deb)</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.debian.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Qubes.png" alt="Qubes Logo">
+        </div>
+        <h4>Qubes</h4>
+        <p class="description">
+          Celui-ci diffère des autres choix puisque ce n'est pas réellement un système d'exploitation, c'est plutôt
+          un environnement qui lance plusieurs OS à la fois afin de séparer vos tâches. Il est plus difficile à
+          apprendre que les autres, et demande plus de connaissances techniques et un meilleur ordinateur
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p class="red">Niveau: Avancé</p>
+            <p>Bureau: XFCE</p>
+            <p>Similaire: Rien</p>
+            <p>Paquets: Debian (.deb), RedHat (.rpm)</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">50$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.qubes-os.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+    </div>
+  </section>
+
+  <section class="products alt" id="apps">
+    <h2>Applications</h2>
+    <p class="explanation">
+      Cette section pourrait être énorme. L'univers Linux comprends tellement de choix d'Applications, il est
+      impossible de tous les mentionner ici. Nous avons fait une liste de celles que la plupart des gens utilisent
+      quotidiennement. Allons-y!
+    </p>
+    <div class="wrapper">
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/libreoffice.png" alt="LibreOffice Logo">
+        </div>
+        <h4>Libre Office</h4>
+        <p class="description">
+          Libre Office est un premier choix pour vos applications de bureau. Il contient un éditeur de text
+          compatible avec Word, un éditeur de feuille de calcul compatible avec Excel, et bien plus encore
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Suite Office</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://fr.libreoffice.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/gimp.png" alt="GIMP Logo">
+        </div>
+        <h4>GIMP</h4>
+        <p class="description">
+          GIMP (Programme de Manipulation d'Image GNU) a la plupart des fonctionnalités que vous pouvez avoir de
+          besoin en ce qui a trait à la manipulation d'image. Il y a tellement d'options, il est possible que vous
+          vous sentiez un peu perdu au début
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: PhotoShop</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Inkscape.png" alt="Inkscape Logo">
+        </div>
+        <h4>Inkscape</h4>
+        <p class="description">
+          Une autre application populaire pour le traitement d'image, compatible avec les SVG et plusieurs autres
+          formats
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: PhotoShop</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://inkscape.org/fr/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/blender.png" alt="Blender Logo">
+        </div>
+        <h4>Blender</h4>
+        <p class="description">
+          Blender est une des applications les plus utilisée dans le monde pour le modelage 3D, l'animation et plus
+          encore
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Cinema 4D, SolidWorks</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.blender.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Firefox.png" alt="Firefox Logo">
+        </div>
+        <h4>Firefox</h4>
+        <p class="description">
+          Votre navigateur internet propriétaire est probablement le pire logiciel espoin sur votre ordinateur.
+              Firefox est ancien, bien connu, stable bien supporté, plein de fonctionnalités et respecte la vie privée
+              et la liberté. C'est notre premier choix!
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Chrome, Edge</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.mozilla.org/fr/firefox/" target="_blank"
+          rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Chromium.png" alt="Chromium Logo">
+        </div>
+        <h4>Chromium</h4>
+        <p class="description">
+          Chromium est le coeur des navigateurs Chrome et Edge. Cette version ne contient pas de logiciel
+          propriétaire mais conserve tout de même ses fonctionnalités
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Chrome, Edge</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.chromium.org/Home/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/codium.png" alt="Codium Logo">
+        </div>
+        <h4>Codium</h4>
+        <p class="description">
+          Codium ou VSCodium est la version Libre du populaire éditeur de code, appartenant maintenant à Microsoft
+          et équipé de télémétrie (un autre mot pour espionnage) qui se nomme Visual Studio Code. Cette version
+          contient uniquement la portion de Logiciel Libre. Nous l'utilisons quotidiennement chez
+          Tele<span>Q</span>om
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: VSCode, JetBrains</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://vscodium.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Rhythmbox.png" alt="Rhythmbox Logo">
+        </div>
+        <h4>Rhythmbox</h4>
+        <p class="description">
+          Un lecteur audio universel. Il peut lire des podcasts ou des fichiers audio locaux, tous ce que vous avez
+          de besoin d'une application de musique
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: iTunes, WMP</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://wiki.gnome.org/Apps/Rhythmbox/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/vlc.png" alt="VLC Logo">
+        </div>
+        <h4>VLC Player</h4>
+        <p class="description">
+          Ne laissez pas le cône vous faire douter, cette application n'est pas en construction! C'est un
+          excellent lecteur média, autant audio que vidéo
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: iTunes, WMP</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.videolan.org/index.fr.html" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/mattermost.png" alt="Mattermost Logo">
+        </div>
+        <h4>Mattermost</h4>
+        <p class="description">
+          Mattermost est un logiciel IRC de chat avec un bel interface. Utilisé surtout pour les communications au
+          bureau ainsi que pour la productivité, il est rempli de fonctionnalités
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Slack, Teams</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://mattermost.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/transmission.png" alt="Transmission Logo">
+        </div>
+        <h4>Transmission</h4>
+        <p class="description">
+          Un client BitTorrent Libre et simple pour partager des fichiers sur internet. C'est l'ultime expression de la
+          communauté en logiciel. Il est excellent dans le partage de gros fichiers puisqu'il devient plus
+          rapide plus il y a de personnes qui partage le fichier. Vous pouvez télécharger la plupart des
+          distributions Linux avec Transmission, c'est plus rapide!
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: uTorrent, Vuze</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://transmissionbt.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/signal.png" alt="Signal Logo">
+        </div>
+        <h4>Signal</h4>
+        <p class="description">
+          Signal est une application mobile (et maintenant Linux aussi) de pointe pour la messagerie directe.
+          Contrairement à notre projet Qonvo, elle nécessite un téléphone cellulaire avec un numéro de téléphone
+          valide mais c'est tout de même la meilleure en ce moment
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: WhatsApp, iMessage</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://signal.org/fr/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/Audacity.png" alt="Audacity Logo">
+        </div>
+        <h4>Audacity</h4>
+        <p class="description">
+          Vous avez déjà eu envie de couper un fichier audio? Ou simplement changer son format? Audacity peut tout
+          faire cela et est facile à utiliser
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Garage Band, Audition</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.audacityteam.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+      <div class="product">
+        <div class="img-container">
+          <img src="/media/images/OpenShot.png" alt="OpenShot Logo">
+        </div>
+        <h4>OpenShot</h4>
+        <p class="description">
+          Éditeur de vidéo simple. Transitions, effets, audio, peu importe. Vous pouvez accomplir presque tout avec
+          cette application et son interface est facile à naviguer
+        </p>
+        <hr>
+        <div class="includes">
+          <h5>Détails</h5>
+          <div class="includes-items">
+            <p>Similaire: Premiere, Final Cut</p>
+            <p class="green">Libre: Oui</p>
+          </div>
+        </div>
+        <hr>
+        <div class="qontribution">
+          <h5><span>Q</span>ontribution</h5>
+          <p>
+            Installation: <span class="green">20$</span>
+          </p>
+        </div>
+        <hr>
+        <a class="btn btn-1" href="https://www.openshot.org/fr/" target="_blank" rel="noreferrer noopener">Site Web</a>
+      </div>
+
+    </div>
+  </section>
+
+  <section id="call-to-action">
+    <h2>Prêt?</h2>
+    <p class="description">
+      Vous trouvez certaines informations complexes ou vous êtes prêt pour les prochaines étapes? C'est le moment de
+      nous contacter! Soyez sans crainte, nous vous aiderons à prendre la décision éthique :)
+    </p>
+    <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+  </section>
+
+  <footer>
+    <div class="newsletter">
+      <h5>Abonnez-vous!</h5>
+      <p>Nous vous enverrons seulement les nouvelles importantes</p>
+      <form action="/php/newsletter.php" method="get">
+        <input type="text" name="newsletter-language" value="fr" hidden>
+        <input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
+        <input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel" id="newsletter-email-2">
+        <input type="submit" class="btn btn-1" value="S'abonner">
+      </form>
+    </div>
+    <div class="wrapper">
+      <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+          src="/media/images/git-white.png"></a>
+      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/CC-64.png">
+      </a>
+      <a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/onion-64.png">
+      </a>
+      <a href="/pages/en/services/installation.html">
+        <img src="/media/images/canada.png" alt="English Canada">
+      </a>
+    </div>
+  </footer>
+</body>
+
+</html>
--- a/pages/fr/services/reparation.html
+++ b/pages/fr/services/reparation.html
@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="fr-CA">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Le Projet TeleQom | Service de Réparation</title>
+  <meta name="description"
+    content="Le Projet TeleQom offre un service de réparation d'ordinateurs et de cellulaires à petit prix. Si toutefois vous avez besoin d'un nouvel ordinateur, voici une liste de vendeurs éthiques!" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/css/pages/repairs.css" />
+</head>
+
+<body>
+  <!-- FOUC -->
+  <script>0</script>
+  <header>
+    <nav>
+      <input type="checkbox" id="navbar-menu-btn" />
+      <label for="navbar-menu-btn" id="menu-btn-open">
+        <img src="/media/images/menu.png" alt="Menu Icon">
+      </label>
+      <label for="navbar-menu-btn" id="menu-btn-close">
+        <img src="/media/images/close.png" alt="Menu Icon">
+      </label>
+      <a href="/pages/fr/index.html" class="logo">
+        <img src="/media/images/logo.svg" alt="TeleQom Logo">
+        <h2>
+          Tele<span>Q</span>om
+        </h2>
+      </a>
+      <ul id="nav-list">
+        <li><a class="btn btn-2" href="#top">Réparation</a></li>
+        <li><a class="btn btn-2" href="#cellulaires">Cellulaires</a></li>
+        <li><a class="btn btn-2" href="#ordinateurs">Ordinateurs</a></li>
+        <li><a class="btn btn-2" href="/pages/en/services/repairs.html">EN</a></li>
+        <li>
+          <div id="mobile-nav-action-btn">
+            <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+          </div>
+        </li>
+      </ul>
+      <div id="navbar-action-btn">
+        <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+      </div>
+    </nav>
+  </header>
+
+  <section id="intro">
+    <h2>Service de Réparation</h2>
+    <p>
+      Donc vous avez brisé votre écran? Aucun problème, nous pouvons probablement le réparer.
+      La majorité des ordinateurs peuvent être ouverts facilement et leurs pièces remplacés pour une fraction du prix d'un nouvel ordinateur.
+      Vous pouvez apporter vos pièces, ou nous laisser s'occuper du magasinage. Nous pouvons nous procurer la plupart des pièces, neuves ou usagées.
+      "Super, donc vous pouvez réparer ma laveuse à linge intelligente alors?" certain nous demande. Et bien, non nous ne réparons pas les laveuses.
+      Aussi, nous <span>NE RÉPARONS PAS LES APPAREILS APPLE</span>. Pour plus d'informations ou pour débuter le processus de réparation, contactez-nous
+     </p>
+     <p>
+      Si vous avez besoin d'un nouvel ordinateur, nous avons mis une petite liste à votre disposition de vendeurs éthiques.
+      Aucun d'eux ne sont affiliés avec nous, mais ils partagent notre sens moral.
+      Nous nous excusons d'avance, aucun d'eux ne vendent de laveuse intelligente...
+    </p>
+  </section>
+
+  <section class="products" id="cellulaires">
+    <h2>Cellulaires</h2>
+    <p class="explanation">
+      Voici un domaine où les Logiciels Libres ne font que commencer à se montrer le bout du nez. Même si Linux est au
+      coeur du <a class="link" href="https://source.android.com/" target="_blank" rel="noreferrer noopener">Projet Android Open Source</a>,
+      avec la quantité de logiciels propriétaires et espions qui y sont ajoutés
+      par Google avant qu'il se rende à votre téléphone, il est disqualifié. Certaines distributions sont disponible
+      depuis un moment et Ubuntu a même tenté de lancer Ubuntu Touch avec peu de succès. Nous voyons de nos jours un
+      intérêt grandissant envers les téléphones cellulaires Libres qui respecte ses utilisateurs. Nous vous
+      recommandons donc de garder un oeil sur les suivants
+      </p>
+      <div class="wrapper">
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/nitrophone-128.png" alt="NitroPhone Logo">
+          </div>
+          <h4>NitroPhone</h4>
+          <p class="description">
+            Le NitroPhone est un premier choix en terme de compatibilité avec les applications Android. NitroKey offre
+            plusieurs versions et ils ont tous GrapheneOS d'installé, un OS Android avec une emphase sur la sécurité
+            dénudé de tout logiciel propriétaire Google
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Détails</h5>
+            <div class="includes-items">
+              <p class="yellow">Niveau: Intermédiaire</p>
+              <p>OS: GrapheneOS</p>
+              <p>Famille OS:: Android</p>
+              <p class="yellow">Libre: Presque</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://www.nitrokey.com/fr" target="_blank" rel="noreferrer noopener">Site Web</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/pinephone-128.png" alt="PinePhone Logo">
+          </div>
+          <h4>PinePhone</h4>
+          <p class="description">
+            Le PinePhone est un téléphone conçu par la communauté pour la communauté moins dispendieux. Par contre, il
+            est toujours en développement et actuellement incomparable à Android. Nous croyons qu'il pourrait bien
+            être le premier téléphone Linux à prix abordable, mais pas pour le moment
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Détails</h5>
+            <div class="includes-items">
+              <p class="red">Niveau: Avancé</p>
+              <p>OS: Mobian, PostmarketOS, etc</p>
+              <p>Famille OS:: GNU/Linux</p>
+              <p class="yellow">Libre: Presque</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://www.pine64.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/librem5-128.png" alt="Purism Logo">
+          </div>
+          <h4>Librem 5</h4>
+          <p class="description">
+            Purism est un pionnier dans le marché du matériel Libre avec son Librem 5. Ils investissent grandement
+            dans le développement de l'écosystème Linux mobile. Le librem 5 est disponible sur le site web de Purism,
+            mais nous ne croyons pas qu'il est prêt pour le grand publique pour le moment
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Détails</h5>
+            <div class="includes-items">
+              <p class="red">Niveau: Avancé</p>
+              <p>OS: PureOS, other</p>
+              <p>Famille OS:: GNU/Linux</p>
+              <p class="green">Libre: Oui</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Site Web</a>
+        </div>
+
+      </div>
+  </section>
+
+  <section class="products alt" id="ordinateurs">
+    <h2>Ordinateurs</h2>
+    <p class="explanation">
+      Plusieurs compagnies qui fabriquent des appareils éthiques existent déjà pour vous procurer un nouvel ordinateur.
+      Ceci n'est pas une liste complète, mais nous avons sélectionné quelques options populaires pour vous. Il est
+      important de mentionner qu'un BIOS et du matériel Libre sont tout aussi important que le reste. Nous gardons un
+      oeil sur le <a class="link" href="https://riscv.org/" target="_blank" rel="noreferrer noopener">RISC-V CPU</a>
+      puisque nous le voyons devenir un standard dans les appareils mobiles
+      </p>
+      <div class="wrapper">
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/system76.png" alt="System76 Logo">
+          </div>
+          <h4>System76</h4>
+          <p class="description">
+            Une entreprise qui est parmis nous depuis longtemps. Ils offrent des appareils avec Coreboot comme BIOS et
+            leur ordinateurs viennent avec PopOS!, un dérivé d'Ubuntu supporté par System76. Vous ne pouvez pas vous
+            tromper ici. Portables, serveurs, ordinateurs de bureau, ils ont tout
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Détails</h5>
+            <div class="includes-items">
+              <p class="green">Niveau: Débutant</p>
+              <p>OS: PopOS! (Ubuntu based)</p>
+              <p>Produits: Serveur, PC, Portable</p>
+              <p class="yellow">Libre: Presque</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://system76.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/purism-128.png" alt="Purism Logo">
+          </div>
+          <h4>Purism</h4>
+          <p class="description">
+            Purism est une corporation à raison sociale. Ils contruisent des portables et ordinateurs de bureau
+            éthiques avec du matériel dernier cri tel que des CPU intel, mais plus orienté sur la sécurité et la vie
+            privée. Pureboot est également une bonne fonctionnalité
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Détails</h5>
+            <div class="includes-items">
+              <p class="green">Niveau: Débutant</p>
+              <p>OS: PureOS</p>
+              <p>Produits: Serveur, PC, Portable</p>
+              <p class="yellow">Libre: Presque</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Site Web</a>
+        </div>
+
+        <div class="product">
+          <div class="img-container">
+            <img src="/media/images/raptor-128.png" alt="Raptor Logo">
+          </div>
+          <h4>Raptor</h4>
+          <p class="description">
+            C'est ici que ça devient sérieux. Cette compagnie a réussi à fabriquer un ordinateur avec uniquement du
+            matériel et des logiciels Libres (incluant le CPU IBM Power9), ce qui veut dire que l'intégralité du code
+            qui s'exécute sur la machine est auditable. C'est le but ultime du mouvement Libre. Malheureusement, ça vient à un prix...
+          </p>
+          <hr>
+          <div class="includes">
+            <h5>Détails</h5>
+            <div class="includes-items">
+              <p class="red">Niveau: Avancé</p>
+              <p class="red">OS: Votre Choix</p>
+              <p>Produits: Serveur, PC</p>
+              <p class="blue">Libre: Ultime</p>
+            </div>
+          </div>
+          <hr>
+          <a class="btn btn-1" href="https://www.raptorcs.com/TALOSII/" target="_blank" rel="noreferrer noopener">Site Web</a>
+        </div>
+
+      </div>
+  </section>
+
+  <section id="call-to-action">
+    <h2>Prêt?</h2>
+    <p class="description">
+      Vous hésitez entre réparer votre ordinateur ou en acheter un nouveau? Contactez-nous, nous vous aiderons à faire le bon choix :)
+    </p>
+    <a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
+  </section>
+
+  <footer>
+    <div class="newsletter">
+      <h5>Abonnez-vous!</h5>
+      <p>Nous vous enverrons seulement les nouvelles importantes</p>
+      <form action="/php/newsletter.php" method="get">
+        <input type="text" name="newsletter-language" value="fr" hidden>
+        <input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
+        <input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel" id="newsletter-email-2">
+        <input type="submit" class="btn btn-1" value="S'abonner">
+      </form>
+    </div>
+    <div class="wrapper">
+      <a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
+          src="/media/images/git-white.png"></a>
+      <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/CC-64.png">
+      </a>
+      <a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
+        <img src="/media/images/onion-64.png">
+      </a>
+      <a href="/pages/en/services/repairs.html">
+        <img src="/media/images/canada.png" alt="English Canada">
+      </a>
+    </div>
+  </footer>
+</body>
+
+</html>
--- a/php/contact.php
+++ b/php/contact.php
@ -0,0 +1,17 @@
+<?php
+    $lang_folder = $_GET['contact-language']=="en"?"/pages/en/":"/pages/fr/";
+    if(!filter_var($_GET['contact-email'], FILTER_VALIDATE_EMAIL) || strlen($_GET['contact-message'])==0 || strlen($_GET['contact-name'])==0 || $_GET['contact-email-2'] != ""){
+        header("Location: ".$lang_folder."err/contact.html");
+        die();
+    }
+
+    $receiver_email = "info@teleqom.org";
+
+    $message = "Contact: ".$_GET['contact-name']."\nEmail: ".$_GET['contact-email']."\nMessage:\n".$_GET['contact-message'];
+    $headers = 'From: '.$receiver_email . "\r\n" .
+    'Reply-To: '.$_GET['contact-email'] . "\r\n" .
+    'X-Mailer: PHP/' . phpversion();
+    mail($receiver_email,"Contact TeleQom.org",$message,$headers);
+
+    header("Location: ".$lang_folder."confirmation.html");
+?>
--- a/php/newsletter.php
+++ b/php/newsletter.php
@ -0,0 +1,25 @@
+<?php
+require_once $_SERVER['DOCUMENT_ROOT'].'/config/PRIVATE/NEWSLETTER.php';
+$lang_folder = $_GET['newsletter-language']=="fr"?"/pages/fr/":"/pages/en/";
+$contact_form_url = $_GET['newsletter-language']=="fr"?$_ENV['newsletter_url_fr']:$_ENV['newsletter_url_en'];
+
+if(!str_contains($_GET['newsletter-email'], "@") || !str_contains($_GET['newsletter-email'], ".") || strlen($_GET['newsletter-email']) < 6 || $_GET['newsletter-email-2'] != "") {
+    header('Location: '.$lang_folder.'err/general.html');
+    die();
+}
+$ch = curl_init($contact_form_url);
+curl_setopt($ch, CURLOPT_POSTFIELDS,  urlencode('email').'='.urlencode($_GET['newsletter-email']));
+curl_setopt($ch, CURLOPT_HEADER, 0);
+curl_setopt($ch, CURLOPT_POST, 1);
+curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, false);
+curl_exec($ch);
+$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+curl_close($ch);
+if($httpcode==200){
+    header('Location: '.$lang_folder.'confirmation.html');
+    die();
+}
+header('Location: '.$lang_folder.'err/general.html');
+
+?>
--- a/robots.txt
+++ b/robots.txt
@ -0,0 +1,23 @@
+User-agent: *
+Disallow: /pages/en/err/
+Disallow: /pages/fr/err/
+Disallow: /pages/fr/confirmation.html
+Disallow: /pages/en/confirmation.html
+Disallow: /404.php
+Disallow: /403.shtml
+Disallow: /403.php
+Disallow: /500.php
+Disallow: /err.php
+Disallow: /error_log
+
+Allow: /pages/fr/index.html
+Allow: /pages/fr/services/developpement.html
+Allow: /pages/fr/services/installation.html
+Allow: /pages/fr/services/reparation.html
+
+Allow: /pages/en/index.html
+Allow: /pages/en/services/developement.html
+Allow: /pages/en/services/installation.html
+Allow: /pages/en/services/repairs.html
+
+Sitemap: https://teleqom.org/sitemap.xml
--- a/sitemap.xml
+++ b/sitemap.xml
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    <url>
+        <loc>https://teleqom.org/pages/fr/index.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>1.00</priority>
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/index.html" />
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/about.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/en/index.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/about.html" />
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/index.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/en/services/installation.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/installation.html" />
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/installation.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/fr/services/installation.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/installation.html" />
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/installation.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/en/services/repairs.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/repairs.html" />
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/reparation.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/fr/services/reparation.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/reparation.html" />
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/repairs.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/en/services/development.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/development.html" />
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/developpement.html" />
+    </url>
+    <url>
+        <loc>https://teleqom.org/pages/fr/services/developpement.html</loc>
+        <lastmod>2022-02-14T01:04:56+00:00</lastmod>
+        <priority>0.80</priority>
+        <xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/developpement.html" />
+        <xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/development.html" />
+    </url>
+</urlset>