navbar & header: refonte graphique majeure - en cours

src/components/header/index.jsx

@@ -1,35 +1,27 @@
 import React from "react";
-import { Link } from "gatsby";
 
 import "./index.scss";
+import BtnContact from "../btnContact";
 
 const Header = () => {
 	return (
-		<div id="header">
-			<h1>
-				<Link to="/">CLI</Link>
-			</h1>
-			<h2>Coopérative strasbourgeoise du numérique</h2>
-			<div className="header-services">
-				<ul className="menu">
-					<li>
-						<Link to="/services" className="menu-btn">
-							<span>Vos besoins</span>
-						</Link>
-					</li>
-					<li>
-						<Link to="/nous-contacter" className="menu-btn">
-							<span>Nous contacter</span>
-						</Link>
-					</li>
-					<li>
-						<Link to="/a-propos" className="menu-btn">
-							<span>La Coopérative</span>
-						</Link>
-					</li>
-				</ul>
+		<header>
+			<div className="hero">
+				<h1>Du numérique, en Alsace, au plus proche de vos besoins.</h1>
+				<div className="hero-box">
+					<div className="hero-text">
+						<p className="hero-paragraph">
+							Nous proposons un accompagnement local et sur-mesure pour tous vos
+							projets numériques.{" "}
+						</p>
+						<p className="hero-highlight">
+							Demandez nous un devis, nous vous en moins de 24 heures.
+						</p>
+					</div>
+					<BtnContact>Écrivez-nous !</BtnContact>
+				</div>
 			</div>
-		</div>
+		</header>
 	);
 };
 

src/components/header/index.scss

@@ -1,43 +1,50 @@
-@import "../../scss/main.scss";
+@use "../../scss/abstracts/colors" as *;
+@use "../../scss/abstracts/fonts" as *;
 
