From d7aa95ce8e51032c6ac5d398ab4b23970397bf8f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 27 Sep 2025 18:40:00 +0300 Subject: [PATCH] feat(website): add icons for each benefit --- .../src/assets/boxicons/bx-chevrons-up.svg | 1 + .../src/assets/boxicons/bx-extension.svg | 1 + .../website/src/assets/boxicons/bx-folder.svg | 1 + apps/website/src/assets/boxicons/bx-globe.svg | 1 + .../src/assets/boxicons/bx-history.svg | 1 + .../src/assets/boxicons/bx-paperclip.svg | 1 + .../src/assets/boxicons/bx-refresh-cw.svg | 1 + .../website/src/assets/boxicons/bx-search.svg | 1 + .../src/assets/boxicons/bx-send-alt.svg | 1 + .../website/src/assets/boxicons/bx-shield.svg | 1 + .../assets/boxicons/bx-swap-horizontal.svg | 1 + apps/website/src/assets/boxicons/bx-tag.svg | 1 + apps/website/src/components/Card.tsx | 9 +++-- apps/website/src/pages/Home/index.tsx | 36 ++++++++++++------- 14 files changed, 43 insertions(+), 14 deletions(-) create mode 100644 apps/website/src/assets/boxicons/bx-chevrons-up.svg create mode 100644 apps/website/src/assets/boxicons/bx-extension.svg create mode 100644 apps/website/src/assets/boxicons/bx-folder.svg create mode 100644 apps/website/src/assets/boxicons/bx-globe.svg create mode 100644 apps/website/src/assets/boxicons/bx-history.svg create mode 100644 apps/website/src/assets/boxicons/bx-paperclip.svg create mode 100644 apps/website/src/assets/boxicons/bx-refresh-cw.svg create mode 100644 apps/website/src/assets/boxicons/bx-search.svg create mode 100644 apps/website/src/assets/boxicons/bx-send-alt.svg create mode 100644 apps/website/src/assets/boxicons/bx-shield.svg create mode 100644 apps/website/src/assets/boxicons/bx-swap-horizontal.svg create mode 100644 apps/website/src/assets/boxicons/bx-tag.svg diff --git a/apps/website/src/assets/boxicons/bx-chevrons-up.svg b/apps/website/src/assets/boxicons/bx-chevrons-up.svg new file mode 100644 index 000000000..ffb1feeef --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-chevrons-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-extension.svg b/apps/website/src/assets/boxicons/bx-extension.svg new file mode 100644 index 000000000..92fc51472 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-extension.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-folder.svg b/apps/website/src/assets/boxicons/bx-folder.svg new file mode 100644 index 000000000..af88fa32b --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-globe.svg b/apps/website/src/assets/boxicons/bx-globe.svg new file mode 100644 index 000000000..fbd0bb711 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-history.svg b/apps/website/src/assets/boxicons/bx-history.svg new file mode 100644 index 000000000..a87acdea8 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-history.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-paperclip.svg b/apps/website/src/assets/boxicons/bx-paperclip.svg new file mode 100644 index 000000000..7d392cf8c --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-paperclip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-refresh-cw.svg b/apps/website/src/assets/boxicons/bx-refresh-cw.svg new file mode 100644 index 000000000..c25ae9c9d --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-refresh-cw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-search.svg b/apps/website/src/assets/boxicons/bx-search.svg new file mode 100644 index 000000000..5f648745d --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-send-alt.svg b/apps/website/src/assets/boxicons/bx-send-alt.svg new file mode 100644 index 000000000..68ed3e1e2 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-send-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-shield.svg b/apps/website/src/assets/boxicons/bx-shield.svg new file mode 100644 index 000000000..babfd1ec1 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-shield.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-swap-horizontal.svg b/apps/website/src/assets/boxicons/bx-swap-horizontal.svg new file mode 100644 index 000000000..dc45d78e3 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-swap-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-tag.svg b/apps/website/src/assets/boxicons/bx-tag.svg new file mode 100644 index 000000000..6e698bd71 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-tag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/components/Card.tsx b/apps/website/src/components/Card.tsx index 711ce3ee0..9f7ea660d 100644 --- a/apps/website/src/components/Card.tsx +++ b/apps/website/src/components/Card.tsx @@ -1,21 +1,26 @@ import { ComponentChildren, HTMLAttributes } from "preact"; import Button from "./Button"; +import Icon from "./Icon"; interface CardProps extends Omit, "title"> { title: ComponentChildren; imageUrl?: string; + iconSvg?: string; className?: string; moreInfoUrl?: string; children: ComponentChildren; } -export default function Card({ title, children, imageUrl, className, moreInfoUrl, ...restProps }: CardProps) { +export default function Card({ title, children, imageUrl, iconSvg, className, moreInfoUrl, ...restProps }: CardProps) { return (
{imageUrl && }
-

{title}

+

+ {iconSvg && <>{" "} } + {title} +

{children} diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx index 7a1b53372..a00b6d9a8 100644 --- a/apps/website/src/pages/Home/index.tsx +++ b/apps/website/src/pages/Home/index.tsx @@ -7,6 +7,18 @@ import { useColorScheme, usePageTitle } from '../../hooks'; import Button, { Link } from '../../components/Button'; import gitHubIcon from "../../assets/boxicons/bx-github.svg?raw"; import dockerIcon from "../../assets/boxicons/bx-docker.svg?raw"; +import noteStructureIcon from "../../assets/boxicons/bx-folder.svg?raw"; +import attributesIcon from "../../assets/boxicons/bx-tag.svg?raw"; +import hoistingIcon from "../../assets/boxicons/bx-chevrons-up.svg?raw"; +import revisionsIcon from "../../assets/boxicons/bx-history.svg?raw"; +import syncIcon from "../../assets/boxicons/bx-refresh-cw.svg?raw"; +import protectedNotesIcon from "../../assets/boxicons/bx-shield.svg?raw"; +import jumpToIcon from "../../assets/boxicons/bx-send-alt.svg?raw"; +import searchIcon from "../../assets/boxicons/bx-search.svg?raw"; +import webClipperIcon from "../../assets/boxicons/bx-paperclip.svg?raw"; +import importExportIcon from "../../assets/boxicons/bx-swap-horizontal.svg?raw"; +import shareIcon from "../../assets/boxicons/bx-globe.svg?raw"; +import scriptingAndApiIcon from "../../assets/boxicons/bx-extension.svg?raw"; import { getPlatform } from '../../download-helper'; import { useState } from 'preact/hooks'; @@ -70,28 +82,28 @@ function BenefitsSection() { <>
- Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy. - Define relations between notes or add labels for easy categorization. Using promoted attributes, there's an easy way to enter structured information about the notes which can later be displayed in other formats such as a table. - Easily separate your personal and work notes by grouping them under a workspace, which focuses your note tree to only show a specific set of notes. + Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy. + Define relations between notes or add labels for easy categorization. Using promoted attributes, there's an easy way to enter structured information about the notes which can later be displayed in other formats such as a table. + Easily separate your personal and work notes by grouping them under a workspace, which focuses your note tree to only show a specific set of notes.
- Notes are periodically saved in the background and revisions can be used to check the old content of a note or delete accidental changes. Revisions can also be created on-demand. - Use a self-hosted or cloud instance to easily synchronize your notes across multiple devices, and to access it from your mobile phone using a PWA (progressive web application). - Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session. - Jump quickly to notes across the hierarchy by searching for their title, with fuzzy matching to account for typos or slight differences. Or search through all the various commands of the application. - Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth. - Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension. + Notes are periodically saved in the background and revisions can be used to check the old content of a note or delete accidental changes. Revisions can also be created on-demand. + Use a self-hosted or cloud instance to easily synchronize your notes across multiple devices, and to access it from your mobile phone using a PWA (progressive web application). + Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session. + Jump quickly to notes across the hierarchy by searching for their title, with fuzzy matching to account for typos or slight differences. Or search through all the various commands of the application. + Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth. + Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.
- Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML. - If you have a server instance, you can easily use it to share a subset of your notes with other people. - Create your own integrations within Trilium by writing custom widgets, or custom-server side logic. Interact externally with the Trilium database by using the built-in REST API. + Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML. + If you have a server instance, you can easily use it to share a subset of your notes with other people. + Create your own integrations within Trilium by writing custom widgets, or custom-server side logic. Interact externally with the Trilium database by using the built-in REST API.