services: start redesign of the page

src/components/navbar/index.jsx

 			<nav style={handleShowNavbar(headerContext)} className={toggleMenu ? "nav-o" : "nav-c"}>
 				<div className={toggleMenu ? "details-open" : "details"}>
 					<Link to="/services" className={toggleMenu ? "menu-item" : "menu-item-hidden"}>
-						<span className={underline === "/services" ? "underlined" : ""}>
+						<span className={underline === "/services" ? "menu-item-underlined" : ""}>
 							Services
 						</span>
 					</Link>
 					<Link to="/a-propos" className={toggleMenu ? "menu-item" : "menu-item-hidden"}>
-						<span className={underline === "/a-propos" ? "underlined" : ""}>
+						<span className={underline === "/a-propos" ? "menu-item-underlined" : ""}>
 							L'Association
 						</span>
 					</Link>

src/components/servicesShortcut/index.jsx

+import React from "react";
+import { Link } from "gatsby";
+
+import "./index.scss";
+
+const ServicesShortcutL = ({ img, name, link }) => {
+	const displayImg = (img) => {
+		return new String(`services_${img}`);
+	};
+
+	return (
+		<div className="services-shortcut-l">
+			<img
+				src={require(`../../images/${displayImg(img)}.svg`).default}
+				alt={name}
+				className="services-shortcut-img"
+			/>
+			<p className="services-shortcut-name">{name}</p>
+			<Link to={link} className="services-shortcut-link">
+				En savoir +
+			</Link>
+		</div>
+	);
+};
+
+export default ServicesShortcutL;

src/components/servicesShortcut/index.scss

+@use "../../scss/abstracts/colors" as *;
+
+@font-face {
+	font-family: Raleway Bold;
+	src: url(../../fonts/Raleway-SemiBold.ttf);
+}
+
+.services-shortcut-l {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-content: center;
+	text-align: center;
+	border: 2px solid $primary;
+	height: 12rem;
+	width: 12rem;
+	margin: 1.2rem;
+	padding: 1rem;
+}
+
+.services-shortcut-img {
+	height: 3rem;
+}
+
+.services-shortcut-name {
+	color: $primary;
+	font-family: Raleway Bold;
+}
+
+.services-shortcut-link {
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0.4rem 0.6rem;
+	background-color: $primary;
+	color: white;
+}

src/components/servicesShortcutContainerL/index.jsx

+import React from "react";
+
+import "./index.scss";
+import ServicesShortcutL from "../servicesShortcut";
+
+const ServicesShortcutContainerL = () => {
+	return (
+		<div className="services-shortcuts-containerL">
+			<ServicesShortcutL img="web_dev" name="Développement web" link="#web-dev" />
+			<ServicesShortcutL
+				img="software_dev"
+				name="Développement logiciel"
+				link="#software-dev"
+			/>
+			<ServicesShortcutL img="maintenance" name="Maintenance web" link="#maintenance" />
+			<ServicesShortcutL img="training" name="Formation" link="#training" />
+			<ServicesShortcutL img="self_hosting" name="Autohébergement" link="#self-hosting" />
+			<ServicesShortcutL
+				img="security_audit"
+				name="Audit de sécurité"
+				link="#security-audit"
+			/>
+		</div>
+	);
+};
+
+export default ServicesShortcutContainerL;

src/components/servicesShortcutContainerL/index.scss

+@use "../../scss/abstracts/colors" as *;
+
+.services-shortcuts-containerL {
+	display: flex;
+	flex-wrap: wrap;
+	max-width: 100vw;
+	margin: 0 auto 2rem auto;
+	justify-content: center;
+}

src/images/pullup_arrow.svg

+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="150" cy="150" r="142.5" fill="white" stroke="#AD73D2" stroke-width="15"/>
+<path d="M197 195.872L160.912 124.563C156.143 115.139 153.759 110.427 150 110.427C146.241 110.427 143.857 115.139 139.088 124.563L103 195.872" stroke="#AD73D2" stroke-width="29"/>
+</svg>

src/images/services_maintenance.svg

