Add about tab

router.js

···
 export function getRoute() {
   const params = new URLSearchParams(location.search);
   return {
-    view:   params.get('view')   ?? 'trails',
+    view: params.get('view') ?? 'about',
     filter: params.get('filter') ?? null,
-    id:     params.get('id')     ?? null,
+    id: params.get('id') ?? null,
   };
 }
 

script.js

···
 
 customElements.define('atproto-login', AtprotoLogin);
 
+// ── <about-view> ─────────────────────────────────────────────────
+class AboutView extends HTMLElement {
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.innerHTML = /*html*/`
+      <link rel="stylesheet" href="styles.css">
+      <div class="about-container">
+        <div class="about-hero">
+          <div class="about-hero-label">Welcome to</div>
+          <div class="about-hero-title">mapped.at</div>
+          <div class="about-hero-tagline">Trails and activities, built on the open AT protocol</div>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            <p class="caption">Browse community trails, log your activities, and connect with other adventurers — all on a decentralised, open network.</p>
+            <div class="about-ctas">
+              <button class="about-cta-primary">Browse Trails →</button>
+              <button class="about-cta-secondary">View Activity</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    shadow.querySelector('.about-cta-primary').addEventListener('click', () => {
+      navigate({ view: 'trails' });
+    });
+    shadow.querySelector('.about-cta-secondary').addEventListener('click', () => {
+      navigate({ view: 'feed' });
+    });
+  }
+}
+
+customElements.define('about-view', AboutView);
+
 // ── <app-root> ────────────────────────────────────────────────────
 // Reads the current route and renders the appropriate page component.
 // Subscribes to route changes and re-renders on each transition.
···
     const tabs = document.createElement('tab-switcher');
     this.appendChild(tabs);
 
-    if (route.view === 'feed') {
+    if (route.view === 'about') {
+      this.appendChild(document.createElement('about-view'));
+    } else if (route.view === 'feed') {
       const feed = document.createElement('activity-feed');
       if (route.filter) feed.setAttribute('data-filter', route.filter);
       this.appendChild(feed);
···
       <link rel="stylesheet" href="styles.css">
       <div class="tabs-container">
         <div role="tablist" class="tabs">
+          <button role="tab" class="tab" data-view="about">About</button>
           <button role="tab" class="tab" data-view="trails">Trails</button>
           <button role="tab" class="tab" data-view="feed">All Activity</button>
         </div>
···
       btn.setAttribute('aria-selected', String(isActive));
       btn.classList.toggle('active', isActive);
     });
+
+    // Hide filter row on about view
+    const filterRow = this.shadowRoot.querySelector('.filter-row');
+    filterRow.style.display = route.view === 'about' ? 'none' : '';
 
     // Rebuild dropdown options for current view
     const select = this.shadowRoot.querySelector('select');

styles.css

···
   color: var(--color-text-primary);
 }
 
+/* ── About view ─────────────────────────────────────────────────── */
+.about-container {
+  max-width: var(--feed-max-width);
+  margin: 0 auto;
+  padding: 16px 16px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.about-hero {
+  background: linear-gradient(135deg, var(--color-accent-green), var(--color-accent-teal));
+  border-radius: var(--radius-card);
+  padding: 24px 20px;
+  color: #fff;
+}
+
+.about-hero-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.75;
+  margin-bottom: 6px;
+}
+
+.about-hero-title {
+  font-size: 28px;
+  font-weight: 800;
+  margin-bottom: 6px;
+  letter-spacing: -0.5px;
+}
+
+.about-hero-tagline {
+  font-size: 13px;
+  opacity: 0.85;
+  line-height: 1.5;
+}
+
+.about-ctas {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.about-cta-primary {
+  background: var(--color-accent-green);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.about-cta-secondary {
+  background: var(--color-bg);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.about-cta-primary:hover {
+  opacity: 0.9;
+}
+
+.about-cta-secondary:hover {
+  background: var(--color-card);
+}
+
 /* ── Card shell ─────────────────────────────────────────────────── */
 .card {
   background: var(--color-card);