From 81b722c6136fbe262ff584f65516275ef84d9ced Mon Sep 17 00:00:00 2001
From: satasatalight <satalight.x@gmail.com>
Date: Wed, 17 Jun 2026 14:06:57 -0400
Subject: [PATCH 1/4] feat: add ChallengeCard

---
 components/ChallengeCard.tsx | 42 ++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 components/ChallengeCard.tsx

diff --git a/components/ChallengeCard.tsx b/components/ChallengeCard.tsx
new file mode 100644
index 0000000..4ec9300
--- /dev/null
+++ b/components/ChallengeCard.tsx
@@ -0,0 +1,42 @@
+export interface ChallengeCardProps {
+    name: string;
+    desc: string;
+    tags: Array<string>;
+    deadline: Date;
+    link: string;
+}
+
+export default function ChallengeCard({name, desc, tags, deadline, link} : ChallengeCardProps){ 
+    const monthNames = ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+    return <div className="p-12 bg-card-background border-1 border-card-border text-primary rounded-3xl w-full">
+        <div className="flex flex-row justify-between">
+            <div>
+                <div className="px-5 py-1 bg-accent border-accent-light rounded-3xl w-fit">
+                    {monthNames[deadline.getMonth()] + " " + deadline.getFullYear()} Challenge
+                </div>
+                <h1 className="text-4xl font-bold pt-3 pb-2">
+                    {name}
+                </h1>
+            </div>
+            <div className="text-end">
+                <h4 className="text-gray-400">
+                    📆 Deadline
+                </h4>
+                <h3 className="text-accent font-bold text-lg">
+                    {monthNames[deadline.getMonth()] + " " + deadline.getDay() + ", " + deadline.getFullYear()}
+                </h3>
+            </div>
+        </div>
+        <p className="py-6 w-3xl leading-8">{desc}</p>
+        <div className="flex flex-row pb-9">
+            {tags.map((tag) => 
+                <div className="px-3 py-1 me-2 text-accent-light bg-card-background border-accent-light border-1 rounded-3xl w-fit hover:bg-accent-light hover:text-white hover:border-accent cursor-pointer" key={tag}>
+                    #{tag}
+                </div>)}
+        </div>
+        <a className="px-7 py-3 bg-accent text-primary rounded-xl hover:bg-accent-light hover:text-page-background transition-all active:scale-[0.98] cursor-pointer" href={link}>
+            Link to Challenge
+        </a>
+    </div>;
+}
\ No newline at end of file

From 3d70d6c6d0ce2bd465eca6f4e151d4bf2ff3de04 Mon Sep 17 00:00:00 2001
From: satasatalight <satalight.x@gmail.com>
Date: Wed, 17 Jun 2026 14:16:07 -0400
Subject: [PATCH 2/4] fix: correct ChallengeCard deadline Date call

---
 components/ChallengeCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ChallengeCard.tsx b/components/ChallengeCard.tsx