+<svg width="342" height="400" viewBox="0 0 342 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M258.148 35.1036V29.4317L250.557 27.0883L249.971 24.3189L255.325 18.8068L252.555 13.6408L244.831 15.6379L242.913 13.6408L244.91 6.13146L239.823 3.04252L234.15 8.63457L231.3 7.78245L229.436 0.752441H223.416L221.765 7.78245L218.542 8.63457L213.295 3.04252L208.128 5.97169L210.285 13.3479L208.128 15.5847L200.537 13.5875L197.607 18.6736L203.121 24.2657L202.348 27.0351L194.757 29.1121L194.677 34.8906L202.348 36.8877L202.987 40.1098L197.634 45.409L200.404 50.3353L208.288 48.3381L210.205 50.6282L208.048 57.7914L213.348 60.8803L218.515 55.448L221.605 56.2203L223.39 63.8095L229.409 63.8894L231.194 56.2203L234.283 55.2883L239.797 61.0401L245.23 57.818L242.886 50.3619L244.964 48.205L252.635 50.5483L255.378 45.1959L249.811 40.1897L250.397 36.9676L258.148 35.1036ZM226.399 47.1398C218.063 47.1398 211.271 40.3761 211.271 32.0147C211.271 23.6532 218.036 16.8895 226.399 16.8895C234.763 16.8895 241.528 23.6532 241.528 32.0147C241.528 40.4027 234.763 47.1398 226.399 47.1398ZM245.656 51.507L258.148 55.3681V65.993L243.472 69.5613L242.38 75.606L252.741 85.006L247.627 95.0983L233.244 90.6513L229.356 94.6989L233.804 108.679L223.603 114.724L213.242 103.939L207.462 105.697L204.106 120.076L192.813 119.943L189.457 105.67L183.677 104.179L173.982 114.404L164.021 108.626L168.069 95.1782L164.42 90.891L149.638 94.6456L144.391 85.3788L154.485 75.4196L153.207 69.3483L138.824 65.5936L138.957 54.7024L153.207 50.788L154.725 45.5421L144.364 35.0504L149.878 25.5172L164.154 29.2719L168.202 25.0912L164.154 11.2442L173.849 5.73203L183.651 16.2238L189.697 14.5994L192.786 0.752441H204.079L207.169 12.9751L201.15 11.404L199.472 10.9513L198.593 12.4691L195.663 17.5552L194.784 19.0464L196.009 20.2714L200.59 24.9048L200.51 25.1711L194.171 26.9019L192.52 27.3546L192.44 32.494C179.788 35.2634 170.253 46.554 170.253 60.0548C170.253 75.5794 182.851 88.2015 198.406 88.2015C211.857 88.2015 223.097 78.7749 225.893 66.1528L231.247 66.2327L231.673 64.4486L233.165 58.0576L233.671 57.8979L239.477 63.9426L241.022 63.0372L246.455 59.8152L248 58.8831L247.467 57.1523L245.656 51.507Z" fill="black"/>
+<path d="M276.298 65.9425L310.728 94.8331L289.042 120.225L254.753 91.6186L276.298 65.9425Z" stroke="black" stroke-width="8"/>
+<path d="M288.522 122.726L249.694 169L232.392 171.493M214.107 154.941L213.883 138.951L252.711 92.6774" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<line x1="213.809" y1="158.021" x2="168.46" y2="211.462" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<line x1="232.164" y1="174.297" x2="187.558" y2="227.457" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<path d="M175.54 274.343L191.379 255.466C196.704 249.12 195.876 239.659 189.53 234.334L174.759 221.94L159.989 209.546C153.643 204.221 144.181 205.049 138.856 211.395L123.017 230.271" stroke="black" stroke-width="8"/>
+<path d="M100.665 254.483C108.048 260.678 113.315 253.952 119.584 246.48C125.854 239.009 130.752 233.621 123.369 227.426" stroke="black" stroke-width="8"/>
+<path d="M156.63 300.77C149.732 294.982 155.299 288.768 161.422 281.471C167.544 274.174 171.905 268.557 178.803 274.345" stroke="black" stroke-width="8"/>
+<path d="M102.409 252.406L33.9685 333.971C26.8684 342.432 27.9721 355.047 36.4336 362.147L61.8954 383.512C70.3569 390.612 82.972 389.509 90.072 381.047L158.513 299.483" stroke="black" stroke-width="8"/>
+<line x1="115.993" y1="273.955" x2="54.3994" y2="347.359" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<line x1="138.229" y1="290.635" x2="76.6358" y2="364.04" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<path d="M90.0817 160.915L132.5 214.146M135.724 122.617L187.5 186.146" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<path d="M27.6209 74.7807C17.072 95.0285 19.9742 121.577 35.5624 140.155C56.2103 164.762 92.8967 167.971 117.504 147.324C142.111 126.676 144.409 88.9026 123.761 64.2954C108.173 45.7181 83.4432 39.3364 61.6712 46.2091" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<path d="M27.5303 74.6725L50.1075 101.579C55.4325 107.925 64.8939 108.753 71.24 103.428L82.309 94.1399C88.6551 88.8148 89.4828 79.3535 84.1578 73.0074L61.5806 46.1009" stroke="black" stroke-width="8"/>
+<path d="M205.142 299.455L182.47 271.781M250.784 261.157L205.142 207.146" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<path d="M280.331 375.948C258.559 382.821 232.917 375.352 217.329 356.775C196.681 332.168 199.891 295.481 224.498 274.834C249.105 254.186 286.704 258.482 307.351 283.089C322.94 301.667 324.93 327.129 314.381 347.376" stroke="black" stroke-width="8" stroke-linecap="round"/>
+<path d="M280.419 376.054L257.842 349.147C252.517 342.801 253.344 333.34 259.691 328.015L270.76 318.727C277.106 313.402 286.567 314.229 291.892 320.576L314.469 347.482" stroke="black" stroke-width="8"/>
+</svg>

src/images/services_maintenance_white.svg

