created and styled header section

src/commons/header.jsx

@@ -1,3 +1,23 @@
+import logo from "./img/logo.png";
+import bbclogo from "./img/logo-bbc.png";
+import forbeslogo from "./img/logo-forbes.png";
+import techcrunchlogo from "./img/logo-techcrunch.png";
+import bilogo from "./img/logo-bi.png";
+
 export default function Header() {
-  return <header className="header">Header</header>;
+  return (
+    <header className="header">
+      <img src={logo} alt="Nexter Logo" className="header__logo" />
+      <h3 className="heading-3">Your own home:</h3>
+      <h1 className="heading-1">The ultimate personal freedom</h1>
+      <button className="btn header__btn">View our poperties</button>
+      <div className="header__seenon-text">Seen On</div>
+      <div className="header__seenon-logos">
+        <img src={bbclogo} alt="BBC Logo" />
+        <img src={forbeslogo} alt="Forbes Logo" />
+        <img src={techcrunchlogo} alt="Techcrunch Logo" />
+        <img src={bilogo} alt="Business Insider Logo" />
+      </div>
+    </header>
+  );
 }

src/sass/_header.scss

@@ -1,4 +1,59 @@
 .header {
-  background-color: $color-grey-dark-1;
   grid-column: full-start / col-end 6;
+  background-image: linear-gradient(
+      rgba($color-secondary, 0.93),
+      rgba($color-secondary, 0.93)
+    ),
+    url(../commons/img/hero.jpeg);
+  background-size: cover;
+  background-position: center;
+  padding: 8rem;
+  padding-top: 4rem;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-rows: 1fr min-content 6rem 1fr;
+  grid-template-columns: max-content;
+  row-gap: 1.5rem;
+  justify-content: center;
+
+  &__logo {
+    height: 3rem;
+    justify-self: center;
+  }
+
+  &__btn {
+    align-self: start;
+    justify-self: start;
+  }
+
+  &__seenon-text {
+    display: grid;
+
+    font-size: 1.6rem;
+    color: $color-grey-light-2;
+    grid-template-columns: 1fr max-content 1fr;
+    column-gap: 1.5rem;
+    align-items: center;
+
+    &::before,
+    &::after {
+      content: "";
+      height: 1px;
+      display: block;
+      background-color: currentColor;
+    }
+  }
+
+  &__seenon-logos {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 3rem;
+    justify-items: center;
+
+    img {
+      height: 2.5rem;
+      filter: brightness(70%);
+    }
+  }
 }

src/sass/_typography.scss

@@ -5,6 +5,9 @@
 
 .heading-1 {
   @extend %heading;
+  font-size: 4.5rem;
+  color: $color-grey-light-1;
+  line-height: 1;
 }
 
 .heading-2 {