From 314bc474b5c43fb08fca8ac7e4e5bb78cd220ee1 Mon Sep 17 00:00:00 2001
From: Johnny Tan <jonnytan0818@gmail.com>
Date: Mon, 29 Apr 2024 00:12:20 -0400
Subject: [PATCH] ui fixes

---
 package-lock.json             | 28 ++++++++++++++++++++++++++++
 package.json                  |  1 -
 postcss.config.cjs            |  2 ++
 src/app/public/about/page.tsx |  2 +-
 src/app/public/team/page.tsx  |  2 +-
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48a0ef92..de56ff35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,8 @@
         "react-datepicker": "^6.1.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
+        "react-loading-skeleton": "^3.4.0",
+        "react-multi-carousel": "^2.8.5",
         "uuidv4": "^6.2.13",
         "yarn": "^1.22.19",
         "zod": "^3.22.4"
@@ -44,6 +46,7 @@
         "@types/react": "18.0.14",
         "@types/react-datepicker": "^6.0.1",
         "@types/react-dom": "18.0.5",
+        "@types/react-image-gallery": "^1.2.4",
         "@typescript-eslint/eslint-plugin": "^5.33.0",
         "@typescript-eslint/parser": "^5.33.0",
         "autoprefixer": "^10.4.7",
@@ -1456,6 +1459,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-image-gallery": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-image-gallery/-/react-image-gallery-1.2.4.tgz",
+      "integrity": "sha512-H0xpmT5rlSH0qiTvcUDCPDLRBi3J3Xa4COqaDqGb7ffLFpQoPAxpZdNuKCuThhFI0xJmNnMubZiD6B3kCBHtcw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -6065,6 +6077,22 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz",
+      "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-multi-carousel": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz",
+      "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-onclickoutside": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
diff --git a/package.json b/package.json
index 91b828b9..b5649fbe 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "@react-email/render": "^0.0.7",
     "@sendgrid/mail": "^8.1.1",
     "classnames": "^2.3.2",
-    "clsx": "^2.1.1",
     "googleapis": "^117.0.0",
     "moment": "^2.30.1",
     "mongo": "^0.1.0",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 12a703d9..6887c826 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/src/app/public/about/page.tsx b/src/app/public/about/page.tsx
index a9fd485c..fded5386 100644
--- a/src/app/public/about/page.tsx
+++ b/src/app/public/about/page.tsx
@@ -23,7 +23,7 @@ const AboutLayout = () => {
     };
   }, []);
   return (
-    <div className="flex-col justify-center gap-y-4 py-6 sm:flex sm:w-full sm:px-0">
+    <div className="flex flex-col justify-center gap-y-4 py-6 sm:w-full sm:px-0">
       <span className="pt-6 text-center text-4xl font-semibold sm:text-left">
         Our Story
       </span>
diff --git a/src/app/public/team/page.tsx b/src/app/public/team/page.tsx
index 7ad1ab25..dab40c7c 100644
--- a/src/app/public/team/page.tsx
+++ b/src/app/public/team/page.tsx
@@ -32,7 +32,7 @@ const PublicLayout = () => {
       <span className="pt-6 text-center text-4xl font-semibold sm:text-left">
         Meet TLP
       </span>
-      <p className="mt-7 leading-7">
+      <p className="mb-4 mt-7 leading-7">
         The Legacy Project, Inc. (TLP) connects college students with local
         elders in their community with the purpose of building strong
         intergenerational relationships and documenting the life histories of