+<svg width="342" height="400" viewBox="0 0 342 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M258.148 35.1036V29.4317L250.557 27.0883L249.971 24.3189L255.325 18.8068L252.555 13.6408L244.831 15.6379L242.913 13.6408L244.91 6.13146L239.823 3.04252L234.15 8.63457L231.3 7.78245L229.436 0.752441H223.416L221.765 7.78245L218.542 8.63457L213.295 3.04252L208.128 5.97169L210.285 13.3479L208.128 15.5847L200.537 13.5875L197.607 18.6736L203.121 24.2657L202.348 27.0351L194.757 29.1121L194.677 34.8906L202.348 36.8877L202.987 40.1098L197.634 45.409L200.404 50.3353L208.288 48.3381L210.205 50.6282L208.048 57.7914L213.348 60.8803L218.515 55.448L221.605 56.2203L223.39 63.8095L229.409 63.8894L231.194 56.2203L234.283 55.2883L239.797 61.0401L245.23 57.818L242.886 50.3619L244.964 48.205L252.635 50.5483L255.378 45.1959L249.811 40.1897L250.397 36.9676L258.148 35.1036ZM226.399 47.1398C218.063 47.1398 211.271 40.3761 211.271 32.0147C211.271 23.6532 218.036 16.8895 226.399 16.8895C234.763 16.8895 241.528 23.6532 241.528 32.0147C241.528 40.4027 234.763 47.1398 226.399 47.1398ZM245.656 51.507L258.148 55.3681V65.993L243.472 69.5613L242.38 75.606L252.741 85.006L247.627 95.0983L233.244 90.6513L229.356 94.6989L233.804 108.679L223.603 114.724L213.242 103.939L207.462 105.697L204.106 120.076L192.813 119.943L189.457 105.67L183.677 104.179L173.982 114.404L164.021 108.626L168.069 95.1782L164.42 90.891L149.638 94.6456L144.391 85.3788L154.485 75.4196L153.207 69.3483L138.824 65.5936L138.957 54.7024L153.207 50.788L154.725 45.5421L144.364 35.0504L149.878 25.5172L164.154 29.2719L168.202 25.0912L164.154 11.2442L173.849 5.73203L183.651 16.2238L189.697 14.5994L192.786 0.752441H204.079L207.169 12.9751L201.15 11.404L199.472 10.9513L198.593 12.4691L195.663 17.5552L194.784 19.0464L196.009 20.2714L200.59 24.9048L200.51 25.1711L194.171 26.9019L192.52 27.3546L192.44 32.494C179.788 35.2634 170.253 46.554 170.253 60.0548C170.253 75.5794 182.851 88.2015 198.406 88.2015C211.857 88.2015 223.097 78.7749 225.893 66.1528L231.247 66.2327L231.673 64.4486L233.165 58.0576L233.671 57.8979L239.477 63.9426L241.022 63.0372L246.455 59.8152L248 58.8831L247.467 57.1523L245.656 51.507Z" fill="white"/>
+<path d="M276.298 65.9425L310.728 94.8331L289.042 120.225L254.753 91.6186L276.298 65.9425Z" stroke="white" stroke-width="8"/>
+<path d="M288.522 122.726L249.694 169L232.392 171.493M214.107 154.941L213.883 138.951L252.711 92.6774" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<line x1="213.809" y1="158.021" x2="168.46" y2="211.462" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<line x1="232.164" y1="174.297" x2="187.558" y2="227.457" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M175.54 274.343L191.379 255.466C196.704 249.12 195.876 239.659 189.53 234.334L174.759 221.94L159.989 209.546C153.643 204.221 144.181 205.049 138.856 211.395L123.017 230.271" stroke="white" stroke-width="8"/>
+<path d="M100.665 254.483C108.048 260.678 113.315 253.952 119.584 246.48C125.854 239.009 130.752 233.621 123.369 227.426" stroke="white" stroke-width="8"/>
+<path d="M156.63 300.77C149.732 294.982 155.299 288.768 161.422 281.471C167.544 274.174 171.905 268.557 178.803 274.345" stroke="white" stroke-width="8"/>
+<path d="M102.409 252.406L33.9685 333.971C26.8684 342.432 27.9721 355.047 36.4336 362.147L61.8954 383.512C70.3569 390.612 82.972 389.509 90.072 381.047L158.513 299.483" stroke="white" stroke-width="8"/>
+<line x1="115.993" y1="273.955" x2="54.3994" y2="347.359" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<line x1="138.229" y1="290.635" x2="76.6358" y2="364.04" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M90.0817 160.915L132.5 214.146M135.724 122.617L187.5 186.146" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M27.6209 74.7807C17.072 95.0285 19.9742 121.577 35.5624 140.155C56.2103 164.762 92.8967 167.971 117.504 147.324C142.111 126.676 144.409 88.9026 123.761 64.2954C108.173 45.7181 83.4432 39.3364 61.6712 46.2091" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M27.5303 74.6725L50.1075 101.579C55.4325 107.925 64.8939 108.753 71.24 103.428L82.309 94.1399C88.6551 88.8148 89.4828 79.3535 84.1578 73.0074L61.5806 46.1009" stroke="white" stroke-width="8"/>
+<path d="M205.142 299.455L182.47 271.781M250.784 261.157L205.142 207.146" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M280.331 375.948C258.559 382.821 232.917 375.352 217.329 356.775C196.681 332.168 199.891 295.481 224.498 274.834C249.105 254.186 286.704 258.482 307.351 283.089C322.94 301.667 324.93 327.129 314.381 347.376" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M280.419 376.054L257.842 349.147C252.517 342.801 253.344 333.34 259.691 328.015L270.76 318.727C277.106 313.402 286.567 314.229 291.892 320.576L314.469 347.482" stroke="white" stroke-width="8"/>
+</svg>

src/images/services_security_audit.svg

+<svg width="307" height="368" viewBox="0 0 307 368" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="172.13" cy="134.485" r="104.649" stroke="black" stroke-width="8"/>
+<circle cx="172.13" cy="134.485" r="130.411" stroke="black" stroke-width="8"/>
+<path d="M84.918 234.173L7.18057 345.194M103.268 247.023L25.5311 358.043" stroke="black" stroke-width="8"/>
+<path d="M25.5321 358.043C21.9839 363.111 14.9997 364.342 9.93231 360.794C4.86496 357.246 3.63344 350.261 7.18164 345.194" stroke="black" stroke-width="8"/>
+<path d="M141 104.857H203.952C210.028 104.857 214.952 109.782 214.952 115.857V173C214.952 179.075 210.028 184 203.952 184H141C134.925 184 130 179.075 130 173V115.857C130 109.782 134.925 104.857 141 104.857Z" stroke="black" stroke-width="8"/>
+<path d="M193.39 100.857V81C193.39 72.7157 186.674 66 178.39 66H166.562C158.277 66 151.562 72.7157 151.562 81V100.857" stroke="black" stroke-width="8"/>
+<path d="M188.742 136.876C188.742 127.892 181.459 120.61 172.476 120.61C163.492 120.61 156.209 127.892 156.209 136.876" stroke="black" stroke-width="8"/>
+<path d="M167.828 151.981C161.411 151.981 156.209 145.218 156.209 136.876" stroke="black" stroke-width="8"/>
+<path d="M177.123 151.981C183.54 151.981 188.742 145.218 188.742 136.876" stroke="black" stroke-width="8"/>
+<path d="M165.504 153.143V171.733H179.447V153.143" stroke="black" stroke-width="8"/>
+</svg>

