|
1 | 1 | --- |
2 | 2 | import { Icon } from "astro-icon/components"; |
3 | 3 |
|
4 | | -const features = [ |
| 4 | +const rows = [ |
5 | 5 | { |
6 | 6 | icon: "lucide:sparkles", |
7 | | - title: "AI assistant: Ask & Agent", |
8 | | - desc: "Chat about your document, or let Agent mode propose edits as an inline diff you accept or reject, per change. Bring your own model: OpenAI, Gemini, Ollama, llama.cpp.", |
9 | | - span: true, |
| 7 | + title: "AI: Ask & Agent", |
| 8 | + desc: "Chat about your document, or let Agent propose edits as an inline diff you accept or reject. Bring your own model.", |
| 9 | + kbd: "Agent", |
10 | 10 | accent: "cyan", |
11 | 11 | }, |
12 | 12 | { |
13 | 13 | icon: "lucide:columns-2", |
14 | 14 | title: "Reader · Code · Split", |
15 | | - desc: "Toggle rendered reading, raw code, and a split view with bidirectional scroll sync.", |
| 15 | + desc: "Rendered reading, raw source, or both side by side with bidirectional scroll sync.", |
| 16 | + kbd: "Ctrl+\\", |
16 | 17 | }, |
17 | 18 | { |
18 | 19 | icon: "lucide:sigma", |
19 | 20 | title: "Math & chemistry", |
20 | | - desc: "KaTeX for inline and block math, plus mhchem for equations, ions, and isotopes, rare in an editor this simple.", |
| 21 | + desc: "KaTeX for inline and block math, plus mhchem for equations, ions, and isotopes.", |
| 22 | + kbd: "$ … $", |
21 | 23 | }, |
22 | 24 | { |
23 | 25 | icon: "lucide:workflow", |
24 | 26 | title: "Mermaid diagrams", |
25 | | - desc: "Flowcharts, sequence, class, state, gantt, ER, and mindmaps render right in the preview.", |
| 27 | + desc: "Flowcharts, sequence, class, state, gantt, ER, and mindmaps render live in the preview.", |
| 28 | + kbd: "```mermaid", |
26 | 29 | }, |
27 | 30 | { |
28 | 31 | icon: "lucide:slash", |
29 | 32 | title: "Slash commands", |
30 | 33 | desc: "Type / for headings, lists, tables, math, callouts, and more. No syntax to memorize.", |
| 34 | + kbd: "/", |
31 | 35 | }, |
32 | 36 | { |
33 | 37 | icon: "lucide:link", |
34 | 38 | title: "Wikilinks & outline", |
35 | 39 | desc: "[[other-file]] links resolve in the folder, with an outline pane that follows your cursor.", |
| 40 | + kbd: "[[ ]]", |
36 | 41 | }, |
37 | 42 | { |
38 | 43 | icon: "lucide:command", |
39 | 44 | title: "Command palette", |
40 | | - desc: "Ctrl+P to jump to any command, file, heading, or toggle. Find & Replace with regex too.", |
| 45 | + desc: "Jump to any command, file, heading, or toggle. Find & Replace with regex too.", |
| 46 | + kbd: "Ctrl+P", |
41 | 47 | }, |
42 | 48 | { |
43 | 49 | icon: "lucide:palette", |
44 | 50 | title: "Themes & typography", |
45 | | - desc: "Four themes (Dark, Light, Paper, GitHub), five fonts, three sizes, focus & typewriter modes.", |
| 51 | + desc: "Four themes, five fonts, three sizes, plus focus and typewriter modes.", |
| 52 | + kbd: "4 themes", |
46 | 53 | }, |
47 | 54 | { |
48 | 55 | icon: "lucide:zap", |
49 | 56 | title: "Native & private", |
50 | | - desc: "Built with Tauri + Rust: small, fast, offline. No accounts, no tracking, files stay local.", |
| 57 | + desc: "Built on Tauri + Rust: small, fast, offline. No accounts, no tracking, files stay local.", |
| 58 | + kbd: "Tauri", |
51 | 59 | }, |
52 | 60 | ]; |
53 | 61 | --- |
54 | 62 |
|
55 | 63 | <section id="features" class="relative py-24 md:py-32"> |
56 | | - <div class="mx-auto max-w-6xl px-5"> |
| 64 | + <div class="mx-auto max-w-5xl px-5"> |
57 | 65 | <div class="max-w-2xl" data-reveal> |
58 | | - <p class="eyebrow">Features</p> |
59 | | - <h2 class="mt-3 text-4xl font-extrabold tracking-tight md:text-5xl"> |
60 | | - Power features, none of the setup |
| 66 | + <p class="mono-label"><span class="tok-mark">##</span> features</p> |
| 67 | + <h2 class="font-serif-display mt-3 text-[clamp(2.2rem,5vw,3.5rem)]"> |
| 68 | + Power features, none of the setup. |
61 | 69 | </h2> |
62 | 70 | <p class="mt-4 text-lg text-fg-muted"> |
63 | 71 | A focused writing surface with the power features pros expect, and a few you won't find |
64 | 72 | elsewhere. |
65 | 73 | </p> |
66 | 74 | </div> |
67 | 75 |
|
68 | | - <div class="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> |
69 | | - {features.map((f) => ( |
70 | | - <article |
71 | | - class={`card ring-glow p-6 ${f.span ? "sm:col-span-2" : ""}`} |
72 | | - data-reveal |
73 | | - > |
74 | | - <span |
75 | | - class={`inline-flex h-11 w-11 items-center justify-center rounded-xl border border-line ${ |
76 | | - f.accent === "cyan" ? "text-cyan" : "text-brand" |
77 | | - }`} |
78 | | - style={`background: color-mix(in srgb, ${ |
79 | | - f.accent === "cyan" ? "var(--color-cyan)" : "var(--color-brand)" |
80 | | - } 12%, transparent)`} |
81 | | - > |
82 | | - <Icon name={f.icon} class="h-5 w-5" /> |
83 | | - </span> |
84 | | - <h3 class="mt-5 text-lg font-semibold tracking-tight">{f.title}</h3> |
85 | | - <p class="mt-2 text-[15px] leading-relaxed text-fg-muted">{f.desc}</p> |
86 | | - </article> |
| 76 | + <div class="matrix mt-12" data-reveal> |
| 77 | + {rows.map((r) => ( |
| 78 | + <div class="matrix-row"> |
| 79 | + <div class="flex items-center gap-3"> |
| 80 | + <span class={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-line ${r.accent === "cyan" ? "text-cyan" : "text-brand"}`}> |
| 81 | + <Icon name={r.icon} class="h-4 w-4" /> |
| 82 | + </span> |
| 83 | + <h3 class="font-medium tracking-tight">{r.title}</h3> |
| 84 | + </div> |
| 85 | + <p class="text-[15px] leading-relaxed text-fg-muted">{r.desc}</p> |
| 86 | + <div class="md:text-right"> |
| 87 | + <span class={`kbd ${r.accent === "cyan" ? "!text-cyan" : ""}`}>{r.kbd}</span> |
| 88 | + </div> |
| 89 | + </div> |
87 | 90 | ))} |
88 | 91 | </div> |
89 | 92 | </div> |
|
0 commit comments