From abb80cf91177e7027389a2bdf094387f5d04e86e Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Sun, 28 Apr 2024 17:56:14 +0100
Subject: [PATCH] lil button on bg cards

---
 components/v4/card/ToolBackgroundCard.js | 95 +++++++++++++-----------
 components/v4/card/ToolIconCard.js       |  2 +-
 2 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/components/v4/card/ToolBackgroundCard.js b/components/v4/card/ToolBackgroundCard.js
index 707a3620..74447247 100644
--- a/components/v4/card/ToolBackgroundCard.js
+++ b/components/v4/card/ToolBackgroundCard.js
@@ -12,7 +12,7 @@ const ToolBackgroundCard = ({
   tagNumber,
   height,
 }) => {
-  let {title, slug, coverImage, tags, logo} = post;
+  let { title, slug, coverImage, tags, logo } = post;
   return (
     <div className="h-full">
       <Link href={`/toolbox/${slug}`}>
@@ -22,51 +22,60 @@ const ToolBackgroundCard = ({
           }
         >
           <div className="rounded-xl px-0 block cursor-pointer">
+          <Image
+                    loader={gumletLoader}
+                    priority={false < 2 ? `true` : `false`}
+                    data-priority={false < 2 ? `true` : `false`}
+                    fetchpriority={false < 2 ? "true" : "false"}
+                    data-gmlazy={false < 2 ? `false` : `true`}
+                    //   fill={true}
+                    //   layout="fill"
+                    //   style={{width:'100%'}}
+                    //   width="100%"
+                    //   height="100%"
+                    alt="Brand logo for external website's link"
+                    className="object-cover rounded-xl bg-white group-hover:shadow-sm transition-transform duration-300"
+                    src={coverImage}
+                    fill
+                    // sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  />
             <div
-              className={`${height ? height : imageLarge ? "h-[240px]" : "h-[290px]"} rounded-xl relative flex flex-col justify-end`}
+              className={`${height ? height : imageLarge ? "h-[240px]" : "h-[290px]"} rounded-xl m-2 relative flex flex-col justify-end`}
             >
-              <div className="absolute top-0 left-0 z-10 rounded-xl w-full h-full bg-gradient-to-b from-black/5 to-black/60"></div>
-              <Image
-                loader={gumletLoader}
-                priority={false < 2 ? `true` : `false`}
-                data-priority={false < 2 ? `true` : `false`}
-                fetchpriority={false < 2 ? "true" : "false"}
-                data-gmlazy={false < 2 ? `false` : `true`}
-                //   fill={true}
-                //   layout="fill"
-                //   style={{width:'100%'}}
-                //   width="100%"
-                //   height="100%"
-                alt="Brand logo for external website's link"
-                className="object-cover rounded-xl bg-white group-hover:shadow-sm transition-transform duration-300"
-                src={coverImage}
-                fill
-                // sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-              />
-              <div className={`rounded-xl z-20 p-3 flex m-2 bg-gray-900 bg-opacity-[0.15] backdrop-blur-sm`}>
-                <Image
-                  loader={gumletLoader}
-                  width={48}
-                  height={48}
-                  alt="Brand logo for external website's link"
-                  className="object-cover flex-none flex-shrink-0 shine rounded-xl shadow"
-                  //   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
-                  //   data-src={coverImage}
-                  src={logo}
-                />
-                <div className="overflow-hidden my-auto ml-3 text-white">
-                  <div className={"line-clamp-1 font-medium"}>
-                    {" "}
-                    {title}
-                  </div>
-                  {/* {this.props.prototool !== true && */}
-                  {tags?.length && (
-                    <div className="text-xs mt-0.5 capitalize">
-                      {tags[0].attributes.name}
-                    </div>
-                  )}
+              <div className="flex w-full justify-between p-2 bg-black/40 backdrop-blur-sm rounded-2xl border border-gray-300/20">
+                <div className="flex">
+                  <div className="absolute top-0 left-0 z-10 rounded-xl w-full h-full bg-gradient-to-b from-black/5 to-black/60 shadow"></div>
+                  <div
+                    className={`rounded-xl z-20 flex`}
+                  >
+                    <Image
+                      loader={gumletLoader}
+                      width={48}
+                      height={48}
+                      alt="Brand logo for external website's link"
+                      className="object-cover flex-none flex-shrink-0 shine rounded-xl shadow border border-gray-300/30"
+                      //   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+                      //   data-src={coverImage}
+                      src={logo}
+                    />
+                    <div className="overflow-hidden my-auto ml-3 text-white">
+                      <div className={"line-clamp-1 font-medium"}> {title}</div>
+                      {/* {this.props.prototool !== true && */}
+                      {tags?.length && (
+                        <div className="text-xs mt-0.5 capitalize">
+                          {tags[0].attributes.name}
+                        </div>
+                      )}
 
-                  {/* <div className='w-1/4 relative'> {this._getTag()}</div> */}
+                      {/* <div className='w-1/4 relative'> {this._getTag()}</div> */}
+                    </div>
+              
+                  </div>
+                </div>
+                <div className="flex flex-col z-20 justify-center">
+                  <span className="text-xs font-semibold uppercase bg-gray-100 font-medium py-0.5 px-3 text-blue-600 border border-black border-opacity-5 rounded-full">
+                    Get
+                  </span>
                 </div>
               </div>
             </div>
diff --git a/components/v4/card/ToolIconCard.js b/components/v4/card/ToolIconCard.js
index db18e085..a8202fd3 100644
--- a/components/v4/card/ToolIconCard.js
+++ b/components/v4/card/ToolIconCard.js
@@ -81,7 +81,7 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col justify-center">
+            <div className="flex flex-col z-10 justify-center">
               <span className="text-xs font-semibold uppercase bg-gray-100 font-medium py-0.5 px-3 text-blue-600 border border-black border-opacity-5 rounded-full">
                 Get
               </span>