fix: image hover not working

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

src/app/page.tsx

@@ -19,7 +19,7 @@ export default function Home() {
                         description="Kanna Kamui (神凪 カンナ, Kanna Kamui) is a young dragon girl from the world of dragons who becomes Miss Kobayashi adopted daughter.
                                     Kanna has long, white hair with a distinctive ahoge (a single strand of hair that sticks up) and bright blue eyes.
                                     She often wears a school uniform or a casual outfit with a tail accessory. In her dragon form, she has white scales and powerful wings."
-                        imageKey="1" />
+                    />
 
                     <ContentCard
                         avatar="https://cdn.discordapp.com/avatars/597678468280614922/a39daa2dd7e9bea3c68ac80515f3c45a.png?size=1024"
@@ -28,7 +28,7 @@ export default function Home() {
                         image="https://cdn.discordapp.com/attachments/1174136474250248204/1231799616253722757/artwork.png?ex=663845ca&is=6625d0ca&hm=4fd68774b50b025129bf4a23bfe03c7bbaad99e104aeab24af25dfc8c21056b6&&w=1920&q=75"
                         title="Why does Arisu is a Cute characters?"
                         description="Student of Millennium and member of the Game development club. She was found sleeping inside some ruins. Everything about her is unknown, including her age. Currently, she enjoys playing videogames with Momoi, Midori and Yuzu and has become a serious game maniac. Because she picks up lines from retro games, her speech tends to be hesitant and unnatural."
-                        imageKey="2" />
+                    />
                 </div>
             </div>
         </>

src/components/ContentCard.tsx

@@ -5,8 +5,6 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 
 interface ContentCardProps {
-    imageKey: string;
-
     title: string;
     description: string;
     image: string;
@@ -24,7 +22,7 @@ export const ContentCard = (props: ContentCardProps) => {
     useEffect(() => {
         const handleOutsideClick = (event: MouseEvent) => {
             const target = event.target;
-            if (fullscreenState && target instanceof HTMLElement && !target.closest(`.${props.imageKey}-image-container`)) {
+            if (fullscreenState && target instanceof HTMLElement && !target.closest(".image-container")) {
                 setFullscreenState(false);
             }
         };
@@ -34,15 +32,15 @@ export const ContentCard = (props: ContentCardProps) => {
         return () => {
             document.removeEventListener("mousedown", handleOutsideClick);
         };
-    }, [fullscreenState, props.imageKey]);
+    }, [fullscreenState]);
 
     return (
         <div className="flex w-full cursor-pointer flex-col-reverse gap-6 rounded-md p-2 hover:bg-[#12372A40] md:p-4 lg:w-3/4">
             <div className="flex h-10 flex-row items-center justify-between">
                 <div className="flex h-full w-fit flex-row items-center gap-1 rounded-full bg-[#1B1B1B] px-4 text-sm text-white md:text-lg">
                     <ChevronUp strokeWidth={3} color="#5da35d" />
                     <p>2.5K</p>
-                    <ChevronDown strokeWidth={3} color="#701c1c" />
+                    <ChevronDown strokeWidth={3} color="#b32b2b" />
                 </div>
 
                 <div className="flex h-full flex-row gap-1">
@@ -77,8 +75,8 @@ export const ContentCard = (props: ContentCardProps) => {
                     fullscreenState && <>
                         <div className="fixed inset-0 z-[90] overflow-y-auto backdrop-blur-sm">
                             <CircleX className="absolute right-0 top-0 m-4 cursor-pointer text-white" size={32} onClick={() => setFullscreenState(false)} />
-                            <div className="flex min-h-screen items-center justify-center">
-                                <Image className={`${props.imageKey}-image-container`} height={1920} width={1280} alt="Content" src={props.image} />
+                            <div className={"flex min-h-screen items-center justify-center"}>
+                                <Image className="image-container" height={1920} width={1280} alt="Content" src={props.image} />
                             </div>
                         </div>
                     </>