-#header {
+header {
+	width: 100vw;
+	height: 100vh;
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-	font-family: "Cutive Mono", "mono";
-	text-align: center;
+	background-image: url("../../images/pen-blue.jpg");
+	background-position: center;
+	padding-top: 5rem;
+	color: $light;
 
-	h1 {
-		font-size: 5rem;
-		font-weight: 600;
-		margin: 3rem auto 1.5rem auto;
-	}
+	.hero {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding-bottom: 10rem;
+		width: 100%;
+		position: relative;
+		text-align: center;
 
-	h2 {
-		font-size: 1.7rem;
-		font-weight: 600;
-		margin: 0 auto 1.5rem auto;
-		padding: 0 15px;
-	}
+		h1 {
+			margin: 0.3rem 1rem;
+			font-size: 2.3rem;
+			font-weight: 900;
+			color: $dark;
+		}
+
+		.hero-box {
+			display: flex;
+			flex-direction: column;
+			color: $dark;
 
-	.header-services {
-		ul.menu {
-			list-style: none;
-			margin: 0;
-			padding: 0;
+			.hero-text {
+				font-size: 1.3rem;
 
-			li {
-				margin: 0.5rem 1.2rem;
-				line-height: 2rem;
-				font-size: 1.5rem;
+				.hero-paragraph {
+					line-height: 1.7rem;
+					text-align: center;
+					width: 75vw;
+				}
+				.hero-highlight {
+					color: $primary-darker;
+					font-weight: bold;
+				}
 			}
 		}
 	}
 }
-
-@media (min-width: 890px) {
-	ul.menu {
-		display: flex;
-		flex-direction: row;
-	}
-}

src/components/layout/index.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { ToastContainer, toast } from "react-toastify";
 
-import Header from "../header";
+import Navbar from "../navbar";
 import Footer from "../footer";
 
 toast.configure();
@@ -10,7 +10,7 @@ toast.configure();
 const Layout = ({ children }) => {
 	return (
 		<>
-			<Header />
+			<Navbar />
 			<main>{children}</main>
 			<ToastContainer
 				position="bottom-center"

src/components/navbar/index.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./index.scss";
+
+const Navbar = () => {
+	return (
+		<div id="navbar-container">
+			<nav>
+				<div className="details">
+					<Link to="/services" className="menu-btn">
+						<span>Services</span>
+					</Link>
+					<Link to="/a-propos" className="menu-btn">
+						<span>La Coopérative</span>
+					</Link>
+				</div>
+				<Link id="navbar-title" to="/">
+					<span>CLI</span>
+				</Link>
+				<Link to="/nous-contacter" id="contact-btn" className="menu-btn">
+					<button className="btn">Nous contacter</button>
+				</Link>
+			</nav>
+		</div>
+	);
+};
+
+export default Navbar;

src/components/navbar/index.scss

@@ -0,0 +1,70 @@
+@use "../../scss/abstracts/colors" as *;
+@use "../../scss/abstracts/fonts" as *;
+
+#navbar-container {
+	clear: both;
+	display: block;
+}
+
+nav {
+	padding: 0.5rem 2rem;
+	position: fixed;
+	overflow-y: scroll;
+	z-index: 1;
+	width: 100vw;
+	height: 3.5rem;
+	padding: 0;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	.details {
+		margin-right: auto;
+		margin-left: 1.5rem;
+		color: $dark;
+
+		& > a:first-of-type {
+			margin: 0;
+			font-size: 1.2rem;
+		}
+
+		& > a:last-of-type {
+			margin: 0 1.5rem;
+			font-size: 1.2rem;
+		}
+	}
+
+	#navbar-title {
+		margin: 0 auto;
+		font-family: "Cutive Mono";
+		font-size: 2.5rem;
+		font-weight: bold;
+		color: $dark;
+
+		span {
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	#contact-btn {
+		margin-left: auto;
+		margin-right: 1.5rem;
+
+		button {
+			background: $primary;
+			color: white;
+			border: none;
+			transition: all 300ms ease-in-out;
+		}
+
+		&:hover,
+		&:focus {
+			button {
+				border: none;
+				box-shadow: 0 0 2px 1px $primary;
+			}
+		}
+	}
+}

src/pages/a-propos.jsx

@@ -10,6 +10,16 @@ const Apropos = () => {
 			<Seo title="À notre propos"></Seo>
 			<div>
 				<h2>À notre propos</h2>
+				<section className="pages-sections">
+					<p className="section-paragraph">
+						La CLI est une association de travailleuses et travailleurs du
+						numériques basée à Strasbourg. Notre catalogue de prestations se
+						compose d'un large éventail de services comme le développement de
+						sites web, leur mise en production et leur maintenance. Nous
+						effectuons aussi la conception de solutions logiciels, l'assistance
+						informatique, et la formation à divers outils informatiques.
+					</p>
+				</section>
 			</div>
 		</Layout>
 	);

src/pages/index.jsx

@@ -4,33 +4,16 @@ import { Link } from "gatsby";
 import Layout from "../components/layout/index";
 import Seo from "../components/seo";
 import RealisationCard from "../components/realisationCard";
-import BtnContact from "../components/btnContact";
 import "../scss/index.scss";
 import Art from "../images/undraw_Art.svg";
+import Header from "../components/header";
 
 const IndexPage = () => {
 	return (
 		<Layout>
 			<Seo title="Association de travailleuses et travailleurs du numérique" />
 			<div className="page-content">
-				<section className="pages-sections">
-					<p className="section-paragraph">
-						La CLI est une association de travailleuses et travailleurs du
-						numériques basée à Strasbourg. Notre catalogue de prestations se
-						compose d'un large éventail de services comme le développement de
-						sites web, leur mise en production et leur maintenance. Nous
-						effectuons aussi la conception de solutions logiciels, l'assistance
-						informatique, et la formation à divers outils informatiques.
-					</p>
-					<p className="section-paragraph">
-						Nous proposons un accompagnement local et sur-mesure pour tous vos
-						projets numériques.{" "}
-						<span className="paragraph-highlight">
-							Demandez nous un devis, nous vous répondrons au plus vite.
-						</span>
-					</p>
-					<BtnContact>Écrivez-nous !</BtnContact>
-				</section>
+				<Header />
 				<section className="services-list">
 					<div className="service-type">
 						<div className="service-type-header">

src/scss/abstracts/_colors.scss

@@ -1,2 +1,4 @@
 $primary: #ad73d2;
-$light: hsl(205, 46%, 96%);
+$primary-darker: #9a52c7;
+$light: #f0f6f9;
+$dark: #2f2e41;

src/scss/main.scss

@@ -3,7 +3,7 @@
 
 :root {
 	background: white;
-	color: black;
+	color: $dark;
 	font-size: 16px;
 	font-family: "Raleway", "sans-serif";
 }
@@ -79,10 +79,5 @@ main {
 		line-height: 1.7rem;
 		text-align: center;
 		width: 75vw;
-
-		.paragraph-highlight {
-			color: $primary;
-			font-weight: bold;
-		}
 	}
 }