From fa297b1ef39340895b5ead1b08ef9f33a62fe794 Mon Sep 17 00:00:00 2001
From: Jesse Egbosionu <j3bsie@gmail.com>
Date: Tue, 9 Dec 2025 07:32:37 +0100
Subject: [PATCH] chore: fixes card ui background

---
 components/RateCard.js | 33 +++++++++++++++------------
 styles/globals.scss    | 52 ++++++++++++++++++++++++++++++------------
 2 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/components/RateCard.js b/components/RateCard.js
index 45690c4..93ef725 100644
--- a/components/RateCard.js
+++ b/components/RateCard.js
@@ -7,24 +7,27 @@ export default function RateCard({ provider, rate, href, isBest, index, formatCu
       className={`rate-card ${isBest ? 'best' : ''}`}
       style={{ animationDelay: `${index * 0.1}s` }}
     >
-      <div className="rate-card-header">
-        <div className="provider-info">
-          {logo && (
-            <img
-              src={logo}
-              alt={`${provider} logo`}
-              className="provider-logo"
-            />
-          )}
-          <h3 className="provider-name">{provider}</h3>
+      {logo && (
+        <div className="provider-logo-background">
+          <img
+            src={logo}
+            alt={`${provider} logo`}
+            className="provider-logo-faded"
+          />
         </div>
-        {isBest && <span className="best-badge">Best Rate</span>}
-      </div>
+      )}
 
-      <div className="rate-value">{formatCurrency(rate)}</div>
+      <div className="rate-card-content">
+        <div className="rate-card-header">
+          <h3 className="provider-name">{provider}</h3>
+          {isBest && <span className="best-badge">Best Rate</span>}
+        </div>
 
-      <div className="rate-card-footer">
-        <span className="visit-link">Visit provider →</span>
+        <div className="rate-value">{formatCurrency(rate)}</div>
+
+        <div className="rate-card-footer">
+          <span className="visit-link">Visit provider →</span>
+        </div>
       </div>
     </a>
   );
diff --git a/styles/globals.scss b/styles/globals.scss
index 7b7f3e3..3a306b0 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -509,6 +509,7 @@ strong {
 }
 
 .rate-card {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
@@ -520,6 +521,7 @@ strong {
   cursor: pointer;
   animation: fadeInUp 0.6s ease forwards;
   opacity: 0;
+  overflow: hidden;
 
   &:hover {
     background: var(--color-accent);
@@ -530,14 +532,16 @@ strong {
       color: var(--color-primary);
       transform: translateX(4px);
     }
+
+    .provider-logo-faded {
+      opacity: 0.15;
+    }
   }
 
   &.best {
     border-width: 2px;
     background: var(--color-accent);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    position: relative;
-    overflow: hidden;
 
     &::before {
       content: '';
@@ -547,6 +551,7 @@ strong {
       right: 0;
       height: 3px;
       background: var(--color-primary);
+      z-index: 1;
     }
 
     &:hover {
@@ -563,6 +568,36 @@ strong {
   }
 }
 
+.provider-logo-background {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.provider-logo-faded {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.12;
+  filter: grayscale(100%);
+  transition: opacity 0.3s ease;
+}
+
+.rate-card-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
 .rate-card-header {
   display: flex;
   justify-content: space-between;
@@ -570,19 +605,6 @@ strong {
   gap: var(--spacing-sm);
 }
 
-.provider-info {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.provider-logo {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-  border-radius: var(--radius-sm);
-}
-
 .provider-name {
   font-size: 1.25rem;
   font-weight: 700;