feat: invite course feedback via the pinned GitHub issue

Adds a Feedback link to the learn nav (visible on the landing page and every
task) and an invitation card at the end of the learn home, both pointing to
the pinned feedback issue #31.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RJujXBsBhXBbQ72tS7E7GV

Author: fuzzie360

src/Learn/components/LearnNav.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { useTheme } from '../ThemeContext';
+import { FEEDBACK_URL } from '../feedback';
 
 function capitalize(word) {
   return word.charAt(0).toUpperCase() + word.slice(1);
@@ -39,6 +40,14 @@ function LearnNav() {
         <a href="/api/">API</a>
         <Link to="/examples">Examples</Link>
         <a href="https://github.com/gpujs/gpu.js">GitHub</a>
+        <a
+          className="feedback"
+          href={FEEDBACK_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span aria-hidden="true">💬 </span>Feedback
+        </a>
       </div>
       <button type="button" className="theme-btn" onClick={cycleTheme}>
         Theme: {capitalize(pref)}

src/Learn/feedback.js

@@ -0,0 +1,2 @@
+// The pinned course-feedback issue — linked from LearnNav and the learn home.
+export const FEEDBACK_URL = 'https://github.com/gpujs/gpu.rocks/issues/31';

src/Learn/home/LearnHome.jsx

@@ -4,6 +4,7 @@ import LearnNav from '../components/LearnNav';
 import KernelGrid from '../components/KernelGrid';
 import TaskDots from '../components/TaskDots';
 import { tracks } from '../content/index.js';
+import { FEEDBACK_URL } from '../feedback';
 import { moduleProgress } from '../engine/storage.js';
 import { learnHomeMeta } from '../../routeMeta';
 import { setPageMeta } from '../../pageMeta';
@@ -159,6 +160,24 @@ function LearnHome() {
         ))}
       </section>
 
+      <div className="feedback-card">
+        <div className="txt">
+          <b>Help shape this course</b>
+          <p>
+            Stuck on a task? Found a bug? Want a module that doesn't exist yet? Every task was
+            tested, but real learners find what tests can't.
+          </p>
+        </div>
+        <a
+          className="btn-feedback"
+          href={FEEDBACK_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span aria-hidden="true">💬 </span>Leave feedback on GitHub →
+        </a>
+      </div>
+
       <footer className="pagefoot">
         GPU.js is MIT licensed · learn.gpu.rocks runs entirely in your browser — nothing to
         install, nothing uploaded.

src/Learn/scss/_home.scss

@@ -214,6 +214,68 @@
   }
 
   /* ============ page footer ============ */
+  /* ---- feedback invitation (links to the pinned GitHub issue) ---- */
+  .feedback-card {
+    max-width: 1120px;
+    margin: 0 auto 2.5rem;
+    padding: 1.1rem 1.3rem;
+    border: 1px solid var(--line);
+    border-left: 3px solid var(--pink);
+    border-radius: 10px;
+    background: var(--surface);
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+    flex-wrap: wrap;
+  }
+
+  .feedback-card .txt {
+    flex: 1;
+    min-width: 240px;
+  }
+
+  .feedback-card b {
+    display: block;
+    font-family: 'Montserrat', 'Avenir Next', 'Futura', 'Segoe UI', sans-serif;
+    text-transform: uppercase;
+    font-size: .8rem;
+    letter-spacing: .1em;
+  }
+
+  .feedback-card p {
+    margin: .25rem 0 0;
+    font-size: .85rem;
+    color: var(--muted);
+  }
+
+  .btn-feedback {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    background: transparent;
+    color: var(--blue);
+    border: 1px solid var(--blue);
+    border-radius: 8px;
+    padding: .55rem 1.1rem;
+    font-weight: 700;
+    font-size: .85rem;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .btn-feedback:hover,
+  .btn-feedback:focus-visible {
+    background: var(--blue);
+    color: #fff;
+  }
+
+  @media (max-width: 1160px) {
+    .feedback-card {
+      margin-left: 1.5rem;
+      margin-right: 1.5rem;
+    }
+  }
+
   .pagefoot {
     border-top: 1px solid var(--line);
     padding: 2rem 1.5rem 6rem;

src/Learn/scss/learn.scss

@@ -234,6 +234,10 @@
     padding-bottom: .2rem;
   }
 
+  .nav .links a.feedback {
+    color: var(--blue);
+  }
+
   .theme-btn {
     margin-left: 1rem;
     background: var(--surface-2);