header: ajustement de la taille et espacement de robot-face

src/components/btnContact/index.jsx

@@ -5,7 +5,7 @@ import "./index.scss";
 
 const BtnContact = ({ children }) => {
 	return (
-		<Link to="/#contact">
+		<Link to="/#contact" id="btn-contact">
 			<button className="btn cta">
 				<span>{children}</span>
 			</button>

src/components/btnContact/index.scss

@@ -1,5 +1,9 @@
 @use "../../scss/abstracts/colors" as *;
 
+#btn-contact {
+	width: fit-content;
+}
+
 button.cta {
 	border: 1px solid $primary;
 	background: $primary;

src/components/header/index.scss

@@ -19,13 +19,14 @@ header {
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		padding-bottom: 10rem;
+		justify-content: space-evenly;
+		// padding-bottom: 10rem;
 		width: 100%;
 		height: 100vh;
 		text-align: center;
 
 		.hero-container {
-			margin: 17rem auto auto auto;
+			// margin: 17rem auto auto auto;
 			max-width: 100vw;
 
 			.hero-logo {
@@ -43,6 +44,7 @@ header {
 			.hero-box {
 				display: flex;
 				flex-direction: column;
+				align-items: center;
 				color: $dark;
 				min-width: fit-content;
 
@@ -67,12 +69,13 @@ header {
 			}
 		}
 		.robot-face-container {
-			padding-top: 4rem;
+			// padding-top: 4rem;
 			margin-bottom: 0;
+			width: fit-content;
+			height: fit-content;
 
 			img {
-				width: 70%;
-				height: 70%;
+				height: 20rem;
 			}
 		}
 	}
@@ -83,7 +86,7 @@ header {
 		.hero {
 			display: flex;
 			flex-direction: row;
-			padding-top: 10rem;
+			// padding-top: 10rem;
 
 			.hero-container {
 				display: flex;
@@ -101,10 +104,10 @@ header {
 			.robot-face-container {
 				margin: 0;
 				padding-left: 2rem;
+				margin-right: 2rem;
 
 				img {
-					width: 70%;
-					height: 70%;
+					// width: 70%;
 				}
 			}
 		}