feat(website): add icons for each benefit

apps/website/src/assets/boxicons/bx-chevrons-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="m6.29 11.29 1.42 1.42L12 8.41l4.29 4.3 1.42-1.42L12 5.59z"/><path d="m6.29 16.29 1.42 1.42 4.29-4.3 4.29 4.3 1.42-1.42-5.71-5.7z"/></svg>

apps/website/src/assets/boxicons/bx-extension.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M19 6h-4V5c0-1.65-1.35-3-3-3S9 3.35 9 5v1H5c-1.1 0-2 .9-2 2v4c0 .55.45 1 1 1h2c.55 0 1 .45 1 1s-.45 1-1 1H4c-.55 0-1 .45-1 1v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m0 14H5v-3h1c1.65 0 3-1.35 3-3s-1.35-3-3-3H5V8h5c.55 0 1-.45 1-1V5c0-.55.45-1 1-1s1 .45 1 1v2c0 .55.45 1 1 1h5z"/></svg>

apps/website/src/assets/boxicons/bx-folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M20 4h-8.59L10 2.59C9.62 2.21 9.12 2 8.59 2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 14H4V6h16z"/></svg>

apps/website/src/assets/boxicons/bx-globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2M4 12c0-.9.16-1.76.43-2.57L6 11l2 2v2l2 2 1 1v1.93c-3.94-.49-7-3.86-7-7.93m14.33 4.87c-.65-.53-1.64-.87-2.33-.87v-1c0-1.1-.9-2-2-2h-4v-3c1.1 0 2-.9 2-2V7h1c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 1.83-.63 3.52-1.67 4.87"/></svg>

apps/website/src/assets/boxicons/bx-history.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M21.21 8.11c-.25-.59-.56-1.16-.92-1.7-.36-.53-.77-1.03-1.22-1.48s-.95-.86-1.48-1.22c-.54-.36-1.11-.67-1.7-.92-.6-.26-1.24-.45-1.88-.58-1.31-.27-2.72-.27-4.03 0-.64.13-1.27.33-1.88.58-.59.25-1.16.56-1.7.92-.53.36-1.03.77-1.48 1.22-.17.17-.32.35-.48.52L1.99 3v6h6L5.86 6.87c.15-.18.31-.36.48-.52.36-.36.76-.69 1.18-.98.43-.29.89-.54 1.36-.74.48-.2.99-.36 1.5-.47 1.05-.21 2.18-.21 3.23 0 .51.11 1.02.26 1.5.47.47.2.93.45 1.36.74.42.29.82.62 1.18.98s.69.76.98 1.18c.29.43.54.89.74 1.36.2.48.36.99.47 1.5.11.53.16 1.07.16 1.61a7.85 7.85 0 0 1-.63 3.11c-.2.47-.45.93-.74 1.36-.29.42-.62.82-.98 1.18s-.76.69-1.18.98c-.43.29-.89.54-1.36.74-.48.2-.99.36-1.5.47-1.05.21-2.18.21-3.23 0a8 8 0 0 1-1.5-.47c-.47-.2-.93-.45-1.36-.74-.42-.29-.82-.62-1.18-.98s-.69-.76-.98-1.18c-.29-.43-.54-.89-.74-1.36-.2-.48-.36-.99-.47-1.5A8 8 0 0 1 3.99 12h-2c0 .68.07 1.35.2 2.01.13.64.33 1.27.58 1.88.25.59.56 1.16.92 1.7.36.53.77 1.03 1.22 1.48s.95.86 1.48 1.22c.54.36 1.11.67 1.7.92.6.26 1.24.45 1.88.58.66.13 1.33.2 2.01.2s1.36-.07 2.01-.2c.64-.13 1.27-.33 1.88-.58.59-.25 1.16-.56 1.7-.92.53-.36 1.03-.77 1.48-1.22s.86-.95 1.22-1.48c.36-.54.67-1.11.92-1.7.26-.6.45-1.24.58-1.88.13-.66.2-1.34.2-2.01s-.07-1.35-.2-2.01c-.13-.64-.33-1.27-.58-1.88Z"/><path d="M11 7v6h6v-2h-4V7z"/></svg>

apps/website/src/assets/boxicons/bx-paperclip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M17 5H9c-3.86 0-7 3.14-7 7s3.14 7 7 7h9v-2H9c-2.76 0-5-2.24-5-5s2.24-5 5-5h8c.79 0 1.54.31 2.11.89a2.967 2.967 0 0 1 .01 4.23 3 3 0 0 1-2.12.89H9c-.26 0-.5-.11-.7-.3-.19-.2-.3-.44-.3-.7s.11-.51.3-.7.44-.3.7-.3h8v-2H9c-.79 0-1.54.32-2.11.89S6 11.22 6 12.01s.31 1.54.89 2.11c.57.57 1.32.89 2.11.89h8c1.32 0 2.58-.52 3.53-1.47S22 11.34 22 10.01s-.52-2.58-1.47-3.53a4.95 4.95 0 0 0-3.52-1.47Z"/></svg>

