Issue 64 create landing page

client/src/components/layout.tsx

@@ -7,6 +7,7 @@ import { useFetchData } from "@/hooks/use-fetch-data";
 import { User } from "@/types/user";
 
 import Sidebar from "./sidebar";
+import Footer from "./ui/footer";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -47,6 +48,7 @@ export default function Layout({ children }: LayoutProps) {
       <div>
         <Navbar />
         <main>{children}</main>
+        <Footer />
       </div>
     );
   }

client/src/components/ui/button.tsx

@@ -21,6 +21,8 @@ const buttonVariants = cva(
         "tab-active": "bg-gray-200 text-black rounded-bl-none rounded-br-none", // to use in `MathInput` component
         "tab-inactive":
           "bg-gray-500 hover:bg-primary text-black rounded-bl-none rounded-br-none", // to use in `MathInput` component
+        inactive:
+          "bg-background text-grey border border-grey hover:bg-grey hover:text-black",
       },
       size: {
         default: "h-10 px-4 py-2",

client/src/components/ui/footer.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <div className="flex items-center justify-between gap-10 bg-[--nav-background] px-10 py-12 text-center max-md:flex-col">
+      <h5>Western Australian Junior mathematics Olympiad</h5>
+      <div className="flex flex-shrink items-center justify-between gap-20 text-xl font-medium">
+        <Link href="/news" className="hover:animate-bounce">
+          News
+        </Link>
+        <Link href="/awards" className="hover:animate-bounce">
+          Awards
+        </Link>
+        <Link href="/resources" className="hover:animate-bounce">
+          Resources
+        </Link>
+        <Link href="/contact" className="hover:animate-bounce">
+          Contact us
+        </Link>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/sponsor.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+
+import Casio from "../../../public/sponsor-logos/Casio.svg";
+import DoE from "../../../public/sponsor-logos/DoE.svg";
+import ECU from "../../../public/sponsor-logos/ECU.svg";
+import MAWA from "../../../public/sponsor-logos/MAWA.svg";
+import Murdoch from "../../../public/sponsor-logos/Murdoch.svg";
+import NewEdition from "../../../public/sponsor-logos/New-Edition.svg";
+import UWA from "../../../public/sponsor-logos/UWA.svg";
+
+const images = [
+  { src: DoE, href: "https://www.education.wa.edu.au/", name: "DoE" },
+  { src: UWA, href: "https://www.uwa.edu.au/", name: "UWA" },
+  { src: MAWA, href: "https://mawainc.org.au/", name: "MAWA" },
+  { src: ECU, href: "https://www.ecu.edu.au/", name: "ECU" },
+  { src: NewEdition, href: "https://newedition.com.au", name: "NewEdition" },
+  { src: Murdoch, href: "https://www.murdoch.edu.au/", name: "Murdoch" },
+  { src: Casio, href: "https://casioeducation.com.au/", name: "Casio" },
+];
+
+export default function Sponsor() {
+  return (
+    <div className="overflow-x-hidden">
+      <div className="flex w-full animate-slide list-none flex-nowrap items-center gap-9">
+        {[...images, ...images].map((item, index) => (
+          <a
+            href={item.href}
+            key={index}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="h-28 flex-shrink-0"
+          >
+            <Image src={item.src} alt={`Logo of ${item.name}`} height={100} />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}