gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 12:39:04 +01:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

feat(website): add a final call-to-action

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 17:56:23 +03:00
parent d23550d3ef
commit c4354032b5
No known key found for this signature in database
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/src/pages/GetStarted/get-started.tsx
View File

@ -14,7 +14,7 @@ export default function DownloadPage() {
return (
<>
<Section title="Download the desktop application" className="fill">
<Section title="Download the desktop application" className="fill accented">
<div className="architecture-switch">
<span>Architecture:</span>

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

@ -137,10 +137,35 @@ section.hero-section .additional-options a {
}
}
section:nth-of-type(2n+1) {
section.accented {
background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08));
}
.benefits-container .card {
padding: 1em;
}
section.final-cta {
text-align: center;
padding: 6em 0;
}
section.final-cta h2 {
margin-bottom: 0;
}
section.final-cta p {
color: var(--muted-color);
}
section.final-cta .buttons {
display: flex;
align-items: center;
gap: 1em;
justify-content: center;
margin-top: 2em;
}
section.final-cta .buttons .button {
padding: 0.75em 2em;
}

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

@ -19,6 +19,7 @@ export function Home() {
<NoteTypesSection />
<CollectionsSection />
<FaqSection />
<FinalCta />
</>
);
}
@ -48,8 +49,8 @@ function HeroSection() {
<div className="download-wrapper">
<DownloadButton big />
<a class="more-download-options desktop-only" href="./get-started/">See all download options</a>
<Button href="./get-started/" className="mobile-only" text="See download options" />
<a class="more-download-options desktop-only" href="./get-started/">More platforms & server setup</a>
<Button href="./get-started/" className="mobile-only" text="Get started" />
<div className="additional-options">
<Button iconSvg={gitHubIcon} outline text="GitHub" href="https://github.com/TriliumNext/Trilium/" openExternally />
<Button iconSvg={dockerIcon} outline text="Docker Hub" href="https://hub.docker.com/r/triliumnext/trilium" openExternally />
@ -91,7 +92,7 @@ function BenefitsSection() {
function NoteTypesSection() {
return (
<Section className="note-types" title="Note types">
<Section className="note-types accented" title="Note types">
<div class="note-types-container grid-3-cols">
<Card title="Text notes" imageUrl="./src/assets/type_text.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Text/index.html">The notes are edited using a visual (WYSIWYG) editor, with support for tables, images, math expressions, code blocks with syntax highlighting. Quickly format the text using Markdown-like syntax or using slash commands.</Card>
<Card title="Code notes" imageUrl="./src/assets/type_code.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Code.html">Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes.</Card>
@ -146,3 +147,15 @@ function FaqItem({ question, children }: { question: string; children: Component
</details>
)
}
function FinalCta() {
return (
<Section className="final-cta accented" title="Ready to get started with Trilium Notes?">
<p>Build your personal knowledge base with powerful features and full privacy.</p>
<div class="buttons">
<Button href="./get-started/" text="Get started" />
</div>
</Section>
)
}