index: removed useless style and use svg instead of linear-gradient to remove aliasing

gatsby-config.js

@@ -1,5 +1,5 @@
 require("dotenv").config({
-	path: `.env.${process.env.NODE_ENV}`
+	path: `.env.${process.env.NODE_ENV}`,
 });
 
 module.exports = {
@@ -7,7 +7,7 @@ module.exports = {
 		siteUrl: `https://www.yourdomain.tld`,
 		title: "CLI",
 		description:
-			"Coopérative de travailleuses et travailleurs du numérique basée à Strasbourg."
+			"Coopérative de travailleuses et travailleurs du numérique basée à Strasbourg.",
 	},
 	plugins: [
 		"gatsby-plugin-sass",
@@ -17,9 +17,9 @@ module.exports = {
 			resolve: "gatsby-source-filesystem",
 			options: {
 				name: "pages",
-				path: "./src/pages/"
+				path: "./src/pages/",
 			},
-			__key: "pages"
+			__key: "pages",
 		},
 		{
 			resolve: `gatsby-plugin-manifest`,
@@ -30,8 +30,8 @@ module.exports = {
 				background_color: "#f7f0eb",
 				theme_color: "#a2466c",
 				display: "standalone",
-				icon: "src/images/favicon.png"
-			}
-		}
-	]
+				icon: "src/images/logo-cli.png",
+			},
+		},
+	],
 };

src/components/header/index.jsx

@@ -4,6 +4,7 @@ import { useInView } from "react-intersection-observer";
 import "./index.scss";
 import BtnContact from "../btnContact";
 import HeaderContext from "../../context/headerContext";
