From 4f9d81ed419cd0f3212306dc97235e913b0a9437 Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Tue, 2 Apr 2024 21:05:56 +0200
Subject: [PATCH] =?UTF-8?q?style(frontend):=20:lipstick:=20Add=20the=20sam?=
 =?UTF-8?q?e=20on=20hover=20effect=20on=20project=20p=E2=80=A6=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style(frontend): :lipstick: Add the same on hover effect on project page for satellite page and make the whole card clickable.

* refactor(frontend): :recycle: Run prettier

* style(frontend): :lipstick: Change the width to the satellite cards
---
 frontend/src/app/satellites/page.tsx | 50 +++++++++++++---------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index d506021..41bd6e0 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -45,33 +45,31 @@ export default async function Satellites() {
                         previewImage = HOST_URL + previewImage;
                     }
                     return (
-                        <Card key={satellite.id} className="w-1/1.5 md:w-1/3 ">
-                            <CardHeader className="flex flex-col items-center justify-center">
-                                <CardTitle>
-                                    <Link
-                                        href={
-                                            "/satellites/" +
-                                            satellite?.attributes?.name
-                                        }
-                                        className="hover:underline"
-                                    >
+                        <Link
+                            href={"/satellites/" + satellite?.attributes?.name}
+                            className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
+                            key={satellite.id}
+                        >
+                            <Card className="md:w-76 flex h-full w-72 flex-col">
+                                <CardHeader className="flex flex-col items-center justify-center">
+                                    <CardTitle>
                                         {satellite?.attributes?.name}
-                                    </Link>
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent className="flex flex-col items-center">
-                                <SatelliteStatsTable />
-                                {previewImage && (
-                                    <Image
-                                        src={previewImage}
-                                        alt={previewImage}
-                                        width={200}
-                                        height={0}
-                                        className="margin p-2"
-                                    />
-                                )}
-                            </CardContent>
-                        </Card>
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className="flex flex-col items-center">
+                                    <SatelliteStatsTable />
+                                    {previewImage && (
+                                        <Image
+                                            src={previewImage}
+                                            alt={previewImage}
+                                            width={200}
+                                            height={0}
+                                            className="margin p-2"
+                                        />
+                                    )}
+                                </CardContent>
+                            </Card>
+                        </Link>
                     );
                 })}
             </div>