From b6088f488f4e150eb82fa0d081d6ca79dabdfe1c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 18:59:51 +0300
Subject: [PATCH] feat(website): use list with screenshot for note types

---
 apps/website/src/pages/Home/index.css | 37 +++++++++++++++++++++++++++
 apps/website/src/pages/Home/index.tsx | 13 +++++-----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index 3fb77c6b5..15c713003 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -204,4 +204,41 @@ section.final-cta .buttons .button {
 .list-with-screenshot .details {
     flex-basis: 50%;
     flex-shrink: 0;
+}
+
+.list-with-screenshot.horizontal {
+    flex-direction: column-reverse;
+}
+
+.list-with-screenshot.horizontal ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1em;
+}
+
+.list-with-screenshot.horizontal li {
+    margin: 0;
+}
+
+.list-with-screenshot.horizontal .card {    
+    height: 100%;    
+}
+
+
+.list-with-screenshot.horizontal h3 {
+    color: var(--brand-1);
+}
+
+
+.list-with-screenshot.horizontal .details {
+    max-height: 35vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-with-screenshot.horizontal .details img {
+    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 8b4f88d50..ba515bb75 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -112,8 +112,8 @@ function BenefitsSection() {
 
 function NoteTypesSection() {
     return (
-        <Section className="note-types accented" title="Various ways to represent your information">
-            <ListWithScreenshot items={[
+        <Section className="note-types accented" title="Multiple ways to represent your information">
+            <ListWithScreenshot horizontal items={[
                 {
                     title: "Text notes",
                     imageUrl: "./src/assets/type_text.png",
@@ -142,7 +142,7 @@ function NoteTypesSection() {
                     title: "Mermaid diagrams",
                     imageUrl: "./src/assets/type_mermaid.png",
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mermaid%20Diagrams/index.html",
-                    description: "Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and many more, using the Mermaid syntax."
+                    description: "Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax."
                 },
                 {
                     title: "Mindmap",
@@ -195,13 +195,15 @@ function CollectionsSection() {
     );
 }
 
-function ListWithScreenshot({ items }: {
+function ListWithScreenshot({ items, horizontal, cardExtra }: {
     items: { title: string, imageUrl: string, description: string, moreInfo: string }[];
+    horizontal?: boolean;
+    cardExtra?: ComponentChildren;
 }) {
     const [ selectedItem, setSelectedItem ] = useState(items[0]);
 
     return (
-        <div className="list-with-screenshot">
+        <div className={`list-with-screenshot ${horizontal ? "horizontal" : ""}`}>
             <ul>
                 {items.map(item => (
                     <li className={`${item === selectedItem ? "selected" : ""}`}>
@@ -223,7 +225,6 @@ function ListWithScreenshot({ items }: {
             <div className="details">
                 {selectedItem && (
                     <>
-                        <h3>{selectedItem.title}</h3>
                         <img src={selectedItem.imageUrl} />
                     </>
                 )}