finished new header component for landing page

frontend/src/app/NEW-landing-page/Header.tsx

@@ -1,7 +1,34 @@
+import UnilectivesLogo from "@/assets/unilectives-logo.png";
+import Image from "next/image";
+
 export default function Header() {
   return (
-    <div>
-      <p>Header!</p>
+    <div className="flex flex-row w-full justify-center items-center mt-16 pb-16 bg-gradient-to-b from-white to-sky-50 lg:px-10">
+      <div className="flex flex-row max-w-5xl space-y-0 justify-center items-center gap-20 md:gap-10 lg:gap-15">
+        <div className="flex flex-col w-full gap-3">
+          <p className="drop-shadow-md text-base sm:text-sm">
+            DevSoc presents
+          </p>
+          <h1 className="justify-center font-bold text-unilectives-blue text-8xl sm:text-4xl md:text-6xl lg:text-7xl">
+            unilectives
+          </h1>
+          <p className="justify-center font-[450] text-3xl sm:text-md md:text-xl lg:text-2xl">
+            Your one-stop shop for UNSW course and elective reviews.
+          </p>
+          <a href="/NEW-course-library-page">
+            <button
+              className="inline-flex w-fit items-center mt-10 gap-1 px-8 py-2 bg-unilectives-icon dark:bg-unilectives-icon/85 dark:hover:bg-unilectives-icon/80 text-white rounded-md hover:bg-unilectives-icon/95"
+            >
+              Explore courses
+            </button>
+          </a>
+        </div>
+        <Image
+          className="w-80 sm:w-32 md:w-48 lg:w-64"
+          src={UnilectivesLogo}
+          alt="Unilectives Logo"
+        />
+      </div>
     </div>
   );
 }

frontend/src/app/NEW-landing-page/page.tsx

@@ -7,6 +7,7 @@ import { ItemList, WithContext } from "schema-dts";
 import { get } from "@/utils/request";
 import { Course, Courses } from "@/types/api";
 import NewSponsorships from "@/components/SponsorshipsSection/NewSponsorships";
+import Header from "./Header";
 
 // Metadata to assist SEO - provies metadata for HTML head section
 export async function generateMetadata(): Promise<Metadata> {
@@ -75,6 +76,7 @@ export default async function LandingPage() {
       />
       {/* SECTION 1 - HEADER */}
       <p> Header section below</p>
+      <Header />
       {/* SECTION 2 - "OUR FEATURES" */}
       <p> Features section below</p>
       {/* SECTION 3 - "PROUDLY SPONSORED BY" */}