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

apps/website/src/pages/GetStarted/get-started.tsx

@@ -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>
 

apps/website/src/pages/Home/index.css

@@ -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;
+}

apps/website/src/pages/Home/index.tsx

@@ -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>
+                    <a class="more-download-options desktop-only" href="./get-started/">More platforms & server setup</a>
-                    <Button href="./get-started/" className="mobile-only" text="See download options" />
+                    <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>
+    )
+}