Ajout de contenu dans la page a-propos

src/components/header/index.jsx

@@ -22,12 +22,12 @@ const Header = () => {
 	return (
 		<header ref={ref}>
 			<div className="hero">
-				<h1>Développement et accompagnement numérique</h1>
+				<h1>Coopérative local du numérique</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.
+							Développement, formation, assistance et réseau : des services
+							sur-mesure.
 						</p>
 						<p className="hero-highlight">
 							Demandez nous un devis, nous vous répondrons en moins de 24

src/components/navbar/index.jsx

@@ -7,7 +7,7 @@ import MenuIcon from "../../images/menu.svg";
 
 const Navbar = () => {
 	const headerContext = useContext(HeaderContext);
-	const [toogleMenu, setToogleMenu] = useState(false);
+	const [toggleMenu, setToggleMenu] = useState(false);
 
 	const handleShowNavbar = (context) => {
 		if (context.isHeaderHidden === true) {
@@ -18,23 +18,21 @@ const Navbar = () => {
 	};
 
 	const handleMenu = () => {
-		setToogleMenu(!toogleMenu);
+		setToggleMenu(!toggleMenu);
 	};
 
-	const menuStyle = {
-		background: "red";
-
-	}
-
 	return (
 		<div id="navbar-container">
 			<nav style={handleShowNavbar(headerContext)}>
 				<div className="details">
-					<Link to="/services" className="menu-btn" style={{ toogleMenu ? `${menuStyle}` : "" }}> 
-					{/* the above line does not work */}
+					<Link
+						to="/services"
+						className={toggleMenu ? "menu-btn" : "menu-btn-hidden"}>
 						<span>Services</span>
 					</Link>
-					<Link to="/a-propos" className="menu-btn">
+					<Link
+						to="/a-propos"
+						className={toggleMenu ? "menu-btn" : "menu-btn-hidden"}>
 						<span>L'Association</span>
 					</Link>
 				</div>

src/components/navbar/index.scss

@@ -88,6 +88,14 @@ nav {
 			flex-direction: column;
 			align-items: center;
 			margin-left: 0;
+
+			.menu-btn {
+				background: red;
+			}
+
+			.menu-btn-hidden {
+				display: none;
+			}
 		}
 
 		div.title-container {

src/pages/a-propos.jsx

@@ -16,10 +16,22 @@ const Apropos = () => {
 						numériques basée à Strasbourg. Nous sommes sensibles à l'éthique du
 						libre et à la qualité du travail.
 					</p>
+					<p className="section-paragraph">
+						Les enjeux majeurs contemporain sont en lien étroit avec le
+						numérique. Il s'agit par exemple du respect des données privées,
+						réduction de la fracture numérique, accessibilité, impact
+						écologique. La CLI et ses membres à titre individuel s'engagent à en
+						prendre conscience et à ainsi orienter leur manière de produire.
+						Nous croyons que le croissement de nos démarches nous enrichis
+						collectivement, notamment sur ces thématiques.
+					</p>
 					<p className="section-paragraph">
 						L'objectif de l'association est de fournir un cadre horizontal et
-						convivial pour permettre l'émergence de prestations collectives
-						selon la libre association des uns avec les autres.
+						convivial pour permettre l'émergence de prestations collectives et
+						plus vertueuses, grâce à la libre association des unes avec les
+						autres. Cette organisation permet la mise à l'échelle de nos moyens
+						de production : important ou plus modeste, votre projet sera bien
+						traité par nos équipes.
 					</p>
 				</section>
 			</div>

src/pages/index.jsx

@@ -25,10 +25,10 @@ const IndexPage = () => {
 							/>
 						</div>
 						<p className="service-description">
-							Nous créons sur mesure le site dont vous avez besoin pour votre
-							activité : e-commerce, blog, portfolio ...
+							Envie d'une présence sur le web ? Nous concevons votre e-commerce,
+							blog, portfolio ...
 						</p>
-						<Link to="/vos-besoins#web-dev" className="service-link">
+						<Link to="/services#web-dev" className="service-link">
 							<span> ... et plus encore !</span>
 						</Link>
 					</div>
@@ -45,7 +45,7 @@ const IndexPage = () => {
 							Besoin d'une application pour votre entreprise ? Nous sommes à
 							l'écoute pour développer l'outil nécessaire ...
 						</p>
-						<Link to="/vos-besoins#app-dev" className="service-link">
+						<Link to="/services#app-dev" className="service-link">
 							<span> ... et plus encore !</span>
 						</Link>
 					</div>
@@ -63,7 +63,7 @@ const IndexPage = () => {
 							développement : CMS - Linux - Base de donnée SQL ...
 						</p>
 						<Link
-							to="/vos-besoins#course-and-maintenance"
+							to="/services#formation-et-assistance"
 							className="service-link">
 							<span> ... et plus encore !</span>
 						</Link>
@@ -81,7 +81,7 @@ const IndexPage = () => {
 							Nous intervenons ou conceptualisons votre infrastructure réseau, à
 							la fois hardware et software ...
 						</p>
-						<Link to="/vos-besoins#network" className="service-link">
+						<Link to="/services#reseau" className="service-link">
 							<span> ... et plus encore !</span>
 						</Link>
 					</div>

src/pages/services.jsx

@@ -34,7 +34,7 @@ const VosBesoins = () => {
 					</p>
 				</section>
 				<section className="page-section">
-					<h3 className="section-title" id="course-and-maintenance">
+					<h3 className="section-title" id="formation-et-assistance">
 						Formation et assistance
 					</h3>
 					<p className="section-paragraph">
@@ -46,7 +46,7 @@ const VosBesoins = () => {
 					</p>
 				</section>
 				<section className="page-section">
-					<h3 className="section-title" id="network">
+					<h3 className="section-title" id="reseau">
 						Réseau
 					</h3>
 					<p className="section-paragraph">