From 5c22b9b8448496c388a15770e7cd8a8fd3c06dee Mon Sep 17 00:00:00 2001
From: Jesse Egbosionu <j3bsie@gmail.com>
Date: Mon, 1 Dec 2025 22:42:59 +0100
Subject: [PATCH] feat: for ui fixes

---
 pages/api/v1/rates.js |   2 +-
 pages/index.js        |   7 +-
 styles/globals.scss   | 184 ++++++++++++++++++++----------------------
 3 files changed, 90 insertions(+), 103 deletions(-)

diff --git a/pages/api/v1/rates.js b/pages/api/v1/rates.js
index 47914ba..0787377 100644
--- a/pages/api/v1/rates.js
+++ b/pages/api/v1/rates.js
@@ -257,7 +257,7 @@ export default async (req, res) => {
             .catch((error) => reject(error));
     }).then((result) => {
         return {
-            rate: Math.floor(result.data.rate % 10000),
+            rate: 0,
             provider: "Lemfi(referal code - OBIN6518)",
             bestRate: false,
             href: "https://lemfi.com",
diff --git a/pages/index.js b/pages/index.js
index c6546e8..7648658 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -23,11 +23,6 @@ export default function Home() {
       <main className="main-content">
         <section className="hero">
           <div className="hero-content">
-            <div className="hero-badge">
-              <span className="status-dot"></span>
-              Available for opportunities
-            </div>
-
             <h1 className="hero-title">
               Hey, I'm <span className="highlight">Jesse Egbosionu</span>
             </h1>
@@ -44,7 +39,7 @@ export default function Home() {
               </p>
 
               <p>
-                Over the past 5 years, I've shipped products across <strong>finance</strong>, <strong>ecommerce</strong>,
+                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.
               </p>
diff --git a/styles/globals.scss b/styles/globals.scss
index 90b2aa3..de0d28b 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -6,16 +6,16 @@
 }
 
 :root {
-  --color-primary: #0f172a;
-  --color-secondary: #475569;
-  --color-accent: #3b82f6;
-  --color-accent-hover: #2563eb;
-  --color-background: #ffffff;
-  --color-surface: #f8fafc;
-  --color-border: #e2e8f0;
-  --color-text: #1e293b;
-  --color-text-muted: #64748b;
-  --color-success: #10b981;
+  --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;
 
   --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-border);
-  background: rgba(255, 255, 255, 0.8);
+  border-bottom: 2px solid var(--color-primary);
+  background: rgba(255, 254, 240, 0.95);
   backdrop-filter: blur(10px);
   position: sticky;
   top: 0;
@@ -102,10 +102,11 @@ strong {
   .logo-text {
     font-size: 1.5rem;
     font-weight: 700;
-    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    background: var(--color-accent);
+    color: var(--color-primary);
+    padding: 0.25rem 0.75rem;
+    border: 2px solid var(--color-primary);
+    border-radius: var(--radius-sm);
   }
 }
 
@@ -129,11 +130,12 @@ strong {
   }
 
   &.cta {
-    color: var(--color-accent);
-    background: rgba(59, 130, 246, 0.1);
+    color: var(--color-primary);
+    background: var(--color-accent);
+    border: 2px solid var(--color-primary);
 
     &:hover {
-      background: rgba(59, 130, 246, 0.15);
+      background: var(--color-accent-hover);
     }
   }
 }
@@ -161,41 +163,19 @@ strong {
   gap: var(--spacing-lg);
 }
 
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-md);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-full);
-  font-size: 0.875rem;
-  color: var(--color-text-muted);
-  width: fit-content;
-  animation: fadeInUp 0.6s ease forwards;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--color-success);
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-}
-
 .hero-title {
   font-size: clamp(2rem, 5vw, 3.5rem);
   font-weight: 800;
   line-height: 1.2;
   color: var(--color-primary);
-  animation: fadeInUp 0.6s ease 0.1s forwards;
+  animation: fadeInUp 0.6s ease forwards;
   opacity: 0;
 
   .highlight {
-    background: linear-gradient(135deg, var(--color-accent), #8b5cf6);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    background: var(--color-accent);
+    color: var(--color-primary);
+    padding: 0 0.5rem;
+    border-bottom: 4px solid var(--color-primary);
   }
 }
 
@@ -203,7 +183,7 @@ strong {
   font-size: clamp(1.125rem, 2vw, 1.5rem);
   color: var(--color-secondary);
   font-weight: 500;
-  animation: fadeInUp 0.6s ease 0.2s forwards;
+  animation: fadeInUp 0.6s ease 0.1s forwards;
   opacity: 0;
 }
 
@@ -216,7 +196,7 @@ strong {
     font-size: 1.0625rem;
     line-height: 1.75;
     color: var(--color-text-muted);
-    animation: fadeInUp 0.6s ease 0.3s forwards;
+    animation: fadeInUp 0.6s ease 0.2s forwards;
     opacity: 0;
   }
 }
@@ -225,7 +205,7 @@ strong {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
-  animation: fadeInUp 0.6s ease 0.4s forwards;
+  animation: fadeInUp 0.6s ease 0.3s forwards;
   opacity: 0;
 }
 
