style: emphasize 'Back to Home' buttons with new btn-brutal component

Author: Tinnci

src/App.tsx

@@ -154,10 +154,10 @@ const ProjectsView = () => {
     >
       <button
         onClick={() => navigate('/')}
-        className="pill"
-        style={{ marginBottom: '2rem', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+        className="btn-brutal"
+        style={{ marginBottom: '2rem' }}
       >
-        <ArrowLeft size={18} /> BACK HOME
+        <ArrowLeft size={18} /> BACK TO HOME
       </button>
 
       <h1 style={{ fontSize: '3.5rem', fontWeight: 900, marginBottom: '2rem' }}>PROJECTS</h1>
@@ -229,8 +229,7 @@ const ProjectDetailView = () => {
         <div className="brutal-action-bar">
           <button
             onClick={() => navigate('/projects')}
-            className="pill"
-            style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', margin: 0 }}
+            className="btn-brutal"
           >
             <ArrowLeft size={18} /> BACK TO PROJECTS
           </button>
@@ -548,8 +547,7 @@ const PostView = () => {
         <div className="brutal-action-bar">
           <button
             onClick={() => navigate('/')}
-            className="pill"
-            style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem', margin: 0 }}
+            className="btn-brutal primary"
           >
             <ArrowLeft size={18} /> BACK TO HOME
           </button>

src/index.css

@@ -210,6 +210,46 @@ body {
   color: var(--bg);
 }
 
+.btn-brutal {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.8rem 1.5rem;
+  border: 4px solid var(--border);
+  background: var(--card-bg);
+  color: var(--fg);
+  font-family: var(--font-main);
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  box-shadow: 4px 4px 0 var(--shadow);
+  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  position: relative;
+  font-size: 0.9rem;
+}
+
+.btn-brutal:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 var(--shadow);
+  background: var(--accent-1);
+  color: #000;
+}
+
+.btn-brutal:active {
+  transform: translate(2px, 2px);
+  box-shadow: 0px 0px 0 var(--shadow);
+}
+
+.btn-brutal.primary {
+  background: var(--accent-1);
+  color: #000;
+}
+
+.btn-brutal.primary:hover {
+  background: var(--accent-2);
+}
+
 /* Tag cloud */
 .tag-cloud {
   display: flex;