src/images/services_security_audit_white.svg

+<svg width="307" height="368" viewBox="0 0 307 368" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="172.13" cy="134.485" r="104.649" stroke="white" stroke-width="8"/>
+<circle cx="172.13" cy="134.485" r="130.411" stroke="white" stroke-width="8"/>
+<path d="M84.918 234.173L7.18057 345.194M103.268 247.023L25.5311 358.043" stroke="white" stroke-width="8"/>
+<path d="M25.5321 358.043C21.9839 363.111 14.9997 364.342 9.93231 360.794C4.86496 357.246 3.63344 350.261 7.18164 345.194" stroke="white" stroke-width="8"/>
+<path d="M141 104.857H203.952C210.028 104.857 214.952 109.782 214.952 115.857V173C214.952 179.075 210.028 184 203.952 184H141C134.925 184 130 179.075 130 173V115.857C130 109.782 134.925 104.857 141 104.857Z" stroke="white" stroke-width="8"/>
+<path d="M193.39 100.857V81C193.39 72.7157 186.674 66 178.39 66H166.562C158.277 66 151.562 72.7157 151.562 81V100.857" stroke="white" stroke-width="8"/>
+<path d="M188.742 136.876C188.742 127.892 181.459 120.61 172.476 120.61C163.492 120.61 156.209 127.892 156.209 136.876" stroke="white" stroke-width="8"/>
+<path d="M167.828 151.981C161.411 151.981 156.209 145.218 156.209 136.876" stroke="white" stroke-width="8"/>
+<path d="M177.123 151.981C183.54 151.981 188.742 145.218 188.742 136.876" stroke="white" stroke-width="8"/>
+<path d="M165.504 153.143V171.733H179.447V153.143" stroke="white" stroke-width="8"/>
+</svg>

src/images/services_self_hosting.svg

+<svg width="369" height="387" viewBox="0 0 369 387" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 151V383H338V151" stroke="black" stroke-width="8"/>
+<path d="M365.865 178.136L184.432 6L3 178.136" stroke="black" stroke-width="8"/>
+<path d="M307 122V56.5429H265V82.6429" stroke="black" stroke-width="8"/>
+<rect x="100" y="284" width="147" height="48" rx="6" stroke="black" stroke-width="8"/>
+<circle cx="126" cy="308" r="6" stroke="black" stroke-width="8"/>
+<rect x="-4" y="4" width="147" height="48" rx="6" transform="matrix(-1 0 0 1 243 204)" stroke="black" stroke-width="8"/>
+<circle r="6" transform="matrix(-1 0 0 1 221 232)" stroke="black" stroke-width="8"/>
+<line x1="248" y1="306" x2="281" y2="306" stroke="black" stroke-width="8"/>
+<line x1="285" y1="293" x2="285" y2="323" stroke="black" stroke-width="8"/>
+<line x1="178" y1="258" x2="178" y2="280" stroke="black" stroke-width="8"/>
+<rect x="211" y="296" width="20" height="24" fill="black"/>
+<rect x="184" y="296" width="20" height="24" fill="black"/>
+<path d="M157 296H177V320H157V296Z" fill="black"/>
+<rect x="170" y="220" width="20" height="24" fill="black"/>
+<rect x="143" y="220" width="20" height="24" fill="black"/>
+<path d="M116 220H136V244H116V220Z" fill="black"/>
+</svg>

src/images/services_self_hosting_white.svg

+<svg width="369" height="387" viewBox="0 0 369 387" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 151V383H338V151" stroke="white" stroke-width="8"/>
+<path d="M365.865 178.136L184.432 6L3 178.136" stroke="white" stroke-width="8"/>
+<path d="M307 122V56.5429H265V82.6429" stroke="white" stroke-width="8"/>
+<rect x="100" y="284" width="147" height="48" rx="6" stroke="white" stroke-width="8"/>
+<circle cx="126" cy="308" r="6" stroke="white" stroke-width="8"/>
+<rect x="-4" y="4" width="147" height="48" rx="6" transform="matrix(-1 0 0 1 243 204)" stroke="white" stroke-width="8"/>
+<circle r="6" transform="matrix(-1 0 0 1 221 232)" stroke="white" stroke-width="8"/>
+<line x1="248" y1="306" x2="281" y2="306" stroke="white" stroke-width="8"/>
+<line x1="285" y1="293" x2="285" y2="323" stroke="white" stroke-width="8"/>
+<line x1="178" y1="258" x2="178" y2="280" stroke="white" stroke-width="8"/>
+<rect x="211" y="296" width="20" height="24" fill="white"/>
+<rect x="184" y="296" width="20" height="24" fill="white"/>
+<path d="M157 296H177V320H157V296Z" fill="white"/>
+<rect x="170" y="220" width="20" height="24" fill="white"/>
+<rect x="143" y="220" width="20" height="24" fill="white"/>
+<path d="M116 220H136V244H116V220Z" fill="white"/>
+</svg>

src/images/services_software_dev.svg

