From 7633f185e8322f4382f59f4d23309e0f1155209c Mon Sep 17 00:00:00 2001
From: MoonbamiOfficial <141120384+MoonbamiOfficial@users.noreply.github.com>
Date: Sat, 9 Mar 2024 10:47:14 +0800
Subject: [PATCH] feat: remove border to projects and add new shadow

---
 components/ui/ProjectCard.tsx | 6 +++---
 styles/globals.css            | 3 ---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/ui/ProjectCard.tsx b/components/ui/ProjectCard.tsx
index 0d91816..1c0540e 100644
--- a/components/ui/ProjectCard.tsx
+++ b/components/ui/ProjectCard.tsx
@@ -1,7 +1,7 @@
 import { ProjectType } from "@shared-types/project";
 import Image from "next/image";
 import Link from "next/link";
-import DefaultBanner from "@assets/default-banner.webp"
+import DefaultBanner from "@assets/default-banner.webp";
 import GitHubBtn from "@components/buttons/GitHubBtn";
 import WebsiteBtn from "@components/buttons/WebsiteBtn";
 
@@ -15,7 +15,7 @@ const ProjectCard = ({
   github,
 }: ProjectType) => {
   return (
-    <div className="card relative w-[400px] rounded-xl flex flex-col bg-transparent overflow-hidden">
+    <div className="cursor-pointer hover:shadow-gray-500 hover:shadow-lg hover:-translate-y-2 relative w-[400px] rounded-xl flex flex-col overflow-hidden">
       <Link href={href}>
         <Image
           src={src ? `${src}` : DefaultBanner}
@@ -25,7 +25,7 @@ const ProjectCard = ({
           loading="lazy"
           placeholder="blur"
           blurDataURL="URL"
-          className="w-full h-[200px] object-cover"
+          className="w-full h-[200px] rounded-xl object-cover"
         />
         <div className="details px-[30px] py-[30px]">
           <h1 className="truncate text-2xl font-bold px-2">{title}</h1>
diff --git a/styles/globals.css b/styles/globals.css
index 2986a9f..241670d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -44,9 +44,6 @@ body {
 .active {
   @apply bg-highlight text-white;
 }
-.card {
-  @apply cursor-pointer border border-gray-500 hover:shadow-md hover:shadow-gray-500 hover:-translate-y-4;
-}
 .button-format {
   @apply text-center w-[150px] h-[50px] py-[15px] rounded-lg;
 }