apps/website/src/assets/boxicons/bx-refresh-cw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M19.07 4.93a9.9 9.9 0 0 0-3.18-2.14 10.12 10.12 0 0 0-7.79 0c-1.19.5-2.26 1.23-3.18 2.14S3.28 6.92 2.78 8.11A9.95 9.95 0 0 0 1.99 12h2c0-1.08.21-2.13.63-3.11.4-.95.98-1.81 1.72-2.54.73-.74 1.59-1.31 2.54-1.71 1.97-.83 4.26-.83 6.23 0 .95.4 1.81.98 2.54 1.72.17.17.33.34.48.52L16 9.01h6V3l-2.45 2.45c-.15-.18-.31-.36-.48-.52m.3 10.18c-.4.95-.98 1.81-1.72 2.54-.73.74-1.59 1.31-2.54 1.71-1.97.83-4.26.83-6.23 0-.95-.4-1.81-.98-2.54-1.72-.17-.17-.33-.34-.48-.52l2.13-2.13H2v6l2.45-2.45c.15.18.31.36.48.52.92.92 1.99 1.64 3.18 2.14 1.23.52 2.54.79 3.89.79s2.66-.26 3.89-.79c1.19-.5 2.26-1.23 3.18-2.14s1.64-1.99 2.14-3.18c.52-1.23.79-2.54.79-3.89h-2c0 1.08-.21 2.13-.63 3.11Z"/></svg>

apps/website/src/assets/boxicons/bx-search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M18 10c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8c1.85 0 3.54-.63 4.9-1.69l5.1 5.1L21.41 20l-5.1-5.1A8 8 0 0 0 18 10M4 10c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6"/></svg>

apps/website/src/assets/boxicons/bx-send-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="m21.41 11.09-18-8a1 1 0 0 0-1.09.19c-.29.28-.39.7-.25 1.08l2.87 7.65-2.87 7.65c-.14.38-.04.8.25 1.08a1 1 0 0 0 1.1.18l18-8a.998.998 0 0 0 0-1.82ZM4.78 18.12l1.23-3.27V15l6-3-6-3v.15L4.78 5.88 18.54 12z"/></svg>

apps/website/src/assets/boxicons/bx-shield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="m20.42 6.11-7.97-4c-.28-.14-.62-.14-.9 0l-7.97 4c-.31.15-.51.45-.55.79-.01.11-.96 10.76 8.55 15.01a.98.98 0 0 0 .82 0C21.91 17.66 20.97 7 20.95 6.9a.98.98 0 0 0-.55-.79ZM12 19.9C5.26 16.63 4.94 9.64 5 7.64l7-3.51 7 3.51c.04 1.99-.33 9.02-7 12.26"/></svg>

apps/website/src/assets/boxicons/bx-swap-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M17 14H9v2h8v3l5-4-5-4zm-2-4V8H7V5L2 9l5 4v-3z"/></svg>

apps/website/src/assets/boxicons/bx-tag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M20 4H8.51c-.64 0-1.25.31-1.63.84l-4.7 6.58a.99.99 0 0 0 0 1.16l4.7 6.58c.37.52.98.84 1.63.84H20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 14H8.51l-4.29-6 4.29-6H20z"/></svg>

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<HTMLAttributes<HTMLDivElement>, "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 (
         <div className={`card ${className}`} {...restProps}>
             {imageUrl && <img class="image" src={imageUrl} />}
 
             <div className="card-content">
-                <h3>{title}</h3>
+                <h3>
+                    {iconSvg && <><Icon svg={iconSvg} />{" "}</> }
+                    {title}
+                </h3>
 
                 <div className="card-content-inner">
                     {children}

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() {
         <>
             <Section className="benefits" title="Organization">
                 <div className="benefits-container grid-3-cols">
-                    <Card title="Note structure">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.</Card>
-                    <Card title="Labels and relationships between notes">Define <em> relations </em> between notes or add <em> labels </em> 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.</Card>
-                    <Card title="Workspaces and hoisting">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.</Card>
+                    <Card iconSvg={noteStructureIcon} title="Note structure">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.</Card>
+                    <Card iconSvg={attributesIcon} title="Note labels and relationships">Define <em> relations </em> between notes or add <em> labels </em> 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.</Card>
+                    <Card iconSvg={hoistingIcon} title="Workspaces and hoisting">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.</Card>
                 </div>
             </Section>
 
             <Section className="benefits accented" title="Productivity and safety">
                 <div className="benefits-container grid-3-cols">
-                    <Card title="Note revisions">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.</Card>
-                    <Card title="Synchronization">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).</Card>
-                    <Card title="Protected notes">Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.</Card>
-                    <Card title="Quick search and commands">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.</Card>
-                    <Card title="Powerful search">Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth.</Card>
-                    <Card title="Web clipper">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</Card>
+                    <Card iconSvg={revisionsIcon} title="Note revisions">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.</Card>
+                    <Card iconSvg={syncIcon} title="Synchronization">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).</Card>
+                    <Card iconSvg={protectedNotesIcon} title="Protected notes">Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.</Card>
+                    <Card iconSvg={jumpToIcon} title="Quick search and commands">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.</Card>
+                    <Card iconSvg={searchIcon} title="Powerful search">Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth.</Card>
+                    <Card iconSvg={webClipperIcon} title="Web clipper">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</Card>
                 </div>
             </Section>
 
             <Section className="benefits" title="Sharing & extensibility">
                 <div className="benefits-container grid-3-cols">
-                    <Card title="Import/export">Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML.</Card>
-                    <Card title="Share notes on the web">If you have a server instance, you can easily use it to share a subset of your notes with other people.</Card>
-                    <Card title="Advanced scripting and REST API">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.</Card>
+                    <Card iconSvg={importExportIcon} title="Import/export">Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML.</Card>
+                    <Card iconSvg={shareIcon} title="Share notes on the web">If you have a server instance, you can easily use it to share a subset of your notes with other people.</Card>
+                    <Card iconSvg={scriptingAndApiIcon} title="Advanced scripting and REST API">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.</Card>
                 </div>
             </Section>
         </>