+<svg width="557" height="360" viewBox="0 0 557 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="548" height="352" rx="16" stroke="black" stroke-width="8"/>
+<line y1="65" x2="556.09" y2="65" stroke="black" stroke-width="8"/>
+<circle cx="37" cy="34" r="8" stroke="black" stroke-width="4"/>
+<circle cx="73" cy="34" r="8" stroke="black" stroke-width="4"/>
+<circle cx="109" cy="34" r="8" stroke="black" stroke-width="4"/>
+<mask id="path-6-inside-1_207_23" fill="white">
+<rect x="132" y="166" width="50" height="91" rx="2"/>
+</mask>
+<rect x="132" y="166" width="50" height="91" rx="2" stroke="black" stroke-width="16" mask="url(#path-6-inside-1_207_23)"/>
+<mask id="path-7-inside-2_207_23" fill="white">
+<rect x="213" y="115" width="50" height="142" rx="2"/>
+</mask>
+<rect x="213" y="115" width="50" height="142" rx="2" stroke="black" stroke-width="16" mask="url(#path-7-inside-2_207_23)"/>
+<mask id="path-8-inside-3_207_23" fill="white">
+<rect x="294" y="197" width="50" height="60" rx="2"/>
+</mask>
+<rect x="294" y="197" width="50" height="60" rx="2" stroke="black" stroke-width="16" mask="url(#path-8-inside-3_207_23)"/>
+<mask id="path-9-inside-4_207_23" fill="white">
+<rect x="375" y="149" width="50" height="108" rx="2"/>
+</mask>
+<rect x="375" y="149" width="50" height="108" rx="2" stroke="black" stroke-width="16" mask="url(#path-9-inside-4_207_23)"/>
+<line x1="131.993" y1="283" x2="425.001" y2="282.5" stroke="black" stroke-width="8"/>
+</svg>

src/images/services_software_dev_white.svg

+<svg width="557" height="360" viewBox="0 0 557 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="548" height="352" rx="16" stroke="white" stroke-width="8"/>
+<line y1="65" x2="556.09" y2="65" stroke="white" stroke-width="8"/>
+<circle cx="37" cy="34" r="8" stroke="white" stroke-width="4"/>
+<circle cx="73" cy="34" r="8" stroke="white" stroke-width="4"/>
+<circle cx="109" cy="34" r="8" stroke="white" stroke-width="4"/>
+<mask id="path-6-inside-1_207_23" fill="white">
+<rect x="132" y="166" width="50" height="91" rx="2"/>
+</mask>
+<rect x="132" y="166" width="50" height="91" rx="2" stroke="white" stroke-width="16" mask="url(#path-6-inside-1_207_23)"/>
+<mask id="path-7-inside-2_207_23" fill="white">
+<rect x="213" y="115" width="50" height="142" rx="2"/>
+</mask>
+<rect x="213" y="115" width="50" height="142" rx="2" stroke="white" stroke-width="16" mask="url(#path-7-inside-2_207_23)"/>
+<mask id="path-8-inside-3_207_23" fill="white">
+<rect x="294" y="197" width="50" height="60" rx="2"/>
+</mask>
+<rect x="294" y="197" width="50" height="60" rx="2" stroke="white" stroke-width="16" mask="url(#path-8-inside-3_207_23)"/>
+<mask id="path-9-inside-4_207_23" fill="white">
+<rect x="375" y="149" width="50" height="108" rx="2"/>
+</mask>
+<rect x="375" y="149" width="50" height="108" rx="2" stroke="white" stroke-width="16" mask="url(#path-9-inside-4_207_23)"/>
+<line x1="131.993" y1="283" x2="425.001" y2="282.5" stroke="white" stroke-width="8"/>
+</svg>

src/images/services_training.svg

+<svg width="392" height="325" viewBox="0 0 392 325" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 122V321H373V122" stroke="black" stroke-width="8"/>
+<path d="M19 122V321H373V122" stroke="black" stroke-width="8"/>
+<line x1="121" y1="86" x2="271" y2="86" stroke="black" stroke-width="8"/>
+<path d="M4 46H388V102C388 110.837 380.837 118 372 118H20C11.1634 118 4 110.837 4 102V46Z" stroke="black" stroke-width="8"/>
+<path d="M304 42V9C304 6.23858 301.761 4 299 4H93C90.2386 4 88 6.23858 88 9V42" stroke="black" stroke-width="8"/>
+<rect x="62" y="104" width="22" height="41.0909" fill="white" stroke="black" stroke-width="8"/>
+<line x1="58" y1="130" x2="88" y2="130" stroke="black" stroke-width="8"/>
+<rect x="308" y="104" width="22" height="41.0909" fill="white" stroke="black" stroke-width="8"/>
+<line x1="304" y1="130" x2="334" y2="130" stroke="black" stroke-width="8"/>
+<path d="M125 176H267V182C267 190.837 259.837 198 251 198H141C132.163 198 125 190.837 125 182V176Z" stroke="black" stroke-width="8"/>
+<path d="M121 172V272H271V172" stroke="black" stroke-width="8"/>
+<rect x="185" y="191" width="22" height="41.0909" fill="white" stroke="black" stroke-width="8"/>
+<line x1="181" y1="217" x2="211" y2="217" stroke="black" stroke-width="8"/>
+</svg>

src/images/services_training_white.svg

+<svg width="392" height="325" viewBox="0 0 392 325" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 122V321H373V122" stroke="white" stroke-width="8"/>
+<path d="M19 122V321H373V122" stroke="white" stroke-width="8"/>
+<line x1="121" y1="86" x2="271" y2="86" stroke="white" stroke-width="8"/>
+<path d="M4 46H388V102C388 110.837 380.837 118 372 118H20C11.1634 118 4 110.837 4 102V46Z" stroke="white" stroke-width="8"/>
+<path d="M304 42V9C304 6.23858 301.761 4 299 4H93C90.2386 4 88 6.23858 88 9V42" stroke="white" stroke-width="8"/>
+<rect x="62" y="104" width="22" height="41.0909" fill="white" stroke="white" stroke-width="8"/>
+<line x1="58" y1="130" x2="88" y2="130" stroke="white" stroke-width="8"/>
+<rect x="308" y="104" width="22" height="41.0909" fill="white" stroke="white" stroke-width="8"/>
+<line x1="304" y1="130" x2="334" y2="130" stroke="white" stroke-width="8"/>
+<path d="M125 176H267V182C267 190.837 259.837 198 251 198H141C132.163 198 125 190.837 125 182V176Z" stroke="white" stroke-width="8"/>
+<path d="M121 172V272H271V172" stroke="white" stroke-width="8"/>
+<rect x="185" y="191" width="22" height="41.0909" fill="white" stroke="white" stroke-width="8"/>
+<line x1="181" y1="217" x2="211" y2="217" stroke="white" stroke-width="8"/>
+</svg>

