gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(website): split benefits into three different sections

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 18:27:15 +03:00
parent 28952a5253
commit 28214ec9fb
No known key found for this signature in database
2 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/src/pages/Home/index.css
View File

@ -145,6 +145,10 @@ section.accented {
padding: 1em; padding: 1em;
} }
.benefits-container .card h3 {
color: var(--brand-1);
}
section.final-cta { section.final-cta {
text-align: center; text-align: center;
padding: 6em 0; padding: 6em 0;

49
apps/website/src/pages/Home/index.tsx
View File

@ -67,27 +67,34 @@ function HeroSection() {
function BenefitsSection() { function BenefitsSection() {
return ( return (
<Section className="benefits" title="Benefits"> <>
<div className="benefits-container grid-3-cols"> <Section className="benefits" title="Organization">
<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> <div className="benefits-container grid-3-cols">
<Card title="Labels and relationships between notes">Define <em> relations </em> between notes <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>
or add <em> labels </em> for easy categorization. Using promoted attributes, there's an easy way to <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>
enter structured information about the notes which can later be displayed in other formats such as a <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>
table.</Card> </div>
<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> </Section>
<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 <Section className="benefits accented" title="Productivity and safety">
commands of the application.</Card> <div className="benefits-container grid-3-cols">
<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="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="Protected notes">Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.</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="Import/export">Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML.</Card> <Card title="Protected notes">Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.</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 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="Web clipper">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</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="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="Web clipper">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</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> </div>
<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> </Section>
</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>
</div>
</Section>
</>
); );
} }