From d71d1ce8b4128e7e97cb7cdead6c6e4c02b0d763 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 27 Sep 2025 13:18:48 +0300 Subject: [PATCH] feat(website): improve the donation page --- apps/website/src/components/Button.tsx | 1 + apps/website/src/pages/Donate/Donate.css | 7 +- apps/website/src/pages/Donate/Donate.tsx | 84 ++++++++++++++---------- 3 files changed, 55 insertions(+), 37 deletions(-) diff --git a/apps/website/src/components/Button.tsx b/apps/website/src/components/Button.tsx index dc189e793..8556c0900 100644 --- a/apps/website/src/components/Button.tsx +++ b/apps/website/src/components/Button.tsx @@ -17,6 +17,7 @@ export default function Button({ href, iconSvg, openExternally, text, className, className={`button ${className} ${outline ? "outline" : ""}`} href={href} target={openExternally ? "_blank" : undefined} + rel={openExternally ? "noopener noreferrer" : undefined} > {iconSvg && <>{" "}} {text} diff --git a/apps/website/src/pages/Donate/Donate.css b/apps/website/src/pages/Donate/Donate.css index 748cefa97..7928a9082 100644 --- a/apps/website/src/pages/Donate/Donate.css +++ b/apps/website/src/pages/Donate/Donate.css @@ -2,7 +2,7 @@ section.donate { background: var(--background-color); } -section.donate ul { +section.donate ul.donate-buttons { list-style-type: none; display: flex; gap: 1em; @@ -10,6 +10,11 @@ section.donate ul { flex-direction: column; } +section.donate h3 { + font-size: 1.5em; + color: var(--brand-1); +} + @media (min-width: 720px) { section.donate ul { gap: 0 1em; diff --git a/apps/website/src/pages/Donate/Donate.tsx b/apps/website/src/pages/Donate/Donate.tsx index e3af09737..1343ae4d0 100644 --- a/apps/website/src/pages/Donate/Donate.tsx +++ b/apps/website/src/pages/Donate/Donate.tsx @@ -4,51 +4,63 @@ import githubIcon from "../../assets/boxicons/bx-github.svg?raw"; import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw"; import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw"; import Button from "../../components/Button"; +import Card from "../../components/Card"; export default function Donate() { return ( <> -
-

A significant amount of time is spent maintaining and bringing the best out of Trilium.

+
+
+ +

+ Trilium is built and maintained with hundreds of hours of work. + Your support keeps it open-source, improves features, and covers costs such as hosting. +

-

Consider supporting the main developer of the application via:

+

Consider supporting the main developer (eliandoran) of the application via:

-
    -
  • -
  • + -
+
  • +
  • + + -
    -
      -
    • Help us translate the application into your native language via Weblate.
    • -
    + +
      +
    • Translate the application into your native language via Weblate.
    • +
    • Interact with the community on GitHub Discussions or on Matrix.
    • +
    • Report bugs via GitHub issues.
    • +
    • Improve the documentation by informing us on gaps in the documentation or contributing guides, FAQs or tutorials.
    • +
    • Spread the word: Share Trilium Notes with friends, or on blogs and social media.
    • +
    +
    +
    )