Header

src/app/components/Navbar.js

@@ -6,8 +6,8 @@ import menu from "../assets/menu.svg";
 
 export default function Navbar() {
   return (
-    <nav className={styles.navbar}>
-      <div className={`${styles.container} container shadow`}>
+    <nav className={`${styles.navbar} shadow`}>
+      <div className={`${styles.container} container`}>
         <div className={styles.header}>
           <div>
             <Link href="/">
@@ -31,10 +31,7 @@ export default function Navbar() {
             <a href="gallery.html">Gallery</a>
           </li>
           <li>
-            <a href="contact.html">Contact</a>
-          </li>
-          <li>
-            <a href="about.html">About</a>
+            <Link href="/contact">Contact Us</Link>
           </li>
         </ul>
       </div>

src/app/components/Navbar.module.css

@@ -31,6 +31,11 @@
   text-decoration: none;
 }
 
+.highlight {
+  color: white;
+  background-color: blue;
+}
+
 /* Underline links on hover */
 .navbar .container li a:hover {
   text-decoration: underline;

src/app/page.js

@@ -1,11 +1,39 @@
 import Image from "next/image";
 import styles from "./page.module.css";
+import bgimage from "./assets/header-bg.jpg";
 
 export default function Home() {
   return (
     <div className={styles.page}>
       <main className={styles.main}>
-        <h1>Hello world</h1>
+        <section>
+          <div className={styles.header}>
+            <Image
+              src={bgimage}
+              alt="Header Background"
+              placeholder="blur"
+              quality={100}
+              fill
+              sizes="100vw"
+              style={{
+                objectFit: "cover",
+              }}
+            />
+            <div className={styles.textbox}>
+              <div className="container">
+                <div className={styles.textboxInner}>
+                  <h1>Delivering Exceptional Service.</h1>
+                  <p>
+                    Our mission is to provide top-notch repair services and an
+                    outstanding customer experience. Comprehensive guides, a
+                    supportive community, and prompt assistance make working
+                    with us a breeze.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
     </div>
   );

src/app/page.module.css

@@ -0,0 +1,36 @@
+.header {
+  position: relative;
+  height: 50em;
+}
+
+.header img {
+  filter: brightness(50%);
+}
+
+.textbox {
+  color: white;
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  transform: translate(0%, -50%);
+}
+
+.textbox h1 {
+  font-size: 3.5em;
+  margin-bottom: 0.5em;
+}
+
+@media (min-width: 920px) {
+  .header {
+    height: 50em;
+    clip-path: polygon(0 0, 100% 0, 100% 25em, 0 100%);
+  }
+
+  .textbox {
+    margin-top: -5em;
+  }
+
+  .textboxInner {
+    width: 50%;
+  }
+}