completed new UI for courses page

frontend/src/app/NEW-course-library-page/page.tsx

@@ -0,0 +1,35 @@
+// "use client";
+import Image from "next/image";
+import LandingPageContent from "@/components/LandingPageContent/LandingPageContent";
+import navbar from "@/assets/navbar.svg";
+import Sponsorships from "@/components/SponsorshipsSection/Sponsorships";
+import { Metadata } from "next";
+import { ItemList, WithContext } from "schema-dts";
+import { get } from "@/utils/request";
+import { Course, Courses } from "@/types/api";
+import SearchBar from "@/components/SearchBar/SearchBar";
+
+export default async function CourseLibraryPage() {
+  const { courses: initialCourses } = (await get(
+    "/courses?offset=0",
+  )) as Courses;
+
+
+  return (
+    <div>
+      {/* TOP OF PAGE */}
+      {/* Title here */}
+      <div className='flex flex-col w-full gap-3'>
+        <h1 className='justify-center font-bold text-unilectives-blue text-5xl sm:text-5xl mt-32 ml-[6.25rem] tracking-wide font-sans'>
+          Search Your Courses
+        </h1>
+      </div>
+
+      {/* Course cards */}
+      <div className="flex flex-col justify-center items-center mt-10">
+        <LandingPageContent initialCourses={initialCourses} />
+      </div>
+      {/* BOTTOM OF PAGE */}
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export default function Features() {
+  return (
+    <div>
+      <p>Featuress</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <div>
+      <p>Header!</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export default function Sponsors() {
+  return (
+    <div>
+      <p>Sponsors...</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+import Image from "next/image";
+import LandingPageContent from "@/components/LandingPageContent/LandingPageContent";
+import navbar from "@/assets/navbar.svg";
+import OldSponsorships from "@/components/SponsorshipsSection/Sponsorships";
+import { Metadata } from "next";
+import { ItemList, WithContext } from "schema-dts";
+import { get } from "@/utils/request";
+import { Course, Courses } from "@/types/api";
+import NewSponsorships from "@/components/SponsorshipsSection/NewSponsorships";
+
+// Metadata to assist SEO - provies metadata for HTML head section
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Home | Unilectives - UNSW Course Reviews`,
+    description: `UNSW course reviews, ratings, and study tips. Unilectives is your one-stop shop for making informed course choices at UNSW.`,
+  };
+}
+
+export default async function LandingPage() {
+  // GET request for all courses
+  const { courses: initialCourses } = (await get(
+    "/courses?offset=0",
+  )) as Courses;
+
+  // Generate metadata to help with SEO (inject via script in return)
+  const metaLD: WithContext<ItemList> = {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    itemListElement: initialCourses.map((course: Course, index: number) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      item: {
+        "@type": "Course",
+        url: `//www.handbook.unsw.edu.au/undergraduate/courses/${new Date().getFullYear()}/${
+          course.courseCode
+        }`,
+        name: course.title,
+        description: course.description,
+        provider: {
+          "@type": "CollegeOrUniversity",
+          name: "University of New South Wales",
+          sameAs: "https://www.unsw.edu.au/",
+        },
+        aggregateRating: {
+          "@type": "AggregateRating",
+          ratingCount: course.reviewCount,
+          ratingValue: course.reviewCount === 0 ? 0 : course.overallRating,
+          bestRating: 5,
+        },
+        offers: [
+          {
+            "@type": "Offer",
+            category: "Paid",
+          },
+        ],
+        hasCourseInstance: course.terms.map((term: number) => ({
+          "@type": "CourseInstance",
+          courseMode: "Blended",
+          courseSchedule: {
+            "@type": "Schedule",
+            repeatCount: term === 0 ? 5 : 10,
+            repeatFrequency: "Weekly",
+          },
+        })),
+      },
+    })),
+  };
+
+  return (
+    <div>
+      {/* SCRIPT FOR SEO - do not touch*/}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(metaLD) }}
+      />
+      {/* SECTION 1 - HEADER */}
+      <p> Header section below</p>
+      {/* SECTION 2 - "OUR FEATURES" */}
+      <p> Features section below</p>
+      {/* SECTION 3 - "PROUDLY SPONSORED BY" */}
+      <p> Sponsors section below</p>
+      <NewSponsorships />
+      {/* BOTTOM OF PAGE */}
+    </div>
+  );
+}

frontend/src/app/layout.tsx

@@ -14,7 +14,7 @@ export default async function RootLayout({
   const session = await getServerSession(authOptions);
 
   return (
-    <html lang='en' className='font-custom '>
+    <html lang="en" className="font-custom">
       <head>
         {/* Only used in Safari - Change Navbar to slate-800 colors when dark mode */}
         <meta name="theme-color" content="#ffffff" />
@@ -34,20 +34,24 @@ export default async function RootLayout({
               `,
           }}
         />
-      <script defer data-domain="unilectives.devsoc.app" src="https://plausible.unilectives.com/js/script.outbound-links.tagged-events.js"></script>
+        <script
+          defer
+          data-domain="unilectives.devsoc.app"
+          src="https://plausible.unilectives.com/js/script.outbound-links.tagged-events.js"
+        ></script>
       </head>
       <body className="bg-white dark:bg-slate-800 dark:text-gray-200">
         <Provider session={session}>
           <AlertProvider>
             <ThemeProviderComponent>
               <Navbar userZid={session?.user?.id} />
-              <div className='ml-20 xs:ml-15'>
+              <div className="pt-16 xs:pt-15">
                 {children}
               </div>
             </ThemeProviderComponent>
           </AlertProvider>
         </Provider>
       </body>
-    </html >
+    </html>
   );
 }

frontend/src/app/page.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import LandingPageContent from "@/components/LandingPageContent/LandingPageContent";
 import navbar from "@/assets/navbar.svg";
-import Sponsorships from "@/components/SponsorshipsSection/Sponsorships"
+import Sponsorships from "@/components/SponsorshipsSection/Sponsorships";
 import { Metadata } from "next";
 import { ItemList, WithContext } from "schema-dts";
 import { get } from "@/utils/request";
@@ -16,7 +16,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function Home() {
   const { courses: initialCourses } = (await get(
-    "/courses?offset=0"
+    "/courses?offset=0",
   )) as Courses;
 
   const metaLD: WithContext<ItemList> = {
@@ -27,8 +27,9 @@ export default async function Home() {
       position: index + 1,
       item: {
         "@type": "Course",
-        url: `//www.handbook.unsw.edu.au/undergraduate/courses/${new Date().getFullYear()}/${course.courseCode
-          }`,
+        url: `//www.handbook.unsw.edu.au/undergraduate/courses/${new Date().getFullYear()}/${
+          course.courseCode
+        }`,
         name: course.title,
         description: course.description,
         provider: {
@@ -42,62 +43,85 @@ export default async function Home() {
           ratingValue: course.reviewCount === 0 ? 0 : course.overallRating,
           bestRating: 5,
         },
-        offers: [{
-          "@type": "Offer",
-          category: "Paid"
-        }],
+        offers: [
+          {
+            "@type": "Offer",
+            category: "Paid",
+          },
+        ],
         hasCourseInstance: course.terms.map((term: number) => ({
           "@type": "CourseInstance",
           courseMode: "Blended",
           courseSchedule: {
             "@type": "Schedule",
             repeatCount: term === 0 ? 5 : 10,
             repeatFrequency: "Weekly",
-          }
-        }))
-      }
+          },
+        })),
+      },
     })),
   };
 
   return (
-    <div className='mb-20 bg-white dark:bg-slate-800 transition-color duration-150'>
+    <div className="mb-20 bg-white dark:bg-slate-800 transition-color duration-150">
       {/* Landing page graphic */}
       <Image
         src={navbar}
         width={1000}
         height={500}
-        alt='landing page graphic'
-        layout='responsive'
+        alt="landing page graphic"
+        layout="responsive"
         priority
       />
+      <a href="/NEW-landing-page">
+        <div
+          style={{
+            border: "solid 1px blue",
+            marginBottom: "10px",
+            fontSize: "30px"
+          }}
+        >
+          FOR DEVELOPMENT: To NEW landing page
+        </div>
+      </a>
+      <a href="/NEW-course-library-page">
+        <div
+          style={{
+            border: "solid 1px green",
+            marginBottom: "10px",
+            fontSize: "30px"
+          }}
+        >
+          FOR DEVELOPMENT: To NEW course library page
+        </div>
+      </a>
+
       {/* Hero Section */}
       <script
-        type='application/ld+json'
+        type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(metaLD) }}
       />