+import Logo from "../../images/logo-cli.svg";
 
 const Header = () => {
 	const navbarContext = useContext(HeaderContext);
@@ -22,12 +23,15 @@ const Header = () => {
 	return (
 		<header ref={ref}>
 			<div className="hero">
-				<h1>Coopérative Libre Informatique</h1>
-				<div className="hero-box">
-					<div className="hero-text">
-						<p className="hero-paragraph">Travailler autrement ensemble.</p>
+				<div className="hero-container">
+					<img src={Logo} alt="" className="hero-logo" />
+					<h1>Coopérative Libre Informatique</h1>
+					<div className="hero-box">
+						<div className="hero-text">
+							<p className="hero-paragraph">Travailler autrement ensemble.</p>
+						</div>
+						<BtnContact>Écrivez-nous !</BtnContact>
 					</div>
-					<BtnContact>Écrivez-nous !</BtnContact>
 				</div>
 			</div>
 		</header>

src/components/header/index.scss

@@ -8,77 +8,75 @@
 
 header {
 	// width: 100vw;
-	width: calc(100vw - 12px); // HOW TO HANDLE THIS ANOTHER WAY ?
+	width: calc(100vw - 16px); // HOW TO HANDLE THIS ANOTHER WAY ?
 	height: 100vh;
 	display: flex;
-	background-image: linear-gradient(
-		60deg,
-		rgba(100, 44, 135, 0.5) 35%,
-		rgba(255, 255, 255, 0) 0%
-	);
-	overflow-y: auto;
 	background-position: center;
 	background-size: cover;
-	color: $light;
 
 	.hero {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		align-items: flex-start;
+		align-items: center;
 		padding-bottom: 10rem;
 		width: 100%;
-		position: relative;
 		text-align: center;
 
-		h1 {
-			font-size: 2.5rem;
-			font-weight: 900;
-			font-family: CutiveMono;
-			color: $dark;
-			margin-left: 10%;
-		}
+		.hero-container {
+			margin: 13rem auto auto auto;
 
-		.hero-box {
-			display: flex;
-			flex-direction: column;
-			color: $dark;
-			min-width: fit-content;
-			margin-left: 10%;
+			.hero-logo {
+				height: 8rem;
+				width: 8rem;
+			}
 
-			.hero-text {
+			h1 {
+				width: 30rem;
+				font-size: 2.5rem;
+				font-weight: 900;
+				font-family: CutiveMono;
+				color: $dark;
+			}
+
+			.hero-box {
 				display: flex;
 				flex-direction: column;
-				align-items: center;
-				font-size: 1.3rem;
-				padding: 0 1.5rem;
+				color: $dark;
+				min-width: fit-content;
 
-				.hero-paragraph {
-					line-height: 1.7rem;
-					text-align: center;
-					width: fit-content;
-				}
-				.hero-highlight {
-					color: $primary-darker;
-					font-weight: bold;
+				.hero-text {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					font-size: 1.3rem;
+					padding: 0 1.5rem;
+
+					.hero-paragraph {
+						line-height: 1.7rem;
+						text-align: center;
+						width: fit-content;
+					}
+					.hero-highlight {
+						color: $primary-darker;
+						font-weight: bold;
+					}
 				}
 			}
 		}
 	}
 }
 
-@media screen and (max-width: 800px) {
+@media (min-width: 800px) {
 	header {
-		margin-top: 0rem;
-		height: 100vh;
-
 		.hero {
-			h1 {
-				font-size: 2rem;
-			}
+			.hero-container {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
 
-			.hero-box > .hero-text {
-				font-size: 1.1rem;
+				margin-top: 12%;
+				margin-left: 10%;
 			}
 		}
 	}

src/images/background-index.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 2175 1291" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_136:7)">
+<path d="M296 0L1336 1291H0V0H296Z" fill="#642C87"/>
+</g>
+<defs>
+<clipPath id="clip0_136:7">
+<rect width="2175" height="1291" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/images/logo-cli.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 2000 2000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_125:2)">
+<rect width="2000" height="2000" rx="50" fill="none"/>
+<path d="M1551.04 1551.01C1246.73 1855.33 753.331 1855.33 449.014 1551.01C144.697 1246.7 144.697 753.303 449.014 448.986C753.331 144.669 1246.73 144.669 1551.04 448.986" stroke="#642C87" stroke-width="120"/>
+<path d="M1217.46 1474.29C936.159 1605.47 605.789 1492.36 479.559 1221.66C353.329 950.957 479.042 625.174 760.345 494" stroke="#642C87" stroke-width="120"/>
+<path d="M1583.5 708C1583.5 1030.53 1322.26 1292 1000 1292" stroke="#642C87" stroke-width="120"/>
+</g>
+<defs>
+<clipPath id="clip0_125:2">
+<rect width="2000" height="2000" rx="50" fill="none"/>
+</clipPath>
+</defs>
+</svg>

src/pages/index.jsx

@@ -109,6 +109,7 @@ const IndexPage = () => {
 						</div>
 					</div>
 				</section>
+
 				<section className="realisation index-section">
 					<div className="parallax-realisation">
 						<i className="parallax-object-3">
@@ -201,6 +202,7 @@ const IndexPage = () => {
 						/>
 					</div>
 				</section>
+
 				<section className="contact index-section" id="contact">
 					<div className="parallax-contact">
 						<i className="parallax-object-4">

src/pages/services.jsx

@@ -11,8 +11,52 @@ const VosBesoins = () => {
 			<div className="page-content">
 				<h2 className="page-title">Nos services</h2>
 				<section className="page-section">
-					<h3 className="section-title" id="web-dev"></h3>
-					<p className="section-paragraph"></p>
+					<h3 className="section-title" id="dev">
+						Développement et accompagnement
+					</h3>
+					<p className="section-paragraph">
+						Vous êtes une personne, une association, une entreprise et vous souhaitez
+						une présence sur internet sans trop savoir comment vous y prendre ? Un
+						projet en tête mais aucune idée du bout par lequel commencer ? Nous
+						répondons présent·es pour vous accompagner dans la mise en place de votre
+						projet de site web, quel qu'il soit, et nous occupons de tout, du
+						développement à la mise en ligne.
+					</p>
+					<p className="section-paragraph">
+						Nous développons aussi des logiciels pour votre entreprise [...]
+					</p>
+					<div className="process">
+						<p>
+							Afin de vous garantir satisfaction, et les meilleurs résultats nous
+							avons pour habitude de travailler de la manière suivante
+						</p>
+						<ul>
+							<li>
+								Une première version au plus vite avec les fonctionnalités minimales
+							</li>
+							<li>
+								Développement par itération : nous faisons évolution le produit
+								ensemble d'après votre avis
+							</li>
+							<li>Maintenance sur le moyen/long terme</li>
+						</ul>
+					</div>
+				</section>
+				<section className="page-section">
+					<h3 className="section-title" id="maintenance">
+						Maintenance informatique
+					</h3>
+					<p className="section-paragraph">
+						Un problème avec votre ordinateur, ou votre réseau ? Nous y jetons un oeil
+						pour trouver l'origine de la panne et la résoudre.
+					</p>
+					<p className="section-paragraph">
+						Votre site internet ou un de vos logiciels présente des problèmes de
+						fonctionnement ? Après diagnostique, nous pouvons nous charger de les
+						réparer. En outre, garder à jour un site internet ou un logiciel permet de
+						se prémunir d'une majorité de problèmes : pertes de données, bugs, piratage
+						...
+					</p>
 				</section>
 			</div>
 		</Layout>

src/scss/abstracts/_colors.scss

@@ -1,5 +1,5 @@
 $primary: #ad73d2;
-$primary-darker: hsl(277, 51%, 35%);
+$primary-darker: #642c87;
 $secondary: #a6d0d9;
 $light: #f0f6f9;
 $dark: #2f2e44;

src/scss/index.scss

@@ -39,7 +39,7 @@
 	min-width: 18rem;
 }
 
-@media (min-width: 630px) {
+@media (min-width: 800px) {
 	.parallax-ethic {
 		position: absolute;
 		left: 30%;
@@ -48,25 +48,31 @@
 
 	.parallax-team {
 		position: absolute;
-		left: 70%;
+		left: 30%;
 		transform: translateX(-50%);
 	}
 
 	.parallax-realisation {
 		position: absolute;
-		left: 40%;
+		left: 70%;
 		transform: translateX(-50%);
 	}
 
 	.parallax-ethic,
 	.parallax-team,
-	.parallax-realisation,
-	.parallax-contact {
+	.parallax-realisation {
 		top: 50px;
 		z-index: -2;
 		opacity: 0.5;
 		width: 28.5rem;
 	}
+
+	.parallax-contact {
+		top: 70px;
+		z-index: -2;
+		opacity: 0.5;
+		width: 28.5rem;
+	}
 }
 
 .ethic {
@@ -126,12 +132,20 @@
 	}
 }
 
-.team {
-	background-image: linear-gradient(
-		100deg,
-		rgba(100, 44, 135, 0.5) 40%,
-		rgba(255, 255, 255, 0) 0%
-	);
+.team:before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-image: url(../images/background-index.svg);
+	background-position: 50% 0;
+	background-size: cover;
+	opacity: 40%;
+	transform: rotate(0.5turn);
+	z-index: -10;
 }
 
 .team-card-group {
@@ -184,12 +198,19 @@
 	}
 }
 
-.realisation {
-	background-image: linear-gradient(
-		-100deg,
-		rgba(100, 44, 135, 0.5) 40%,
-		rgba(255, 255, 255, 0) 0%
-	);
+.realisation:before {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-image: url(../images/background-index.svg);
+	background-position: 50% 0;
+	background-size: cover;
+	opacity: 40%;
+	z-index: -10;
 }
 
 .realisation-card-group {
@@ -201,3 +222,8 @@
 	padding-top: 150px;
 	padding-bottom: 100px;
 }
+
+.contact {
+	.parallax-contact {
+	}
+}

src/scss/main.scss

@@ -71,7 +71,7 @@ main {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	max-width: 85vw;
+	width: 85vw;
 	background-color: transparent;
 }