fixed several design, added new logo, added smooth scrolling

src/components/footer/index.jsx

@@ -3,7 +3,7 @@ import { Link } from "gatsby";
 
 import "./index.scss";
 import BtnContact from "../btnContact";
-import Logo from "../../images/favicon.svg";
+import Logo from "../../images/logo-cli.svg";
 
 const Footer = () => {
 	return (
@@ -12,7 +12,13 @@ const Footer = () => {
 				<li>
 					<div className="footer-about">
 						<div className="footer-about-header">
-							<img src={Logo} alt="Logo de la CLI" height="40px" width="40px" />
+							<img
+								src={Logo}
+								alt="Logo de l'association"
+								className="footer-logo"
+								height="40px"
+								width="40px"
+							/>
 							<h4>CLI</h4>
 						</div>
 						<p>

src/components/footer/index.scss

@@ -1,5 +1,9 @@
 @use "../../scss/abstracts/colors" as *;
-@use "../../scss/abstracts/fonts" as *;
+
+@font-face {
+	font-family: CutiveMono;
+	src: url(../../fonts/CutiveMono-Regular.ttf);
+}
 
 #footer {
 	background: $light;
@@ -42,6 +46,16 @@
 			align-items: center;
 			justify-content: center;
 
+			.footer-logo {
+				width: 3rem;
+				height: 3rem;
+			}
+
+			h4 {
+				font-family: CutiveMono;
+				font-size: 2.5rem;
+			}
+
 			& > * {
 				margin: 0 0.3rem;
 			}

src/components/header/index.jsx

@@ -28,7 +28,7 @@ const Header = () => {
 					<h1>Coopérative Libre Informatique</h1>
 					<div className="hero-box">
 						<div className="hero-text">
-							<p className="hero-paragraph">Travailler autrement ensemble.</p>
+							<p className="hero-paragraph">Travailler ensemble autrement.</p>
 						</div>
 						<BtnContact>Écrivez-nous !</BtnContact>
 					</div>

src/components/header/index.scss

@@ -67,7 +67,7 @@ header {
 	}
 }
 
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
 	header {
 		.hero {
 			.hero-container {
@@ -75,7 +75,7 @@ header {
 				flex-direction: column;
 				align-items: center;
 
-				margin-top: 12%;
+				margin-top: 12rem;
 				margin-left: 10%;
 			}
 		}

src/components/navbar/index.scss

@@ -12,10 +12,9 @@
 }
 
 nav {
-	// position: fixed;
 	z-index: 10;
 	margin: 0;
-	width: 100vw;
+	width: 100%;
 	padding: 0;
 	height: 4.5rem;
 	display: flex;
@@ -93,7 +92,7 @@ nav {
 		width: 100%;
 		padding-right: var(--bs-gutter-x, 0.75rem);
 		padding-left: var(--bs-gutter-x, 0.75rem);
-		margin: 4rem auto 0 auto;
+		margin: 0 auto 0 auto;
 		display: flex;
 		flex-direction: column-reverse;
 		align-items: center;

src/scss/index.scss

@@ -14,7 +14,7 @@
 	align-items: center;
 	background-color: transparent;
 	height: auto;
-	max-width: 85vw;
+	width: 100%;
 }
 
 .parallax-ethic,
@@ -132,11 +132,15 @@
 	}
 }
 
+.team {
+	position: relative;
+}
+
 .team:before {
 	content: "";
 	display: block;
 	position: absolute;
-	left: 0;
+	right: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
@@ -222,8 +226,3 @@
 	padding-top: 150px;
 	padding-bottom: 100px;
 }
-
-.contact {
-	.parallax-contact {
-	}
-}

src/scss/main.scss

@@ -25,6 +25,10 @@ a {
 	color: $primary;
 }
 
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	margin: 0;
 }
@@ -59,8 +63,15 @@ main {
 .page-container {
 	position: relative;
 	// margin-bottom: 2rem;
+	width: 100%;
+}
+
+@media (min-width: 1150px) {
+	.page-container {
+		position: relative;
 		width: 85vw;
 	}
+}
 
 .page-title {
 	text-align: center;