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): reorder sections around

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 19:39:39 +03:00
parent 329ecd6894
commit 6194386464
No known key found for this signature in database
2 changed files with 30 additions and 12 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

@ -141,6 +141,10 @@ section.accented {
background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08)); background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08));
} }
section:not(.accented) + section:not(.accented) {
box-shadow: 0 0 6px black inset;
}
.benefits-container .card { .benefits-container .card {
padding: 1em; padding: 1em;
} }

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

@ -29,8 +29,10 @@ export function Home() {
return ( return (
<> <>
<HeroSection /> <HeroSection />
<BenefitsSection /> <OrganizationBenefitsSection />
<ProductivityBenefitsSection />
<NoteTypesSection /> <NoteTypesSection />
<ExtensibilityBenefitsSection />
<CollectionsSection /> <CollectionsSection />
<FaqSection /> <FaqSection />
<FinalCta /> <FinalCta />
@ -78,7 +80,7 @@ function HeroSection() {
) )
} }
function BenefitsSection() { function OrganizationBenefitsSection() {
return ( return (
<> <>
<Section className="benefits" title="Organization"> <Section className="benefits" title="Organization">
@ -88,7 +90,13 @@ function BenefitsSection() {
<Card iconSvg={hoistingIcon} title="Workspaces and hoisting" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Navigation/Note%20Hoisting.html">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={hoistingIcon} title="Workspaces and hoisting" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Navigation/Note%20Hoisting.html">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> </div>
</Section> </Section>
</>
);
}
function ProductivityBenefitsSection() {
return (
<>
<Section className="benefits accented" title="Productivity and safety"> <Section className="benefits accented" title="Productivity and safety">
<div className="benefits-container grid-3-cols"> <div className="benefits-container grid-3-cols">
<Card iconSvg={revisionsIcon} title="Note revisions" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes/Note%20Revisions.html">Notes are periodically saved in the background and revisions can be used for review or to undo accidental changes. Revisions can also be created on-demand.</Card> <Card iconSvg={revisionsIcon} title="Note revisions" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes/Note%20Revisions.html">Notes are periodically saved in the background and revisions can be used for review or to undo accidental changes. Revisions can also be created on-demand.</Card>
@ -99,22 +107,13 @@ function BenefitsSection() {
<Card iconSvg={webClipperIcon} title="Web clipper" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Installation%20%26%20Setup/Web%20Clipper.html">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</Card> <Card iconSvg={webClipperIcon} title="Web clipper" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Installation%20%26%20Setup/Web%20Clipper.html">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</Card>
</div> </div>
</Section> </Section>
<Section className="benefits" title="Sharing & extensibility">
<div className="benefits-container grid-4-cols">
<Card iconSvg={importExportIcon} title="Import/export" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown/index.html">Easily interact with other applications using Markdown, ENEX, OML formats.</Card>
<Card iconSvg={shareIcon} title="Share notes on the web" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Advanced%20Usage/Sharing/Serving%20directly%20the%20content%20o.html">If you have a server, it can be used to share a subset of your notes with other people.</Card>
<Card iconSvg={scriptingIcon} title="Advanced scripting" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Scripting/Custom%20Widgets/index.html">Build your own integrations within Trilium with custom widgets, or server-side logic.</Card>
<Card iconSvg={restApiIcon} title="REST API" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Advanced%20Usage/ETAPI%20%28REST%20API%29/index.html">Interact with Trilium programatically using its builtin REST API.</Card>
</div>
</Section>
</> </>
); );
} }
function NoteTypesSection() { function NoteTypesSection() {
return ( return (
<Section className="note-types accented" title="Multiple ways to represent your information"> <Section className="note-types" title="Multiple ways to represent your information">
<ListWithScreenshot horizontal items={[ <ListWithScreenshot horizontal items={[
{ {
title: "Text notes", title: "Text notes",
@ -165,6 +164,21 @@ function NoteTypesSection() {
); );
} }
function ExtensibilityBenefitsSection() {
return (
<>
<Section className="benefits accented" title="Sharing & extensibility">
<div className="benefits-container grid-4-cols">
<Card iconSvg={importExportIcon} title="Import/export" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown/index.html">Easily interact with other applications using Markdown, ENEX, OML formats.</Card>
<Card iconSvg={shareIcon} title="Share notes on the web" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Advanced%20Usage/Sharing/Serving%20directly%20the%20content%20o.html">If you have a server, it can be used to share a subset of your notes with other people.</Card>
<Card iconSvg={scriptingIcon} title="Advanced scripting" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Scripting/Custom%20Widgets/index.html">Build your own integrations within Trilium with custom widgets, or server-side logic.</Card>
<Card iconSvg={restApiIcon} title="REST API" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Advanced%20Usage/ETAPI%20%28REST%20API%29/index.html">Interact with Trilium programatically using its builtin REST API.</Card>
</div>
</Section>
</>
);
}
function CollectionsSection() { function CollectionsSection() {
return ( return (
<Section className="collections" title="Collections"> <Section className="collections" title="Collections">