Add a background to the hero

Frontend/src/app/(pages)/page.tsx

@@ -2,6 +2,7 @@ import FeaturedContent from "@/components/landing/featured-content";
 import Hero from "@/components/landing/hero";
 import StatisticCounters from "@/components/landing/statistic-counters";
 import { ReactElement } from "react";
+import Background from "../components/landing/background";
 
 /**
  * The landing page.
@@ -9,10 +10,18 @@ import { ReactElement } from "react";
  * @returns the page jsx
  */
 const LandingPage = (): ReactElement => (
-    <main className="px-3">
-        <Hero />
-        <FeaturedContent />
-        <StatisticCounters />
+    <main className="flex flex-col gap-14">
+        {/* Hero */}
+        <div className="relative">
+            <Background />
+            <Hero />
+        </div>
+
+        {/* Content */}
+        <div className="px-3">
+            <FeaturedContent />
+            <StatisticCounters />
+        </div>
     </main>
 );
 export default LandingPage;

Frontend/src/app/components/landing/background.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * The background component.
+ *
+ * @returns the background jsx
+ */
+const Background = (): ReactElement => (
+    <div
+        className={cn(
+            "before:absolute before:left-0 before:top-0 before:w-full before:h-full before:bg-black/65", // Dark Overlay
+            `absolute top-0 left-0 w-full h-full bg-[url("/media/background.jpg")] bg-cover bg-center -z-10`, // Background
+            "after:absolute after:left-0 after:bottom-0 after:w-full after:h-1 after:bg-border" // Bottom Border
+        )}
+    />
+);
+export default Background;