feat: Add consistent button styling with .btn-secondary class for improved UI consistency

Author: Streamweaver

package-lock.json

@@ -162,7 +162,7 @@ export default async function PostPage({ params }: PostPageProps) {
         <div className="mt-12 flex justify-between items-center">
           <Link
             href={urlPaths.home()}
-            className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            className="btn-secondary"
           >
             ← Back to Home
           </Link>

src/app/(content)/[year]/[month]/[day]/[slug]/page.tsx

@@ -46,8 +46,7 @@ function SearchPageContent() {
   };
 
   return (
-    <div className="min-h-screen bg-[var(--surface)]">
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
         {/* Breadcrumb Navigation */}
         <nav className="mb-8 text-sm text-[var(--muted-2)]">
           <Link 
@@ -116,21 +115,20 @@ function SearchPageContent() {
           <div className="mt-12 text-center">
             <Link
               href="/"
-              className="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              className="btn-secondary"
             >
               ← Back to Home
             </Link>
           </div>
         </main>
       </div>
-    </div>
   );
 }
 
 export default function SearchPage() {
   return (
     <Suspense fallback={
-      <div className="min-h-screen bg-[var(--surface)] flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center">
         <div className="text-[var(--muted-2)]">Loading search...</div>
       </div>
     }>

src/app/(content)/search/page.tsx

@@ -46,8 +46,7 @@ export default async function TagPage({ params }: TagPageProps) {
   const { posts, totalPages, currentPage } = tagData;
 
   return (
-    <div className="min-h-screen bg-[var(--surface)]">
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
         {/* Breadcrumb Navigation */}
         <nav className="mb-8 text-sm text-[var(--muted-2)]">
           <Link 
@@ -113,6 +112,5 @@ export default async function TagPage({ params }: TagPageProps) {
           />
         </main>
       </div>
-    </div>
   );
 }

src/app/(content)/tag/[tag]/page.tsx

@@ -26,8 +26,7 @@ export default function TagsPage() {
     .sort((a, b) => b.count - a.count); // Sort by post count descending
 
   return (
-    <div className="min-h-screen bg-[var(--surface)]">
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
         {/* Breadcrumb Navigation */}
         <nav className="mb-8 text-sm text-[var(--muted-2)]">
           <Link 
@@ -84,13 +83,12 @@ export default function TagsPage() {
           <div className="mt-12 text-center">
             <Link
               href={urlPaths.home()}
-              className="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              className="btn-secondary"
             >
               ← Back to Home
             </Link>
           </div>
         </main>
       </div>
-    </div>
   );
 }

src/app/(content)/tags/page.tsx

@@ -83,7 +83,7 @@ export default async function StaticPage({ params }: PageProps) {
       <div className="mt-12 flex justify-between items-center">
         <Link
           href={urlPaths.home()}
-          className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          className="btn-secondary"
         >
           ← Back to Home
         </Link>

src/app/(pages)/pages/[slug]/page.tsx

@@ -310,6 +310,26 @@ body {
   box-shadow: 0 4px 16px rgba(255, 140, 66, 0.3);
 }
 
+/* Consistent button styling across the site */
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background-color: var(--surface-2);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.btn-secondary:hover {
+  background-color: var(--surface-hover);
+  transform: scale(1.05);
+}
+
 /* Accessibility: Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
   :root {