From fccfb07fc05b34e1cfc2ee4e2625bd3adfdfdf0d Mon Sep 17 00:00:00 2001
From: oiupoyt <oiupoyt.cat@gmail.com>
Date: Mon, 31 Aug 2026 23:09:37 +0530
Subject: [PATCH] ui: emerald accent, better layout, cleaner cards

---
 src/app/globals.css           | 19 +++++++++++----
 src/app/page.tsx              | 15 +++++++-----
 src/components/Footer.tsx     |  4 ++--
 src/components/Header.tsx     | 44 +++++++++++++++++++++--------------
 src/components/ToolCard.tsx   | 11 +++++----
 src/components/ToolLayout.tsx | 17 +++++++++-----
 6 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 41ee452..67d1bcd 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,11 +3,19 @@
 :root {
   --background: #000000;
   --foreground: #e5e5e5;
+  --accent: #10b981;
+  --accent-dim: #065f46;
+  --surface: #0a0a0a;
+  --surface-hover: #111111;
+  --border: #1a1a1a;
+  --border-hover: #2a2a2a;
+  --muted: #525252;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-accent: var(--accent);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
@@ -18,11 +26,11 @@ body {
   font-family: var(--font-sans), Arial, Helvetica, sans-serif;
 }
 
-/* AdSense placeholder styling — sharp theme */
+/* Ad placeholders */
 .ad-container ins.adsbygoogle {
   min-height: 90px;
-  background: #050505;
-  border: 1px solid rgba(255, 255, 255, 0.04);
+  background: var(--surface);
+  border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,10 +40,11 @@ body {
 .ad-container ins.adsbygoogle::after {
   content: "Ad";
   font-size: 0.6rem;
-  color: rgba(255, 255, 255, 0.1);
+  color: var(--muted);
   font-weight: 400;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.15em;
   font-family: monospace;
+  text-transform: uppercase;
 }
 
 .ad-side ins.adsbygoogle {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 176c263..cc904fa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,15 +15,18 @@ export default function Home() {
       </div>
 
       {/* Main content */}
-      <div className="flex-1 min-w-0 max-w-4xl mx-auto px-4 py-6">
+      <div className="flex-1 min-w-0 max-w-4xl mx-auto px-4 py-8">
         <AdSlot slot="homepage-top" format="horizontal" />
 
         {Object.entries(toolsByCategory).map(([category, categoryTools]) => (
-          <section key={category} className="mb-6">
-            <h2 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">
-              {category}
-            </h2>
-            <div className="grid grid-cols-1 gap-px sm:grid-cols-2 lg:grid-cols-3 border border-gray-900">
+          <section key={category} className="mb-8">
+            <div className="flex items-center gap-2 mb-3">
+              <div className="h-px w-4 bg-emerald-900"></div>
+              <h2 className="text-xs font-medium uppercase tracking-widest text-[#525252]">
+                {category}
+              </h2>
+            </div>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
               {categoryTools.map((tool) => (
                 <ToolCard key={tool.slug} tool={tool} />
               ))}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ae70e4d..e2a1b65 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
-    <footer className="mt-auto border-t border-gray-900 px-4 py-4 text-center text-xs text-gray-600 bg-black">
-      © {new Date().getFullYear()} DevToolbox
+    <footer className="mt-auto border-t border-[#1a1a1a] px-4 py-5 text-center text-xs text-[#525252] bg-black">
+      Free, private, browser-based developer tools.
     </footer>
   );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 908853e..53285a3 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -17,35 +17,43 @@ export default function Header() {
     : [];
 
   return (
-    <header className="border-b border-gray-900 bg-black">
-      <div className="mx-auto max-w-5xl px-4 py-2.5 relative">
-        <input
-          type="text"
-          placeholder="Search tools..."
-          value={query}
-          onChange={(e) => {
-            setQuery(e.target.value);
-            setShowResults(true);
-          }}
-          onFocus={() => setShowResults(true)}
-          onBlur={() => setTimeout(() => setShowResults(false), 150)}
-          className="w-full border border-gray-800 bg-black px-3 py-2 text-sm text-gray-200 placeholder-gray-600 outline-none focus:border-gray-600 font-mono"
-        />
+    <header className="border-b border-[#1a1a1a] bg-black">
+      <div className="mx-auto max-w-5xl px-4 py-3 relative">
+        <div className="relative">
+          <svg className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#525252]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="square" strokeLinejoin="miter" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search 30 tools..."
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setShowResults(true);
+            }}
+            onFocus={() => setShowResults(true)}
+            onBlur={() => setTimeout(() => setShowResults(false), 150)}
+            className="w-full border border-[#1a1a1a] bg-[#0a0a0a] pl-10 pr-3 py-2 text-sm text-gray-300 placeholder-[#525252] outline-none focus:border-emerald-900 transition-colors"
+          />
+        </div>
 
         {showResults && filtered.length > 0 && (
-          <div className="absolute left-4 right-4 top-full z-50 mt-0 max-h-64 overflow-y-auto border border-gray-800 border-t-0 bg-black shadow-2xl">
+          <div className="absolute left-4 right-4 top-full z-50 max-h-72 overflow-y-auto border border-[#1a1a1a] border-t-0 bg-[#0a0a0a] shadow-2xl shadow-black/50">
             {filtered.map((tool) => (
               <Link
                 key={tool.slug}
                 href={`/tools/${tool.slug}`}
-                className="block border-b border-gray-900 px-3 py-2 text-sm text-gray-300 hover:bg-gray-950"
+                className="flex items-center gap-3 border-b border-[#111] px-4 py-2.5 text-sm text-gray-400 hover:bg-[#111] hover:text-emerald-400 transition-colors"
                 onClick={() => {
                   setQuery("");
                   setShowResults(false);
                 }}
               >
-                {tool.icon} {tool.name}
-                <span className="ml-2 text-xs text-gray-600">{tool.description}</span>
+                <span className="text-base">{tool.icon}</span>
+                <div>
+                  <span className="text-gray-200">{tool.name}</span>
+                  <span className="ml-2 text-xs text-[#525252]">{tool.description}</span>
+                </div>
               </Link>
             ))}
           </div>
diff --git a/src/components/ToolCard.tsx b/src/components/ToolCard.tsx
index 8cb66a2..f3bdc45 100644
--- a/src/components/ToolCard.tsx
+++ b/src/components/ToolCard.tsx
@@ -5,12 +5,15 @@ export default function ToolCard({ tool }: { tool: Tool }) {
   return (
     <Link
       href={`/tools/${tool.slug}`}
-      className="block border border-gray-900 px-4 py-3 transition-colors hover:border-gray-600 hover:bg-gray-950 bg-black"
+      className="group flex items-start gap-3 border border-[#1a1a1a] bg-[#0a0a0a] px-4 py-4 transition-all hover:bg-[#111] hover:border-[#2a2a2a]"
     >
-      <div className="text-sm font-medium text-gray-200">
-        {tool.icon} {tool.name}
+      <span className="text-lg mt-0.5 grayscale group-hover:grayscale-0 transition-all">{tool.icon}</span>
+      <div>
+        <div className="text-sm font-medium text-gray-300 group-hover:text-emerald-400 transition-colors">
+          {tool.name}
+        </div>
+        <div className="mt-0.5 text-xs text-[#525252] leading-relaxed">{tool.description}</div>
       </div>
-      <div className="mt-0.5 text-xs text-gray-600">{tool.description}</div>
     </Link>
   );
 }
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 9c217cc..bd1fce5 100644
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -9,7 +9,7 @@ interface ToolLayoutProps {
 export default function ToolLayout({ title, description, children }: ToolLayoutProps) {
   return (
     <div className="flex w-full">
-      {/* Left side ad — flush to edge */}
+      {/* Left side ad */}
       <div className="ad-side hidden xl:flex w-[200px] shrink-0 justify-center pt-6 pl-2">
         <div className="sticky top-16">
           <AdSlot slot="left-sidebar" format="vertical" />
@@ -17,18 +17,23 @@ export default function ToolLayout({ title, description, children }: ToolLayoutP
       </div>
 
       {/* Main content */}
-      <div className="flex-1 min-w-0 max-w-4xl mx-auto px-4 py-6">
+      <div className="flex-1 min-w-0 max-w-4xl mx-auto px-4 py-8">
         <AdSlot slot="1234567890" format="horizontal" />
 
-        <h1 className="mb-1 text-lg font-semibold text-white">{title}</h1>
-        <p className="mb-4 text-sm text-gray-500">{description}</p>
+        <div className="flex items-center gap-2 mb-1">
+          <div className="h-px w-4 bg-emerald-900"></div>
+          <h1 className="text-lg font-semibold text-white">{title}</h1>
+        </div>
+        <p className="mb-5 text-sm text-[#525252] ml-6">{description}</p>
 
-        {children}
+        <div className="border border-[#1a1a1a] bg-[#0a0a0a] p-5">
+          {children}
+        </div>
 
         <AdSlot slot="0987654321" format="horizontal" className="mt-6" />
       </div>
 
-      {/* Right side ad — flush to edge */}
+      {/* Right side ad */}
       <div className="ad-side hidden xl:flex w-[200px] shrink-0 justify-center pt-6 pr-2">
         <div className="sticky top-16">
           <AdSlot slot="right-sidebar" format="vertical" />