From eada1eba54854769dad8df3fe00ac56a3d84d53d Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 23 Jan 2025 17:52:54 -0800
Subject: [PATCH] Update content on the website hoe page, roadmap, and donate
 page

---
 website/content/_index.md     | 10 ++++++----
 website/content/donate.md     | 19 +++++++++++++------
 website/content/features.md   | 20 ++++++++++++++------
 website/sass/page/donate.scss | 14 +++++++++++++-
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/website/content/_index.md b/website/content/_index.md
index d70ed21b..52cdf51a 100644
--- a/website/content/_index.md
+++ b/website/content/_index.md
@@ -30,7 +30,7 @@ meta_description = "Open source free software. A vector graphics creativity suit
 <!-- ▙ TAGLINE ▟ -->
 <!--                -->
 <!-- ▛ QUICK LINKS ▜ -->
-<section id="quick-links">
+<section id="quick-links" data-quick-links>
 
 <div class="call-to-action-buttons">
 	<a href="https://github.com/GraphiteEditor/Graphite" class="button github-stars">
@@ -70,6 +70,8 @@ meta_description = "Open source free software. A vector graphics creativity suit
 		if (!stars) throw new Error();
 		let quantity = stars.toLocaleString("en-US");
 		element.innerText = quantity;
+		// Force repaint to work around Safari bug <https://bugs.webkit.org/show_bug.cgi?id=286403> (remove this and its data attribute when the bug is fixed and widely deployed)
+		document.querySelector("[data-quick-links]").style.transform = "scale(1)";
 	} catch {
 		element.remove();
 	}
@@ -259,11 +261,11 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
 
 ## Desktop-first and web-ready
 
-Graphite is designed principally as a professional-grade desktop application that is also accessible in-browser for quick, casual usage.
+Where's the download? Windows, Mac, and Linux apps should be available in early 2025.
 
-Where's the download? Windows, Mac, and Linux apps should be available around the start of 2025. Until then, you can <a href="https://support.google.com/chrome/answer/9658361" target="_blank">install it as a PWA</a>.
+Graphite is designed principally as a professional desktop application that is also accessible in a browser for quick, casual usage. It's built for speed with (nearly) no JavaScript. And regardless of platform, your work runs locally and privately on your own hardware. There is no server.
 
-Developing and maintaining a native app on so many platforms is a big task. A fast, sloppy approach wouldn't cut it, but engineering the right tech takes time. That's why first supporting just web, the one platform that stays up-to-date and reaches all devices, was the initial priority.
+Engineering the tech for a native app distributed across three new platforms takes extra time. That's why supporting the web platform, which keeps up-to-date and reaches all devices, has been the initial target. For now, you can <a href="https://support.google.com/chrome/answer/9658361" target="_blank">install the app as a PWA</a> for a desktop-like experience.
 
 Once it's ready to shine, Graphite's code architecture is structured to deliver native performance for your graphically intensive workloads on desktop platforms and very low overhead on the web thanks to WebAssembly and WebGPU, new high-performance browser technologies.
 
diff --git a/website/content/donate.md b/website/content/donate.md
index f671c1a2..6edf89af 100644
--- a/website/content/donate.md
+++ b/website/content/donate.md
@@ -14,11 +14,18 @@ css = ["/page/donate.css", "/component/feature-box.css"]
 
 Graphite is 100% built and funded by the community. Your contributions directly help us level up the scope and speed of the project's development. Resources are put towards infrastructure, legal costs, swag to keep contributors happy and motivated, and outreach like exhibiting at conventions and traveling to conferences to foster industry relationships. Hiring full-time developers is the big next step as support grows.
 
-Select a level of support that suits you from the choices below. Or, you can ensure **100% of your contribution benefits Graphite** and have a choice of **custom** monthly donation amounts by paying through **GitHub Sponsors**.
-
 <p class="call-to-action">
+
+<span>
 <a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Donate: GitHub Sponsors</a>
+<em>Avoids processing fees</em>
+</span>
+
+<span>
 <a href="#supporter-memberships" class="button arrow">Donate: without an account</a>
+<em>Be done in just a few clicks</em>
+</span>
+
 </p>
 
 </div>
@@ -33,7 +40,9 @@ Select a level of support that suits you from the choices below. Or, you can ens
 
 ---
 
