CW2-5 Sponsors Page Draft/Template

Author: andrew-l3

components/Footer.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <section>
+        <div className="sm:flex justify-between">
+            <div className="flex items-center">
+            <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
+            <Link href="/flag/ollie_is_hiding.png" target="_blank" className="sm:hidden block">
+                <img src="/flag/ollie_is_hiding.png" alt="Ollie" draggable="false" width={60} height={60} className="ml-10" />
+            </Link>
+            <img src="/flag/ollie_is_hiding.png" alt="Ollie" draggable="false" width={60} height={60} className="ml-10 sm:block hidden" />
+            </div>
+            <div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
+            <p className="mb-6">B03 CSE Building K17, UNSW [email protected]</p>
+            <p>© 2021 — CSESoc UNSW</p>
+            </div>
+        </div>
+        <img src="assets/sponsors_backdrop.svg" alt="Sponsors backdrop" className="absolute bottom-0 left-0 w-screen -z-10" />
+    </section>
+  );
+};
+
+export default Footer;

components/Navbar.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 const Navbar = () => {
   return (
     <nav className="flex justify-between items-center relative z-10">
-      <Link href="#landing">
+      <Link href="/">
         <Image src="/assets/csesoc_logo.svg" alt="CSESoc Logo" width={200} height={200} draggable={false} />
         <p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\HOME</p>
       </Link>
@@ -22,7 +22,7 @@ const Navbar = () => {
             <p className="text-[0.6rem] text-[#C4C5C8]">03</p>
             <div>{"//"} resources</div>
           </Link>
-          <Link href="#sponsors">
+          <Link href="sponsors">
             <p className="text-[0.6rem] text-[#C4C5C8]">04</p>
             <div>{"//"} sponsors</div>
           </Link>

components/Sponsors/sponsorlinks.tsx

@@ -0,0 +1,49 @@
+import { diamondLinks, goldLinks, silverLinks } from '/public/data/data.ts';
+//import '/styles/sponsorLinks.module.css';
+const logostyle = "h-14";
+const logodiv = "block gap-y-8 h-14";
+const background = "radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)";
+const outer = "rounded-[4rem] w-[90rem] flex flex-col pl-14 py-14 gap-16";
+
+function SponsorLinks() {
+  return (
+    <div className="flex justify-center items-center my-20">
+        <div className="w-100 flex flex-col gap-16">
+            <div style={{ backgroundImage: `${background}` }} className='flex rounded-[1rem] pl-14 py-14 gap-16 items-center'>
+                <h2 className="text-4xl font-black">Diamond Sponsors</h2>
+                {diamondLinks.map((item) => {
+                    return (
+                        <a className={`${logodiv}`} href={item.href}>
+                            <img className={`${logostyle}`} src={item.svg} alt={item.alt} />
+                        </a>
+                    );
+                })}
+            </div>
+            <div style={{ backgroundImage: `${background}` }} className='flex rounded-[1rem] px-14 py-14'>
+                <h2 className="text-4xl font-black pr-16">Gold Sponsors</h2>
+                <div className='grid grid-cols-5 gap-16 items-center'>
+                    {goldLinks.map((item) => {
+                        return (
+                            <a className="" href={item.href}>
+                                <img className="h-6" src={item.svg} alt={item.alt} />
+                            </a>
+                        );
+                    })}
+                </div>
+            </div>
+            <div style={{ backgroundImage: `${background}` }} className='grid grid-cols-5 rounded-[1rem] pl-14 py-14 gap-16 items-center'>
+                <h2 className="text-4xl font-black">Silver Sponsors</h2>
+                {silverLinks.map((item) => {
+                    return (
+                        <a className="h-14" href={item.href}>
+                            <img className="h-8" src={item.svg} alt={item.alt} />
+                        </a>
+                    );
+                })}
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default SponsorLinks;

components/Sponsors/subpage.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+//import '/styles/sponsors.module.css';
+import SponsorLinks from "./sponsorlinks";
+
+const SponsorsPage = () => {
+  return (
+    <section className="">
+      <SponsorLinks/>
+    </section>
+  );
+};
+
+export default SponsorsPage;

pages/index.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Landing from "@/components/Landing";
-import Sponsors from "@/components/Sponsors";
+import Sponsors from "@/components/Sponsors/index";
 import About from "@/components/About";
 import Event from "@/components/Event";
 import ResourcesAndContacts from "@/components/ResourcesAndContacts"

pages/sponsors.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import Landing from "@/components/Landing";
+import SponsorsPage from "@/components/Sponsors/subpage";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+export default function Home() {
+  return (
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+      <Navbar/>
+      <SponsorsPage/>
+      <Footer/>
+    </section>
+  );
+}