src/images/services_web_dev.svg

+<svg width="568" height="368" viewBox="0 0 568 368" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.54102" y="4" width="558.915" height="359.067" rx="16.3926" stroke="black" stroke-width="8"/>
+<line x1="0.541016" y1="66.3546" x2="567.548" y2="66.3546" stroke="black" stroke-width="8"/>
+<circle cx="38.2676" cy="34.6674" r="8.15705" stroke="black" stroke-width="4.07853"/>
+<circle cx="74.9746" cy="34.6674" r="8.15705" stroke="black" stroke-width="4.07853"/>
+<circle cx="111.681" cy="34.6674" r="8.15705" stroke="black" stroke-width="4.07853"/>
+<path d="M222.988 267.041L131.052 219.742V212.985L222.988 165.686V171.829L135.966 216.261L222.988 260.693V267.041ZM306.634 128.216L251.554 292.021H245.821L300.901 128.216H306.634ZM329.815 165.686L421.75 212.985V219.742L329.815 267.041V260.898L416.836 216.466L329.815 172.034V165.686Z" fill="black"/>
+<path d="M222.988 267.041L219.328 274.155L230.988 280.153V267.041H222.988ZM131.052 219.742H123.052V224.623L127.392 226.856L131.052 219.742ZM131.052 212.985L127.392 205.871L123.052 208.104V212.985H131.052ZM222.988 165.686H230.988V152.574L219.328 158.573L222.988 165.686ZM222.988 171.829L226.625 178.954L230.988 176.727V171.829H222.988ZM135.966 216.261L132.328 209.136L118.374 216.261L132.328 223.386L135.966 216.261ZM222.988 260.693H230.988V255.796L226.625 253.569L222.988 260.693ZM226.647 259.927L134.712 212.628L127.392 226.856L219.328 274.155L226.647 259.927ZM139.052 219.742V212.985H123.052V219.742H139.052ZM134.712 220.099L226.647 172.8L219.328 158.573L127.392 205.871L134.712 220.099ZM214.988 165.686V171.829H230.988V165.686H214.988ZM219.35 164.704L132.328 209.136L139.604 223.386L226.625 178.954L219.35 164.704ZM132.328 223.386L219.35 267.818L226.625 253.569L139.604 209.136L132.328 223.386ZM214.988 260.693V267.041H230.988V260.693H214.988ZM306.634 128.216L314.217 130.766L317.764 120.216H306.634V128.216ZM251.554 292.021V300.021H257.304L259.137 294.571L251.554 292.021ZM245.821 292.021L238.238 289.472L234.691 300.021H245.821V292.021ZM300.901 128.216V120.216H295.15L293.318 125.666L300.901 128.216ZM299.051 125.666L243.971 289.472L259.137 294.571L314.217 130.766L299.051 125.666ZM251.554 284.021H245.821V300.021H251.554V284.021ZM253.404 294.571L308.483 130.766L293.318 125.666L238.238 289.472L253.404 294.571ZM300.901 136.216H306.634V120.216H300.901V136.216ZM329.815 165.686L333.474 158.573L321.815 152.574V165.686H329.815ZM421.75 212.985H429.75V208.104L425.41 205.871L421.75 212.985ZM421.75 219.742L425.41 226.856L429.75 224.623V219.742H421.75ZM329.815 267.041H321.815V280.153L333.474 274.155L329.815 267.041ZM329.815 260.898L326.177 253.773L321.815 256V260.898H329.815ZM416.836 216.466L420.474 223.591L434.428 216.466L420.474 209.341L416.836 216.466ZM329.815 172.034H321.815V176.932L326.177 179.159L329.815 172.034ZM326.155 172.8L418.09 220.099L425.41 205.871L333.474 158.573L326.155 172.8ZM413.75 212.985V219.742H429.75V212.985H413.75ZM418.09 212.628L326.155 259.927L333.474 274.155L425.41 226.856L418.09 212.628ZM337.815 267.041V260.898H321.815V267.041H337.815ZM333.452 268.023L420.474 223.591L413.198 209.341L326.177 253.773L333.452 268.023ZM420.474 209.341L333.452 164.909L326.177 179.159L413.198 223.591L420.474 209.341ZM337.815 172.034V165.686H321.815V172.034H337.815Z" fill="black"/>
+</svg>

src/images/services_web_dev_white.svg

