Completed grants cards new design and section bg color (#57)

BuidlGuidl · Mar 2, 2024 · d574a29 · d574a29
1 parent 72613b2
commit d574a29
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -5,29 +5,34 @@ import { GrantData } from "~~/services/database/schema";
 
 const CompletedGrantCard = ({ title, description, askAmount, builder, link, completedAt }: GrantData) => {
   return (
-    <div className="w-72 md:w-[300px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
-      <div className="h-44 w-full bg-secondary rounded-xl relative">
-        <a
-          href={link}
-          className="badge bg-base-200 absolute top-4 right-4 rounded-2xl py-3 px-3 hover:opacity-80"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more
-        </a>
-        {completedAt && (
-          <p className="badge bg-base-200 absolute top-4 left-4 rounded-2xl m-0">
-            {new Date(completedAt).toLocaleDateString()}
-          </p>
-        )}
-        <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
+    <div className="w-72 md:w-[300px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg">
+      <div className="flex justify-between items-center bg-white p-2 text-sm">
+        <div className="flex items-center px-1">
+          <Image src="/assets/eth-completed-grant.png" alt="ETH Icon" width={10} height={10} />
+          <span className="ml-1 font-bold">{askAmount} ETH</span>
+        </div>
+        <span>{completedAt ? new Date(completedAt).toLocaleDateString() : ""}</span>
+      </div>
+      <div className="bg-base-300 p-4 flex items-center justify-start h-[6rem]">
+        <p className="text-2xl m-0 line-clamp-2">{title}</p>
       </div>
-      <div className="flex flex-col gap-2 px-3">
-        <Address address={builder} link={`https://app.buidlguidl.com/builders/${builder}`} />
-        <p className="text-base m-0 mt-2">
-          <span className="font-medium">{askAmount} ETH</span>
-        </p>
-        <p className="text-base m-0 line-clamp-3">{description}</p>
+      <div className="flex flex-col p-4 gap-4 bg-white">
+        <div className="text-left">
+          <Address address={builder} link={`https://app.buidlguidl.com/builders/${builder}`} />
+        </div>
+        <div className="text-left flex-1">
+          <p className="m-0 line-clamp-3">{description}</p>
+        </div>
+        <div className="text-left mt-auto">
+          <a
+            href={link}
+            className="badge bg-primary rounded-2xl py-4 px-5 hover:opacity-80 mt-2"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Learn more
+          </a>
+        </div>
       </div>
     </div>
   );
@@ -37,7 +42,7 @@ export const CompletedGrants = async ({ limit }: { limit?: number }) => {
   const completedGrants = await getAllCompletedGrants(limit);
 
   return (
-    <div className="bg-base-100">
+    <div className="bg-customBlue">
       <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 gap-4">
         <div className="self-center lg:self-start w-fit relative">
           <h2 className="text-4xl lg:text-6xl text-center lg:text-left font-ppEditorial">Completed grants</h2>

diff --git a/packages/nextjs/public/assets/eth-completed-grant.png b/packages/nextjs/public/assets/eth-completed-grant.png
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -71,6 +71,9 @@ module.exports = {
   },
   theme: {
     extend: {
+      colors: {
+        customBlue: '#D5DAFF',
+      },
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
       },