centered text on status badges within portfolio and centered text on portfolion cards in home

src/app/components/StatusBadge.tsx

@@ -55,7 +55,7 @@ const statusColor: {
     propertyHoverText: "This property is currently in scoping",
   },
   assessment: {
-    class: "bg-emerald-400 hover:bg-emerald-500",
+    class: "bg-emerald-400 hover:bg-emerald-500 max-w-full text-center",
     text: "Non-invasive Assessment",
     hoverText: "This portfolio is currently in the assessment stage",
     propertyHoverText: "This property is currently in the assessment stage",

src/app/components/home/Card.tsx

@@ -13,7 +13,7 @@ const styles = {
   imageWrapper: "h-56 rounded-2xl overflow-hidden flex items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
   image: "object-cover mx-auto",
-  textWrapper: "pt-3 pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-red-500",
+  textWrapper: "pt-3 pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-red-500 text-center",
 };
 
 interface CardProps {

src/app/home/page.tsx

@@ -7,6 +7,7 @@ import { redirect } from "next/navigation";
 
 const Home = async () => {
   const user = await getServerSession(AuthOptions);
+  
 
   if (!user?.user) {
     console.error("User not found");
@@ -15,10 +16,11 @@ const Home = async () => {
 
   const portfolios = await getPortfolios(user.user.dbId);
 
+
   return (
     <>
       <div className="flex justify-center">
-        <h1 className="text-3xl font-bold mt-3 mb-5 text-brandblue"> Your Portfolios </h1>
+        <h1 className="text-3xl font-bold mt-3 mb-5 text-gray-700"> Your Portfolios </h1>
       </div>
       <CardTiles Portfolios={portfolios} />
     </>