feat: enhance template visual

src/components/layout/Footer.tsx

@@ -2,7 +2,7 @@ export default function Footer() {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary border-t border-border py-6 transition-theme">
+    <footer className="bg-primary border-t h-64px border-border py-6 transition-theme">
       <div className="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row justify-between items-center gap-3 transition-theme">
         <div className="flex items-center gap-1 font-bold text-accent text-sm transition-theme">
           <span className="bg-logo-light text-logo-dark px-1.5 py-0.5 rounded-l-md transition-theme">

src/components/layout/Navbar.tsx

@@ -77,7 +77,7 @@ export default function Navbar() {
 
   return (
     <>
-      <nav className="fixed top-0 w-full z-50 bg-primary text-primary transition-theme">
+      <nav className="fixed top-0 w-full z-50 h-[var(--header-height)] bg-primary text-primary transition-theme">
         <div className="w-full flex justify-between items-center px-4 sm:px-6 py-4 transition-theme">
           {/* Logo */}
           <Link
@@ -126,7 +126,7 @@ export default function Navbar() {
       <div
         ref={menuRef}
         className={`
-          fixed top-[75px] left-0 z-40
+          fixed top-[var(--header-height)] left-0 z-40
           w-full md:w-64 md:left-auto md:right-6
           origin-top transition-all duration-100
           ${open ? 'opacity-100 scale-y-100' : 'opacity-0 scale-y-0 pointer-events-none'}

src/components/layout/ScrollProgressBar.tsx

@@ -20,14 +20,14 @@ export default function ScrollProgressBar() {
       setScroll(percent);
     };
 
-    handleScroll(); // initial run
+    handleScroll();
 
     window.addEventListener('scroll', handleScroll, { passive: true });
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
   return (
-    <div className="top-0 left-0 w-full h-[3px] z-10">
+    <div className="top-0 left-0 w-full h-[3px] z-10 bg-[var(--muted-color)]">
       <div
         className="h-full transition-[width] duration-100 ease-out"
         style={{

src/components/spinner.tsx

@@ -1,15 +1,13 @@
-'use client'
+'use client';
 
 type SpinnerProps = {
-  text?: string
-}
+  text?: string;
+};
 
 export default function Spinner({ text = '' }: SpinnerProps) {
   return (
     <div className="relative flex items-center justify-center min-h-screen bg-primary text-primary transition-theme">
-      <div className="absolute text-muted text-sm tracking-widest">
-        {text}
-      </div>
+      <div className="absolute text-muted text-sm tracking-widest">{text}</div>
 
       {/* Spinner */}
       <div className="relative h-14 w-14">
@@ -17,5 +15,5 @@ export default function Spinner({ text = '' }: SpinnerProps) {
         <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[var(--accent)] animate-spin transition-theme" />
       </div>
     </div>
-  )
-}
+  );
+}

src/globals.css

@@ -4,7 +4,10 @@
    GLOBAL BASE STYLES
 ========================= */
 
-html,
+html {
+  scroll-padding-top: var(--header-height);
+}
+
 body {
   background: var(--bg-primary);
   color: var(--text-primary);
@@ -17,6 +20,9 @@ body {
 ========================= */
 
 :root {
+  --header-height: 75px;
+  --footer-height: 70px;
+
   --bg-primary: #000000;
 
   --text-primary: #ffffff;
@@ -66,7 +72,7 @@ body {
   color: var(--accent);
 }
 
-.text-color {
+.text-muted {
   color: var(--muted-color);
 }