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