feat: Added /about page with three content sections (what, how, who) an…

- "frontend/src/pages/About.tsx"
- "frontend/src/App.tsx"
- "frontend/src/components/AppFooter.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T01

frontend/src/App.css

@@ -3354,3 +3354,126 @@ a.app-footer__repo:hover {
   gap: 0.3rem;
   text-decoration: none;
 }
+
+/* ── About page ───────────────────────────────────────────────────────────── */
+
+.about {
+  max-width: 44rem;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 3rem;
+}
+
+.about-hero {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.about-hero__title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0 0 0.5rem;
+}
+
+.about-hero__subtitle {
+  font-size: 1.05rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.about-section {
+  margin-bottom: 2rem;
+}
+
+.about-section__heading {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 0.75rem;
+}
+
+.about-section__text {
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  margin: 0 0 0.75rem;
+}
+
+.about-pipeline {
+  list-style: none;
+  counter-reset: pipeline;
+  padding: 0;
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.about-pipeline__step {
+  counter-increment: pipeline;
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  padding: 0.75rem 1rem;
+  background: var(--color-bg-surface);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+}
+
+.about-pipeline__step::before {
+  content: counter(pipeline);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-accent);
+  background: var(--color-accent-subtle);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.about-pipeline__step strong {
+  color: var(--color-text-primary);
+}
+
+.about-link {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.about-link:hover {
+  color: var(--color-accent-hover);
+}
+
+.about-cta {
+  text-align: center;
+  margin-top: 2.5rem;
+}
+
+.about-cta__btn {
+  display: inline-block;
+}
+
+/* Footer about link */
+
+.app-footer__about {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+a.app-footer__about:hover,
+.app-footer__about:hover {
+  color: var(--color-accent);
+}
+
+@media (max-width: 600px) {
+  .about-hero__title {
+    font-size: 1.5rem;
+  }
+}

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import CreatorDetail from "./pages/CreatorDetail";
 import TopicsBrowse from "./pages/TopicsBrowse";
 import AdminReports from "./pages/AdminReports";
 import AdminPipeline from "./pages/AdminPipeline";
+import About from "./pages/About";
 import AdminDropdown from "./components/AdminDropdown";
 import AppFooter from "./components/AppFooter";
 
@@ -43,6 +44,9 @@ export default function App() {
           <Route path="/admin/reports" element={<AdminReports />} />
           <Route path="/admin/pipeline" element={<AdminPipeline />} />
 
+          {/* Info routes */}
+          <Route path="/about" element={<About />} />
+
           {/* Fallback */}
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>

frontend/src/components/AppFooter.tsx

@@ -1,5 +1,7 @@
 const REPO_URL = "https://github.com/xpltdco/chrysopedia";
 
+import { Link } from "react-router-dom";
+
 export default function AppFooter() {
   const commitUrl =
     __GIT_COMMIT__ !== "dev"
@@ -37,6 +39,10 @@ export default function AppFooter() {
       >
         GitHub
       </a>
+      <span className="app-footer__sep">·</span>
+      <Link to="/about" className="app-footer__about">
+        About
+      </Link>
     </footer>
   );
 }

frontend/src/pages/About.tsx

@@ -0,0 +1,94 @@
+import { Link } from "react-router-dom";
+
+export default function About() {
+  return (
+    <div className="about">
+      <section className="about-hero">
+        <h1 className="about-hero__title">About Chrysopedia</h1>
+        <p className="about-hero__subtitle">
+          A structured knowledge base for music production techniques
+        </p>
+      </section>
+
+      <section className="about-section">
+        <h2 className="about-section__heading">What Is Chrysopedia?</h2>
+        <p className="about-section__text">
+          Chrysopedia turns long-form music production tutorials into a
+          searchable, structured knowledge base. Instead of scrubbing through
+          hours of video looking for the one technique you need, you can search
+          by topic, creator, or keyword and jump straight to the insight.
+        </p>
+        <p className="about-section__text">
+          The name comes from <em>chrysopoeia</em> — the art of transmutation.
+          We transmute raw video content into distilled, accessible knowledge.
+        </p>
+      </section>
+
+      <section className="about-section">
+        <h2 className="about-section__heading">How Content Is Extracted</h2>
+        <p className="about-section__text">
+          Videos are processed through a multi-stage pipeline that transcribes
+          audio, identifies key moments, classifies topics, and generates
+          structured technique pages — all using a combination of speech
+          recognition and large language models.
+        </p>
+        <ol className="about-pipeline">
+          <li className="about-pipeline__step">
+            <strong>Transcription</strong> — Audio is converted to timestamped
+            text
+          </li>
+          <li className="about-pipeline__step">
+            <strong>Key Moment Detection</strong> — The transcript is analyzed
+            to find discrete techniques and insights
+          </li>
+          <li className="about-pipeline__step">
+            <strong>Topic Classification</strong> — Each moment is tagged with
+            categories and sub-topics
+          </li>
+          <li className="about-pipeline__step">
+            <strong>Page Generation</strong> — Structured technique pages are
+            written with context, steps, and creator attribution
+          </li>
+          <li className="about-pipeline__step">
+            <strong>Indexing</strong> — Content is embedded for semantic search
+          </li>
+        </ol>
+        <p className="about-section__text">
+          Every technique page links back to its source video and creator,
+          preserving attribution throughout.
+        </p>
+      </section>
+
+      <section className="about-section">
+        <h2 className="about-section__heading">Who Maintains This</h2>
+        <p className="about-section__text">
+          Chrysopedia is built and maintained by{" "}
+          <a
+            href="https://github.com/xpltdco"
+            className="about-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            xpltd
+          </a>
+          . The project is open source on{" "}
+          <a
+            href="https://github.com/xpltdco/chrysopedia"
+            className="about-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          .
+        </p>
+      </section>
+
+      <div className="about-cta">
+        <Link to="/" className="btn about-cta__btn">
+          Start Exploring
+        </Link>
+      </div>
+    </div>
+  );
+}

frontend/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}