From 4e2e8a6ac9707dfe71bbbc0bb7b10f5007b22210 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Wed, 26 Mar 2025 09:34:37 +0100
Subject: [PATCH 1/3] Update card look.

---
 src/components/card/card-container.tsx |  2 +-
 src/components/card/card.astro         | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/card/card-container.tsx b/src/components/card/card-container.tsx
index 8fc15b663..7ee4f841e 100644
--- a/src/components/card/card-container.tsx
+++ b/src/components/card/card-container.tsx
@@ -1,5 +1,5 @@
 export const CardContainer = ({ children }: { children: React.ReactNode }) => (
-  <section className="justify-around gap-12 flex flex-wrap px-6">
+  <section className="justify-center gap-6 flex flex-wrap px-6">
     {children}
   </section>
 );
diff --git a/src/components/card/card.astro b/src/components/card/card.astro
index 154ca1007..1cc1b26a9 100644
--- a/src/components/card/card.astro
+++ b/src/components/card/card.astro
@@ -13,7 +13,7 @@ export interface Props {
 const { title, subtitle, url, image } = Astro.props;
 ---
 
-<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] text-center">
+<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl">
   <a href={url} class="block">
     <div class="relative w-full mb-4">
       <Image
@@ -21,20 +21,20 @@ const { title, subtitle, url, image } = Astro.props;
         width={600}
         height={375}
         alt=""
-        class="rounded-2xl aspect-[3/2] w-full"
+        class="rounded-xl aspect-[3/2] w-full"
         loading="lazy"
       />
     </div>
-    <h3 class="text-3xl font-bold mt-2 mb-4 text-primary">{title}</h3>
   </a>
-  <ButtonLink
-    url={url}
-    className="mb-4"
-    isExternal={false}
-  >
+  <div class="flex flex-col items-start">
+    <a href={url} class="block hover:underline">
+      <h3 class="text-2xl text-primary">{title}</h3>
+    </a>
+      <slot />
+  </div>
+<a class="mt-2 text-xs px-2 py-1 bg-[#141F36] text-white rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose rounded-[5px]" href="{url}">
     {subtitle}
-  </ButtonLink>
-  <p class="text-lg">
-    <slot />
-  </p>
+ <span class="inline-block ml-1 font-system text-lg leading-4" >
+↗
+</span></a>
 </div>

From 16d7600423fd4b5b8c463ba2d050e9d4c9fe1855 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Wed, 26 Mar 2025 18:11:27 +0100
Subject: [PATCH 2/3] Update card component style.

---
 src/components/card/card.astro | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/card/card.astro b/src/components/card/card.astro
index 1cc1b26a9..8138a454f 100644
--- a/src/components/card/card.astro
+++ b/src/components/card/card.astro
@@ -13,7 +13,7 @@ export interface Props {
 const { title, subtitle, url, image } = Astro.props;
 ---
 
-<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl">
+<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col h-full">
   <a href={url} class="block">
     <div class="relative w-full mb-4">
       <Image
@@ -26,15 +26,16 @@ const { title, subtitle, url, image } = Astro.props;
       />
     </div>
   </a>
-  <div class="flex flex-col items-start">
+  <div class="flex flex-col items-center flex-grow mb-2">
     <a href={url} class="block hover:underline">
       <h3 class="text-2xl text-primary">{title}</h3>
     </a>
-      <slot />
+    <slot />
   </div>
-<a class="mt-2 text-xs px-2 py-1 bg-[#141F36] text-white rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose rounded-[5px]" href="{url}">
+  <a class="text-xs px-2 py-1 mt-4 bg-[#141F36] text-white rounded-[10px] inline-block w-fit mx-auto leading-4 hover:bg-button-hover not-prose mt-auto" href="{url}">
     {subtitle}
- <span class="inline-block ml-1 font-system text-lg leading-4" >
-↗
-</span></a>
+    <span class="inline-block ml-1 font-system text-lg leading-4">
+      ↗
+    </span>
+  </a>
 </div>

From dc20aaa15ee1171ef24784918432328f63d15e78 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Wed, 26 Mar 2025 19:26:00 +0100
Subject: [PATCH 3/3] Fix md size card height.

---
 src/components/card/card.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/card/card.astro b/src/components/card/card.astro
index 8138a454f..8c0d598b9 100644
--- a/src/components/card/card.astro
+++ b/src/components/card/card.astro
@@ -13,7 +13,7 @@ export interface Props {
 const { title, subtitle, url, image } = Astro.props;
 ---
 
-<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col h-full">
+<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col">
   <a href={url} class="block">
     <div class="relative w-full mb-4">
       <Image
@@ -26,7 +26,7 @@ const { title, subtitle, url, image } = Astro.props;
       />
     </div>
   </a>
-  <div class="flex flex-col items-center flex-grow mb-2">
+  <div class="flex items-center flex-col flex-grow mb-2">
     <a href={url} class="block hover:underline">
       <h3 class="text-2xl text-primary">{title}</h3>
     </a>