From 307e9a5725ceb997a67635b4129822f4ec0378ea Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 26 Feb 2024 14:57:11 +0530
Subject: [PATCH 1/6] flex wrap + line-clamp and minor tweaks

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index db3f513..450220e 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -4,13 +4,13 @@ import { GrantData } from "~~/services/database/schema";
 
 const CompletedGrantCard = ({ title, description, askAmount }: GrantData) => {
   return (
-    <div className="w-72 md:w-80 bg-base-200 min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
+    <div className="w-72 md:w-72 bg-base-200 min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
       <div className="h-44 w-full bg-secondary rounded-2xl relative">
         <div className="badge bg-base-200 absolute top-4 right-4 ">Learn more</div>
         <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
       </div>
       <div className="space-y-2">
-        <p className="text-base m-0">{description}</p>
+        <p className="text-base m-0 line-clamp-4 hover:line-clamp-none">{description}</p>
         <p className="text-base font-medium m-0">Amounted Granted: {askAmount} ETH</p>
       </div>
     </div>
@@ -21,8 +21,8 @@ export const CompletedGrants = async () => {
 
   return (
     <div className="bg-primary">
-      <div className="container flex flex-col justify-center max-w-[90%] lg:max-w-7xl mx-auto py-12 lg:px-4 gap-4">
-        <div className="self-center md:self-start w-fit relative">
+      <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 gap-4 border border-red-400">
+        <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>
           <Image
             className="absolute -top-3 -right-7 invert"
@@ -32,7 +32,7 @@ export const CompletedGrants = async () => {
             height={32}
           />
         </div>
-        <div className="flex flex-col items-center md:flex-row gap-10">
+        <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-8">
           {completedGrants.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}

From 51a656ec4477fffe2b372557bf308576f49340da Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 26 Feb 2024 15:06:11 +0530
Subject: [PATCH 2/6] update colors inline with figma

---
 .../nextjs/app/_components/CompletedGrants.tsx   | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index 450220e..1b17585 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -4,9 +4,9 @@ import { GrantData } from "~~/services/database/schema";
 
 const CompletedGrantCard = ({ title, description, askAmount }: GrantData) => {
   return (
-    <div className="w-72 md:w-72 bg-base-200 min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
-      <div className="h-44 w-full bg-secondary rounded-2xl relative">
-        <div className="badge bg-base-200 absolute top-4 right-4 ">Learn more</div>
+    <div className="w-72 md:w-72 bg-primary min-h-full rounded-3xl overflow-hidden shadow-lg p-4 space-y-4">
+      <div className="h-44 w-full bg-secondary rounded-3xl relative">
+        <div className="badge bg-base-200 absolute top-4 right-4 rounded-3xl py-3 px-3">Learn more</div>
         <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
       </div>
       <div className="space-y-2">
@@ -20,17 +20,11 @@ export const CompletedGrants = async () => {
   const completedGrants = await getAllCompletedGrants();
 
   return (
-    <div className="bg-primary">
+    <div className="bg-base-100">
       <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 gap-4 border border-red-400">
         <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>
-          <Image
-            className="absolute -top-3 -right-7 invert"
-            src="/assets/sparkle.png"
-            alt="sparkle"
-            width={32}
-            height={32}
-          />
+          <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
         </div>
         <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-8">
           {completedGrants.map(grant => (

From 69bca900b0dbc5aad3dbee5f344c1fb613871e12 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 26 Feb 2024 15:27:13 +0530
Subject: [PATCH 3/6] add builder address to card ad move Amount eth up

---
 .../app/_components/CompletedGrants.tsx       | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index 1b17585..c5fb2a5 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -1,17 +1,21 @@
 import Image from "next/image";
+import { Address } from "~~/components/scaffold-eth";
 import { getAllCompletedGrants } from "~~/services/database/grants";
 import { GrantData } from "~~/services/database/schema";
 
-const CompletedGrantCard = ({ title, description, askAmount }: GrantData) => {
+const CompletedGrantCard = ({ title, description, askAmount, builder }: GrantData) => {
   return (
-    <div className="w-72 md:w-72 bg-primary min-h-full rounded-3xl overflow-hidden shadow-lg p-4 space-y-4">
-      <div className="h-44 w-full bg-secondary rounded-3xl relative">
-        <div className="badge bg-base-200 absolute top-4 right-4 rounded-3xl py-3 px-3">Learn more</div>
+    <div className="w-72 md:w-[295px] 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">
+        <div className="badge bg-base-200 absolute top-4 right-4 rounded-2xl py-3 px-3">Learn more</div>
         <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
       </div>
-      <div className="space-y-2">
-        <p className="text-base m-0 line-clamp-4 hover:line-clamp-none">{description}</p>
-        <p className="text-base font-medium m-0">Amounted Granted: {askAmount} ETH</p>
+      <div className="flex flex-col gap-2 px-3">
+        <Address address={builder} />
+        <p className="text-base m-0 mt-2">
+          Amount granted: <span className="font-medium"> {askAmount} ETH</span>
+        </p>
+        <p className="text-base m-0 line-clamp-3 hover:line-clamp-none">{description}</p>
       </div>
     </div>
   );
@@ -21,7 +25,7 @@ export const CompletedGrants = async () => {
 
   return (
     <div className="bg-base-100">
-      <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 gap-4 border border-red-400">
+      <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>
           <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />

From 1ee002a63d9236cbb87ba72c257bf62a497253ea Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 26 Feb 2024 15:30:24 +0530
Subject: [PATCH 4/6] decrease gap and increase cards width

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index c5fb2a5..e8a3afb 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -5,7 +5,7 @@ import { GrantData } from "~~/services/database/schema";
 
 const CompletedGrantCard = ({ title, description, askAmount, builder }: GrantData) => {
   return (
-    <div className="w-72 md:w-[295px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
+    <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">
         <div className="badge bg-base-200 absolute top-4 right-4 rounded-2xl py-3 px-3">Learn more</div>
         <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
@@ -30,7 +30,7 @@ export const CompletedGrants = async () => {
           <h2 className="text-4xl lg:text-6xl text-center lg:text-left font-ppEditorial">Completed grants</h2>
           <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
         </div>
-        <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-8">
+        <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6">
           {completedGrants.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}

From 483d3f2dcc21409433ba99bbf67c52314fc42540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Mon, 26 Feb 2024 12:15:57 +0100
Subject: [PATCH 5/6] Card tweaks

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index e8a3afb..fd8c74e 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -13,9 +13,9 @@ const CompletedGrantCard = ({ title, description, askAmount, builder }: GrantDat
       <div className="flex flex-col gap-2 px-3">
         <Address address={builder} />
         <p className="text-base m-0 mt-2">
-          Amount granted: <span className="font-medium"> {askAmount} ETH</span>
+          <span className="font-medium">{askAmount} ETH</span>
         </p>
-        <p className="text-base m-0 line-clamp-3 hover:line-clamp-none">{description}</p>
+        <p className="text-base m-0 line-clamp-3">{description}</p>
       </div>
     </div>
   );

From 996af24d2b3563edfe8e36829717874a453cfe37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Mon, 26 Feb 2024 12:19:36 +0100
Subject: [PATCH 6/6] Add link to card

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index fd8c74e..0c39cdc 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -3,11 +3,18 @@ import { Address } from "~~/components/scaffold-eth";
 import { getAllCompletedGrants } from "~~/services/database/grants";
 import { GrantData } from "~~/services/database/schema";
 
-const CompletedGrantCard = ({ title, description, askAmount, builder }: GrantData) => {
+const CompletedGrantCard = ({ title, description, askAmount, builder, link }: 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">
-        <div className="badge bg-base-200 absolute top-4 right-4 rounded-2xl py-3 px-3">Learn more</div>
+        <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>
         <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
       </div>
       <div className="flex flex-col gap-2 px-3">