fix: UI improvements to layout, header, footer, and components

- Add CliOverlay to root layout
- Convert header Pay Invoice button to Link pointing to /invoice
- Replace <a> tags with Next.js <Link> in footer for better navigation
- Replace <a> tags with <Link> in Web3JobList component
- Reduce loading bar height from 10px to 2px
- Minor formatting cleanup

Author: actions-user

src/app/layout.tsx

@@ -10,18 +10,17 @@ import Footer from '../components/layout/footer'
 // Import the components we created
 import ErrorBoundary from '@/components/ErrorBoundary'
 import GlobalErrorHandler from '@/components/GlobalErrorHandler'
+import { CliOverlay } from '@/components/cli-overlay'
 
 export const metadata: Metadata = {
   title: 'CodeBuilder, Inc. - Software Engineering Solutions.',
-  description:
-    'Custom software engineering solutions that are elegantly designed with scalability in mind.',
+  description: 'Custom software engineering solutions that are elegantly designed with scalability in mind.',
   openGraph: {
     title: 'CodeBuilder, Inc. - Software Engineering Solutions.',
-    description:
-      'Custom software engineering solutions that are elegantly designed with scalability in mind..',
+    description: 'Custom software engineering solutions that are elegantly designed with scalability in mind..',
     type: 'website',
   },
-}  
+}
 
 export default function RootLayout({
   children,
@@ -59,7 +58,7 @@ export default function RootLayout({
          */}
 
         {/* Other Meta Tags, Links, Etc... */}
-        
+
         {/* Service Worker Registration */}
         <Script id="sw-register" strategy="afterInteractive">
           {`
@@ -81,6 +80,7 @@ export default function RootLayout({
           window-level event listeners for catching uncaught errors.
         */}
         <GlobalErrorHandler />
+        <CliOverlay />
         <div className="flex flex-col min-h-screen">
           <Header />
           <LayoutTransition

src/components/jobs/Web3JobList.tsx

@@ -2,6 +2,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import Link from 'next/link'
 
 interface Job {
   id: string
@@ -57,7 +58,7 @@ const JobList = () => {
       <ul>
         {jobs.map((job) => (
           <li key={job.id}>
-            <a href={job.url} target="_blank" rel="noopener noreferrer">
+            <Link href={job.url} target="_blank" rel="noopener noreferrer">
               <h2>{job.title}</h2>
               <p>Company: {job.company_name}</p>
               <p>Location: {job.location}</p>
@@ -68,15 +69,13 @@ const JobList = () => {
               <p>Remote: {job.remote ? 'Yes' : 'No'}</p>
               <p>Description: {job.description}</p>
               <p>Tags: {job.tags.join(', ')}</p>
-              {job.company_logo && (
-                <img src={job.company_logo} alt={`${job.company_name} logo`} width="100" />
-              )}
+              {job.company_logo && <img src={job.company_logo} alt={`${job.company_name} logo`} width="100" />}
               <p>
-                <a href={job.apply_url} target="_blank" rel="noopener noreferrer">
+                <Link href={job.apply_url} target="_blank" rel="noopener noreferrer">
                   Apply Here
-                </a>
+                </Link>
               </p>
-            </a>
+            </Link>
           </li>
         ))}
       </ul>

src/components/layout/footer.tsx

@@ -34,7 +34,7 @@ const Footer: React.FC = () => {
             </h5>
             <div className="flex mt-6 mb-6">
               {socialLinks.map((social) => (
-                <a
+                <Link
                   key={social.title}
                   href={social.href}
                   target="_blank"
@@ -43,19 +43,19 @@ const Footer: React.FC = () => {
                   className="bg-[#3d4749] shadow-lg font-normal h-10 w-10 flex items-center justify-center rounded-full outline-none mr-2 hover:shadow-xl hover:bg-[#4a5658] transition-all"
                 >
                   <FontAwesomeIcon icon={social.icon} style={{ color: social.color }} />
-                </a>
+                </Link>
               ))}
             </div>
             {/* Contact info */}
             <div className="flex flex-col gap-1 text-sm mt-2 mb-6 lg:mb-0">
-              <a href="mailto:info@codebuilder.us" className="text-[#ccc] hover:text-[#09afdf] transition-colors">
+              <Link href="mailto:info@codebuilder.us" className="text-[#ccc] hover:text-[#09afdf] transition-colors">
                 <FontAwesomeIcon icon={faEnvelope} className="text-[#09afdf] text-[10px] mr-1.5" />
                 info@codebuilder.us
-              </a>
-              <a href="tel:+16125672633" className="text-[#ccc] hover:text-[#09afdf] transition-colors">
+              </Link>
+              <Link href="tel:+16125672633" className="text-[#ccc] hover:text-[#09afdf] transition-colors">
                 <FontAwesomeIcon icon={faPhone} className="text-[#09afdf] text-[10px] mr-1.5" />
                 +1 (612) 567-2633
-              </a>
+              </Link>
               <span className="text-[#ccc]">
                 <FontAwesomeIcon icon={faMapMarkerAlt} className="text-[#09afdf] text-[10px] mr-1.5" />
                 Minneapolis, MN

src/components/layout/header.tsx

@@ -172,7 +172,10 @@ const StickyHeader: React.FC = () => {
             >
               Contact
             </Link>
-            <button className="flex items-center justify-center text-white bg-[rgba(0,0,0,0.2)] border border-[rgba(0,0,0,0.1)] px-4 py-[5px] text-[12px] leading-[1.4666667] rounded-[3px] my-[5px] transition-transform duration-200 ease-in-out hover:bg-[rgba(0,0,0,0.3)] hover:scale-105 focus:outline-none">
+            <Link
+              href="/invoice"
+              className="flex items-center justify-center text-white bg-[rgba(0,0,0,0.2)] border border-[rgba(0,0,0,0.1)] px-4 py-[5px] text-[12px] leading-[1.4666667] rounded-[3px] my-[5px] transition-transform duration-200 ease-in-out hover:bg-[rgba(0,0,0,0.3)] hover:scale-105 focus:outline-none"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="w-4 h-4 mr-2"
@@ -188,7 +191,7 @@ const StickyHeader: React.FC = () => {
                 />
               </svg>
               Pay Invoice
-            </button>
+            </Link>
           </nav>
           {/* Hamburger Menu */}
           <button
@@ -257,12 +260,13 @@ const StickyHeader: React.FC = () => {
           >
             Contact
           </Link>
-          <button
+          <Link
+            href="/invoice"
             className="text-white bg-[rgba(0,0,0,0.2)] border px-4 py-2 rounded hover:bg-[rgba(0,0,0,0.3)]"
             onClick={toggleMobileMenu}
           >
             Pay Invoice
-          </button>
+          </Link>
         </nav>
       </div>
       {/* Loading Progress Bar — blue line under header */}

src/components/layout/loading-bar.tsx

@@ -24,7 +24,7 @@ const LoadingBar = () => {
   return (
     loading && (
       <div
-        className="flex w-full h-[10px] z-50 bg-blue-500 animate__animated animate__fadeIn animate__faster"
+        className="flex w-full h-[2px] z-50 bg-blue-500 animate__animated animate__fadeIn animate__faster"
         style={{ animationDuration: '0.5s' }}
       >
         <div className="h-full bg-blue-600 animate-pulse" style={{ width: '100%' }} />