From 63b0469f5cd8ceabb9d3d2f24ff884ae5df0d87f Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Fri, 6 Sep 2024 13:06:43 +0100
Subject: [PATCH] successfully grouped textWrapper with wrapper to apply hover
 text color to the whole card

---
 src/app/components/home/Card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx
index 1524857..150b2d1 100644
--- a/src/app/components/home/Card.tsx
+++ b/src/app/components/home/Card.tsx
@@ -8,12 +8,12 @@ import Image from "next/image";
 
 const styles = {
   wrapper:
-    "active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-gray-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center",
+    "group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center",
   header: "relative mt-2 mx-2 border-red",
   imageWrapper: "h-52 rounded-2xl overflow-hidden flex items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
   image: "object-cover mx-auto",
-  textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center",
+  textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center group-hover:text-white",
 };
 
 interface CardProps {
@@ -37,7 +37,7 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
     <div>
       <div
         onClick={handleClick}
-        className={[styles.wrapper, styles.wrapperAnime].join(" ")}
+        className={[styles.wrapper, styles.wrapperAnime].join(" ")} 
       >
         <div className={styles.header}>
           <div className={styles.imageWrapper}>