From f375d543953ab53a3d15879b91e415226cf86a38 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 24 Feb 2025 15:23:05 -0800
Subject: [PATCH 01/20] fix reactAxe ts error

---
 frontend/eslint.config.mjs |  7 ++++++-
 frontend/src/vite-env.d.ts | 10 ++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/vite-env.d.ts

diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 1c25763c..4d84a018 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -28,7 +28,12 @@ export default [
       "no-console": "warn",
       indent: ["error", 2],
       "no-irregular-whitespace": "error",
-      "prettier/prettier": "error",
+      "prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto",
+        },
+      ],
       "react/no-unescaped-entities": "off",
       "@typescript-eslint/no-unused-vars": ["error"],
       "tailwindcss/no-contradicting-classname": "error",
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 00000000..87da5bc1
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

From 2ca56d9b8a844ce57b19ccb8aeadd0072e941999 Mon Sep 17 00:00:00 2001
From: Bitian Zhang <86077274+bzzz-coding@users.noreply.github.com>
Date: Mon, 24 Feb 2025 16:25:12 -0800
Subject: [PATCH 02/20] Added Tailwind Button Components (#641)

* Added Tailwind Button Components

* Updated Buttons.tsx with clsx

* Refactored button components
---
 frontend/package-lock.json               |  14 +++
 frontend/package.json                    |   1 +
 frontend/src/pages/Demo/DemoTailwind.tsx |  67 +++++++++++++-
 frontend/src/tw-components/Buttons.tsx   | 113 +++++++++++++++++++++++
 frontend/tailwind.config.js              |   1 +
 5 files changed, 194 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/tw-components/Buttons.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a1d0cbf0..1ac3f2e4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@popperjs/core": "^2.11.6",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
+        "clsx": "^2.1.1",
         "react-hook-form": "^7.46.1",
         "react-popper": "^2.3.0",
         "vite-tsconfig-paths": "^4.3.1"
@@ -3540,6 +3541,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -12930,6 +12939,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 73d8e4b2..a82f5797 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -70,6 +70,7 @@
     "@popperjs/core": "^2.11.6",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "clsx": "^2.1.1",
     "react-hook-form": "^7.46.1",
     "react-popper": "^2.3.0",
     "vite-tsconfig-paths": "^4.3.1"
diff --git a/frontend/src/pages/Demo/DemoTailwind.tsx b/frontend/src/pages/Demo/DemoTailwind.tsx
index 54759963..652be178 100644
--- a/frontend/src/pages/Demo/DemoTailwind.tsx
+++ b/frontend/src/pages/Demo/DemoTailwind.tsx
@@ -1,14 +1,77 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Typography from "tw-components/Typography";
+import { Button, IconButton } from "tw-components/Buttons";
 
 const DemoTailwind = () => {
+  // Add a setDarkMode for testing dark mode styles
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [darkMode]);
+
   return (
     <div className="min-h-screen bg-grey-light p-8">
+      <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md transition-colors duration-300 dark:bg-[#030D2D]">
+        <Typography.Title1 className="mb-4 text-blue-dark dark:text-white">
+          Buttons
+        </Typography.Title1>
+
+        <Button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</Button>
+
+        {/* Regular Buttons, active is the default state */}
+        <Typography.Title3 className="mb-2 mt-4 text-blue-dark dark:text-white">
+          Active
+        </Typography.Title3>
+        <div className="mb-4 flex flex-wrap items-center gap-4">
+          <Button size="small">Small</Button>
+          <Button size="small-long">Small-Long</Button>
+          {/* Medium is the default*/}
+          <Button>Medium</Button>
+          <Button size="medium-long">Medium-Long</Button>
+          <Button size="large">Large</Button>
+          <Button size="large-long">Large-Long</Button>
+        </div>
+
+        {/* Disabled Buttons */}
+        <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
+          Disabled
+        </Typography.Title3>
+        <div className="mb-4 flex flex-wrap items-center gap-4">
+          <Button disabled>Medium Disabled</Button>
+          <Button size="large" disabled>
+            Large Disabled
+          </Button>
+        </div>
+
+        {/* Hover & Active/Focused States */}
+        <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
+          Hover, Focused and Active
+        </Typography.Title3>
+        <div className="mb-4 flex flex-wrap items-center gap-4">
+          <Button>Hover</Button>
+          <Button>Focus (tab)</Button>
+          <Button>Active (click & hold)</Button>
+        </div>
+
+        {/* Icon Buttons */}
+        <Typography.Title3 className="mb-2 text-blue-dark dark:text-white">
+          Search Icon
+        </Typography.Title3>
+        <div className="flex flex-wrap items-center gap-4">
+          <IconButton />
+          <IconButton disabled />
+        </div>
+      </div>
+
       <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md">
         <Typography.Title1 className="mb-4 text-blue-dark">
           Typography Demo (Title 1 - Roboto Bold 48/137% +0)
         </Typography.Title1>
-
         <Typography.Title2 className="mb-2 text-blue-dark">
           Title Styles (Title 2 - Roboto Bold 36/137% +0)
         </Typography.Title2>
diff --git a/frontend/src/tw-components/Buttons.tsx b/frontend/src/tw-components/Buttons.tsx
new file mode 100644
index 00000000..8d0d3fc5
--- /dev/null
+++ b/frontend/src/tw-components/Buttons.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+import clsx from "clsx";
+import Typography from "tw-components/Typography";
+
+const buttonSizes = {
+  small: "px-[24px] h-[32px]",
+  "small-long": "px-[40px] h-[32px]",
+  medium: "px-[32px] h-[42px]",
+  "medium-long": "px-[48px] h-[42px]",
+  large: "px-[40px] h-[51px]",
+  "large-long": "px-[56px] h-[51px]",
+  "icon-only": "px-[24px] h-[42px]",
+};
+
+type ButtonSize = keyof typeof buttonSizes;
+
+type BaseButtonProps = {
+  size?: ButtonSize;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+};
+
+// Shared styles
+const baseButtonStyles =
+  "transition-all duration-200 flex items-center justify-center rounded-[64px] bg-blue-dark text-white hover:bg-blue-dark-hover focus:bg-blue-dark-focused focus:outline-none active:bg-blue-dark-focused disabled:bg-grey disabled:text-white disabled:cursor-not-allowed";
+
+// Dark mode styles for enabled buttons
+const enabledDarkModeStyles =
+  "dark:bg-white dark:text-blue-dark dark:hover:bg-grey-light dark:focus:bg-[#D9DBDF] dark:active:bg-[#D9DBDF] dark:disabled:bg-grey dark:disabled:text-grey-light";
+
+// Base Button, no text, just styling
+const BaseButton: React.FC<BaseButtonProps> = ({
+  size = "medium",
+  disabled = false,
+  className,
+  children,
+  onClick,
+}) => {
+  return (
+    <button
+      className={clsx(
+        baseButtonStyles,
+        buttonSizes[size],
+        !disabled && enabledDarkModeStyles,
+        className,
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+// Default Button, extends base button, adds typography
+const buttonTypography: Record<
+  Exclude<ButtonSize, "icon-only">,
+  React.ElementType
+> = {
+  small: Typography.Title7,
+  "small-long": Typography.Title7,
+  medium: Typography.Title6,
+  "medium-long": Typography.Title6,
+  large: Typography.Title5,
+  "large-long": Typography.Title5,
+};
+
+type ButtonProps = Omit<BaseButtonProps, "children"> & {
+  size?: Exclude<ButtonSize, "icon-only">;
+  children: React.ReactNode;
+};
+
+const Button: React.FC<ButtonProps> = ({
+  size = "medium",
+  children,
+  ...props
+}) => {
+  const TextComponent = buttonTypography[size];
+  return (
+    <BaseButton {...props} size={size}>
+      <TextComponent>{children}</TextComponent>
+    </BaseButton>
+  );
+};
+
+// Icon Button, extends base button, adds static svg
+type IconButtonProps = Omit<BaseButtonProps, "size" | "children">;
+
+const IconButton: React.FC<IconButtonProps> = (props) => {
+  return (
+    <BaseButton {...props} size="icon-only" className="rounded-[24px]">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="m20 20l-4.05-4.05m0 0a7 7 0 1 0-9.9-9.9a7 7 0 0 0 9.9 9.9"
+        />
+      </svg>
+    </BaseButton>
+  );
+};
+
+export { Button, IconButton };
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index d6a6985e..7541c68e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class", // Enables dark mode with a class
   content: [
     "./src/pages/Demo/DemoTailwind.tsx",
     "./src/pages/Authentication/*.tsx",

From 6cc026d78744fbc15e43f7d376d99ac57a424a6b Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 24 Feb 2025 18:26:22 -0800
Subject: [PATCH 03/20] rm children prop

---
 frontend/src/tw-components/CookieBanner.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/tw-components/CookieBanner.tsx b/frontend/src/tw-components/CookieBanner.tsx
index a8e71781..0d91c25d 100644
--- a/frontend/src/tw-components/CookieBanner.tsx
+++ b/frontend/src/tw-components/CookieBanner.tsx
@@ -7,8 +7,7 @@ import Cookies from "js-cookie";
 import { IconButton } from "components/components";
 import { iconX } from "assets/images/images";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function CookieBanner(props: { children: React.ReactNode }) {
+function CookieBanner() {
   const [hidden, setIsHidden] = useState(
     Cookies.get("cookieConsent") !== undefined,
   );

From 6a3a1c107c571b614fc6c65197017b811a221d86 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 24 Feb 2025 18:26:57 -0800
Subject: [PATCH 04/20] proxy dev api calls to django server

---
 docker-compose.yml       |  3 +++
 frontend/vite.config.mts | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index ed4ed34c..4cd01664 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -48,6 +48,9 @@ services:
     container_name: vite
     env_file:
       - dev/dev.env
+    environment:
+      - VITE_APP_SERVER_URL=django://django:8000
+      - VITE_APP_CLIENT_URL=vite://vite:5175
     ports:
       - "5175:5175"
     develop:
diff --git a/frontend/vite.config.mts b/frontend/vite.config.mts
index 25057249..2feb224e 100644
--- a/frontend/vite.config.mts
+++ b/frontend/vite.config.mts
@@ -1,10 +1,16 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
 import { resolve } from "path";
 
-export default defineConfig(() => {
+export default defineConfig(({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+
+  const SERVER_URL = `${
+    process.env.VITE_APP_SERVER_URL ?? "http://localhost:8000"
+  }`;
+
   return {
     //to resolve relative file paths for sass (no plugin)
     resolve: {
@@ -22,6 +28,13 @@ export default defineConfig(() => {
       host: true,
       port: 5175,
       origin: "http://127.0.0.1:5175",
+      proxy: {
+        "/api": {
+          target: `${SERVER_URL}/api`,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ""),
+        },
+      },
       watch: {
         usePolling: true,
       },

From ae7a233fb5ea6d454044d40eb0166fcdb129d64a Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 24 Feb 2025 18:57:36 -0800
Subject: [PATCH 05/20] add django:8000 host

---
 dev/dev.env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev/dev.env.example b/dev/dev.env.example
index fb338e0f..6439921b 100644
--- a/dev/dev.env.example
+++ b/dev/dev.env.example
@@ -9,7 +9,7 @@ POSTGRES_PASSWORD=<same as SQL_PASSWORD>
 ENVIRON=dev
 DEBUG=True
 SECRET_KEY=<random string of length 50>
-DJANGO_ALLOWED_HOSTS=localhost 127.0.0.1 [::1]
+DJANGO_ALLOWED_HOSTS=localhost 127.0.0.1 [::1] django
 SQL_ENGINE=django.db.backends.postgresql
 SQL_DATABASE=<same as POSTGRES_DB>
 SQL_USER=postgres

From 9a52cd50bff54497d444082d1548260c27777bc2 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Sun, 2 Mar 2025 19:49:27 -0800
Subject: [PATCH 06/20] fix eslint error

---
 frontend/src/tw-components/CookieBanner.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/tw-components/CookieBanner.tsx b/frontend/src/tw-components/CookieBanner.tsx
index 0d91c25d..f23a2feb 100644
--- a/frontend/src/tw-components/CookieBanner.tsx
+++ b/frontend/src/tw-components/CookieBanner.tsx
@@ -25,10 +25,9 @@ function CookieBanner() {
     <div
       role="dialog"
       aria-label="cookies banner"
-      // eslint-disable-next-line tailwindcss/no-contradicting-classname
       className={`${
         hidden ? "hidden" : ""
-      } fixed bottom-12 left-1/2 z-50 flex w-3/4 -translate-x-1/2 transform flex-col rounded-lg bg-white p-4 shadow-2xl shadow-inner`}
+      } fixed bottom-12 left-1/2 z-50 flex w-3/4 -translate-x-1/2 transform flex-col rounded-lg bg-white p-4 shadow-2xl`}
     >
       <div className="max-h-64 min-h-48 justify-between space-y-5 p-6">
         <div className="flex flex-row items-center justify-between">

From 79382f966e7412fe5a83db8a4155d15552b7a8e0 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 15:06:49 -0800
Subject: [PATCH 07/20] created tw CircleCard component

---
 .../src/pages/LandingPage/LandingPageCop.tsx  |  5 ++-
 frontend/src/tw-components/CircleCard.tsx     | 38 +++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/tw-components/CircleCard.tsx

diff --git a/frontend/src/pages/LandingPage/LandingPageCop.tsx b/frontend/src/pages/LandingPage/LandingPageCop.tsx
index 014f737c..ebf07eed 100644
--- a/frontend/src/pages/LandingPage/LandingPageCop.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCop.tsx
@@ -2,7 +2,8 @@
 import React, { useState, useEffect } from "react";
 
 // Internal Imports
-import { Button, CircleCard, Dialog } from "components/components";
+import { Button, Dialog } from "components/components";
+import { CircleCard } from "tw-components/CircleCard";
 import { CopCard, InnerCopCard, InnerCopNavCard } from "./LandingPageCopCards";
 import {
   copDatum,
@@ -43,7 +44,7 @@ function LandingPageCop() {
             <CircleCard
               key={cop.id}
               size="lg"
-              addClass="m-8"
+              className="m-8"
               onClick={() => {
                 handleCopData(cop.id);
                 setIsDialogOpen(true);
diff --git a/frontend/src/tw-components/CircleCard.tsx b/frontend/src/tw-components/CircleCard.tsx
new file mode 100644
index 00000000..26928bfd
--- /dev/null
+++ b/frontend/src/tw-components/CircleCard.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import clsx from "clsx";
+
+import { onKey } from "components/Utility/utils";
+
+interface CircleCardProps extends React.PropsWithChildren {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  role?: string;
+  size?: "lg" | "sm";
+}
+
+const cardSizes = {
+  sm: "size-[144px]",
+  lg: "size-[256px]",
+};
+
+function CircleCard({ size = "sm", ...props }: CircleCardProps) {
+  return (
+    <div
+      className={clsx(
+        "rounded-full bg-grey-light shadow-lg",
+        cardSizes[size],
+        props.onClick && "hover:underline",
+        props.className,
+      )}
+      onClick={props.onClick}
+      onKeyDown={props.onClick && onKey(props.onClick, "Enter")}
+      role={props.role}
+    >
+      <div className="flex h-full items-center justify-center">
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export { CircleCard };

From 85ecf7d595fa0e62559685eb3ef78c0c9a3a7abb Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 15:29:30 -0800
Subject: [PATCH 08/20] convert CircleCard to tw

---
 frontend/src/pages/LandingPage/LandingPageCop.tsx   |  7 ++++---
 frontend/src/pages/LandingPage/_LandingPageCop.scss | 13 -------------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/LandingPage/LandingPageCop.tsx b/frontend/src/pages/LandingPage/LandingPageCop.tsx
index ebf07eed..3cb9cc3b 100644
--- a/frontend/src/pages/LandingPage/LandingPageCop.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCop.tsx
@@ -10,6 +10,7 @@ import {
   fetchAllCopData,
   fetchCopDataById,
 } from "../../api_data/copData";
+import Typography from "tw-components/Typography";
 
 function LandingPageCop() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -38,7 +39,7 @@ function LandingPageCop() {
         and group goals. We use CoPs to share effective practices and relevant
         domain knowledge to help our members grow.
       </div>
-      <div className="row landing-cop-circle-container m-10">
+      <div className="m-10 box-border flex flex-wrap justify-evenly">
         {copData.map((cop) => {
           return (
             <CircleCard
@@ -55,8 +56,8 @@ function LandingPageCop() {
                 <div className="row justify-center pb-6">
                   <cop.icon strokeWidth="0.2" height="65" aria-hidden="true" />
                 </div>
-                <div className="title-4 landing-cop-circle-title text-center">
-                  {cop.title}
+                <div className="text-center text-blue-dark">
+                  <Typography.Title4>{cop.title}</Typography.Title4>
                 </div>
               </div>
             </CircleCard>
diff --git a/frontend/src/pages/LandingPage/_LandingPageCop.scss b/frontend/src/pages/LandingPage/_LandingPageCop.scss
index 2ee14bfe..b8c04aea 100644
--- a/frontend/src/pages/LandingPage/_LandingPageCop.scss
+++ b/frontend/src/pages/LandingPage/_LandingPageCop.scss
@@ -1,22 +1,9 @@
 @use "@/components/Basics" as *;
 
-.landing-cop-circle-title {
-  color: $color-blue-dark;
-
-  .circle-card-button:hover & {
-    text-decoration: $color-blue-dark underline;
-  }
-}
-
 .landing-cop-description {
   max-width: 800px;
 }
 
-.landing-cop-circle-container {
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-}
-
 .landing-inner-cop-nav {
   row-gap: 32px;
 }

From dfb2405984798555ad2e33541bb6c8e437e57264 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 15:31:46 -0800
Subject: [PATCH 09/20] delete old CircleCard

---
 frontend/src/components/Cards/CircleCard.tsx  | 34 ----------
 .../src/components/Cards/_CircleCard.scss     | 66 -------------------
 frontend/src/components/Cards/_index.scss     |  1 -
 frontend/src/components/components.tsx        |  2 -
 4 files changed, 103 deletions(-)
 delete mode 100644 frontend/src/components/Cards/CircleCard.tsx
 delete mode 100644 frontend/src/components/Cards/_CircleCard.scss

diff --git a/frontend/src/components/Cards/CircleCard.tsx b/frontend/src/components/Cards/CircleCard.tsx
deleted file mode 100644
index e837696b..00000000
--- a/frontend/src/components/Cards/CircleCard.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// External Imports
-import React from "react";
-
-// Internal Imports
-import { combineClasses, onKey } from "../Utility/utils";
-
-interface CircleCardProps extends React.PropsWithChildren {
-  addClass?: string;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  role?: string;
-  size?: "lg" | "sm";
-}
-
-function CircleCard({ size = "sm", ...props }: CircleCardProps) {
-  return (
-    <div
-      className={combineClasses(
-        "circle-card",
-        `circle-card-${size}`,
-        props.onClick && "circle-card-button",
-        props.addClass,
-      )}
-      onClick={props.onClick}
-      onKeyDown={props.onClick && onKey(props.onClick, "Enter")}
-      role={props.role}
-    >
-      <div className={`circle-card-content align-center justify-center`}>
-        {props.children}
-      </div>
-    </div>
-  );
-}
-
-export { CircleCard };
diff --git a/frontend/src/components/Cards/_CircleCard.scss b/frontend/src/components/Cards/_CircleCard.scss
deleted file mode 100644
index 064a0d83..00000000
--- a/frontend/src/components/Cards/_CircleCard.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-// External Imports
-@use "sass:map";
-
-// Internal Imports
-@use "../Basics" as *;
-
-$sizes: "lg", "sm";
-
-/****************************************
-*** Circle Card class for all buttons ***
-****************************************/
-
-.circle-card {
-  background-color: $color-grey-light;
-  border-radius: 50%;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
-}
-
-.circle-card-button {
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-/******************************************
-*** Circle Card classes concerning size ***
-******************************************/
-
-$size-values: (
-  "sm": (
-    "radius": 144px,
-  ),
-  "lg": (
-    "radius": 256px,
-  ),
-);
-
-@mixin circle-card-size($size) {
-  height: map.get($size-values, $size, "radius");
-  width: map.get($size-values, $size, "radius");
-}
-
-@each $size in $sizes {
-  .circle-card-#{$size} {
-    @include circle-card-size($size);
-  }
-}
-
-/****************************************************
-*** Circle Card classes concerning inside content ***
-****************************************************/
-
-.circle-card-content {
-  display: flex;
-  height: 100%;
-}
-
-/****************************************************
-*** Circle Card classes concerning responsiveness ***
-****************************************************/
-
-@mixin circle-card-responsive($device, $size) {
-  @include breakpoint-media-max($device) {
-    @include circle-card-size($size);
-  }
-}
diff --git a/frontend/src/components/Cards/_index.scss b/frontend/src/components/Cards/_index.scss
index ad4e0daf..ae9d801e 100644
--- a/frontend/src/components/Cards/_index.scss
+++ b/frontend/src/components/Cards/_index.scss
@@ -1,2 +1 @@
 @forward "StandardCard";
-@forward "CircleCard";
diff --git a/frontend/src/components/components.tsx b/frontend/src/components/components.tsx
index ee055bf5..9341ae44 100644
--- a/frontend/src/components/components.tsx
+++ b/frontend/src/components/components.tsx
@@ -1,7 +1,6 @@
 import { Button } from "./Buttons/Button";
 import { IconButton } from "./Buttons/IconButton";
 import { Card } from "./Cards/StandardCard";
-import { CircleCard } from "./Cards/CircleCard";
 import { ScrollCarousel } from "./Carousel/ScrollCarousel";
 import { Dialog } from "./Dialog/Dialog";
 import { Calendar } from "./Inputs/Calendar";
@@ -21,7 +20,6 @@ export {
   IconButton,
   // Cards
   Card,
-  CircleCard,
   // Carousel
   ScrollCarousel,
   ChevronScroll,

From 387eabb601ee0f0997a38a30161716e1a63282fb Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 16:31:49 -0800
Subject: [PATCH 10/20] convert Card to tw

---
 frontend/src/components/Cards/StandardCard.tsx         | 10 +++++-----
 frontend/src/pages/LandingPage/LandingPageCopCards.tsx |  7 ++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Cards/StandardCard.tsx b/frontend/src/components/Cards/StandardCard.tsx
index fa024627..765279da 100644
--- a/frontend/src/components/Cards/StandardCard.tsx
+++ b/frontend/src/components/Cards/StandardCard.tsx
@@ -1,16 +1,16 @@
 // External Imports
 import React from "react";
-
-// Internal Imports
-import { combineClasses } from "../Utility/utils";
+import clsx from "clsx";
 
 interface CardProps extends React.PropsWithChildren {
-  addClass?: string;
+  className?: string;
 }
 
 function Card({ ...props }: CardProps) {
   return (
-    <div className={combineClasses("card", props.addClass)}>
+    <div
+      className={clsx(props.className, "box-border rounded-2xl p-8 shadow-md")}
+    >
       {props.children}
     </div>
   );
diff --git a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
index ae0eb6b5..97ff023f 100644
--- a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
@@ -1,5 +1,6 @@
 // External Imports
 import React from "react";
+import clsx from "clsx";
 
 // Internal Imports
 import { combineClasses } from "components/Utility/utils";
@@ -17,8 +18,8 @@ interface CopCardProps extends React.PropsWithChildren {
 function CopCard({ isHidden = true, size = "sm", ...props }: CopCardProps) {
   return (
     <Card
-      addClass={combineClasses(
-        `cop-card-${size}`,
+      className={clsx(
+        "m-2 min-h-[624px] max-w-screen-lg bg-grey-light",
         props.addClass,
         isHidden ? "hidden" : undefined,
       )}
@@ -40,7 +41,7 @@ interface InnerCopCardProps extends React.PropsWithChildren {
 
 function InnerCopCard(props: InnerCopCardProps) {
   return (
-    <Card addClass={combineClasses("inner-cop-card", props.addClass)}>
+    <Card className={clsx("inner-cop-card", props.addClass)}>
       <div className="inner-cop-card-content">{props.children}</div>
     </Card>
   );

From 04ea072c94fe1ba677c464f419a8ce9b052ab01b Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 16:31:57 -0800
Subject: [PATCH 11/20] rm Card scss

---
 frontend/src/components/Cards/_StandardCard.scss | 6 ------
 frontend/src/components/Cards/_index.scss        | 1 -
 frontend/src/index.scss                          | 1 -
 3 files changed, 8 deletions(-)
 delete mode 100644 frontend/src/components/Cards/_StandardCard.scss
 delete mode 100644 frontend/src/components/Cards/_index.scss

diff --git a/frontend/src/components/Cards/_StandardCard.scss b/frontend/src/components/Cards/_StandardCard.scss
deleted file mode 100644
index 04f071e5..00000000
--- a/frontend/src/components/Cards/_StandardCard.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.card {
-  border-radius: 16px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
-  box-sizing: border-box;
-  padding: 40px;
-}
diff --git a/frontend/src/components/Cards/_index.scss b/frontend/src/components/Cards/_index.scss
deleted file mode 100644
index ae9d801e..00000000
--- a/frontend/src/components/Cards/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@forward "StandardCard";
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 0fe22b16..a57477e1 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -6,7 +6,6 @@
 
 // Import component styles
 @use "@/components/Buttons" as *;
-@use "@/components/Cards" as *;
 @use "@/components/Carousel/ScrollCarousel";
 @use "@/components/Dialog/Dialog";
 @use "@/components/Inputs" as *;

From e8bcb973879227fb0b13f9dfaac0700d786e0c04 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 16:33:24 -0800
Subject: [PATCH 12/20] change className order

---
 frontend/src/components/Cards/StandardCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Cards/StandardCard.tsx b/frontend/src/components/Cards/StandardCard.tsx
index 765279da..676d85c0 100644
--- a/frontend/src/components/Cards/StandardCard.tsx
+++ b/frontend/src/components/Cards/StandardCard.tsx
@@ -9,7 +9,7 @@ interface CardProps extends React.PropsWithChildren {
 function Card({ ...props }: CardProps) {
   return (
     <div
-      className={clsx(props.className, "box-border rounded-2xl p-8 shadow-md")}
+      className={clsx("box-border rounded-2xl p-8 shadow-md", props.className)}
     >
       {props.children}
     </div>

From 316b7d383f9f3cd0fde86127701cf12a304d5665 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 21:04:15 -0800
Subject: [PATCH 13/20] move creditsPage card to credits folder

---
 .../StandardCard.tsx => pages/CreditsPage/Card.tsx}         | 0
 frontend/src/pages/CreditsPage/CreditsPage.tsx              | 6 +-----
 2 files changed, 1 insertion(+), 5 deletions(-)
 rename frontend/src/{tw-components/StandardCard.tsx => pages/CreditsPage/Card.tsx} (100%)

diff --git a/frontend/src/tw-components/StandardCard.tsx b/frontend/src/pages/CreditsPage/Card.tsx
similarity index 100%
rename from frontend/src/tw-components/StandardCard.tsx
rename to frontend/src/pages/CreditsPage/Card.tsx
diff --git a/frontend/src/pages/CreditsPage/CreditsPage.tsx b/frontend/src/pages/CreditsPage/CreditsPage.tsx
index a3f06b91..73b110d7 100644
--- a/frontend/src/pages/CreditsPage/CreditsPage.tsx
+++ b/frontend/src/pages/CreditsPage/CreditsPage.tsx
@@ -4,27 +4,23 @@ import React, { useState, FC } from "react";
 import { logoHfLA, creditsPageHighFive } from "assets/images/images";
 import { iconData } from "api_data/creditsIconData";
 import { illustrationData } from "api_data/creditsIllustrationData";
-import Card from "tw-components/StandardCard";
 
+import Card from "./Card";
 import TopSvg from "./TopSvg";
 import BottomSvg from "./BottomSvg";
 
 const CreditsPage: FC = () => {
   const [activeData, setActiveData] = useState(illustrationData);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [imgSize, setImgSize] = useState("32");
   const [activeButton, setActiveButton] = useState("illustrations");
 
   const handleClickIllustrationButton = () => {
     setActiveButton("illustrations");
     setActiveData(illustrationData);
-    setImgSize("32");
   };
 
   const handleClickIconButton = () => {
     setActiveData(iconData);
     setActiveButton("icons");
-    setImgSize("2");
   };
 
   const styleClasses = {

From 1258a7a6e1e7e2f34d58c03ca061b438fec550e5 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 21:39:31 -0800
Subject: [PATCH 14/20] update tw dependencies

---
 frontend/package-lock.json | 1226 +++++++++++++++++++++++++++++++-----
 frontend/package.json      |    4 +-
 2 files changed, 1071 insertions(+), 159 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1ac3f2e4..8b26e70c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -36,7 +36,7 @@
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.37.1",
         "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-plugin-tailwindcss": "^3.17.4",
+        "eslint-plugin-tailwindcss": "^3.18.0",
         "globals": "^15.9.0",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
@@ -53,7 +53,7 @@
         "sass": "^1.59.3",
         "sass-loader": "^13.2.1",
         "style-loader": "^3.3.2",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "^3.4.17",
         "ts-jest": "^28.0.8",
         "ts-loader": "^9.4.2",
         "typescript": "^4.9.5",
@@ -74,6 +74,7 @@
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -1199,6 +1200,109 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -1668,6 +1772,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pkgr/core": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
@@ -2943,7 +3058,8 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.2",
@@ -2962,7 +3078,8 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/argparse": {
       "version": "1.0.10",
@@ -3430,6 +3547,7 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
@@ -3482,16 +3600,11 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
+      "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -3504,6 +3617,9 @@
       "engines": {
         "node": ">= 8.10.0"
       },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       }
@@ -3925,6 +4041,21 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -3938,7 +4069,8 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "dev": true,
+      "license": "Apache-2.0"
     },
     "node_modules/diff-sequences": {
       "version": "28.1.1",
@@ -3953,7 +4085,8 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/doctrine": {
       "version": "2.1.0",
@@ -4005,6 +4138,13 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.55",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz",
@@ -4031,9 +4171,9 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4517,10 +4657,11 @@
       }
     },
     "node_modules/eslint-plugin-tailwindcss": {
-      "version": "3.17.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz",
-      "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==",
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.18.0.tgz",
+      "integrity": "sha512-PQDU4ZMzFH0eb2DrfHPpbgo87Zgg2EXSMOj1NSfzdZm+aJzpuwGerfowMIaVehSREEa0idbf/eoNYAOHSJoDAQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-glob": "^3.2.5",
         "postcss": "^8.4.4"
@@ -4980,6 +5121,36 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -5139,9 +5310,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
       "license": "ISC",
@@ -5149,7 +5320,7 @@
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.1",
         "once": "^1.3.0",
         "path-is-absolute": "^1.0.0"
       },
@@ -5181,9 +5352,9 @@
       "peer": true
     },
     "node_modules/globals": {
-      "version": "15.14.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.14.0.tgz",
-      "integrity": "sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==",
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5987,6 +6158,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jest": {
       "version": "28.1.3",
       "resolved": "https://registry.npmjs.org/jest/-/jest-28.1.3.tgz",
@@ -6954,10 +7141,11 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -7200,13 +7388,268 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.1.tgz",
+      "integrity": "sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.1",
+        "lightningcss-darwin-x64": "1.29.1",
+        "lightningcss-freebsd-x64": "1.29.1",
+        "lightningcss-linux-arm-gnueabihf": "1.29.1",
+        "lightningcss-linux-arm64-gnu": "1.29.1",
+        "lightningcss-linux-arm64-musl": "1.29.1",
+        "lightningcss-linux-x64-gnu": "1.29.1",
+        "lightningcss-linux-x64-musl": "1.29.1",
+        "lightningcss-win32-arm64-msvc": "1.29.1",
+        "lightningcss-win32-x64-msvc": "1.29.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.1.tgz",
+      "integrity": "sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.1.tgz",
+      "integrity": "sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.1.tgz",
+      "integrity": "sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.1.tgz",
+      "integrity": "sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.1.tgz",
+      "integrity": "sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.1.tgz",
+      "integrity": "sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.1.tgz",
+      "integrity": "sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.1.tgz",
+      "integrity": "sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.1.tgz",
+      "integrity": "sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.1.tgz",
+      "integrity": "sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
     "node_modules/lines-and-columns": {
@@ -7275,6 +7718,13 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -7394,6 +7844,16 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7404,6 +7864,7 @@
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -7514,6 +7975,7 @@
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
@@ -7698,6 +8160,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7774,6 +8243,23 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -7892,6 +8378,7 @@
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -7907,21 +8394,28 @@
       }
     },
     "node_modules/postcss-load-config": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
-      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "lilconfig": "^2.0.5",
-        "yaml": "^2.1.1"
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
       },
       "engines": {
         "node": ">= 14"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": ">=8.0.9",
         "ts-node": ">=9.0.0"
@@ -7935,15 +8429,6 @@
         }
       }
     },
-    "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
-      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/postcss-loader": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz",
@@ -8039,29 +8524,37 @@
       }
     },
     "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
+        "postcss-selector-parser": "^6.1.1"
       },
       "engines": {
         "node": ">=12.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": "^8.2.14"
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -8937,6 +9430,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -9030,17 +9539,31 @@
         "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/strip-ansi": {
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -9107,14 +9630,15 @@
       }
     },
     "node_modules/sucrase": {
-      "version": "3.34.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
-      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
-        "glob": "7.1.6",
+        "glob": "^10.3.10",
         "lines-and-columns": "^1.1.6",
         "mz": "^2.7.0",
         "pirates": "^4.0.1",
@@ -9125,7 +9649,7 @@
         "sucrase-node": "bin/sucrase-node"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": {
@@ -9143,6 +9667,53 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -9210,33 +9781,34 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
-      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -9251,6 +9823,7 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -9415,6 +9988,7 @@
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -9424,6 +9998,7 @@
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -9494,7 +10069,8 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "dev": true,
+      "license": "Apache-2.0"
     },
     "node_modules/ts-jest": {
       "version": "28.0.8",
@@ -10141,9 +10717,9 @@
       }
     },
     "node_modules/vite-tsconfig-paths/node_modules/typescript": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
       "license": "Apache-2.0",
       "optional": true,
       "peer": true,
@@ -10429,6 +11005,25 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -10501,6 +11096,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.5.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
@@ -11239,6 +11847,71 @@
       "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
       "dev": true
     },
+    "@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+          "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+          "dev": true,
+          "requires": {
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^6.1.0",
+            "string-width": "^5.0.1",
+            "strip-ansi": "^7.0.1"
+          }
+        }
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -11608,6 +12281,13 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true
+    },
     "@pkgr/core": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
@@ -12894,9 +13574,9 @@
       "dev": true
     },
     "chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
@@ -13212,6 +13892,14 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -13280,6 +13968,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.5.55",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz",
@@ -13299,9 +13993,9 @@
       "dev": true
     },
     "enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -13751,9 +14445,9 @@
       "requires": {}
     },
     "eslint-plugin-tailwindcss": {
-      "version": "3.17.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz",
-      "integrity": "sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==",
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.18.0.tgz",
+      "integrity": "sha512-PQDU4ZMzFH0eb2DrfHPpbgo87Zgg2EXSMOj1NSfzdZm+aJzpuwGerfowMIaVehSREEa0idbf/eoNYAOHSJoDAQ==",
       "dev": true,
       "requires": {
         "fast-glob": "^3.2.5",
@@ -13998,6 +14692,24 @@
         "is-callable": "^1.1.3"
       }
     },
+    "foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "dependencies": {
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+          "dev": true
+        }
+      }
+    },
     "form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -14101,15 +14813,15 @@
       }
     },
     "glob": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.1",
         "once": "^1.3.0",
         "path-is-absolute": "^1.0.0"
       }
@@ -14131,9 +14843,9 @@
       "peer": true
     },
     "globals": {
-      "version": "15.14.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.14.0.tgz",
-      "integrity": "sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==",
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
       "dev": true
     },
     "globalthis": {
@@ -14675,6 +15387,16 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "requires": {
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "jest": {
       "version": "28.1.3",
       "resolved": "https://registry.npmjs.org/jest/-/jest-28.1.3.tgz",
@@ -15412,9 +16134,9 @@
       }
     },
     "jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true
     },
     "js-cookie": {
@@ -15602,10 +16324,111 @@
         "type-check": "~0.3.2"
       }
     },
+    "lightningcss": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.1.tgz",
+      "integrity": "sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "detect-libc": "^1.0.3",
+        "lightningcss-darwin-arm64": "1.29.1",
+        "lightningcss-darwin-x64": "1.29.1",
+        "lightningcss-freebsd-x64": "1.29.1",
+        "lightningcss-linux-arm-gnueabihf": "1.29.1",
+        "lightningcss-linux-arm64-gnu": "1.29.1",
+        "lightningcss-linux-arm64-musl": "1.29.1",
+        "lightningcss-linux-x64-gnu": "1.29.1",
+        "lightningcss-linux-x64-musl": "1.29.1",
+        "lightningcss-win32-arm64-msvc": "1.29.1",
+        "lightningcss-win32-x64-msvc": "1.29.1"
+      }
+    },
+    "lightningcss-darwin-arm64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.1.tgz",
+      "integrity": "sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-darwin-x64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.1.tgz",
+      "integrity": "sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-freebsd-x64": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.1.tgz",
+      "integrity": "sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.1.tgz",
+      "integrity": "sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-linux-arm64-gnu": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.1.tgz",
+      "integrity": "sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-linux-arm64-musl": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.1.tgz",
+      "integrity": "sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-linux-x64-gnu": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.1.tgz",
+      "integrity": "sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-linux-x64-musl": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.1.tgz",
+      "integrity": "sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-win32-arm64-msvc": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.1.tgz",
+      "integrity": "sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "lightningcss-win32-x64-msvc": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.1.tgz",
+      "integrity": "sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true
     },
     "lines-and-columns": {
@@ -15665,6 +16488,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
+    },
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -15753,6 +16582,12 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -15973,6 +16808,12 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -16027,6 +16868,16 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      }
+    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -16104,21 +16955,13 @@
       }
     },
     "postcss-load-config": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
-      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
       "dev": true,
       "requires": {
-        "lilconfig": "^2.0.5",
-        "yaml": "^2.1.1"
-      },
-      "dependencies": {
-        "yaml": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
-          "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
-          "dev": true
-        }
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
       }
     },
     "postcss-loader": {
@@ -16177,18 +17020,18 @@
       }
     },
     "postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
       "dev": true,
       "requires": {
-        "postcss-selector-parser": "^6.0.11"
+        "postcss-selector-parser": "^6.1.1"
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
@@ -16804,6 +17647,17 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      }
+    },
     "string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -16888,6 +17742,15 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
     "strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -16923,14 +17786,14 @@
       "requires": {}
     },
     "sucrase": {
-      "version": "3.34.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
-      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
       "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
-        "glob": "7.1.6",
+        "glob": "^10.3.10",
         "lines-and-columns": "^1.1.6",
         "mz": "^2.7.0",
         "pirates": "^4.0.1",
@@ -16947,6 +17810,38 @@
             "@jridgewell/sourcemap-codec": "^1.4.10",
             "@jridgewell/trace-mapping": "^0.3.24"
           }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "10.4.5",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+          "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+          "dev": true,
+          "requires": {
+            "foreground-child": "^3.1.0",
+            "jackspeak": "^3.1.2",
+            "minimatch": "^9.0.4",
+            "minipass": "^7.1.2",
+            "package-json-from-dist": "^1.0.0",
+            "path-scurry": "^1.11.1"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
         }
       }
     },
@@ -16998,33 +17893,33 @@
       }
     },
     "tailwindcss": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
-      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
       "dependencies": {
         "glob-parent": {
@@ -17559,9 +18454,9 @@
           "requires": {}
         },
         "typescript": {
-          "version": "5.7.3",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-          "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+          "version": "5.8.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+          "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
           "optional": true,
           "peer": true
         }
@@ -17767,6 +18662,17 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -17814,6 +18720,12 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "dev": true
+    },
     "yargs": {
       "version": "17.5.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a82f5797..5d0d6237 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -41,7 +41,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-tailwindcss": "^3.17.4",
+    "eslint-plugin-tailwindcss": "^3.18.0",
     "globals": "^15.9.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
@@ -58,7 +58,7 @@
     "sass": "^1.59.3",
     "sass-loader": "^13.2.1",
     "style-loader": "^3.3.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.17",
     "ts-jest": "^28.0.8",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",

From 16741fc18bfc7bbb5dfbdabcde4dc38c41013386 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 22:01:31 -0800
Subject: [PATCH 15/20] migrate Card component to TW

---
 frontend/src/components/components.tsx                       | 3 ---
 frontend/src/index.scss                                      | 1 -
 frontend/src/pages/LandingPage/LandingPageCopCards.tsx       | 2 +-
 .../Cards/StandardCard.tsx => tw-components/Card.tsx}        | 5 ++++-
 4 files changed, 5 insertions(+), 6 deletions(-)
 rename frontend/src/{components/Cards/StandardCard.tsx => tw-components/Card.tsx} (66%)

diff --git a/frontend/src/components/components.tsx b/frontend/src/components/components.tsx
index 9341ae44..d99c8b23 100644
--- a/frontend/src/components/components.tsx
+++ b/frontend/src/components/components.tsx
@@ -1,6 +1,5 @@
 import { Button } from "./Buttons/Button";
 import { IconButton } from "./Buttons/IconButton";
-import { Card } from "./Cards/StandardCard";
 import { ScrollCarousel } from "./Carousel/ScrollCarousel";
 import { Dialog } from "./Dialog/Dialog";
 import { Calendar } from "./Inputs/Calendar";
@@ -18,8 +17,6 @@ export {
   // Buttons
   Button,
   IconButton,
-  // Cards
-  Card,
   // Carousel
   ScrollCarousel,
   ChevronScroll,
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index a57477e1..bcaa8896 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -15,7 +15,6 @@
 @use "@/components/Scroll/ChevronScroll";
 
 // Import page styles
-// @use "pages/CreditsPage/CreditsPage";
 @use "@/pages/Demo/Demo";
 @use "@/pages/NotFoundPage/NotFoundPage";
 @use "@/pages/LandingPage" as *;
diff --git a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
index 97ff023f..56ae353d 100644
--- a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
@@ -5,7 +5,7 @@ import clsx from "clsx";
 // Internal Imports
 import { combineClasses } from "components/Utility/utils";
 import { IconButton } from "components/Buttons/IconButton";
-import { Card } from "components/Cards/StandardCard";
+import { Card } from "tw-components/Card";
 import { iconX } from "assets/images/images";
 
 interface CopCardProps extends React.PropsWithChildren {
diff --git a/frontend/src/components/Cards/StandardCard.tsx b/frontend/src/tw-components/Card.tsx
similarity index 66%
rename from frontend/src/components/Cards/StandardCard.tsx
rename to frontend/src/tw-components/Card.tsx
index 676d85c0..85b59b8d 100644
--- a/frontend/src/components/Cards/StandardCard.tsx
+++ b/frontend/src/tw-components/Card.tsx
@@ -9,7 +9,10 @@ interface CardProps extends React.PropsWithChildren {
 function Card({ ...props }: CardProps) {
   return (
     <div
-      className={clsx("box-border rounded-2xl p-8 shadow-md", props.className)}
+      className={clsx(
+        "box-border rounded-2xl p-10 shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]",
+        props.className,
+      )}
     >
       {props.children}
     </div>

From 219e246a0e45c5cc091b80b1c2f26e800433bcd4 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 22:08:14 -0800
Subject: [PATCH 16/20] fix Card shadow

---
 frontend/src/tw-components/CircleCard.tsx                 | 2 +-
 frontend/src/tw-components/{Card.tsx => StandardCard.tsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/tw-components/{Card.tsx => StandardCard.tsx} (100%)

diff --git a/frontend/src/tw-components/CircleCard.tsx b/frontend/src/tw-components/CircleCard.tsx
index 26928bfd..2d6f83ef 100644
--- a/frontend/src/tw-components/CircleCard.tsx
+++ b/frontend/src/tw-components/CircleCard.tsx
@@ -19,7 +19,7 @@ function CircleCard({ size = "sm", ...props }: CircleCardProps) {
   return (
     <div
       className={clsx(
-        "rounded-full bg-grey-light shadow-lg",
+        "rounded-full bg-grey-light shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]",
         cardSizes[size],
         props.onClick && "hover:underline",
         props.className,
diff --git a/frontend/src/tw-components/Card.tsx b/frontend/src/tw-components/StandardCard.tsx
similarity index 100%
rename from frontend/src/tw-components/Card.tsx
rename to frontend/src/tw-components/StandardCard.tsx

From 6ed85197529d65090d6eaacd3630787c57f331c8 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Mon, 3 Mar 2025 22:59:38 -0800
Subject: [PATCH 17/20] migrate sass to tw

---
 .../src/pages/LandingPage/LandingPageCop.tsx  | 12 +++---
 .../pages/LandingPage/LandingPageCopCards.tsx | 32 ++++++++------
 .../pages/LandingPage/_LandingPageCop.scss    | 14 ------
 .../LandingPage/_LandingPageCopCards.scss     | 43 -------------------
 4 files changed, 23 insertions(+), 78 deletions(-)

diff --git a/frontend/src/pages/LandingPage/LandingPageCop.tsx b/frontend/src/pages/LandingPage/LandingPageCop.tsx
index 3cb9cc3b..78d1ba1b 100644
--- a/frontend/src/pages/LandingPage/LandingPageCop.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCop.tsx
@@ -3,13 +3,13 @@ import React, { useState, useEffect } from "react";
 
 // Internal Imports
 import { Button, Dialog } from "components/components";
-import { CircleCard } from "tw-components/CircleCard";
 import { CopCard, InnerCopCard, InnerCopNavCard } from "./LandingPageCopCards";
 import {
   copDatum,
   fetchAllCopData,
   fetchCopDataById,
 } from "../../api_data/copData";
+import { CircleCard } from "tw-components/CircleCard";
 import Typography from "tw-components/Typography";
 
 function LandingPageCop() {
@@ -33,7 +33,7 @@ function LandingPageCop() {
       <h2 className="col-12 my-8 text-center text-4xl font-bold leading-normal">
         Communities of Practice (COP)
       </h2>
-      <div className="row paragraph-1 landing-cop-description mb-5 text-center">
+      <div className="row paragraph-1 mb-5 max-w-[800px] text-center">
         A Community of Practice (CoP) is a group of volunteers who share a
         common interest in a topic and meet regularly to fulfill both individual
         and group goals. We use CoPs to share effective practices and relevant
@@ -86,7 +86,7 @@ function LandingPageCop() {
                     key={cop.id}
                     isActive={isActive}
                     onClick={() => handleCopData(cop.id)}
-                    addClass="flex-container justify-center align-center p-2"
+                    className="flex-container align-center justify-center p-2"
                   >
                     <div className="pr-2">
                       <cop.icon
@@ -98,15 +98,13 @@ function LandingPageCop() {
                         aria-hidden="true"
                       />
                     </div>
-                    <span className="title-6 landing-cop-nav-title">
-                      {cop.title}
-                    </span>
+                    <span className="title-6">{cop.title}</span>
                   </InnerCopNavCard>
                 );
               })}
             </nav>
             <div className="col-9 ml-4">
-              <InnerCopCard addClass="landing-inner-cop-card-content">
+              <InnerCopCard>
                 <div>
                   <div className="title-3 flex-container pb-4 align-bottom">
                     <div className="pr-4">
diff --git a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
index 56ae353d..e7d6a3b1 100644
--- a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
@@ -3,9 +3,8 @@ import React from "react";
 import clsx from "clsx";
 
 // Internal Imports
-import { combineClasses } from "components/Utility/utils";
 import { IconButton } from "components/Buttons/IconButton";
-import { Card } from "tw-components/Card";
+import { Card } from "tw-components/StandardCard";
 import { iconX } from "assets/images/images";
 
 interface CopCardProps extends React.PropsWithChildren {
@@ -19,7 +18,7 @@ function CopCard({ isHidden = true, size = "sm", ...props }: CopCardProps) {
   return (
     <Card
       className={clsx(
-        "m-2 min-h-[624px] max-w-screen-lg bg-grey-light",
+        "m-2 min-h-[624px] max-w-[1088px] bg-grey-light",
         props.addClass,
         isHidden ? "hidden" : undefined,
       )}
@@ -41,14 +40,21 @@ interface InnerCopCardProps extends React.PropsWithChildren {
 
 function InnerCopCard(props: InnerCopCardProps) {
   return (
-    <Card className={clsx("inner-cop-card", props.addClass)}>
-      <div className="inner-cop-card-content">{props.children}</div>
+    <Card
+      className={clsx(
+        "h-full min-h-[448px] max-w-[625px] bg-white",
+        props.addClass,
+      )}
+    >
+      <div className="box-border flex h-full flex-col justify-between px-[0.6vw] py-2">
+        {props.children}
+      </div>
     </Card>
   );
 }
 
 interface InnerCopNavCardSharedProps extends React.PropsWithChildren {
-  addClass?: string;
+  className?: string;
   isActive?: boolean;
 }
 
@@ -67,19 +73,17 @@ type InnerCopNavCardProps =
   | InnerCopNavCardButtonProps;
 
 function InnerCopNavCard({ isActive = false, ...props }: InnerCopNavCardProps) {
-  const Tag = "href" in props ? "a" : "button"; // conditionally rendered tagss
-
   return (
-    <Tag
-      className={combineClasses(
-        "inner-cop-nav-card",
-        isActive ? "active" : undefined,
-        props.addClass,
+    <button
+      className={clsx(
+        "min-h-16 max-w-[188px] rounded-2xl border-0 hover:underline",
+        isActive ? "bg-blue-dark text-white" : "bg-white",
+        props.className,
       )}
       onClick={props.onClick}
     >
       {props.children}
-    </Tag>
+    </button>
   );
 }
 
diff --git a/frontend/src/pages/LandingPage/_LandingPageCop.scss b/frontend/src/pages/LandingPage/_LandingPageCop.scss
index b8c04aea..59ef13fd 100644
--- a/frontend/src/pages/LandingPage/_LandingPageCop.scss
+++ b/frontend/src/pages/LandingPage/_LandingPageCop.scss
@@ -1,23 +1,9 @@
 @use "@/components/Basics" as *;
 
-.landing-cop-description {
-  max-width: 800px;
-}
-
 .landing-inner-cop-nav {
   row-gap: 32px;
 }
 
 .landing-cop-nav-title {
   inline-size: min-content;
-
-  .inner-cop-nav-card:hover > & {
-    text-decoration: underline;
-  }
-}
-
-.landing-inner-cop-card-content > .inner-cop-card-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
 }
diff --git a/frontend/src/pages/LandingPage/_LandingPageCopCards.scss b/frontend/src/pages/LandingPage/_LandingPageCopCards.scss
index c551502e..2242b407 100644
--- a/frontend/src/pages/LandingPage/_LandingPageCopCards.scss
+++ b/frontend/src/pages/LandingPage/_LandingPageCopCards.scss
@@ -61,46 +61,3 @@
     left: 6.4vw;
   }
 }
-
-/**********************************
-*** Classes for Inner COP cards ***
-**********************************/
-
-.inner-cop-card {
-  background-color: $color-white;
-  height: 100%;
-  max-width: 625px;
-  min-height: 448px;
-}
-
-.inner-cop-card-content {
-  box-sizing: border-box;
-  height: 100%;
-  padding: {
-    top: 8px;
-    right: 0.6vw;
-    left: 0.6vw;
-    bottom: 8px;
-  }
-}
-
-/**************************************
-*** Classes for Inner COP Nav cards ***
-**************************************/
-
-.inner-cop-nav-card {
-  background-color: $color-white;
-  border: none;
-  border-radius: 16px;
-  max-width: 188px;
-  min-height: 64px;
-
-  &.active {
-    background-color: $color-blue-dark;
-    color: $color-white;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}

From 60efb7451a2b780b09a313e68dd8d5ce3f18c5c1 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Tue, 4 Mar 2025 17:02:14 -0800
Subject: [PATCH 18/20] push stage Dockerfile image to ECR

---
 .github/workflows/{deploy-dev.yml => deploy-stage.yml} | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)
 rename .github/workflows/{deploy-dev.yml => deploy-stage.yml} (86%)

diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-stage.yml
similarity index 86%
rename from .github/workflows/deploy-dev.yml
rename to .github/workflows/deploy-stage.yml
index 01aa39fb..c64b4072 100644
--- a/.github/workflows/deploy-dev.yml
+++ b/.github/workflows/deploy-stage.yml
@@ -32,7 +32,6 @@ jobs:
           ECR_REPOSITORY: civic-tech-jobs-fullstack
           IMAGE_TAG: dev
         run: |
-          docker pull nmatsui/hello-world-api
-          docker tag nmatsui/hello-world-api $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+          docker build -f ./stage/Dockerfile -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
-          
+

From 51746d8569635f68a6893840519f399af2e2a576 Mon Sep 17 00:00:00 2001
From: Bitian Zhang <86077274+bzzz-coding@users.noreply.github.com>
Date: Sun, 9 Mar 2025 19:41:26 -0700
Subject: [PATCH 19/20] Refactor Typography Components (#644)

* Added Tailwind Button Components

* Updated Buttons.tsx with clsx

* Refactored button components

* Refactored Typography components

* Deleted unnecessary type
---
 frontend/src/tw-components/Typography.tsx | 147 ++++++++--------------
 1 file changed, 49 insertions(+), 98 deletions(-)

diff --git a/frontend/src/tw-components/Typography.tsx b/frontend/src/tw-components/Typography.tsx
index 4f3a7e23..0f2e3bad 100644
--- a/frontend/src/tw-components/Typography.tsx
+++ b/frontend/src/tw-components/Typography.tsx
@@ -1,4 +1,24 @@
 import React from "react";
+import clsx from "clsx";
+
+const baseStyles = "font-sans leading-[137%]";
+
+const TypographyStyles = {
+  Title1: "text-[48px] font-bold",
+  Title2: "text-[36px] font-bold",
+  Title3: "text-[28px] font-bold",
+  Title4: "text-[24px] font-bold",
+  Title5: "text-[20px] font-bold",
+  Title6: "text-[16px] font-bold",
+  Title7: "text-[14px] font-bold",
+  Paragraph1: "text-[20px]",
+  Paragraph2: "text-[18px]",
+  Paragraph3: "text-[16px]",
+  Paragraph4: "text-[15px]",
+  Paragraph5: "text-[14px]",
+  HyperlinkBold: "text-[16px] font-bold underline",
+  Hyperlink: "text-[14px] underline",
+};
 
 type TypographyProps = {
   children: React.ReactNode;
@@ -10,107 +30,38 @@ type HyperlinkProps = {
 } & TypographyProps &
   React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
-const Typography = {
-  Title1: ({ children, className = "", ...props }: TypographyProps) => (
-    <h1
-      className={`font-sans text-[48px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h1>
-  ),
-  Title2: ({ children, className = "", ...props }: TypographyProps) => (
-    <h2
-      className={`font-sans text-[36px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h2>
-  ),
-  Title3: ({ children, className = "", ...props }: TypographyProps) => (
-    <h3
-      className={`font-sans text-[28px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h3>
-  ),
-  Title4: ({ children, className = "", ...props }: TypographyProps) => (
-    <h4
-      className={`font-sans text-[24px] font-bold leading-[30px] ${className}`}
-      {...props}
-    >
-      {children}
-    </h4>
-  ),
-  Title5: ({ children, className = "", ...props }: TypographyProps) => (
-    <h5
-      className={`font-sans text-[20px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h5>
-  ),
-  Title6: ({ children, className = "", ...props }: TypographyProps) => (
-    <h6
-      className={`font-sans text-[16px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h6>
-  ),
-  Title7: ({ children, className = "", ...props }: TypographyProps) => (
-    <h6
-      className={`font-sans text-[14px] font-bold leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </h6>
-  ),
-  Paragraph1: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[20px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph2: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[18px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph3: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[16px] leading-[137%] ${className}`}
-      {...props}
-    >
+const createTypography = (
+  Tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p",
+  size: (typeof TypographyStyles)[keyof typeof TypographyStyles],
+) => {
+  const Component = ({ children, className, ...props }: TypographyProps) => (
+    <Tag className={clsx(baseStyles, size, className)} {...props}>
       {children}
-    </p>
-  ),
-  Paragraph4: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[15px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
-  Paragraph5: ({ children, className = "", ...props }: TypographyProps) => (
-    <p
-      className={`font-sans text-[14px] leading-[137%] ${className}`}
-      {...props}
-    >
-      {children}
-    </p>
-  ),
+    </Tag>
+  );
+
+  Component.displayName = `Typography.${Tag}`;
+
+  return Component;
+};
+
+const Typography = {
+  Title1: createTypography("h1", TypographyStyles.Title1),
+  Title2: createTypography("h2", TypographyStyles.Title2),
+  Title3: createTypography("h3", TypographyStyles.Title3),
+  Title4: createTypography("h4", TypographyStyles.Title4),
+  Title5: createTypography("h5", TypographyStyles.Title5),
+  Title6: createTypography("h6", TypographyStyles.Title6),
+  Title7: createTypography("h6", TypographyStyles.Title7),
+  Paragraph1: createTypography("p", TypographyStyles.Paragraph1),
+  Paragraph2: createTypography("p", TypographyStyles.Paragraph2),
+  Paragraph3: createTypography("p", TypographyStyles.Paragraph3),
+  Paragraph4: createTypography("p", TypographyStyles.Paragraph4),
+  Paragraph5: createTypography("p", TypographyStyles.Paragraph5),
   HyperlinkBold: ({ children, className, href, ...props }: HyperlinkProps) => (
     <a
       href={href}
-      className={`font-sans text-[16px] font-bold leading-[137%] underline ${className}`}
+      className={clsx(baseStyles, TypographyStyles.HyperlinkBold, className)}
       {...props}
     >
       {children}
@@ -119,7 +70,7 @@ const Typography = {
   Hyperlink: ({ children, className, href, ...props }: HyperlinkProps) => (
     <a
       href={href}
-      className={`font-sans text-[14px] leading-[137%] underline ${className}`}
+      className={clsx(baseStyles, TypographyStyles.Hyperlink, className)}
       {...props}
     >
       {children}

From d7a0a34f0225f869fda667b27f895c9e8784d7c4 Mon Sep 17 00:00:00 2001
From: Terence Lo <terencelomoa@gmail.com>
Date: Wed, 12 Mar 2025 16:48:14 -0700
Subject: [PATCH 20/20] Feature: Design system, FooterNav (#653)

* clean up tailwind config

* fix border radius

* refactor Logo

* init tw footerNav

* convert sass to TW

* replace old FooterNavs

* delete old FooterNav
---
 .../src/components/Navigation/_FooterNav.scss |  94 ------------
 .../src/components/Navigation/_index.scss     |   1 -
 frontend/src/components/components.tsx        |   2 -
 frontend/src/layouts/DefaultNavLayout.tsx     |   3 +-
 .../src/pages/NotFoundPage/NotFoundPage.tsx   |   3 +-
 .../FooterNav.tsx                             | 138 +++++++++---------
 frontend/src/tw-components/HeaderNav.tsx      |  24 +--
 frontend/src/tw-components/index.tsx          |   3 +-
 frontend/tailwind.config.js                   |  37 +++--
 9 files changed, 110 insertions(+), 195 deletions(-)
 delete mode 100644 frontend/src/components/Navigation/_FooterNav.scss
 rename frontend/src/{components/Navigation => tw-components}/FooterNav.tsx (50%)

diff --git a/frontend/src/components/Navigation/_FooterNav.scss b/frontend/src/components/Navigation/_FooterNav.scss
deleted file mode 100644
index 935f3262..00000000
--- a/frontend/src/components/Navigation/_FooterNav.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@use "../Basics" as *;
-
-.footer-nav {
-  background-color: $color-blue-darker;
-  height: 128px;
-  align-items: center;
-
-  @include breakpoint-media-max("lgtablet") {
-    height: 226px;
-    flex-direction: column;
-    justify-content: space-evenly;
-  }
-}
-
-.logo-desktop-footer {
-  @include breakpoint-media-max("mobile") {
-    @include hidden;
-  }
-}
-
-.logo-mobile-footer {
-  @include hidden;
-  @include breakpoint-media-max("mobile") {
-    display: block;
-  }
-}
-
-.footer-icons-on-dark {
-  display: block;
-  margin-left: 176px;
-
-  @include breakpoint-media-max("lgtablet") {
-    margin-left: 0;
-    margin-bottom: -17px;
-  }
-}
-
-.footer-menu {
-  @include breakpoint-media-max("lgtablet") {
-    width: 220px;
-    order: 3;
-  }
-}
-
-.footer-donate-button {
-  margin-left: auto;
-  margin-right: 188px;
-
-  @include breakpoint-media-max("lgtablet") {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.footer-menu-vertical-line {
-  border: 1px solid $color-white;
-  width: 40px;
-  transform: rotate(-90deg);
-  margin: auto;
-
-  &:first-child {
-    display: block;
-  }
-
-  &:not(:first-child) {
-    visibility: hidden;
-  }
-
-  @include breakpoint-media-max("lgtablet") {
-    width: 20px;
-
-    &:first-child {
-      @include hidden;
-    }
-
-    &:not(:first-child) {
-      visibility: visible;
-    }
-  }
-}
-
-.footer-links {
-  color: $color-white;
-  text-decoration: none;
-  @include title(6);
-
-  @include breakpoint-media-max("mobile") {
-    @include title(7);
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
diff --git a/frontend/src/components/Navigation/_index.scss b/frontend/src/components/Navigation/_index.scss
index cb3d7a16..14058e4a 100644
--- a/frontend/src/components/Navigation/_index.scss
+++ b/frontend/src/components/Navigation/_index.scss
@@ -1,2 +1 @@
-@forward "FooterNav";
 @forward "ProgressBar";
diff --git a/frontend/src/components/components.tsx b/frontend/src/components/components.tsx
index d99c8b23..020180e0 100644
--- a/frontend/src/components/components.tsx
+++ b/frontend/src/components/components.tsx
@@ -7,7 +7,6 @@ import { Checkbox } from "./Inputs/Checkbox";
 import { Chip } from "./Inputs/Chip";
 import { Dropdown, DropdownOption } from "./Inputs/Dropdown";
 import { TextField } from "./Inputs/Textfield";
-import { FooterNav } from "./Navigation/FooterNav";
 import { ProgressBar } from "./Navigation/ProgressBar";
 import { Notification } from "./Notification/Notification";
 import { TransitionWrapper } from "./Transition/Wrapper";
@@ -30,7 +29,6 @@ export {
   DropdownOption,
   TextField,
   // Navigation
-  FooterNav,
   ProgressBar,
   // Notification
   Notification,
diff --git a/frontend/src/layouts/DefaultNavLayout.tsx b/frontend/src/layouts/DefaultNavLayout.tsx
index 8043de97..6a76f545 100644
--- a/frontend/src/layouts/DefaultNavLayout.tsx
+++ b/frontend/src/layouts/DefaultNavLayout.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import { FooterNav } from "components/components";
-import { HeaderNav } from "tw-components";
+import { HeaderNav, FooterNav } from "tw-components";
 
 const DefaultNavLayout = () => {
   return (
diff --git a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
index c86de5ef..2119d50b 100644
--- a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -4,8 +4,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 // Internal Imports
-import { HeaderNav } from "tw-components";
-import { FooterNav } from "components/components";
+import { HeaderNav, FooterNav } from "tw-components";
 import { Button } from "components/components";
 import { notFoundPageImg } from "assets/images/images";
 
diff --git a/frontend/src/components/Navigation/FooterNav.tsx b/frontend/src/tw-components/FooterNav.tsx
similarity index 50%
rename from frontend/src/components/Navigation/FooterNav.tsx
rename to frontend/src/tw-components/FooterNav.tsx
index f9694a23..3199f062 100644
--- a/frontend/src/components/Navigation/FooterNav.tsx
+++ b/frontend/src/tw-components/FooterNav.tsx
@@ -1,69 +1,69 @@
-// External imports
-import React, { Fragment } from "react";
-import { Link } from "react-router-dom";
-
-// Internal imports
-import { Button } from "../Buttons/Button";
-import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
-
-interface menuObject {
-  name?: string;
-  link: string;
-}
-
-const menuItems: menuObject[] = [
-  { name: "Credits", link: "credits" },
-  { name: "Sitemap", link: "#" },
-  { name: "Join Us", link: "qualifier/1" },
-];
-
-function FooterNav() {
-  const Logo = () => {
-    return (
-      <a className="footer-icons-on-dark" href="/" rel="noopener noreferrer">
-        <img
-          className="logo-desktop-footer"
-          src={logoHorizontalOnDark}
-          alt="Civic Tech Jobs - Home"
-        />
-        <img
-          className="logo-mobile-footer"
-          src={logoStackedOnDark}
-          alt="Civic Tech Jobs - Home"
-        />
-      </a>
-    );
-  };
-
-  return (
-    <footer className="footer-nav flex-container">
-      <Logo />
-      <nav
-        className="footer-menu flex-container"
-        aria-label="footer-navigation"
-      >
-        {menuItems.map((item, index) => {
-          return (
-            <Fragment key={index}>
-              <div className="footer-menu-vertical-line"></div>
-              <Link className="footer-links" to={item.link}>
-                {item.name}
-              </Link>
-            </Fragment>
-          );
-        })}
-      </nav>
-      <div className="footer-donate-button flex-container">
-        <Button
-          color="primary-dark"
-          href="https://www.hackforla.org/donate/"
-          size="sm"
-        >
-          Donate
-        </Button>
-      </div>
-    </footer>
-  );
-}
-
-export { FooterNav };
+// External imports
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+
+// Internal imports
+import { Button } from "components/components";
+import { logoHorizontalOnDark, logoStackedOnDark } from "assets/images/images";
+
+interface menuObject {
+  name?: string;
+  link: string;
+}
+
+const menuItems: menuObject[] = [
+  { name: "Credits", link: "credits" },
+  { name: "Sitemap", link: "#" },
+  { name: "Join Us", link: "qualifier/1" },
+];
+
+const Logo = () => {
+  return (
+    <Link className="block" to="/">
+      <img
+        className="hidden sm:block"
+        src={logoHorizontalOnDark}
+        alt="Civic Tech Jobs - Home"
+      />
+      <img
+        className="sm:hidden"
+        src={logoStackedOnDark}
+        alt="Civic Tech Jobs - Home"
+      />
+    </Link>
+  );
+};
+
+function FooterNav() {
+  return (
+    <footer className="box-border flex flex-col items-center gap-6 bg-blue-dark py-8 lg:flex-row lg:px-[176px]">
+      <Logo />
+      <nav
+        className="flex max-lg:order-3 max-lg:w-[220px]"
+        aria-label="footer-navigation"
+      >
+        {menuItems.map((item, index) => {
+          return (
+            <Fragment key={index}>
+              <div className="visible m-auto block w-5 rotate-90 border border-white first:hidden lg:invisible lg:w-p5 lg:first:visible lg:first:block"></div>
+              <Link className="text-[16px] font-bold text-white" to={item.link}>
+                {item.name}
+              </Link>
+            </Fragment>
+          );
+        })}
+      </nav>
+      <div className="mx-0 flex lg:ml-auto">
+        <Button
+          color="primary-dark"
+          href="https://www.hackforla.org/donate/"
+          size="sm"
+        >
+          Donate
+        </Button>
+      </div>
+    </footer>
+  );
+}
+
+export default FooterNav;
diff --git a/frontend/src/tw-components/HeaderNav.tsx b/frontend/src/tw-components/HeaderNav.tsx
index a1935911..46ce641c 100644
--- a/frontend/src/tw-components/HeaderNav.tsx
+++ b/frontend/src/tw-components/HeaderNav.tsx
@@ -21,19 +21,19 @@ const menuItems: menuObject[] = [
   { name: "Projects", link: "https://www.hackforla.org/projects/" },
 ];
 
-function HeaderNav() {
-  const Logo = () => {
-    return (
-      <a href="/" rel="noopener noreferrer">
-        <img
-          className="max-h-[24px] md:max-h-[32px]"
-          src={logoHorizontal}
-          alt="Civic Tech Jobs - Home"
-        />
-      </a>
-    );
-  };
+const Logo = () => {
+  return (
+    <a href="/" rel="noopener noreferrer">
+      <img
+        className="max-h-p3 md:max-h-p4"
+        src={logoHorizontal}
+        alt="Civic Tech Jobs - Home"
+      />
+    </a>
+  );
+};
 
+function HeaderNav() {
   return (
     <header className="flex h-16 w-full items-center justify-between px-3 py-1 shadow-[-1px_1px_2px_rgb(51,51,51,0.2)] lg:justify-around">
       <div>
diff --git a/frontend/src/tw-components/index.tsx b/frontend/src/tw-components/index.tsx
index 0da7033b..3e11e226 100644
--- a/frontend/src/tw-components/index.tsx
+++ b/frontend/src/tw-components/index.tsx
@@ -1,4 +1,5 @@
 export { default as AuthNav } from "./AuthNav";
-export { default as HeaderNav } from "./HeaderNav";
 export { default as CookieBanner } from "./CookieBanner";
+export { default as FooterNav } from "./FooterNav";
+export { default as HeaderNav } from "./HeaderNav";
 export { default as TextField } from "./TextField";
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7541c68e..c4b7b5ad 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
+
+/*
+ * Please refer to CTJ Figma Design System for more details about custom theme values
+ **/
+
 module.exports = {
-  darkMode: "class", // Enables dark mode with a class
+  darkMode: "class",
   content: [
     "./src/pages/Demo/DemoTailwind.tsx",
     "./src/pages/Authentication/*.tsx",
@@ -12,15 +17,10 @@ module.exports = {
   theme: {
     screens: {
       xs: "480px",
-      // => @media (min-width: 480px) { ... }
       sm: "577px",
-      // => @media (min-width: 577px) { ... }
       md: "769px",
-      // => @media (min-width: 769px) { ... }
       lg: "1025px",
-      // => @media (min-width: 1025px) { ... }
       xl: "1201px",
-      // => @media (min-width: 1201px) { ... }
     },
     colors: {
       // Primary Colors
@@ -37,13 +37,13 @@ module.exports = {
       "tan-light": "#ffefdb",
       "tan-bg": "#fbe8ce",
       green: "#13831e",
-      red: "#CC0023",
+      red: "#c93329",
       // Neutral Colors
-      white: "#fff",
+      white: "#ffffff",
       "grey-light": "#f2f2f2",
       grey: "#c1c1c1",
       "grey-dark": "#585858",
-      charcoal: "#333",
+      charcoal: "#333333",
     },
     fontFamily: {
       sans: ["Roboto", "Tahoma", "Verdana", "sans-serif"],
@@ -57,18 +57,31 @@ module.exports = {
       black: "900",
     },
     extend: {
-      lineHeight: {
-        "extra-tight": "1.125rem",
-      },
       borderRadius: {
         DEFAULT: "20px",
         large: "60px",
         "x-large": "100px",
       },
+      lineHeight: {
+        "extra-tight": "1.125rem",
+      },
       rotate: {
         290: "290deg",
         345: "345deg",
       },
+      spacing: {
+        p0: "0px",
+        p1: "8px",
+        p2: "16px",
+        p3: "24px",
+        p4: "32px",
+        p5: "40px",
+        p6: "48px",
+        p7: "56px",
+        p8: "64px",
+        p9: "72px",
+        p10: "80px",
+      },
     },
   },
   plugins: [],