Refactor credits page (#486)

* Restyled Credits page background with TW

* Styled heading and top illustration

* Restyled Card

* Styled grid and updated illustration data

* Updated illustrations

* Added vertial gap for cards on credits page

frontend/src/api_data/creditsIllustrationData.ts

@@ -1,7 +1,10 @@
 // data that will be used for credits page
 import {
-  illustrationCreativeTeam,
-  illustrationHighFive,
+  creditsPageHighFive,
+  landingPageCreativeTeam,
+  loginIllustration,
+  notFoundPageImg,
+  privacyPolicyIllustration,
 } from "assets/images/images";
 
 interface illustrationDatum {
@@ -73,20 +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: 12,
+    imgSrc: privacyPolicyIllustration,
+    name: "Privacy Policy",
+    usedIn: "Privacy",
+    provider: "Storyset",
+    link: "https://storyset.com/illustration/privacy-policy/pana",
+  },
 ];
 
 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,13 +228,14 @@ export {
   // HfLA logo
   logoHfLA,
   notFoundPageImg,
-  // illustrations
-  illustrationCreativeTeam,
-  illustrationHighFive,
 };
 
 export { default as loginTanBg } from "./svgs/login-tan-bg.svg?url";
 export { default as dotsSvg } from "./svgs/dots.svg?url";
 export { default as loginIllustration } from "./svgs/login-illustration.svg?url";
 export { default as privacyPageBg } from "./svgs/privacy-policy-bg-top.svg?url";
-export { default as  privacyPolicyIllustration} from "./svgs/privacy-policy-illustration.svg?url";
+export { default as privacyPolicyIllustration } from "./svgs/privacy-policy-illustration.svg?url";
+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";