design(web): replace mobile header nav with a big journal CTA button in desktop note

Author: engmung

web/src/app/globals.css

@@ -2481,39 +2481,16 @@
     }
   }
 
-  /* ───── Mobile-only: Hero nav & desktop note ───── */
-  .mobile-hero-nav {
-    display: none;
-  }
+  /* ───── Mobile-only: Desktop note ───── */
   .mobile-desktop-note {
     display: none;
   }
 
   @media (max-width: 900px) {
-    .mobile-hero-nav {
+    .mobile-desktop-note {
       display: flex;
-      justify-content: flex-end;
+      flex-direction: column;
       align-items: center;
-      padding: 0 0 20px;
-    }
-    .mobile-hero-nav .mobile-journal-link {
-      font-family: var(--mono);
-      font-size: 12px;
-      font-weight: 500;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--ink);
-      text-decoration: none;
-      padding: 8px 14px;
-      border: 1px solid var(--ink);
-      transition: background 0.15s ease, color 0.15s ease;
-    }
-    .mobile-hero-nav .mobile-journal-link:hover {
-      background: var(--ink);
-      color: var(--cream);
-    }
-    .mobile-desktop-note {
-      display: block;
       text-align: center;
       padding: 40px 24px;
       font-family: var(--sans);
@@ -2530,4 +2507,27 @@
       text-underline-offset: 3px;
       font-weight: 500;
     }
+    .mobile-desktop-note .mobile-note-journal-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 24px 13px;
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      background: var(--ink);
+      color: var(--cream);
+      border: 1px solid var(--ink);
+      text-decoration: none;
+      transition: background-color 0.15s ease, color 0.15s ease;
+      width: 100%;
+      max-width: 280px;
+      margin-top: 8px;
+    }
+    .mobile-desktop-note .mobile-note-journal-btn:hover {
+      background: transparent;
+      color: var(--ink);
+    }
   }

web/src/components/sections/Hero.tsx

@@ -27,9 +27,6 @@ export default function Hero() {
 
   return (
     <section className="hero">
-      <div className="mobile-hero-nav">
-        <Link href="/journal" className="mobile-journal-link">Journal</Link>
-      </div>
       <HeroJournalLink />
       <div className="hero-copy">
         <h1>

web/src/components/sections/RightPanel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import Link from 'next/link';
 import Hero from './Hero';
 import Sponsor from './Sponsor';
 import BuildPanel from './BuildPanel';
@@ -142,7 +143,12 @@ export default function RightPanel({ initialTab = 'hero', buildContent, patternC
             <Hero />
             <Sponsor />
             <div className="mobile-desktop-note">
-              For the full experience — build guide, interactive patterns, and 3D preview — visit <a href="https://patternflow.work">patternflow.work</a> on desktop.
+              <p style={{ marginBottom: '16px' }}>
+                For the full experience — build guide, interactive patterns, and 3D preview — visit <a href="https://patternflow.work">patternflow.work</a> on desktop.
+              </p>
+              <Link href="/journal" className="mobile-note-journal-btn">
+                Read Journal
+              </Link>
             </div>
             <Footer />
           </div>