From ade9e3fdd411052001481a4b699765a06ae77e6f Mon Sep 17 00:00:00 2001
From: Eno Peters <youngpreneurs7@gmail.com>
Date: Sat, 9 Apr 2022 07:40:02 +0100
Subject: [PATCH 1/3] add: node version management

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..7735e58
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+"16.8.0" 

From b074d5d712bc56f4af2edbb553e4bc409be088dd Mon Sep 17 00:00:00 2001
From: Eno Peters <youngpreneurs7@gmail.com>
Date: Sat, 9 Apr 2022 08:02:58 +0100
Subject: [PATCH 2/3] update: add some UI hover effects to the cards

---
 src/App.css                        | 12 ++++++++++++
 src/components/minter/nfts/Card.js |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 74b5e05..ec149e4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,15 @@
     transform: rotate(360deg);
   }
 }
+
+#nft-card:hover{
+  transform: scale(1.05);
+  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
+  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
+}
+
+#buy-button{
+  padding: 5px 15px;
+  font-size: 15px;
+  border-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/components/minter/nfts/Card.js b/src/components/minter/nfts/Card.js
index e7924f2..c1e7ccb 100644
--- a/src/components/minter/nfts/Card.js
+++ b/src/components/minter/nfts/Card.js
@@ -10,7 +10,7 @@ const NftCard = ({ nft, buyNft }) => {
   const { contractOwner, price, image, description, name, index, attributes } = nft;
   return (
     <Col key={index}>
-      <Card className=" h-100">
+      <Card className="h-100" id={"nft-card"}>
         <Card.Header>
           <Stack direction="horizontal" gap={2}>
             <Identicon address={contractOwner} size={28} />
@@ -50,7 +50,7 @@ const NftCard = ({ nft, buyNft }) => {
             </Row>
           </div>
           <div className="d-flex m-2 justify-content-center">
-              <button onClick={buyNft} className="btn btn-primary">Buy</button>
+              <button onClick={buyNft} className="btn btn-primary" id={"buy-button"}>Buy</button>
           </div>
         </Card.Body>
       </Card>

From 085d9f604279e4f4480b43b99dd556adbe9a12c1 Mon Sep 17 00:00:00 2001
From: Eno Peters <youngpreneurs7@gmail.com>
Date: Sat, 9 Apr 2022 08:02:58 +0100
Subject: [PATCH 3/3] update: add some UI hover effects to the cards

---
 src/App.css                        | 12 ++++++++++++
 src/components/minter/nfts/Card.js |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 74b5e05..b0f4224 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,15 @@
     transform: rotate(360deg);
   }
 }
+
+#nft-card:hover{
+  transform: scale(1.05);
+  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
+  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
+}
+
+#buy-button{
+  padding: 7px 20px;
+  font-size: 15px;
+  border-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/components/minter/nfts/Card.js b/src/components/minter/nfts/Card.js
index e7924f2..c1e7ccb 100644
--- a/src/components/minter/nfts/Card.js
+++ b/src/components/minter/nfts/Card.js
@@ -10,7 +10,7 @@ const NftCard = ({ nft, buyNft }) => {
   const { contractOwner, price, image, description, name, index, attributes } = nft;
   return (
     <Col key={index}>
-      <Card className=" h-100">
+      <Card className="h-100" id={"nft-card"}>
         <Card.Header>
           <Stack direction="horizontal" gap={2}>
             <Identicon address={contractOwner} size={28} />
@@ -50,7 +50,7 @@ const NftCard = ({ nft, buyNft }) => {
             </Row>
           </div>
           <div className="d-flex m-2 justify-content-center">
-              <button onClick={buyNft} className="btn btn-primary">Buy</button>
+              <button onClick={buyNft} className="btn btn-primary" id={"buy-button"}>Buy</button>
           </div>
         </Card.Body>
       </Card>