fix(ui): dynamic footer year & remove noise blur overlay for crisp rendering

- Updated Footer with dynamic client-side year calculation
- Removed background noise SVG filter overlay that caused blurry rendering
- Elevated text contrast (using Slate-300 / Slate-400 and crisp white headers)
- Sharpened glassmorphic background cards and CodeWindow border contrast

Author: elcareem

frontend/src/app/globals.css

@@ -5,36 +5,36 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
-  /* Brand Palette */
-  --ink: #13102B;           /* Darkest background */
-  --indigo: #1E1B4B;        /* Main dark background, cards */
-  --indigo-light: #2D2A6B;  /* Card hover states */
-  --violet: #6C4AB6;        /* Icons, accents, logo ring */
-  --violet-soft: rgba(108, 74, 182, 0.15);
-  --violet-glow: rgba(108, 74, 182, 0.4);
-  --mint: #00E6A8;          /* Highlights, CTAs, logo arrow */
-  --mint-soft: rgba(0, 230, 168, 0.12);
-  --mint-glow: rgba(0, 230, 168, 0.35);
-
-  /* Text */
-  --text: #F0F0F5;
-  --text-secondary: #A5A3B8;
-  --text-muted: #6B6885;
-
-  /* Surfaces */
-  --border: rgba(108, 74, 182, 0.18);
-  --border-light: rgba(108, 74, 182, 0.08);
+  /* Crisp & Vibrant Brand Palette */
+  --ink: #0D0A22;           /* Deep dark background */
+  --indigo: #17143A;        /* Rich dark card background */
+  --indigo-light: #252156;  /* Card hover states */
+  --violet: #7C53D9;        /* Sharp icons, borders, logo ring */
+  --violet-soft: rgba(124, 83, 217, 0.2);
+  --violet-glow: rgba(124, 83, 217, 0.5);
+  --mint: #00E6A8;          /* Vibrant mint CTAs & highlights */
+  --mint-soft: rgba(0, 230, 168, 0.15);
+  --mint-glow: rgba(0, 230, 168, 0.4);
+
+  /* High Contrast Text */
+  --text: #FFFFFF;
+  --text-secondary: #CBD5E1; /* Slate 300 - crisp, sharp readable secondary text */
+  --text-muted: #94A3B8;     /* Slate 400 - clean muted text */
+
+  /* Crisp Borders */
+  --border: rgba(124, 83, 217, 0.3);
+  --border-light: rgba(124, 83, 217, 0.15);
 
   /* Effects */
   --radius: 20px;
   --radius-sm: 14px;
-  --shadow: 0 8px 32px rgba(0,0,0,0.4);
-  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
+  --shadow: 0 8px 32px rgba(0,0,0,0.5);
+  --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
 
