Modification des styles

src/components/contactForm/index.scss

@@ -45,6 +45,7 @@
 		padding: 1rem;
 		text-align: left;
 		line-height: 1.4rem;
+		font-size: 1rem;
 		border: 1px solid $primary;
 		border-radius: 0.5rem;
 	}

src/components/footer/index.jsx

@@ -24,6 +24,7 @@ const Footer = () => {
 				<li>
 					<div className="footer-contact">
 						<BtnContact>Nous contacter</BtnContact>
+						<p>06.11.22.33.44</p>
 						<p>notre@email.com</p>
 					</div>
 					<div className="footer-legal">

src/components/header/index.jsx

@@ -8,7 +8,7 @@ import HeaderContext from "../../context/headerContext";
 const Header = () => {
 	const navbarContext = useContext(HeaderContext);
 	const { ref, inView } = useInView({
-		threshold: 0
+		threshold: 0.03
 	});
 
 	const handleVisibility = (x) => {
@@ -22,12 +22,12 @@ const Header = () => {
 	return (
 		<header ref={ref}>
 			<div className="hero">
-				<h1>Du numérique, en Alsace, au plus proche de vos besoins.</h1>
+				<h1>Développement et accompagnement 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.{" "}
+							projets numériques.
 						</p>
 						<p className="hero-highlight">
 							Demandez nous un devis, nous vous en moins de 24 heures.

src/components/navbar/index.jsx

@@ -9,12 +9,8 @@ const Navbar = () => {
 
 	const handleShowNavbar = (context) => {
 		if (context.isHeaderHidden === true) {
-			console.log(context.isHeaderHidden);
-			console.log("transparent");
 			return { background: "transparent" };
 		} else {
-			console.log(context.isHeaderHidden);
-			console.log("white");
 			return { background: "white" };
 		}
 	};
@@ -27,7 +23,7 @@ const Navbar = () => {
 						<span>Services</span>
 					</Link>
 					<Link to="/a-propos" className="menu-btn">
-						<span>La Coopérative</span>
+						<span>L'Association</span>
 					</Link>
 				</div>
 				<Link id="navbar-title" to="/">

src/components/navbar/index.scss

@@ -13,13 +13,12 @@ nav {
 	width: 100vw;
 	height: 3.5rem;
 	padding: 0;
-	// background: transparent;
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	// justify-content: space-between;
 
 	.details {
-		margin-right: auto;
+		align-items: flex-start;
 		margin-left: 1.5rem;
 		color: $dark;
 
@@ -35,11 +34,11 @@ nav {
 	}
 
 	#navbar-title {
-		margin: 0 auto;
 		font-family: "Cutive Mono";
 		font-size: 2.5rem;
 		font-weight: bold;
 		color: $dark;
+		margin: 0 auto;
 
 		span {
 			margin: 0;
@@ -48,8 +47,9 @@ nav {
 	}
 
 	#contact-btn {
-		margin-left: auto;
+		// margin-left: auto;
 		margin-right: 1.5rem;
+		padding-left: 99px;
 
 		button {
 			background: $primary;

src/pages/a-propos.jsx

@@ -8,16 +8,18 @@ const Apropos = () => {
 	return (
 		<Layout>
 			<Seo title="À notre propos"></Seo>
-			<div>
-				<h2>À notre propos</h2>
+			<div className="page-content">
+				<h2 className="page-title">À 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.
+						numériques basée à Strasbourg. Nous sommes sensibles à l'éthique du
+						libre et à la qualité du travail.
+					</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.
 					</p>
 				</section>
 			</div>

src/pages/nous-contacter.jsx

@@ -11,6 +11,7 @@ const NousContacter = () => {
 		<Layout>
 			<Seo title="Nous contacter" />
 			<div className="page-contact">
+				<h2 className="page-title">Contactez nous</h2>
 				<ContactForm />
 			</div>
 		</Layout>

src/pages/statuts.jsx

@@ -9,7 +9,7 @@ const StatutsPage = () => {
 	return (
 		<Layout>
 			<Seo title="Nos statuts" />
-			<div className="page-content">
+			<div className="page-content page-statuts">
 				<section className="pages-sections status-section">
 					<h3 className="section-title">Les status de l'association</h3>
 					<h4 className="status-title">Constitution de l'association</h4>

src/scss/main.scss

@@ -51,6 +51,12 @@ main {
 }
 
 .page-content {
+	padding-top: 5rem;
+
+	.page-title {
+		text-align: center;
+	}
+
 	> section {
 		margin-top: 40px;
 		width: 100%;

src/scss/nous-contacter.scss

@@ -1,12 +1,6 @@
 .page-contact {
+	padding-top: 5rem;
 	display: flex;
-	flex-wrap: wrap-reverse;
-	justify-content: center;
-	.contact-instructions {
-		margin: 1rem;
-
-		.instructions-list {
-			list-style: none;
-		}
-	}
+	flex-direction: column;
+	align-items: center;
 }

src/scss/statuts.scss

@@ -12,13 +12,17 @@
 	}
 }
 
-.status-paragraph {
-	text-align: justify;
-	text-justify: inter-word;
-	line-height: 1.3rem;
-	margin-right: auto;
-}
+.page-statuts {
+	padding: 3rem 1.5rem 0.5rem 1.5rem;
+
+	.status-paragraph {
+		text-align: justify;
+		text-justify: inter-word;
+		line-height: 1.3rem;
+		margin-right: auto;
+	}
 
-.status-list {
-	margin-right: auto;
+	.status-list {
+		margin-right: auto;
+	}
 }