created and styled footer

src/commons/footer.jsx

@@ -1,3 +1,49 @@
 export default function Footer() {
-  return <footer className="footer">Footer</footer>;
+  return (
+    <footer className="footer">
+      <ul className="nav">
+        <li className="nav__item">
+          <a href="#" className="nav__link">
+            Find your dream home
+          </a>
+        </li>
+        <li className="nav__item">
+          <a href="#" className="nav__link">
+            Request proposal
+          </a>
+        </li>
+        <li className="nav__item">
+          <a href="#" className="nav__link">
+            Download homeplanner
+          </a>
+        </li>
+        <li className="nav__item">
+          <a href="#" className="nav__link">
+            Contact us
+          </a>
+        </li>
+        <li className="nav__item">
+          <a href="#" className="nav__link">
+            Submit your property
+          </a>
+        </li>
+        <li className="nav__item">
+          <a href="#" className="nav__link">
+            Come work with us!
+          </a>
+        </li>
+      </ul>
+      <p className="copyright">
+        &copy; Designed by Jonas Schmedtmann and coded by{" "}
+        <a
+          href="https://yusufipek.me"
+          target="_blank"
+          rel="noreferrer"
+          className="copyright__link"
+        >
+          Yusuf İpek
+        </a>
+      </p>
+    </footer>
+  );
 }

src/sass/_footer.scss

@@ -1,4 +1,48 @@
 .footer {
   background-color: $color-secondary;
   grid-column: full-start / full-end;
+
+  padding: 8rem;
+}
+
+.nav {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 2rem;
+  align-items: center;
+
+  &__link:link,
+  &__link:visited {
+    font-size: 1.4rem;
+    color: #fff;
+    text-decoration: none;
+    font-family: $font-display;
+    text-transform: uppercase;
+    text-align: center;
+    padding: 1.5rem;
+    display: block;
+    transition: all 0.2s;
+  }
+
+  &__link:hover,
+  &__link:active {
+    background-color: rgba(#fff, 0.05);
+    transform: translateY(-3px);
+  }
+}
+
+.copyright {
+  font-size: 1.4rem;
+  color: $color-grey-light-2;
+  margin-top: 6rem;
+  text-align: center;
+
+  &__link {
+    color: #fff;
+
+    &:hover {
+      color: $color-grey-light-2;
+    }
+  }
 }