"What is this" section for Catch-up

src/pages/catchup.css

@@ -32,6 +32,57 @@
     max-width: 40em;
     margin-inline: auto;
 
+    details {
+      border-radius: 16px;
+      text-wrap: balance;
+      color: var(--text-insignificant-color);
+      padding: 1em;
+      margin: -1em 0;
+      transition: all 0.3s var(--timing-function);
+      line-height: 1.4;
+
+      &[open] {
+        transform: translateY(-10vh);
+        color: var(--text-color);
+        background-color: var(--bg-color);
+        background-image: radial-gradient(
+            farthest-corner at 25% 0,
+            transparent 80%,
+            var(--bg-faded-color) 95%,
+            var(--bg-color)
+          ),
+          radial-gradient(
+            farthest-corner at 100% 100%,
+            transparent 80%,
+            var(--bg-faded-blur-color)
+          );
+        outline: 1px solid var(--bg-color);
+        box-shadow: 0 16px 32px -16px var(--drop-shadow-color);
+
+        ~ * {
+          opacity: 0;
+          pointer-events: none;
+        }
+
+        img {
+          width: 480px;
+          height: auto;
+          border-radius: 8px;
+          border: 1px solid var(--outline-color);
+        }
+      }
+
+      summary {
+        font-size: 0.9em;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+          color: var(--text-color);
+        }
+      }
+    }
+
     .catchup-info {
       animation: appear 0.3s ease-out;
       display: flex;

src/pages/catchup.jsx

@@ -9,6 +9,8 @@ import { useEffect, useMemo, useReducer, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 import { uid } from 'uid/single';
 
+import catchupUrl from '../assets/features/catch-up.png';
+
 import Avatar from '../components/avatar';
 import Icon from '../components/icon';
 import Link from '../components/link';
@@ -614,6 +616,30 @@ function Catchup() {
               <h1>
                 Catch-up <sup>beta</sup>
               </h1>
+              <details>
+                <summary>What is this?</summary>
+                <p>
+                  Catch-up is a separate timeline for your followings, offering
+                  a high-level view at a glance, with a simple, email-inspired
+                  interface to effortlessly sort and filter through posts.
+                </p>
+                <img
+                  src={catchupUrl}
+                  width="1200"
+                  height="900"
+                  alt="Preview of Catch-up UI"
+                />
+                <p>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.target.closest('details').open = false;
+                    }}
+                  >
+                    Let's catch up
+                  </button>
+                </p>
+              </details>
               <p>Let's catch up on the posts from your followings.</p>
               <p>
                 <b>Show me all posts from…</b>