+<svg width="568" height="368" viewBox="0 0 568 368" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.54102" y="4" width="558.915" height="359.067" rx="16.3926" stroke="white" stroke-width="8"/>
+<line x1="0.541016" y1="66.3546" x2="567.548" y2="66.3546" stroke="white" stroke-width="8"/>
+<circle cx="38.2676" cy="34.6674" r="8.15705" stroke="white" stroke-width="4.07853"/>
+<circle cx="74.9746" cy="34.6674" r="8.15705" stroke="white" stroke-width="4.07853"/>
+<circle cx="111.681" cy="34.6674" r="8.15705" stroke="white" stroke-width="4.07853"/>
+<path d="M222.988 267.041L131.052 219.742V212.985L222.988 165.686V171.829L135.966 216.261L222.988 260.693V267.041ZM306.634 128.216L251.554 292.021H245.821L300.901 128.216H306.634ZM329.815 165.686L421.75 212.985V219.742L329.815 267.041V260.898L416.836 216.466L329.815 172.034V165.686Z" fill="white"/>
+<path d="M222.988 267.041L219.328 274.155L230.988 280.153V267.041H222.988ZM131.052 219.742H123.052V224.623L127.392 226.856L131.052 219.742ZM131.052 212.985L127.392 205.871L123.052 208.104V212.985H131.052ZM222.988 165.686H230.988V152.574L219.328 158.573L222.988 165.686ZM222.988 171.829L226.625 178.954L230.988 176.727V171.829H222.988ZM135.966 216.261L132.328 209.136L118.374 216.261L132.328 223.386L135.966 216.261ZM222.988 260.693H230.988V255.796L226.625 253.569L222.988 260.693ZM226.647 259.927L134.712 212.628L127.392 226.856L219.328 274.155L226.647 259.927ZM139.052 219.742V212.985H123.052V219.742H139.052ZM134.712 220.099L226.647 172.8L219.328 158.573L127.392 205.871L134.712 220.099ZM214.988 165.686V171.829H230.988V165.686H214.988ZM219.35 164.704L132.328 209.136L139.604 223.386L226.625 178.954L219.35 164.704ZM132.328 223.386L219.35 267.818L226.625 253.569L139.604 209.136L132.328 223.386ZM214.988 260.693V267.041H230.988V260.693H214.988ZM306.634 128.216L314.217 130.766L317.764 120.216H306.634V128.216ZM251.554 292.021V300.021H257.304L259.137 294.571L251.554 292.021ZM245.821 292.021L238.238 289.472L234.691 300.021H245.821V292.021ZM300.901 128.216V120.216H295.15L293.318 125.666L300.901 128.216ZM299.051 125.666L243.971 289.472L259.137 294.571L314.217 130.766L299.051 125.666ZM251.554 284.021H245.821V300.021H251.554V284.021ZM253.404 294.571L308.483 130.766L293.318 125.666L238.238 289.472L253.404 294.571ZM300.901 136.216H306.634V120.216H300.901V136.216ZM329.815 165.686L333.474 158.573L321.815 152.574V165.686H329.815ZM421.75 212.985H429.75V208.104L425.41 205.871L421.75 212.985ZM421.75 219.742L425.41 226.856L429.75 224.623V219.742H421.75ZM329.815 267.041H321.815V280.153L333.474 274.155L329.815 267.041ZM329.815 260.898L326.177 253.773L321.815 256V260.898H329.815ZM416.836 216.466L420.474 223.591L434.428 216.466L420.474 209.341L416.836 216.466ZM329.815 172.034H321.815V176.932L326.177 179.159L329.815 172.034ZM326.155 172.8L418.09 220.099L425.41 205.871L333.474 158.573L326.155 172.8ZM413.75 212.985V219.742H429.75V212.985H413.75ZM418.09 212.628L326.155 259.927L333.474 274.155L425.41 226.856L418.09 212.628ZM337.815 267.041V260.898H321.815V267.041H337.815ZM333.452 268.023L420.474 223.591L413.198 209.341L326.177 253.773L333.452 268.023ZM420.474 209.341L333.452 164.909L326.177 179.159L413.198 223.591L420.474 209.341ZM337.815 172.034V165.686H321.815V172.034H337.815Z" fill="white"/>
+</svg>

src/pages/services.jsx

 
 import Layout from "../components/layout";
 import Seo from "../components/seo";