@@ -234,19 +214,18 @@ strong {
   align-items: center;
   gap: var(--spacing-xs);
   padding: var(--spacing-xs) var(--spacing-md);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  border: 2px solid var(--color-primary);
   border-radius: var(--radius-sm);
   font-size: 0.9375rem;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--color-text);
   transition: all 0.2s ease;
 
   &:hover {
-    background: var(--color-background);
-    border-color: var(--color-accent);
+    background: var(--color-accent);
     transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
     .social-icon {
       transform: translateX(4px);
@@ -265,20 +244,22 @@ strong {
   gap: var(--spacing-sm);
   padding: var(--spacing-md) var(--spacing-lg);
   background: var(--color-primary);
-  color: white;
+  color: var(--color-background);
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 700;
   border-radius: var(--radius-md);
   width: fit-content;
   transition: all 0.3s ease;
-  box-shadow: var(--shadow-md);
-  animation: fadeInUp 0.6s ease 0.5s forwards;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: fadeInUp 0.6s ease 0.4s forwards;
   opacity: 0;
+  border: 3px solid var(--color-primary);
 
   &:hover {
     background: var(--color-accent);
+    color: var(--color-primary);
     transform: translateY(-2px);
-    box-shadow: var(--shadow-xl);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 
     .arrow {
       transform: translateX(4px);
@@ -304,10 +285,11 @@ strong {
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
+  background: var(--color-accent);
   border-radius: var(--radius-lg);
   transform: rotate(-6deg);
   z-index: -1;
+  border: 3px solid var(--color-primary);
 }
 
 .hero-image {
@@ -315,9 +297,10 @@ strong {
   max-width: 400px;
   height: auto;
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   object-fit: cover;
   transition: transform 0.3s ease;
+  border: 3px solid var(--color-primary);
 
   &:hover {
     transform: scale(1.02) rotate(2deg);
@@ -326,7 +309,7 @@ strong {
 
 // FOOTER
 .footer {
-  border-top: 1px solid var(--color-border);
+  border-top: 2px solid var(--color-primary);
   padding: var(--spacing-lg) 0;
   margin-top: auto;
 }
@@ -410,7 +393,7 @@ strong {
   gap: var(--spacing-lg);
   text-align: center;
   padding-bottom: var(--spacing-lg);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 2px solid var(--color-primary);
 }
 
 .rates-title-group {
@@ -445,18 +428,18 @@ strong {
   align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-md) var(--spacing-lg);
-  background: var(--color-surface);
-  border: 2px solid var(--color-border);
+  background: var(--color-accent);
+  border: 3px solid var(--color-primary);
   border-radius: var(--radius-lg);
-  font-weight: 600;
+  font-weight: 700;
   font-size: 1.125rem;
 
   .currency-from {
-    color: var(--color-accent);
+    color: var(--color-primary);
   }
 
   .currency-arrow {
-    color: var(--color-text-muted);
+    color: var(--color-primary);
   }
 
   .currency-to {
@@ -478,7 +461,7 @@ strong {
   gap: var(--spacing-md);
   padding: var(--spacing-lg);
   background: var(--color-background);
-  border: 2px solid var(--color-border);
+  border: 3px solid var(--color-primary);
   border-radius: var(--radius-lg);
   transition: all 0.3s ease;
   cursor: pointer;
@@ -486,21 +469,20 @@ strong {
   opacity: 0;
 
   &:hover {
-    border-color: var(--color-accent);
+    background: var(--color-accent);
     transform: translateY(-4px);
-    box-shadow: var(--shadow-xl);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
 
     .visit-link {
-      color: var(--color-accent);
+      color: var(--color-primary);
       transform: translateX(4px);
     }
   }
 
   &.best {
-    border-color: var(--color-success);
-    border-width: 3px;
-    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+    border-width: 4px;
+    background: var(--color-accent);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 
@@ -510,24 +492,20 @@ strong {
       top: 0;
       left: 0;
       right: 0;
-      height: 4px;
-      background: linear-gradient(90deg, var(--color-success), #34d399);
+      height: 6px;
+      background: var(--color-primary);
     }
 
     &:hover {
-      border-color: var(--color-success);
-      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
     }
 
     .provider-name {
-      color: var(--color-success);
+      color: var(--color-primary);
     }
 
     .rate-value {
-      background: linear-gradient(135deg, var(--color-success), #34d399);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+      color: var(--color-primary);
     }
   }
 }
@@ -550,32 +528,31 @@ strong {
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem 0.875rem;
-  background: linear-gradient(135deg, #f59e0b, #f97316);
-  color: white;
+  background: var(--color-primary);
+  color: var(--color-accent);
   font-size: 0.6875rem;
   font-weight: 700;
   border-radius: var(--radius-full);
   text-transform: uppercase;
   letter-spacing: 0.75px;
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   animation: badgePulse 2s ease-in-out infinite;
-  border: 2px solid rgba(255, 255, 255, 0.3);
+  border: 2px solid var(--color-primary);
 
   &::before {
     content: '★';
     font-size: 0.875rem;
     animation: starRotate 3s linear infinite;
-    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
   }
 }
 
 @keyframes badgePulse {
   0%, 100% {
-    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transform: scale(1);
   }
   50% {
-    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     transform: scale(1.05);
   }
 }
@@ -621,6 +598,7 @@ strong {
   gap: var(--spacing-xs);
   padding: var(--spacing-lg);
   background: var(--color-surface);
+  border: 2px solid var(--color-primary);
   border-radius: var(--radius-lg);
   text-align: center;
   animation: fadeInUp 0.6s ease 0.4s forwards;
@@ -721,8 +699,8 @@ strong {
   margin-top: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-lg);
   background: var(--color-primary);
-  color: white;
-  border: none;
+  color: var(--color-accent);
+  border: 3px solid var(--color-primary);
   border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: 600;
@@ -731,8 +709,9 @@ strong {
 
   &:hover {
     background: var(--color-accent);
+    color: var(--color-primary);
     transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
   &:active {
@@ -779,6 +758,19 @@ strong {
     display: none;
   }
 
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-content {
+    order: 2;
+  }
+
+  .hero-image-wrapper {
+    order: 1;
+    margin-bottom: var(--spacing-lg);
+  }
+
   .hero-image {
     max-width: 280px;
   }