Initial commit

frontend/app/how-it-works/page.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+export default function HowItWorksPage() {
+  return (
+    <main className="card how-page">
+      <header className="how-hero">
+        <p className="eyebrow">How this works</p>
+        <h1>Your request, step by step</h1>
+        <p className="lede">
+          Think of Magent as a status tracker. It checks a few helper apps that do different jobs,
+          then tells you where your request is stuck and what you can safely try next.
+        </p>
+      </header>
+
+      <section className="how-grid">
+        <article className="how-card">
+          <h2>Jellyseerr</h2>
+          <p className="how-title">The request box</p>
+          <p>
+            This is where you ask for a movie or show. It records your request and keeps track of
+            approvals.
+          </p>
+        </article>
+        <article className="how-card">
+          <h2>Sonarr / Radarr</h2>
+          <p className="how-title">The librarian</p>
+          <p>
+            These apps add the item to the library, decide what quality to grab, and look for the
+            files that match your request.
+          </p>
+        </article>
+        <article className="how-card">
+          <h2>Prowlarr</h2>
+          <p className="how-title">The search helper</p>
+          <p>
+            This one checks your torrent sources and reports back what it found, or if nothing is
+            available yet.
+          </p>
+        </article>
+        <article className="how-card">
+          <h2>qBittorrent</h2>
+          <p className="how-title">The downloader</p>
+          <p>
+            If a file is found, this app downloads it. Magent can tell if it is actively
+            downloading, stalled, or finished.
+          </p>
+        </article>
+      </section>
+
+      <section className="how-flow">
+        <h2>The pipeline in plain English</h2>
+        <ol className="how-steps">
+          <li>
+            <strong>You request a title</strong> in Jellyseerr.
+          </li>
+          <li>
+            <strong>Sonarr/Radarr adds it</strong> to the library list and asks Prowlarr to search.
+          </li>
+          <li>
+            <strong>Prowlarr looks for sources</strong> and sends results back.
+          </li>
+          <li>
+            <strong>qBittorrent downloads</strong> the best match.
+          </li>
+          <li>
+            <strong>Sonarr/Radarr imports</strong> it into your library.
+          </li>
+          <li>
+            <strong>Jellyfin shows it</strong> when it is ready to watch.
+          </li>
+        </ol>
+      </section>
+
+      <section className="how-callout">
+        <h2>Why Magent sometimes says "waiting"</h2>
+        <p>
+          If the search helper cannot find a match yet, Magent will say there is nothing to grab.
+          This does not mean something is broken. It usually means the release is not available
+          yet or your search sources do not have it.
+        </p>
+      </section>
+    </main>
+  )
+}