+import ServicesShortcutContainerL from "../components/servicesShortcutContainerL";
 import "../scss/services.scss";
 
 const VosBesoins = () => {
 	return (
 		<Layout>
 			<Seo title="Vos besoins" />
-			<div className="page-content">
-				<h2 className="page-title">Nos services</h2>
-				<section className="page-section">
-					<div className="web">
-						<h3 className="section-title" id="dev">
-							Développement web
-						</h3>
-						<p className="section-paragraph">
-							Vous êtes une personne, une association, une entreprise et vous
-							souhaitez <span>une présence sur internet</span> 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>
-					</div>
-					<div className="software">
-						<h3 className="section-title">Développement logiciel</h3>
-						<p className="section-paragraph">
-							Vous avez des besoins spécifiques au sein de votre entreprise ou de
-							votre administration ? Nous développons également des logiciels sur
-							mesure pour répondre à chacun de vos besoins. Que vous cherchiez une
-							solution de gestion administrative, de récolte de données ou encore à
-							vous équiper d'une application mobile, nous saurons nous adapter pour
-							développer la solution qui vous correspond.{" "}
-						</p>
-					</div>
+			<div className="services-header">
+				<h1 className="services-header-title">NOS SERVICES</h1>
+				<div className="services-header-overview-container">
+					<p className="services-header-overview">
+						La Coopérative Libre Informatique est une association à but non lucratif
+						spécialisée dans le numérique, fournissant un large variété de prestations
+						numériques.
+					</p>
+				</div>
+			</div>
+			<ServicesShortcutContainerL />
+			<div className="services-sections">
+				<section id="web-dev">
+					<h2 className="services-section-name">Développement web</h2>
+					<p className="services-section-paragraph">
+						Vous êtes une personne, une association, une entreprise et vous souhaitez{" "}
+						<span>une présence sur internet</span> 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>
 				</section>
-				<section className="page-section">
-					<h3 className="section-title" id="maintenance">
-						Maintenance informatique
-					</h3>
-					<p className="section-paragraph">
+				<section id="software-dev">
+					<h2 className="services-section-name">Développement logiciel</h2>
+					<p className="services-section-paragraph">
+						Vous avez des besoins spécifiques au sein de votre entreprise ou de votre
+						administration ? Nous développons également des logiciels sur mesure pour
+						répondre à chacun de vos besoins. Que vous cherchiez une solution de gestion
+						administrative, de récolte de données ou encore à vous équiper d'une
+						application mobile, nous saurons nous adapter pour développer la solution
+						qui vous correspond.{" "}
+					</p>
+				</section>
+				<section id="maintenance">
+					<h2 className="services-section-name">Maintenance</h2>
+					<p className="services-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">
+					<p className="services-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
 						entre autres.
 					</p>
 				</section>
-				<section className="page-section">
-					<h3 className="section-title" id="training-course">
-						Formation
-					</h3>
-					<div className="formation-div">
-						<p className="formation-paragraph">
-							Nous proposons des formations concernant de nombreux domaines. Elles
-							sont destinées aux entreprises ou aux particulier·ère·s.
-						</p>
-						<ul className="formation-list">
-							<li>Usage d'un Content Manager System comme Wordpress</li>
-							<li>Outils de bureautique</li>
-							<li>Administration de systèmes Linux</li>
-							<li>Développement opérationnel</li>
-						</ul>
-					</div>
+				<section id="training">
+					<h2 className="services-section-name">Formations</h2>
+					<p className="services-section-paragraph">
+						Nous proposons des formations concernant de nombreux domaines. Elles sont
+						destinées aux entreprises ou à toute personne désireuse de compléter ses
+						savoirs.
+					</p>
+					<ul className="services-formation-list">
+						<li>Usage d'un Content Manager System comme Wordpress</li>
+						<li>Outils de bureautique</li>
+						<li>Administration de systèmes Linux</li>
+						<li>Développement opérationnel</li>
+					</ul>
 				</section>
-				<section className="page-section">
-					<h3 className="section-title" id="self-hosting">
-						Autohébergement
-					</h3>
-					<p className="section-paragraph">
+				<section id="self-hosting">
+					<h2 className="services-section-name">Autohébergement</h2>
+					<p className="services-section-paragraph">
 						Les hébergement centralisés présentent de nombreux risques : les accidents
 						se répercutent sur l'ensemble des services numérique. L'auto-hébergement
 						résout une grande partie de ces problèmes : sauvegardes, gestion des données
 						agenda, VPN, etc.
 					</p>
 				</section>
-				<section className="page-section">
-					<h3 className="section-title" id="infosec">
-						Audit de sécurité
-					</h3>
-					<p className="section-paragraph">
+				<section id="security-audit">
+					<h2 className="services-section-name">Audit de sécurité</h2>
+					<p className="services-section-paragraph">
 						Les réglementations française et européenne accompagnent et contraignent les
 						infrastructures numériques à recourir à de bonnes pratiques de sécurité.
 						Notre démarche est de déployer et de transmettre les compétences techniques

src/scss/main.scss

 	width: 75vw;
 }
 
-.underlined {
+.menu-item-underlined {
 	position: relative;
 	text-decoration: none;
 

src/scss/services.scss

 	src: url(../fonts/Raleway-SemiBold.ttf);
 }
 
-.section-paragraph > span {
-	color: $primary;
+@font-face {
+	font-family: Cutive Mono;
+	src: url(../fonts/CutiveMono-Regular.ttf);
+}
+
+.services-header {
+	margin-top: 5rem;
+}
+
+.services-header-title {
+	font-family: Cutive Mono;
+	font-weight: bolder;
+	font-size: 2rem;
+	text-align: center;
+	margin-top: 0;
+	margin-bottom: 1rem;
+}
+
+.services-header-overview-container {
+	background-color: $light;
+	width: 100vw;
+	padding: 1.5rem;
+}
+
+.services-header-overview {
+	background-image: url(../images/services_header_img.webp);
+	background-size: contain;
+	background-clip: text;
+	background-blend-mode: screen;
+	color: transparent;
+
 	font-family: Raleway Bold;
+	font-weight: bolder;
+	font-size: 1.5rem;
+	text-align: center;
+	margin: 0 auto;
+	width: 90%;
+	max-width: 50rem;
+}
+
+.services-header-img {
+	width: 100vw;
+	max-height: 30rem;
+}
+
+.services-sections {
+	width: 80vw;
+	max-width: 70rem;
+}
+
+.services-sections > section {
+	position: relative;
+	background-color: $light;
+	background-position: bottom left 15%;
+	background-size: 7rem;
+	background-repeat: no-repeat;
+	background-clip: padding-box;
+	height: auto;
+	padding: 0.5rem 1rem;
+	margin: 2rem 0;
+
+	&::after {
+		position: absolute;
+		content: "";
+		background-color: $primary;
+		width: 50vw;
+		height: 5px;
+		bottom: -18px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	&:last-of-type::after {
+		display: none;
+	}
+}
+
+.services-section-name {
+	font-family: Cutive Mono;
+	font-weight: bolder;
+	font-size: 1.5rem;
+	text-align: center;
+}
+
+.services-section-paragraph {
+	text-align: center;
+	line-height: 1.7rem;
+	padding: 0.7rem 1.1rem;
+}
+
+.services-formation-list {
+	list-style: none;
+}
+
+#web-dev {
+	background-image: url("../images/services_web_dev_white.svg");
+}
+
+#software-dev {
+	background-image: url("../images/services_software_dev_white.svg");
+}
+
+#maintenance {
+	background-image: url("../images/services_maintenance_white.svg");
+}
+
+#software-dev {
+	background-image: url("../images/services_software_dev_white.svg");
+}
+
+#training {
+	background-image: url("../images/services_training_white.svg");
+}
+
+#self-hosting {
+	background-image: url("../images/services_self_hosting_white.svg");
+}
+
+#security-audit {
+	background-image: url("../images/services_security_audit_white.svg");
 }