feat: add the hero section

app/(root)/page.jsx

@@ -1,3 +1,5 @@
+import Hero from "@/components/Hero";
+
 export const metadata = {
   title: "MERNMail - a MERN stack webmail application",
   description:
@@ -31,7 +33,12 @@ export const metadata = {
 };
 
 function Home() {
-  return <div>Placeholder</div>;
+  return (
+    <>
+      <Hero />
+      Some other sections, of course!
+    </>
+  );
 }
 
 export default Home;

components/Hero.jsx

@@ -0,0 +1,53 @@
+import Image from "next/image";
+import Link from "next/link";
+
+function Hero() {
+  return (
+    <div className="flex flex-col md:flex-row mx-auto max-w-screen-xl px-3 py-24">
+      <div className="md:w-1/2 self-center text-center md:text-start">
+        <h1 className="font-bold text-5xl md:text-6xl hyphens-auto leading-tight md:leading-tight md:text-start">
+          Revolution&shy;ize your <span className="text-primary">inbox</span>{" "}
+          with{" "}
+          <span className="relative">
+            <span className="absolute top-0 -left-1 -right-1 bottom-0 -rotate-1 bg-primary"></span>
+            <span className="relative text-primary-foreground">MERNMail</span>
+          </span>
+        </h1>
+        <p className="text-muted-foreground text-lg my-4 md:w-10/12">
+          Experience the future of email with MERNMail. Built with the MERN
+          stack for performance and security. Join and take control of your
+          inbox today!
+        </p>
+        <div className="flex flex-row gap-2 justify-center md:justify-start">
+          <Link
+            href="#"
+            target={"_self"}
+            className="bg-primary text-primary-foreground rounded-md px-4 py-2 hover:bg-primary/75 transition-colors"
+          >
+            Get started
+          </Link>
+          <Link
+            href="#"
+            target={"_self"}
+            className="bg-accent text-accent-foreground rounded-md px-4 py-2 hover:bg-accent/75 transition-colors"
+          >
+            View demo
+          </Link>
+        </div>
+      </div>
+      <div className="md:w-1/2 sm:px-5 py-16 md:py-24 self-center">
+        <div className="bg-border p-2 rounded-xl">
+          <Image
+            src="/screenshot.png"
+            alt="MERNMail screenshot"
+            width={1920}
+            height={1080}
+            className="w-full rounded-lg"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Hero;