feat(website): draft a donation page

apps/website2/src/components/Header.css

@@ -6,13 +6,14 @@ header {
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(20px);    
     z-index: 1000;
+    --gap: 1.25em;
 }
 
 header .content-wrapper {
     display: flex;
     align-items: center;
     justify-items: center;
-    gap: 1em;
+    gap: var(--gap);
 }
 
 header a.banner {
@@ -41,11 +42,12 @@ header nav {
     flex-grow: 1;
     display: flex;
     justify-content: flex-end;
-    gap: 1em;
+    gap: var(--gap);
 }
 
 header nav a {
     text-decoration: none;
+    color: inherit;
 }
 
 header nav a.active {

apps/website2/src/components/Header.tsx

@@ -9,7 +9,8 @@ interface HeaderLink {
 }
 
 const HEADER_LINKS: HeaderLink[] = [
-    { url: "https://docs.triliumnotes.org/", text: "Documentation", external: true }
+    { url: "https://docs.triliumnotes.org/", text: "Documentation", external: true },
+    { url: "/donate", text: "Support us" }
 ]
 
 export function Header() {

apps/website2/src/index.tsx

@@ -6,6 +6,7 @@ import { NotFound } from './pages/_404.jsx';
 import './style.css';
 import Footer from './components/Footer.js';
 import Download from './pages/Download/download.js';
+import Donate from './pages/Donate/Donate.js';
 
 export function App() {
 	return (
@@ -16,6 +17,7 @@ export function App() {
 					<Route path="/" component={Home} />
 					<Route default component={NotFound} />
                     <Route path="/download" component={Download} />
+                    <Route path="/donate" component={Donate} />
 				</Router>
 			</main>
             <Footer />

apps/website2/src/pages/Donate/Donate.css

@@ -0,0 +1,20 @@
+section.donate {
+    background: var(--background-color);
+}
+
+section.donate ul {
+    list-style-type: none;
+    display: flex;
+    gap: 0 1em;
+    padding: 0;
+}
+
+section.donate ul a {
+    display: block;
+    background: var(--brand-1);
+    padding: 0.5em 1em;
+    border-radius: 6px;
+    color: var(--foreground-color);
+    text-decoration: none;
+    text-align: center;
+}

apps/website2/src/pages/Donate/Donate.tsx

@@ -0,0 +1,26 @@
+import Section from "../../components/Section";
+import "./Donate.css";
+
+export default function Donate() {
+    return (
+        <>
+            <Section title="Financial donations" className="donate">
+                <p>A <a href="https://github.com/TriliumNext/Trilium/graphs/commit-activity">significant amount of time</a> is spent maintaining and bringing the best out of Trilium.</p>
+
+                <p>Consider supporting the main developer of the application via:</p>
+
+                <ul>
+                    <li><a href="https://github.com/sponsors/eliandoran" target="_blank">GitHub Sponsors</a></li>
+                    <li><a href="https://paypal.me/eliandoran" target="_blank">PayPal</a></li>
+                    <li><a href="https://buymeacoffee.com/eliandoran" target="_blank">Buy Me A Coffee</a></li>
+                </ul>
+            </Section>
+
+            <Section title="Other ways to contribute">
+                <ul>
+                    <li>Help us translate the application into your native language via <a href="https://hosted.weblate.org/engage/trilium/" target="_blank">Weblate</a>.</li>
+                </ul>
+            </Section>
+        </>
+    )
+}