Added badges to the page extra info and changed the button color according to age

data.json

@@ -103,7 +103,7 @@
       "registrationAndParticipation": {
         "registrationLink": "https://github.com/GDSC-RCCIIT/gdg-website",
         "teamSize": "2-6 members",
-        "registrationDeadline": "2024-12-01",
+        "registrationDeadline": "2024-02-30",
         "participationFee": "$25"
       },
       "prizesAndPerks": {

src/app/(pages)/Hackathon/Card.jsx

@@ -1,10 +1,38 @@
 import React from "react";
 import { FaGithub } from "react-icons/fa";
 import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+
+function getDeadlineColor(registrationDeadline) {
+  const currentDate = new Date();
+  const deadlineDate = new Date(registrationDeadline);
+
+  const daysDifference = Math.floor(
+    (deadlineDate - currentDate) / (1000 * 60 * 60 * 24)
+  );
+
+  if (daysDifference === 0) {
+    return "bg-red-500"; 
+  } else if (daysDifference < 0) {
+    return "bg-blue-500"; 
+  } else {
+    return "bg-green-500"; 
+  }
+}
+
+function Card({
+  title,
+  description,
+  location,
+  prizePool,
+  teamSize,
+  image,
+  registrationDeadline,
+}) {
+  const deadlineColor = getDeadlineColor(registrationDeadline);
 
-function Card({ title, description, image, registrationDeadline }) {
   return (
-    <div className="max-w-sm h-[32rem] rounded-lg overflow-hidden shadow-lg transition-transform duration-300 transform hover:scale-105 hover:shadow-2xl m-4 bg-gray-100 flex flex-col justify-between">
+    <div className="max-w-sm h-[32rem] rounded-lg overflow-hidden shadow-lg transition-transform duration-300 transform hover:scale-101 hover:shadow-2xl m-4 bg-gray-100 flex flex-col justify-between">
       {/* Image Section */}
       <div className="relative h-44 w-full">
         <Image
@@ -17,23 +45,31 @@ function Card({ title, description, image, registrationDeadline }) {
 
       {/* Content Section */}
       <div className="px-6 py-4 flex-grow">
-        <div className="font-bold text-2xl text-gray-800 mb-3">{title}</div>
-        <p className="text-gray-700 text-sm leading-relaxed">{description}</p>
+        <div className="font-bold text-2xl text-gray-800 ">{title}</div>
+        <div className="gap-2">
+          <Badge className="mr-2">Prize Pool: {prizePool}</Badge>
+          <Badge className="mr-2">{teamSize}</Badge>
+          <Badge className="mr-2">{location}</Badge>
+        </div>
+        <p className="text-gray-700 text-sm leading-relaxed mt-3">
+          {description}
+        </p>
       </div>
 
       {/* Action Button Section */}
+      {/* <div className="px-6 py-4 flex justify-center">
+
+        <p className="inline-block px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow-md hover:from-blue-600 hover:to-indigo-600 transition duration-300 transform hover:scale-105">
+        Registration Deadline:  {new Date(registrationDeadline).toLocaleDateString()}
+        </p>
+      </div> */}
+
       <div className="px-6 py-4 flex justify-center">
-        {/* <a
-          href={link}
-          className="inline-block px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow-md hover:from-blue-600 hover:to-indigo-600 transition duration-300 transform hover:scale-105"
-          target="_blank"
-          rel="noopener noreferrer"
+        <p
+          className={`inline-block px-4 py-2 text-white rounded-lg shadow-md transition duration-300 transform hover:scale-105 ${deadlineColor}`}
         >
-          <FaGithub className="inline-block mr-2" />
-          View on GitHub
-        </a> */}
-        <p className="inline-block px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow-md hover:from-blue-600 hover:to-indigo-600 transition duration-300 transform hover:scale-105">
-        Registration Deadline: {registrationDeadline}
+          Registration Deadline:{" "}
+          {new Date(registrationDeadline).toLocaleDateString()}
         </p>
       </div>
     </div>

src/app/(pages)/Hackathon/page.jsx

@@ -102,6 +102,9 @@ export default function ProjectsPage() {
                     <Card
                       title={hackathon.basicInformation.hackathonTitle}
                       description={hackathon.basicInformation.description}
+                      location={hackathon.basicInformation.location}
+                      prizePool={hackathon.prizesAndPerks.prizePool}
+                      teamSize={hackathon.registrationAndParticipation.teamSize}
                       image="/img1.jpg"
                       registrationDeadline={hackathon.registrationAndParticipation.registrationDeadline} // Display registration deadline
                     />