index 4ec9300..2b9681e 100644
--- a/components/ChallengeCard.tsx
+++ b/components/ChallengeCard.tsx
@@ -24,7 +24,7 @@ export default function ChallengeCard({name, desc, tags, deadline, link} : Chall
                     📆 Deadline
                 </h4>
                 <h3 className="text-accent font-bold text-lg">
-                    {monthNames[deadline.getMonth()] + " " + deadline.getDay() + ", " + deadline.getFullYear()}
+                    {monthNames[deadline.getMonth()] + " " + deadline.getDate() + ", " + deadline.getFullYear()}
                 </h3>
             </div>
         </div>

From 860ce23485c951241cf4c2d82f636cf0d60a7d02 Mon Sep 17 00:00:00 2001
From: Sebastian Noel <snoel.dev@gmail.com>
Date: Wed, 17 Jun 2026 18:39:04 -0400
Subject: [PATCH 3/4] fix/minor-challenge-card-fixes

---
 components/ChallengeCard.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/ChallengeCard.tsx b/components/ChallengeCard.tsx
index 2b9681e..e258b7d 100644
--- a/components/ChallengeCard.tsx
+++ b/components/ChallengeCard.tsx
@@ -7,12 +7,12 @@ export interface ChallengeCardProps {
 }
 
 export default function ChallengeCard({name, desc, tags, deadline, link} : ChallengeCardProps){ 
-    const monthNames = ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
-    return <div className="p-12 bg-card-background border-1 border-card-border text-primary rounded-3xl w-full">
+    return <div className="p-12 bg-card-background border-1 border-card-border text-text-primary rounded-3xl w-full">
         <div className="flex flex-row justify-between">
             <div>
-                <div className="px-5 py-1 bg-accent border-accent-light rounded-3xl w-fit">
+                <div className="px-5 py-1 bg-accent border-accent-light border-2 rounded-3xl w-fit">
                     {monthNames[deadline.getMonth()] + " " + deadline.getFullYear()} Challenge
                 </div>
                 <h1 className="text-4xl font-bold pt-3 pb-2">
@@ -28,15 +28,15 @@ export default function ChallengeCard({name, desc, tags, deadline, link} : Chall
                 </h3>
             </div>
         </div>
-        <p className="py-6 w-3xl leading-8">{desc}</p>
+        <p className="py-6 leading-8">{desc}</p>
         <div className="flex flex-row pb-9">
             {tags.map((tag) => 
-                <div className="px-3 py-1 me-2 text-accent-light bg-card-background border-accent-light border-1 rounded-3xl w-fit hover:bg-accent-light hover:text-white hover:border-accent cursor-pointer" key={tag}>
+                <div className="px-3 py-1 me-2 text-accent-light bg-card-background border-accent-light border-1 rounded-3xl w-fit hover:bg-accent-light hover:text-page-background hover:border-accent cursor-pointer" key={tag}>
                     #{tag}
                 </div>)}
         </div>
-        <a className="px-7 py-3 bg-accent text-primary rounded-xl hover:bg-accent-light hover:text-page-background transition-all active:scale-[0.98] cursor-pointer" href={link}>
+        <a className="px-7 py-3 bg-accent border-2 border-accent-light text-text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer" href={link}>
             Link to Challenge
         </a>
     </div>;
-}
\ No newline at end of file
+}

From 92db15ca5aa1760d6e08825d8049ac4316a46d70 Mon Sep 17 00:00:00 2001
From: Sebastian Noel <snoel.dev@gmail.com>
Date: Wed, 22 Jul 2026 22:35:03 -0400
Subject: [PATCH 4/4] fix: correct ChallengeCard styling and consistency issues

---
 components/ChallengeCard.tsx | 87 +++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/components/ChallengeCard.tsx b/components/ChallengeCard.tsx
index e258b7d..273a2b6 100644
--- a/components/ChallengeCard.tsx
+++ b/components/ChallengeCard.tsx
@@ -1,42 +1,59 @@
+import { FaRegCalendarAlt } from "react-icons/fa";
+
 export interface ChallengeCardProps {
-    name: string;
-    desc: string;
-    tags: Array<string>;
-    deadline: Date;
-    link: string;
+  name: string;
+  desc: string;
+  tags: string[];
+  deadline: Date;
+  link: string;
 }
 
-export default function ChallengeCard({name, desc, tags, deadline, link} : ChallengeCardProps){ 
-    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const monthNames = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
 
-    return <div className="p-12 bg-card-background border-1 border-card-border text-text-primary rounded-3xl w-full">
-        <div className="flex flex-row justify-between">
-            <div>
-                <div className="px-5 py-1 bg-accent border-accent-light border-2 rounded-3xl w-fit">
-                    {monthNames[deadline.getMonth()] + " " + deadline.getFullYear()} Challenge
-                </div>
-                <h1 className="text-4xl font-bold pt-3 pb-2">
-                    {name}
-                </h1>
-            </div>
-            <div className="text-end">
-                <h4 className="text-gray-400">
-                    📆 Deadline
-                </h4>
-                <h3 className="text-accent font-bold text-lg">
-                    {monthNames[deadline.getMonth()] + " " + deadline.getDate() + ", " + deadline.getFullYear()}
-                </h3>
-            </div>
+export default function ChallengeCard({ name, desc, tags, deadline, link }: ChallengeCardProps) {
+  return (
+    <div className="p-12 bg-card-background border border-card-border text-text-primary rounded-2xl hover:border-accent transition-all w-full">
+      <div className="flex flex-row justify-between">
+        <div>
+          <div className="px-5 py-1 bg-accent rounded-full w-fit">
+            {monthNames[deadline.getMonth()] + " " + deadline.getFullYear()} Challenge
+          </div>
+          <p className="text-4xl font-bold pt-3 pb-2">
+            {name}
+          </p>
         </div>
-        <p className="py-6 leading-8">{desc}</p>
-        <div className="flex flex-row pb-9">
-            {tags.map((tag) => 
-                <div className="px-3 py-1 me-2 text-accent-light bg-card-background border-accent-light border-1 rounded-3xl w-fit hover:bg-accent-light hover:text-page-background hover:border-accent cursor-pointer" key={tag}>
-                    #{tag}
-                </div>)}
+        <div className="text-end">
+          <p className="flex items-center justify-end gap-1.5 text-text-secondary">
+            <FaRegCalendarAlt className="w-4 h-4" />
+            Deadline
+          </p>
+          <p className="text-accent-light font-bold text-lg">
+            {monthNames[deadline.getMonth()] + " " + deadline.getDate() + ", " + deadline.getFullYear()}
+          </p>
         </div>
-        <a className="px-7 py-3 bg-accent border-2 border-accent-light text-text-primary rounded-md hover:bg-accent-light hover:text-page-background hover:border-accent transition-all active:scale-[0.98] cursor-pointer" href={link}>
-            Link to Challenge
-        </a>
-    </div>;
+      </div>
+      <p className="py-6 leading-8">{desc}</p>
+      <div className="flex flex-row pb-9">
+        {tags.map((tag) => (
+          <div
+            className="px-3 py-1 me-2 text-text-primary bg-card-background border border-card-border rounded-xl w-fit hover:bg-accent-light hover:text-page-background hover:border-accent transition-all cursor-pointer"
+            key={tag}
+          >
+            #{tag}
+          </div>
+        ))}
+      </div>
+      <a
+        className="px-7 py-3 bg-accent hover:bg-accent-light text-text-primary rounded-full font-medium transition-all active:scale-[0.98] cursor-pointer"
+        href={link}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Link to Challenge
+      </a>
+    </div>
+  );
 }