From 329ecd6894b3916caccb3e561092432131d76307 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 19:29:40 +0300
Subject: [PATCH] feat(website): improve FAQ section

---
 apps/website/src/pages/Home/index.css |  6 +-----
 apps/website/src/pages/Home/index.tsx | 21 +++++++++++----------
 apps/website/src/style.css            |  2 +-
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index 15c713003..6fe6089de 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -145,10 +145,6 @@ section.accented {
     padding: 1em;
 }
 
-.benefits-container .card h3 {
-    color: var(--brand-1);
-}
-
 section.final-cta {
     text-align: center;
     padding: 6em 0;
@@ -241,4 +237,4 @@ section.final-cta .buttons .button {
     height: 100%;
     width: auto;
     object-fit: contain;
-}
\ No newline at end of file
+}
diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx
index fce8f61b4..9eca5b503 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -235,22 +235,23 @@ function ListWithScreenshot({ items, horizontal, cardExtra }: {
 function FaqSection() {
     return (
         <Section className="faq" title="Frequently Asked Questions">
-            <FaqItem question="Is there a mobile application?">Currently there is no official mobile application. However, if you have a server instance you can access it using a web browser and even install it as a PWA. For Android, there is an unofficial application called TriliumDroid that even works offline (same as a desktop client).</FaqItem>
-            <FaqItem question="Where is the data stored?">All your notes will be stored in an SQLite database in an application folder. The reasoning why Trilium uses a database instead of plain text files is both performance and some features would be much more difficult to implement such as clones (same note in multiple places in the tree). To find the application folder, simply go to the About window.</FaqItem>
-            <FaqItem question="Do I need a server to use Trilium?">No, the server allows access via a web browser and manages the synchronization if you have multiple devices. To get started, it's enough to download the desktop application and start using it.</FaqItem>
-            <FaqItem question="How well does the application scale with a large amount of notes?">Depending on usage, the application should be able to handle at least 100.000 notes without an issue. Do note that the sync process can sometimes fail if uploading many large files (&gt; 1 GB per file) since Trilium is meant more as a knowledge base application rather than a file store (like NextCloud, for example).</FaqItem>
-            <FaqItem question="Can I share my database over a network drive?">No, it's generally not a good idea to share a SQLite database over a network drive. Although sometimes it might work, there are chances that the database will get corrupted due to imperfect file locks over a network.</FaqItem>
-            <FaqItem question="How is my data protected?">By default, notes are not encrypted and can be read directly from the database. Once a note is marked as encrypted, the note is encrypted using AES-128-CBC.</FaqItem>
+            <div class="grid-2-cols">
+                <FaqItem question="Is there a mobile application?">Currently there is no official mobile application. However, if you have a server instance you can access it using a web browser and even install it as a PWA. For Android, there is an unofficial application called TriliumDroid that even works offline (same as a desktop client).</FaqItem>
+                <FaqItem question="Where is the data stored?">All your notes will be stored in an SQLite database in an application folder. The reasoning why Trilium uses a database instead of plain text files is both performance and some features would be much more difficult to implement such as clones (same note in multiple places in the tree). To find the application folder, simply go to the About window.</FaqItem>
+                <FaqItem question="Do I need a server to use Trilium?">No, the server allows access via a web browser and manages the synchronization if you have multiple devices. To get started, it's enough to download the desktop application and start using it.</FaqItem>
+                <FaqItem question="How well does the application scale with a large amount of notes?">Depending on usage, the application should be able to handle at least 100.000 notes without an issue. Do note that the sync process can sometimes fail if uploading many large files (&gt; 1 GB per file) since Trilium is meant more as a knowledge base application rather than a file store (like NextCloud, for example).</FaqItem>
+                <FaqItem question="Can I share my database over a network drive?">No, it's generally not a good idea to share a SQLite database over a network drive. Although sometimes it might work, there are chances that the database will get corrupted due to imperfect file locks over a network.</FaqItem>
+                <FaqItem question="How is my data protected?">By default, notes are not encrypted and can be read directly from the database. Once a note is marked as encrypted, the note is encrypted using AES-128-CBC.</FaqItem>
+            </div>
         </Section>
     );
 }
 
 function FaqItem({ question, children }: { question: string; children: ComponentChildren }) {
     return (
-        <details>
-            <summary>{question}</summary>
-            <p>{children}</p>
-        </details>
+        <Card title={question}>
+            {children}
+        </Card>
     )
 }
 
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index 6c387a78f..f5fa57964 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -115,7 +115,7 @@ img {
     font-size: 1.1rem;
     font-weight: 300;
     margin: 0;
-    color: var(--foreground-color);
+    color: var(--brand-1);
 }
 
 .card > .image {