-Click a membership level below to pay directly (no account needed). A small fee (2.9% + 30¢ / month) reduces what we receive.
+Click a membership level below to pay directly by card, no account needed.
+
+A small fee of 2.9% + 30¢ reduces what we receive each month. If convenient, consider instead using <a href="https://github.com/sponsors/GraphiteEditor" target="_blank">GitHub Sponsors</a> for **no fees**.
 
 </div>
 
@@ -126,9 +135,7 @@ Click a membership level below to pay directly (no account needed). A small fee
 
 ---
 
-These higher tiers are also available to individuals who want to make a larger impact.
-
-Please [get in touch](/contact) if you'd like a custom arrangement or want to pay by invoice or ACH to help avoid processing fees.
+Also available to individuals wanting to make a larger impact. [Reach out](/contact) to pay by invoice or ACH to avoid fees, or for a custom arrangement.
 
 </div>
 
diff --git a/website/content/features.md b/website/content/features.md
index c0c72b97..a157d536 100644
--- a/website/content/features.md
+++ b/website/content/features.md
@@ -58,7 +58,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
 
 ## Powered by Graphene
 
-**Graphene** is the node graph engine that powers Graphite's compositor and procedural graphics pipeline. It's a visual scripting environment built upon the high-performance Rust programming language. Its runtime is [designed](/blog/distributed-computing-in-the-graphene-runtime/) to distribute rendering across CPU cores, GPUs, and network/cloud machines while optimizing for interactive frame rates.
+**Graphene** is the purpose-built node graph engine that powers Graphite's compositor and procedural graphics pipeline. It's a visual scripting environment built upon the high-performance Rust programming language. Its runtime is [designed](/blog/distributed-computing-in-the-graphene-runtime/) to distribute rendering across CPU cores, GPUs, and network/cloud machines while optimizing for interactive frame rates.
 
 <!-- Rust programmers may find the following technical details to be of interest. Graphene node graphs are programs built out of reusable Rust functions using Graphite as a visual "code" editor. New nodes and data types can be implemented by writing custom Rust code with a built-in text editor. `no_std` code also gets compiled to GPU compute shaders using [`rust-gpu`](https://github.com/EmbarkStudios/rust-gpu). Each node is independently pre-compiled by `rustc` into portable WASM binaries and linked at runtime. Groups of nodes may be compiled into one unit of execution, utilizing Rust's zero-cost abstractions and optimizations to run with less overhead. And whole node graphs can be compiled into standalone executables for use outside Graphite. -->
 
@@ -66,7 +66,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
 <div class="block">
 
 <!-- ## Proudly written in Rust -->
-## Written in Rust
+## Built with Rust
 
 Always on the bleeding edge and built to last— Graphite is written on a robust foundation with Rust, a modern programming language optimized for creating fast, reliable, future-proof software. Even the GPU compute shaders are written in Rust, enabling reuse of CPU code implementations for nodes.
 
@@ -157,6 +157,18 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
 			<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
 			<span>Lightweight desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span>
 		</div>
+		<div class="feature-icon">
+			<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
+			<span>Lambda nodes</span>
+		</div>
+		<div class="feature-icon">
+			<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
+			<span>Node versioning</span>
+		</div>
+		<div class="feature-icon">
+			<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
+			<span>Contextual properties panel</span>
+		</div>
 		<div class="feature-icon">
 			<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
 			<span>Graph data attribute spreadsheets</span>
@@ -281,10 +293,6 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
 		<div class="feature-icon heading">
 			<h3>— 1.0 Release —</h3>
 		</div>
-		<div class="feature-icon">
-			<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
-			<span>Fully native UI rewrite (with <a target="_blank" href="https://github.com/linebender/xilem">Xilem</a>)</span>
-		</div>
 		<div class="feature-icon">
 			<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
 			<span>Procedural styling of paint brushes</span>
diff --git a/website/sass/page/donate.scss b/website/sass/page/donate.scss
index d2529a8d..a7433473 100644
--- a/website/sass/page/donate.scss
+++ b/website/sass/page/donate.scss
@@ -1,8 +1,20 @@
-.call-to-action {
+.call-to-action.call-to-action.call-to-action {
 	display: flex;
 	flex-wrap: wrap;
 	flex-direction: row;
 	gap: calc(var(--font-size-link) * 0.8);
+	margin-top: calc(40 * var(--variable-px));
+
+	span {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		em {
+			text-align: center;
+			margin-top: 0.5em;
+		}
+	}
 
 	.button {
 		margin: 0;