Updated illustrations

frontend/src/api_data/creditsIllustrationData.ts

@@ -1,7 +1,8 @@
 // data that will be used for credits page
 import {
-  illustrationCreativeTeam,
-  illustrationHighFive,
+  creditsPageHighFive,
+  landingPageCreativeTeam,
+  loginIllustration,
   notFoundPageImg,
   privacyPolicyIllustration,
 } from "assets/images/images";
@@ -75,37 +76,44 @@ const illustrationData: illustrationDatum[] = [
   // },
   {
     id: 8,
-    imgSrc: illustrationHighFive,
+    imgSrc: creditsPageHighFive,
     name: "High Five",
     usedIn: "Credits",
     provider: "Storyset",
     link: "https://storyset.com/illustration/high-five/pana",
   },
   {
     id: 9,
-    imgSrc: illustrationCreativeTeam,
+    imgSrc: landingPageCreativeTeam,
     name: "Creative Team",
     usedIn: "Landing",
     provider: "Storyset",
     link: "https://storyset.com/illustration/creative-team/pana",
   },
   {
     id: 10,
+    imgSrc: loginIllustration,
+    name: "Team Work",
+    usedIn: "Login",
+    provider: "Storyset",
+    link: "https://storyset.com/illustration/team-work/pana",
+  },
+  {
+    id: 11,
     imgSrc: notFoundPageImg,
     name: "404 Error",
     usedIn: "404 Page",
     provider: "Storyset",
     link: "https://storyset.com/illustration/404-error-with-a-tired-person/pana",
   },
   {
-    id: 11,
+    id: 12,
     imgSrc: privacyPolicyIllustration,
     name: "Privacy Policy",
     usedIn: "Privacy",
     provider: "Storyset",
     link: "https://storyset.com/illustration/privacy-policy/pana",
   },
-  // notFoundPageImg
 ];
 
 export { illustrationDatum, illustrationData };

frontend/src/assets/images/images.tsx

@@ -73,10 +73,6 @@ import logoWordmark from "./svgs/logos/logo-wordmark.svg?url";
 // HfLA logo
 import logoHfLA from "./svgs/logos/logo-hfla.svg?url";
 
-// Credits Illustrations
-import illustrationCreativeTeam from "./pngs/illustrations/creative-team.png";
-import illustrationHighFive from "./pngs/illustrations/high-five.png";
-
 interface defaultProps {
   [attribute: string]: string;
 }
@@ -232,9 +228,6 @@ export {
   // HfLA logo
   logoHfLA,
   notFoundPageImg,
-  // illustrations
-  illustrationCreativeTeam,
-  illustrationHighFive,
 };
 
 export { default as loginTanBg } from "./svgs/login-tan-bg.svg?url";
@@ -245,3 +238,4 @@ export { default as privacyPolicyIllustration } from "./svgs/privacy-policy-illu
 export { default as creditsPageBgTop } from "./svgs/credits-page-bg-top.svg?url";
 export { default as creditsPageBgBottom } from "./svgs/credits-page-bg-bottom.svg?url";
 export { default as creditsPageHighFive } from "./svgs/credits-page-high-five.svg?url";
+export { default as landingPageCreativeTeam } from "./svgs/landing-page-creative-team.svg?url";

frontend/src/pages/CreditsPage/CreditsPage.tsx

@@ -107,7 +107,7 @@ const CreditsPage: FC = () => {
               provider={cardData.provider}
               imgSrc={cardData.imgSrc}
               imgStyleClasses={`${
-                activeButton === "icons" ? "w-1/6" : "w-4/5"
+                activeButton === "icons" ? "w-1/6" : "w-2/3"
               } h-auto place-self-center`}
               imgContainerStyleClasses={`${
                 activeButton === "illustrations"