-      <div className='flex flex-row w-full justify-center items-center mt-10'>
-        <div className='flex flex-row w-5/6 space-y-0 justify-between items-left md:space-y-4 md:flex-col md:items-center'>
-          <div className='flex flex-col w-full gap-3'>
-            <p className='drop-shadow-md text-base sm:text-xs'>
+      <div className="flex flex-row w-full justify-center items-center mt-10">
+        <div className="flex flex-row w-5/6 space-y-0 justify-between items-left md:space-y-4 md:flex-col md:items-center">
+          <div className="flex flex-col w-full gap-3">
+            <p className="drop-shadow-md text-base sm:text-xs">
               DevSoc presents
             </p>
-            <h1 className='justify-center font-bold text-unilectives-blue text-7xl sm:text-4xl'>
+            <h1 className="justify-center font-bold text-unilectives-blue text-7xl sm:text-4xl">
               unilectives
             </h1>
-            <p className='justify-center font-semibold text-base sm:text-xs'>
+            <p className="justify-center font-semibold text-base sm:text-xs">
               Your one-stop shop for UNSW course and elective reviews.
             </p>
             {/* Sponsors Section */}
-            <Sponsorships/>
+            <Sponsorships />
           </div>
         </div>
       </div>
       {/* Course Section */}
-      <div className='flex flex-col justify-center items-center mt-10'>
+      <div className="flex flex-col justify-center items-center mt-10">
         <LandingPageContent initialCourses={initialCourses} />
       </div>
     </div>
   );
 }
-
-

frontend/src/components/CourseCard/CourseCard.tsx

@@ -19,10 +19,10 @@ export default function CourseCard({
   terms,
 }: CourseCardProps) {
   return (
-    <div className='box-border px-6 py-7 bg-unilectives-card dark:bg-slate-700/40 hover:bg-gray-100 dark:hover:bg-slate-700/10 shadow-lg rounded-xl space-y-2 cursor-pointer duration-150'>
+    <div className='box-border px-6 py-7 bg-unilectives-card dark:bg-slate-700/40 hover:bg-[#eff0f2] dark:hover:bg-slate-700/10 shadow-lg rounded-xl space-y-2 cursor-pointer duration-150'>
       {/* Course courseCode + Ratings */}
       <div className='flex flex-wrap justify-between text-2xl gap-x-4'>
-        <h2 className='font-bold w-[8ch] text-black dark:text-white'>
+        <h2 className='font-normal w-[8ch] text-black dark:text-white'>
           {courseCode}
         </h2>
         <div className='text-left'>