feat: add mock picture

Author: petersdt

frontend/bun.lockb

@@ -40,13 +40,14 @@ const Dashboard = () => {
 
       <main className="max-w-7xl mx-auto px-4 py-8">
         <h1 className="text-3xl font-bold mb-8">My Carbon Certificates</h1>
-        
+
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {nftsWithLocks.map((nft) => (
             <div key={nft.id} className="bg-neutral-700 rounded-lg p-6 hover:bg-neutral-600 transition-colors">
-              <NFTCard 
-                id={nft.id} 
-                description={nft.description} 
+              <NFTCard
+                id={nft.id}
+                image={nft.image}
+                description={nft.description}
                 status={nft.status}
                 lockAmount={nft.lockDetails?.amount}
                 lockDuration={nft.lockDetails?.duration}

frontend/public/250.png

@@ -1,17 +1,27 @@
+import Image from "next/image";
+
 interface NFTCardProps {
   id: string;
   description: string;
   status: string;
   lockAmount?: number;
   lockDuration?: string;
   lockStatus?: string;
+  image: string;
 }
 
-const NFTCard = ({ id, description, status, lockAmount, lockDuration, lockStatus }: NFTCardProps) => {
+const NFTCard = ({ id, description, status, lockAmount, lockDuration, lockStatus, image }: NFTCardProps) => {
   return (
     <div className="flex flex-col h-full">
       <div className="aspect-square bg-neutral-600 rounded-lg mb-4">
         {/* NFT Image placeholder */}
+        <Image
+          src={image}
+          alt={`Certificate ${id}`}
+          className="w-full h-full object-cover"
+          width={200}
+          height={400}
+        />
       </div>
       <div className="flex flex-col gap-2">
         <h3 className="text-xl font-semibold">Certificate #{id}</h3>

frontend/src/app/dashboard/page.tsx

@@ -6,9 +6,9 @@ const useMockData = () => {
   ];
 
   const getNFTs = () => [
-    { id: "1001", lockId: "1", description: "50 tokens locked for 30 days", status: "Active" },
-    { id: "1002", lockId: "2", description: "100 tokens locked for 60 days", status: "Archived" },
-    { id: "1003", lockId: "3", description: "100 tokens locked for 60 days", status: "Archived" },
+    { id: "1001", lockId: "1", description: "50 tokens locked for 30 days", status: "Active", image: "/250.png" },
+    { id: "1002", lockId: "2", description: "100 tokens locked for 60 days", status: "Archived", image: "/250.png" },
+    { id: "1003", lockId: "3", description: "100 tokens locked for 60 days", status: "Archived", image: "/250.png" },
   ];
 
   return { getLocks, getNFTs };