Merge pull request #16 from csesoc/CW2-28_Create_modal_on_sponsor_click

CW2 28 create modal on sponsor click

Author: derekxu04

frontend/public/data/data.ts

@@ -2,6 +2,7 @@ export type sponsorInfo = {
   href: string;
   svg: string;
   alt: string;
+  description: string;
 };
 
 export type socialInfo = {
@@ -14,103 +15,121 @@ export const diamondLinks: sponsorInfo[] = [
   {
     href: 'https://www.janestreet.com/',
     svg: 'assets/janestreet_logo.svg',
-    alt: 'Janestreet logo'
+    alt: 'Janestreet logo',
+    description: "Jane Street is a research-driven trading firm where curious people work together on deep problems",
   },
   {
     href: 'https://www.tiktok.com/en/',
     svg: 'assets/tiktok_logo.svg',
-    alt: 'Tiktok logo'
+    alt: 'Tiktok logo',
+    description: "TikTok is a social media platform for creating, sharing and discovering short videos",
+
   }
 ];
 
 export const goldLinks: sponsorInfo[] = [
   {
     href: 'https://www.atlassian.com/',
     svg: 'assets/atlassian_logo.svg',
-    alt: 'Atlassian logo'
+    alt: 'Atlassian logo',
+    description: "Atlassian Corporation is an Australian-American software company that develops products for software developers, and project managers among other groups",
+
   },
   {
     href: 'https://www.citadel.com/',
     svg: 'assets/citadel_logo.svg',
-    alt: 'Citadel logo'
+    alt: 'Citadel logo',
+    description: "We are an alternative investment manager working on behalf of the world's preeminent institutions. Discover our work, teams, careers and more",
   },
   {
     href: 'https://www.imc.com/ap/',
     svg: 'assets/imc_logo.svg',
-    alt: 'IMC logo'
+    alt: 'IMC logo',
+    description: "For three decades IMC has provided liquidity to the financial markets globally. Specialised in algorithmic trading and advanced technology, we set the pace for the evolution of market making.",
+
   },
   {
     href: 'https://neara.com/',
     svg: 'assets/neara_logo.svg',
-    alt: 'Neara logo'
+    alt: 'Neara logo',
+    description: "Neara electric utility software is a physics-enabled platform that builds 3D interactive models of critical infrastructure networks and assets.",
+
   },
   {
     href: 'https://safetyculture.com/',
     svg: 'assets/safetyculture_logo.svg',
-    alt: 'SafetyCulture logo'
-  },
-  {
-    href: 'https://www.thetradedesk.com/',
-    svg: 'assets/The_Trade_Desk.svg',
-    alt: 'TradeDesk logo'
+    alt: 'SafetyCulture logo',
+    description: "Get to the root cause of workplace trends with total visibility across your organization. Use data from completed inspections, reported incidents, sensors, and asset history to keep workers safe, and prevent things from happening in the first place"
   }
 ];
 
 export const silverLinks: sponsorInfo[] = [
   {
     href: 'https://appian.com/',
     svg: 'assets/appian_logo.svg',
-    alt: 'Appian logo'
+    alt: 'Appian logo',
+    description: "Appian Corporation is an American cloud computing and enterprise software company headquartered in McLean, Virginia, part of the Dulles Technology Corridor. The company sells a platform as a service for building enterprise software applications",
   },
   {
     href: 'https://www.flowtraders.com/',
     svg: 'assets/flowtraders_logo.svg',
-    alt: 'FlowTraders logo'
+    alt: 'FlowTraders logo',
+    description: "Flow Traders is a proprietary trading firm. A market maker, it provides liquidity in the securities market by using high frequency and quantitative trading strategies",
   },
   {
     href: 'https://www.macquarie.com.au/',
     svg: 'assets/macquarie_logo.svg',
-    alt: 'Macquarie logo'
+    alt: 'Macquarie logo',
+    description: "Macquarie Bank offers transaction accounts, home loans, credit cards, online banking, business banking and more"
+
   },
   {
     href: 'https://optiver.com/',
     svg: 'assets/optiver_logo.svg',
-    alt: 'Optiver logo'
+    alt: 'Optiver logo',
+    description: "Optiver is a global market maker. As one of the oldest market making firms in the world, Optiver has been improving financial markets since 1986"
   },
   {
     href: 'https://quantium.com/',
     svg: 'assets/quantium_logo.svg',
-    alt: 'Quantium logo'
+    alt: 'Quantium logo',
+    description: "Quantium has developed a world-class data science and AI solution that has transformed the accuracy of Walmart's prediction of customers' needs at scale"
   },
   {
     href: 'https://quickli.com.au/',
     svg: 'assets/quickli_logo.svg',
-    alt: 'Quickli logo'
+    alt: 'Quickli logo',
+    description: "Bringing 30+ lender calcs into one, easy-to-use interface delivering accurate results and relevant policy insights for even the most complex scenarios."
   },
   {
     href: 'https://www.revolutionise.com.au/',
     svg: 'assets/revsport_logo.svg',
-    alt: 'RevolutioniseSport logo'
+    alt: 'RevolutioniseSport logo',
+    description: "revolutioniseSPORT is an online management platform for sports of all shapes and sizes"
   },
   {
     href: 'https://www.recordpoint.com/',
     svg: 'assets/recordpoint_logo.svg',
-    alt: 'RecordPoint logo'
+    alt: 'RecordPoint logo',
+    description: "Manage all your data and records in one central place – without moving them",
   },
   {
     href: 'https://sig.com/',
     svg: 'assets/susquehanna_logo.svg',
-    alt: 'Susquehanna logo'
+    alt: 'Susquehanna logo',
+    description: "Discover Susquehanna, a global quantitative trading firm built on a rigorous, analytical foundation in financial markets."
   },
   {
     href: 'https://zip.co/au',
     svg: 'assets/zip_logo.svg',
-    alt: 'Zip logo'
+    alt: 'Zip logo',
+    description: "Zip Co Limited is a global 'buy now pay later' financial technology company with operations in Australia, New Zealand and the USA",
   },
   {
     href: 'https://www.canva.com/en_au/',
     svg: 'assets/canva_logo.svg',
-    alt: 'Canva logo'
+    alt: 'Canva logo',
+    description: "Canva is a free-to-use online graphic design tool. Use it to create social media posts, presentations, posters, videos, logos and more."
   }
 ];
 

frontend/src/components/Sponsors/SponsorLinks.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '../../../public/data/data';
+import SponsorModal from './SponsorModal';
+
+//import '/styles/sponsorLinks.module.css';
+const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105';
+const logodiv = 'block gap-y-8 h-14';
+const background = 'rgba(57, 119, 248, 0.6)';
+// const outer = 'rounded-[4rem] w-[90rem] flex flex-col pl-14 py-14 gap-16';
+
+function SponsorLinks() {
+  const [showModal, setShowModal] = useState(false);
+  const [information, setInformation] = useState<sponsorInfo | null>(null);
+
+  return (
+    <div className="flex justify-center items-center my-20">
+      <div className="w-100 flex flex-col gap-16">
+        {showModal && (
+          <SponsorModal
+            sponsorInfo={information}
+            setFalse={() => {
+              setShowModal(false);
+            }}
+          />
+        )}
+        <div
+          style={{ backgroundColor: `${background}` }}
+          className="flex flex-wrap rounded-[1rem] pl-14 py-14 gap-16 items-center"
+        >
+          <h2 className="text-4xl font-black">Diamond Sponsors</h2>
+          {diamondLinks.map((item, index) => {
+            return (
+              <div
+                key={index}
+                className={`${logodiv}`}
+                onClick={() => {
+                  setInformation(item);
+                  setShowModal(true);
+                }}
+              >
+                <img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
+              </div>
+            );
+          })}
+        </div>
+        <div
+          style={{ backgroundColor: `${background}` }}
+          className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
+        >
+          <h2 className="text-4xl font-black">Gold Sponsors</h2>
+          {goldLinks.map((item, index) => {
+            return (
+              <div
+                key={index}
+                className=""
+                onClick={() => {
+                  setInformation(item);
+                  setShowModal(true);
+                }}
+              >
+                <img className={`h-6 ${logostyle}`} src={item.svg} alt={item.alt} />
+              </div>
+            );
+          })}
+        </div>
+        <div
+          style={{ backgroundColor: `${background}` }}
+          className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
+        >
+          <h2 className="text-4xl font-black">Silver Sponsors</h2>
+          {silverLinks.map((item, index) => {
+            return (
+              <div
+                key={index}
+                className="h-14"
+                onClick={() => {
+                  setInformation(item);
+                  setShowModal(true);
+                }}
+              >
+                <img className={`h-8 ${logostyle}`} src={item.svg} alt={item.alt} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SponsorLinks;

frontend/src/components/Sponsors/SponsorModal.tsx

@@ -0,0 +1,41 @@
+import { sponsorInfo } from '../../../public/data/data';
+import {motion} from 'framer-motion'
+export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; setFalse: () => void }) {
+  if (props.sponsorInfo === null) {
+    return (
+      <div>
+        <h1>Error no sponsor selected!</h1>
+      </div>
+    );
+  }
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
+      onClick={() => {
+        props.setFalse();
+      }}
+    >
+      
+      <div className="bg-[#3977f8] relative w-[800px] h-[550px] mb-10 mx-10 rounded-xl flex flex-col items-center justify-center">
+        <motion.a 
+          whileHover={{
+            scale: 1.2,
+            transition: { duration: 0.2 },
+          }} 
+          className="w-4/5 m-10 flex flex-col items-center justify-center" 
+          href={props.sponsorInfo.href}
+          target="_blank"
+        >
+          <img className='w-4/5 max-w-[300px] max-h-[200px]' src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
+        </motion.a >
+        <h3 className="mx-10 py-10">{props.sponsorInfo.description}</h3>
+        <button
+          onClick={props.setFalse}
+          className="bg-white border absolute bottom-10 text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[70%] xl:h-12 h-10"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+} 

frontend/src/components/Sponsors/sponsorlinks.tsx

@@ -1,6 +1,6 @@
-import SponsorLinks from '@/components/Sponsors/sponsorlinks';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
+import SponsorLinks from '@/components/Sponsors/SponsorLinks';
 
 export default function SponsorsPage() {
   return (

frontend/src/pages/sponsors.tsx

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -14,9 +18,18 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true
   },
-  "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "./next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }