Header

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>
   );