-  --color-border: 247 45% 20%;
-  --color-background: 247 45% 12%; /* #13102B Ink */
-  --color-foreground: 0 0% 96%;
-  --color-primary: 260 52% 53%; /* #6C4AB6 Violet */
+  --color-border: 247 45% 25%;
+  --color-background: 247 45% 8%; /* #0D0A22 */
+  --color-foreground: 0 0% 100%;
+  --color-primary: 260 60% 60%;
 }
 
 ::selection {
@@ -44,34 +44,23 @@
 
 html {
   scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
   background-color: var(--ink);
   color: var(--text);
-  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
   overflow-x: hidden;
   position: relative;
 }
 
-/* Subtle noise texture overlay */
-.noise-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  z-index: 99;
-  opacity: 0.025;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-}
-
 /* Scroll Reveal */
 .reveal {
   opacity: 0;
-  transform: translateY(40px);
-  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(30px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .reveal.visible {
@@ -105,8 +94,8 @@ body {
 /* Floating Orbs Animation */
 @keyframes drift {
   0%, 100% { transform: translate(0, 0) scale(1); }
-  33% { transform: translate(40px, -30px) scale(1.1); }
-  66% { transform: translate(-30px, 20px) scale(0.95); }
+  33% { transform: translate(30px, -20px) scale(1.05); }
+  66% { transform: translate(-20px, 15px) scale(0.95); }
 }
 
 .animate-drift {
@@ -119,20 +108,20 @@ body {
 
 /* Badge Pulse Glow */
 @keyframes pulse-glow {
-  0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--mint-glow); }
-  50% { opacity: 0.5; box-shadow: 0 0 4px var(--mint-glow); }
+  0%, 100% { opacity: 1; box-shadow: 0 0 14px var(--mint-glow); }
+  50% { opacity: 0.6; box-shadow: 0 0 4px var(--mint-glow); }
 }
 
 .pulse-dot {
   animation: pulse-glow 2.5s ease-in-out infinite;
 }
 
 @layer components {
-  .badge-created    { @apply bg-gray-800 text-gray-300 border border-gray-700; }
-  .badge-pending    { @apply bg-yellow-900/30 text-yellow-400 border border-yellow-800/40; }
-  .badge-processing { @apply bg-blue-900/30 text-blue-400 border border-blue-800/40; }
-  .badge-completed  { @apply bg-emerald-900/30 text-emerald-400 border border-emerald-800/40; }
-  .badge-failed     { @apply bg-red-900/30 text-red-400 border border-red-800/40; }
-  .badge-cancelled  { @apply bg-gray-800 text-gray-400 border border-gray-700; }
-  .badge-expired    { @apply bg-orange-900/30 text-orange-400 border border-orange-800/40; }
+  .badge-created    { @apply bg-gray-800 text-gray-200 border border-gray-700; }
+  .badge-pending    { @apply bg-yellow-900/40 text-yellow-300 border border-yellow-700/50; }
+  .badge-processing { @apply bg-blue-900/40 text-blue-300 border border-blue-700/50; }
+  .badge-completed  { @apply bg-emerald-900/40 text-emerald-300 border border-emerald-700/50; }
+  .badge-failed     { @apply bg-red-900/40 text-red-300 border border-red-700/50; }
+  .badge-cancelled  { @apply bg-gray-800 text-gray-300 border border-gray-700; }
+  .badge-expired    { @apply bg-orange-900/40 text-orange-300 border border-orange-700/50; }
 }

frontend/src/app/layout.tsx

@@ -26,8 +26,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           rel="stylesheet"
         />
       </head>
-      <body className="bg-ink text-[#F0F0F5] antialiased selection:bg-mint-soft selection:text-mint">
-        <div className="noise-overlay" aria-hidden="true" />
+      <body className="bg-ink text-white antialiased selection:bg-mint-soft selection:text-mint">
         {children}
       </body>
     </html>

frontend/src/components/CodeWindow.tsx

@@ -22,18 +22,18 @@ export default function CodeWindow() {
 
   return (
     <div className="w-full max-w-3xl mx-auto group perspective-1000">
-      <div className="relative rounded-2xl bg-indigo/90 border border-violet/30 p-4 sm:p-6 shadow-card-lg backdrop-blur-xl transform sm:rotate-x-3 group-hover:rotate-x-0 group-hover:border-violet/60 group-hover:shadow-glow-violet transition-all duration-500 ease-out">
+      <div className="relative rounded-2xl bg-[#141033] border border-violet/40 p-4 sm:p-6 shadow-card-lg backdrop-blur-xl transform sm:rotate-x-3 group-hover:rotate-x-0 group-hover:border-violet/70 group-hover:shadow-glow-violet transition-all duration-500 ease-out">
         {/* macOS Dots Header */}
-        <div className="flex items-center justify-between border-b border-violet/10 pb-3 mb-4">
+        <div className="flex items-center justify-between border-b border-violet/20 pb-3 mb-4">
           <div className="flex items-center gap-2">
-            <span className="w-3 h-3 rounded-full bg-rose-500/80 inline-block" />
-            <span className="w-3 h-3 rounded-full bg-amber-500/80 inline-block" />
-            <span className="w-3 h-3 rounded-full bg-emerald-500/80 inline-block" />
-            <span className="ml-3 text-xs text-[#6B6885] font-mono">bash — POST /v1/payments</span>
+            <span className="w-3 h-3 rounded-full bg-rose-500 inline-block" />
+            <span className="w-3 h-3 rounded-full bg-amber-500 inline-block" />
+            <span className="w-3 h-3 rounded-full bg-emerald-500 inline-block" />
+            <span className="ml-3 text-xs text-slate-400 font-mono">bash — POST /v1/payments</span>
           </div>
           <button
             onClick={copyToClipboard}
-            className="text-xs font-mono text-[#A5A3B8] hover:text-mint transition-colors px-2.5 py-1 rounded-md bg-violet-soft border border-violet/20 flex items-center gap-1.5"
+            className="text-xs font-mono text-slate-300 hover:text-mint transition-colors px-2.5 py-1 rounded-md bg-violet-soft border border-violet/30 flex items-center gap-1.5"
           >
             {copied ? (
               <>
@@ -59,20 +59,20 @@ export default function CodeWindow() {
         <pre className="font-mono text-xs sm:text-sm text-left overflow-x-auto leading-relaxed p-2">
           <code>
             <span className="text-mint font-semibold">curl</span>{' '}
-            <span className="text-blue-400">-X POST</span>{' '}
-            <span className="text-[#C9BCF0]">https://api.qiflow.io/v1/payments</span>{' '}\{'\n'}
-            {'  '}<span className="text-blue-400">-H</span>{' '}
-            <span className="text-[#C9BCF0]">&quot;Authorization: Bearer qiflow_sec_9a8f...&quot;</span>{' '}\{'\n'}
-            {'  '}<span className="text-blue-400">-H</span>{' '}
-            <span className="text-[#C9BCF0]">&quot;Content-Type: application/json&quot;</span>{' '}\{'\n'}
-            {'  '}<span className="text-blue-400">-d</span>{' '}
+            <span className="text-blue-400 font-medium">-X POST</span>{' '}
+            <span className="text-[#D4C7FC]">https://api.qiflow.io/v1/payments</span>{' '}\{'\n'}
+            {'  '}<span className="text-blue-400 font-medium">-H</span>{' '}
+            <span className="text-[#D4C7FC]">&quot;Authorization: Bearer qiflow_sec_9a8f...&quot;</span>{' '}\{'\n'}
+            {'  '}<span className="text-blue-400 font-medium">-H</span>{' '}
+            <span className="text-[#D4C7FC]">&quot;Content-Type: application/json&quot;</span>{' '}\{'\n'}
+            {'  '}<span className="text-blue-400 font-medium">-d</span>{' '}
             <span className="text-white">&apos;{'{'}</span>{'\n'}
-            {'    '}<span className="text-blue-400">&quot;amount&quot;</span>:{' '}
-            <span className="text-amber-400">25.50</span>,{'\n'}
-            {'    '}<span className="text-blue-400">&quot;currency&quot;</span>:{' '}
-            <span className="text-[#C9BCF0]">&quot;QI&quot;</span>,{'\n'}
-            {'    '}<span className="text-blue-400">&quot;description&quot;</span>:{' '}
-            <span className="text-[#C9BCF0]">&quot;Order #8492&quot;</span>{'\n'}
+            {'    '}<span className="text-blue-400 font-medium">&quot;amount&quot;</span>:{' '}
+            <span className="text-amber-400 font-medium">25.50</span>,{'\n'}
+            {'    '}<span className="text-blue-400 font-medium">&quot;currency&quot;</span>:{' '}
+            <span className="text-[#D4C7FC]">&quot;QI&quot;</span>,{'\n'}
+            {'    '}<span className="text-blue-400 font-medium">&quot;description&quot;</span>:{' '}
+            <span className="text-[#D4C7FC]">&quot;Order #8492&quot;</span>{'\n'}
             {'  '}<span className="text-white">{'}'}&apos;</span>
           </code>
         </pre>

frontend/src/components/FeatureCard.tsx

@@ -8,15 +8,15 @@ interface FeatureCardProps {
 
 export default function FeatureCard({ icon, title, description }: FeatureCardProps) {
   return (
-    <div className="group relative rounded-2xl bg-gradient-to-b from-indigo/60 to-ink/40 border border-violet/20 p-8 transition-all duration-300 hover:-translate-y-1.5 hover:border-violet/40 hover:shadow-card-lg overflow-hidden flex flex-col items-start text-left">
-      {/* Top Accent Line (Appears on Hover) */}
+    <div className="group relative rounded-2xl bg-gradient-to-b from-indigo/80 to-ink/90 border border-violet/30 p-8 transition-all duration-300 hover:-translate-y-1.5 hover:border-violet/60 hover:shadow-card-lg overflow-hidden flex flex-col items-start text-left">
+      {/* Top Accent Line */}
       <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-mint via-violet to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
 
       {/* Radial Mint Glow Behind on Hover */}
-      <div className="absolute -top-24 -left-24 w-48 h-48 bg-mint/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+      <div className="absolute -top-24 -left-24 w-48 h-48 bg-mint/15 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
 
-      {/* Icon Container (56px square, rounded-2xl, violet-soft bg, mint icon) */}
-      <div className="w-14 h-14 rounded-2xl bg-violet-soft border border-violet/30 flex items-center justify-center text-mint mb-6 group-hover:scale-110 group-hover:border-mint/50 transition-all duration-300 shadow-sm">
+      {/* Icon Container */}
+      <div className="w-14 h-14 rounded-2xl bg-violet-soft border border-violet/40 flex items-center justify-center text-mint mb-6 group-hover:scale-110 group-hover:border-mint/60 transition-all duration-300 shadow-sm">
         {icon}
       </div>
 
@@ -26,7 +26,7 @@ export default function FeatureCard({ icon, title, description }: FeatureCardPro
       </h3>
 
       {/* Description */}
-      <p className="text-[#A5A3B8] font-light text-sm leading-relaxed">
+      <p className="text-slate-300 font-normal text-sm leading-relaxed">
         {description}
       </p>
     </div>

frontend/src/components/Footer.tsx

@@ -1,16 +1,25 @@
+'use client';
+
 import Link from 'next/link';
+import { useState, useEffect } from 'react';
 
 export default function Footer() {
+  const [currentYear, setCurrentYear] = useState<number>(new Date().getFullYear());
+
+  useEffect(() => {
+    setCurrentYear(new Date().getFullYear());
+  }, []);
+
   return (
-    <footer className="relative bg-ink pt-16 pb-12 border-t border-violet/10 overflow-hidden">
+    <footer className="relative bg-ink pt-16 pb-12 border-t border-violet/20 overflow-hidden">
       {/* Top Gradient Accent Line */}
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 max-w-4xl h-[1px] bg-gradient-to-r from-transparent via-violet to-transparent opacity-80" />
 
       <div className="max-w-7xl mx-auto px-6">
         <div className="flex flex-col md:flex-row items-center justify-between gap-8 py-6">
           {/* Logo Left */}
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-full border-2 border-violet flex items-center justify-center shadow-glow-violet bg-indigo/40">
+            <div className="w-8 h-8 rounded-full border-2 border-violet flex items-center justify-center shadow-glow-violet bg-indigo/60">
               <svg className="w-3.5 h-3.5 text-mint" viewBox="0 0 24 24" fill="currentColor">
                 <polygon points="12,4 22,20 2,20" />
               </svg>
@@ -21,7 +30,7 @@ export default function Footer() {
           </div>
 
           {/* Links Center */}
-          <div className="flex flex-wrap items-center justify-center gap-8 text-sm text-[#A5A3B8]">
+          <div className="flex flex-wrap items-center justify-center gap-8 text-sm font-medium text-slate-300">
             <Link href="#features" className="hover:text-mint transition-colors">
               Features
             </Link>
@@ -44,9 +53,9 @@ export default function Footer() {
             </a>
           </div>
 
-          {/* Copyright Right */}
-          <div className="text-xs text-[#6B6885]">
-            © {new Date().getFullYear()} QiFlow Protocol. Built for Quai Network.
+          {/* Copyright Right with Dynamic Year */}
+          <div className="text-xs text-slate-400 font-medium">
+            © <span suppressHydrationWarning>{currentYear}</span> QiFlow Protocol. Built for Quai Network.
           </div>
         </div>
       </div>

frontend/src/sections/Hero.tsx

@@ -4,29 +4,29 @@ import CodeWindow from '../components/CodeWindow';
 export default function Hero() {
   return (
     <section className="relative min-h-[92vh] flex flex-col items-center justify-center text-center px-6 pt-36 pb-20 overflow-hidden">
-      {/* Floating Gradient Orbs Behind */}
-      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-violet/20 rounded-full blur-[140px] pointer-events-none animate-drift" />
-      <div className="absolute top-1/3 left-1/3 w-[500px] h-[500px] bg-mint/15 rounded-full blur-[140px] pointer-events-none animate-drift-reverse" />
+      {/* Background Orbs */}
+      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] bg-violet/25 rounded-full blur-[120px] pointer-events-none animate-drift" />
+      <div className="absolute top-1/3 left-1/3 w-[450px] h-[450px] bg-mint/20 rounded-full blur-[120px] pointer-events-none animate-drift-reverse" />
 
       <div className="relative z-10 max-w-4xl mx-auto space-y-8">
         {/* Badge Pill */}
-        <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-indigo/80 border border-violet/30 shadow-card backdrop-blur-md">
+        <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-indigo/90 border border-violet/40 shadow-card backdrop-blur-md">
           <span className="w-2.5 h-2.5 rounded-full bg-mint pulse-dot" />
-          <span className="text-xs font-semibold text-[#F0F0F5] tracking-wide uppercase">
+          <span className="text-xs font-semibold text-white tracking-wide uppercase">
             Built on Quai Network
           </span>
         </div>
 
         {/* H1 Headline */}
         <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight text-white leading-[1.1]">
           The payment gateway for{' '}
-          <span className="bg-gradient-to-r from-mint via-[#60ffe0] to-[#80ffdb] bg-clip-text text-transparent drop-shadow-sm">
+          <span className="bg-gradient-to-r from-mint via-[#60ffe0] to-[#80ffdb] bg-clip-text text-transparent drop-shadow">
             Qi
           </span>
         </h1>
 
         {/* Subtitle */}
-        <p className="text-lg sm:text-xl text-[#A5A3B8] font-light max-w-2xl mx-auto leading-relaxed">
+        <p className="text-lg sm:text-xl text-slate-300 font-normal max-w-2xl mx-auto leading-relaxed">
           Accept instant Qi payments, generate hosted checkout links, and integrate programmable webhooks on Quai Network.
         </p>
 
@@ -40,7 +40,7 @@ export default function Hero() {
           </Link>
           <a
             href="#how-it-works"
-            className="w-full sm:w-auto bg-indigo/60 border border-violet/30 text-white font-medium text-base px-8 py-4 rounded-xl hover:bg-indigo-light hover:border-violet/60 transition-all backdrop-blur-md"
+            className="w-full sm:w-auto bg-indigo/80 border border-violet/40 text-white font-medium text-base px-8 py-4 rounded-xl hover:bg-indigo-light hover:border-violet/60 transition-all backdrop-blur-md"
           >
             See How It Works
           </a>