Header and Adhook created

src/components/Adhook.jsx

@@ -4,7 +4,9 @@ import '../styles/Adhook.scss';
 function Adhook() {
     return (
         <div className='Adhook'>
-            <img src={Coast} alt='Coastal View' className='Coast-img' />
+            <p className='Adhook--title'>
+                Chez vous, <span>partout et ailleurs</span>
+            </p>
         </div>
     );
 }

src/components/App.jsx

@@ -1,8 +1,8 @@
 
 import '../styles/App.scss';
 import NavBar from './NavBar';
-import Footer from './Footer';
 import Adhook from './Adhook';
+import Footer from './Footer';
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import {

src/components/NavBar.jsx

@@ -4,9 +4,9 @@ import '../styles/NavBar.scss';
 function NavBar() {
 	return (
 		<div className='NavBar'>
-			<img src={logo} alt='Kasa' className='kasa-logo' />
-			<span className='navLinks'>
-				<a className='kasa-nav'>Accueil</a> <a className='kasa-nav'>A propos</a>
+			<img src={logo} className='NavBar--logo' alt='Kasa'/>
+			<span className='NavBar--links'>
+				<a className='NavBar--nav'>Accueil</a> <a className='NavBar--nav'>A Propos</a>
 			</span>
 		</div>
 	);

src/styles/Adhook.scss

@@ -0,0 +1,27 @@
+.Adhook {
+    display: grid;
+    place-items: center;
+    width: min(1240px, 90%);
+    min-height: 223px;
+    margin: auto;
+    border-radius: 25px;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+    color: white;
+    margin-bottom: 43px;
+    position: relative;
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url("../assets/Coast.png");
+        background-size: cover;
+        background-position: center;
+        filter: brightness(60%);
+        border-radius: inherit;
+        z-index: 0;
+}
+}

src/styles/NavBar.scss

@@ -1,33 +1,52 @@
+$kasa-black: #000000;
+$kasa-pink: #FF6060;
+$kasa-font: "Montserrat", sans-serif;
+
 
 .NavBar {
+    width: min(1240px, 80%);
+    height: auto;
+    margin: 45px auto 50px auto;
     display: flex;
     justify-content: space-between;
-    padding: 10px 20px;
-}
+    align-items: center;
 
-.kasa-logo {
-    display: flex;
-    padding: 40px;
-    pointer-events: none;
-    color: black;
-}
+    &a {
+        &:active, &:focus {
+            text-decoration: underline;
+            outline: none;
+        }
 
-.navLinks {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 10px 20px;
-    align-items: center;
-}
+        &:link, &:visited {
+            color: $kasa-black;
+        }
+
+        &:hover {
+            color: $kasa-pink;
+        }
+    }
+    &--logo {
+        width: 210px;
+        height: 68px;
+    }
 
-.kasa-nav {
-    font-family: "Montserrat", sans-serif;
-    display: flex;
-    align-items: flex-end;
-    font-size: 1.5em;
-    font-weight: 500;
-    color: black;
-    width: 120px;
-    padding: 40px;
-}
+    &--links {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 10px 20px;
+        align-items: center;
+        gap: 20px;
+    }
 
+    &--nav {
+        font-family: $kasa-font;
+        font-size: 16px;
+        display: flex;
+        align-items: flex-end;
+        font-size: 1.5em;
+        font-weight: 500;
+        color: $kasa-black;
+        width: 120px;
+    }
+}