next: ai part 2

2026-07-31 12:43:06 -07:00 · 2026-07-22 16:50:27 +02:00
parent 227a31f64e
commit 52e4db5ea6
18 changed files with 1318 additions and 1281 deletions
@@ -0,0 +1,46 @@
+const SUGGESTIONS = /** @type {const} */ ([
+  ["Explain a metric", "Explain this Bitcoin metric simply: "],
+  ["Explore mining", "Explain Bitcoin mining and proof of work."],
+  ["Understand fees", "Explain how Bitcoin transaction fees work."],
+]);
+
+/** @param {{ onPrompt: (prompt: string) => void }} options */
+export function createAskHero(options) {
+  const hero = document.createElement("div");
+  const eyebrow = document.createElement("p");
+  const title = document.createElement("h1");
+  const description = document.createElement("p");
+  const suggestions = document.createElement("nav");
+
+  hero.dataset.askHero = "";
+  eyebrow.append("Bitcoin · Private · On-device");
+  title.append("Ask about Bitcoin");
+  description.append(
+    "Explore the protocol, network, and on-chain data—privately, in your browser.",
+  );
+  suggestions.setAttribute("aria-label", "Suggested questions");
+
+  for (const [label, prompt] of SUGGESTIONS) {
+    const button = document.createElement("button");
+    const arrow = document.createElement("span");
+
+    button.type = "button";
+    arrow.ariaHidden = "true";
+    arrow.append("↗");
+    button.append(label, arrow);
+    button.addEventListener("click", () => options.onPrompt(prompt));
+    suggestions.append(button);
+  }
+
+  hero.append(eyebrow, title, description, suggestions);
+
+  return {
+    element: hero,
+    /** @param {boolean} enabled */
+    setEnabled(enabled) {
+      for (const button of suggestions.querySelectorAll("button")) {
+        button.disabled = !enabled;
+      }
+    },
+  };
+}
@@ -0,0 +1,88 @@
+main[data-page="ask"] [data-ask-hero] {
+  display: grid;
+  place-content: center;
+  width: min(100%, 44rem);
+  min-height: 100%;
+  margin-inline: auto;
+  padding: 6rem 1.5rem 10rem;
+  text-align: center;
+
+  > p,
+  > h1 {
+    margin: 0;
+  }
+
+  > p:first-child {
+    color: var(--orange);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-strong);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+  }
+
+  > h1 {
+    margin-top: 0.75rem;
+    font-family: var(--font-serif);
+    font-size: clamp(2.75rem, 5vw, 3.75rem);
+    font-weight: var(--font-weight-regular);
+    line-height: 0.95;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  > p:nth-child(3) {
+    max-width: 28rem;
+    margin: 0.75rem auto 0;
+    color: var(--gray);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    text-wrap: balance;
+  }
+
+  > nav {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5rem;
+    width: min(100%, 38rem);
+    margin-top: 1.5rem;
+    margin-inline: auto;
+
+    > button {
+      justify-content: space-between;
+      gap: 0.625rem;
+      width: 100%;
+      min-height: var(--ask-control-size);
+      border-radius: var(--control-radius);
+      padding: 0.5rem 0.75rem;
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+      text-align: left;
+      text-transform: none;
+
+      > span {
+        color: inherit;
+        opacity: 0.55;
+      }
+    }
+  }
+}
+
+@media (max-width: 48rem) {
+  main[data-page="ask"] [data-ask-hero] {
+    padding: 6rem 1rem 8rem;
+  }
+}
+
+@media (max-width: 32rem) {
+  main[data-page="ask"] [data-ask-hero] {
+    > h1 {
+      font-size: 3.25rem;
+    }
+
+    > nav {
+      grid-template-columns: 1fr;
+      width: min(100%, 20rem);
+    }
+  }
+}