From 148dbad7e8f6a0a35c32a33e32053688a26a12c6 Mon Sep 17 00:00:00 2001
From: Jesse Egbosionu <j3bsie@gmail.com>
Date: Fri, 12 Dec 2025 14:35:52 +0100
Subject: [PATCH] chore: update footer text, enhance rate card layout, and
 refine styles

---
 components/Footer.js   |   2 +-
 components/RateCard.js |  31 ++++++------
 pages/index.js         |  14 +++---
 pages/rates.js         |   2 +-
 styles/globals.scss    | 111 +++++++++++++++++++++--------------------
 5 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/components/Footer.js b/components/Footer.js
index c73f619..62f872c 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -3,7 +3,7 @@ export default function Footer() {
     <footer className="footer">
       <div className="footer-content">
         <p>
-          Built with <span className="heart">❤️</span> and Amara Chukwu
+          Built with <span className="heart">❤️</span>
         </p>
         <p className="footer-year">© {new Date().getFullYear()}</p>
       </div>
diff --git a/components/RateCard.js b/components/RateCard.js
index 93ef725..45690c4 100644
--- a/components/RateCard.js
+++ b/components/RateCard.js
@@ -7,27 +7,24 @@ export default function RateCard({ provider, rate, href, isBest, index, formatCu
       className={`rate-card ${isBest ? 'best' : ''}`}
       style={{ animationDelay: `${index * 0.1}s` }}
     >
-      {logo && (
-        <div className="provider-logo-background">
-          <img
-            src={logo}
-            alt={`${provider} logo`}
-            className="provider-logo-faded"
-          />
-        </div>
-      )}
-
-      <div className="rate-card-content">
-        <div className="rate-card-header">
+      <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>
-          {isBest && <span className="best-badge">Best Rate</span>}
         </div>
+        {isBest && <span className="best-badge">Best Rate</span>}
+      </div>
 
-        <div className="rate-value">{formatCurrency(rate)}</div>
+      <div className="rate-value">{formatCurrency(rate)}</div>
 
-        <div className="rate-card-footer">
-          <span className="visit-link">Visit provider →</span>
-        </div>
+      <div className="rate-card-footer">
+        <span className="visit-link">Visit provider →</span>
       </div>
     </a>
   );
diff --git a/pages/index.js b/pages/index.js
index f0666a1..31d7ff7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,20 +13,20 @@ export default function Home() {
           <div className="hero-content">
 
             <p className="hero-subtitle">
-              A software engineer architecting scalable backend systems in Amsterdam
+              A sofrware engineer building systems that scale in Amsterdam
             </p>
 
             <div className="hero-description">
               <p>
-                I build and scale software backends with a focus on creating impact through
-                teamwork and continuous learning. My passion lies in solving complex problems
-                and delivering solutions that enrich people's lives.
+                I architect and scale backend systems that handle millions of requests.
+                From payment processing to logistics orchestration, I turn complex
+                technical challenges into reliable production infrastructure.
               </p>
 
               <p>
-                Over the past 6 years, I've shipped products across <strong>finance</strong>, <strong>ecommerce</strong>,
-                and <strong>logistics</strong>, working with technologies like Python (Django, FastAPI),
-                JavaScript (React, Node.js), PostgreSQL, Docker, Redis, and Kubernetes.
+                6 years shipping products across <strong>finance</strong>, <strong>ecommerce</strong>, and <strong>logistics</strong>.
+                I work with Python (Django, FastAPI), JavaScript (React, Node.js), PostgreSQL,
+                Docker, Redis, and Kubernetes to build systems that just work.
               </p>
             </div>
 
diff --git a/pages/rates.js b/pages/rates.js
index bf6f0f0..a18254a 100644
--- a/pages/rates.js
+++ b/pages/rates.js
@@ -51,7 +51,7 @@ export default function Rates() {
         <Layout
             title="EUR to NGN Exchange Rates - Jesse Egbosionu"
             description="Compare live EUR to NGN exchange rates across multiple providers."
-            showNavLinks={true}
+            showNavLinks={false}
         >
             <section className="rates-section">
                 <div className="rates-header">
diff --git a/styles/globals.scss b/styles/globals.scss
index 3a306b0..79f0f0e 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -6,16 +6,16 @@
 }
 
 :root {
-  --color-primary: #0a0a0a;
-  --color-secondary: #1a1a1a;
-  --color-accent: #fef3c7;
-  --color-accent-hover: #fde68a;
-  --color-background: #fffef0;
-  --color-surface: #fefce8;
-  --color-border: #fde68a;
-  --color-text: #0a0a0a;
-  --color-text-muted: #525252;
-  --color-success: #fbbf24;
+  --color-primary: #2563eb;
+  --color-secondary: #1e40af;
+  --color-accent: #dbeafe;
+  --color-accent-hover: #bfdbfe;
+  --color-background: #ffffff;
+  --color-surface: #f8fafc;
+  --color-border: #93c5fd;
+  --color-text: #1e293b;
+  --color-text-muted: #64748b;
+  --color-success: #3b82f6;
 
   --spacing-xs: 0.5rem;
   --spacing-sm: 1rem;
@@ -81,8 +81,8 @@ strong {
 // HEADER
 .header {
   padding: var(--spacing-lg) 0;
-  border-bottom: 1px solid var(--color-primary);
-  background: rgba(255, 254, 240, 0.95);
+  border-bottom: 1px solid var(--color-border);
+  background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   position: sticky;
   top: 0;
@@ -509,39 +509,36 @@ strong {
 }
 
 .rate-card {
-  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   padding: var(--spacing-lg);
   background: var(--color-background);
-  border: 1px solid var(--color-primary);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   transition: all 0.3s ease;
   cursor: pointer;
   animation: fadeInUp 0.6s ease forwards;
   opacity: 0;
+  position: relative;
   overflow: hidden;
 
   &:hover {
     background: var(--color-accent);
     transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
 
     .visit-link {
       color: var(--color-primary);
       transform: translateX(4px);
     }
-
-    .provider-logo-faded {
-      opacity: 0.15;
-    }
   }
 
   &.best {
     border-width: 2px;
+    border-color: var(--color-primary);
     background: var(--color-accent);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
 
     &::before {
       content: '';
@@ -551,11 +548,10 @@ strong {
       right: 0;
       height: 3px;
       background: var(--color-primary);
-      z-index: 1;
     }
 
     &:hover {
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
     }
 
     .provider-name {
@@ -568,36 +564,6 @@ 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;
@@ -605,10 +571,23 @@ strong {
   gap: var(--spacing-sm);
 }
 
+.provider-info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.provider-logo {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+}
+
 .provider-name {
   font-size: 1.25rem;
   font-weight: 700;
-  color: var(--color-primary);
+  color: var(--color-text);
 }
 
 .best-badge {
@@ -651,10 +630,34 @@ strong {
 @keyframes starRotate {
   0% {
     transform: rotate(0deg);
+    color: #fbbf24; // bright yellow
+  }
+
+  16.66% {
+    color: #ffffff; // white
+  }
+
+  33.33% {
+    transform: rotate(60deg);
+    color: #ec4899; // hot pink
+  }
+
+  50% {
+    color: #f87171; // light red
+  }
+
+  66.66% {
+    transform: rotate(120deg);
+    color: #fb923c; // bright orange
+  }
+
+  83.33% {
+    color: #f472b6; // pink
   }
 
   100% {
-    transform: rotate(360deg);
+    transform: rotate(180deg);
+    color: #facc15; // yellow
   }
 }