feat(website): list with screenshot for collections

apps/website/src/components/Card.tsx

@@ -1,7 +1,7 @@
-import { ComponentChildren } from "preact";
+import { ComponentChildren, HTMLAttributes } from "preact";
 import Button from "./Button";
 
-interface CardProps {
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title: ComponentChildren;
     imageUrl?: string;
     className?: string;
@@ -9,9 +9,9 @@ interface CardProps {
     children: ComponentChildren;
 }
 
-export default function Card({ title, children, imageUrl, className, moreInfoUrl }: CardProps) {
+export default function Card({ title, children, imageUrl, className, moreInfoUrl, ...restProps }: CardProps) {
     return (
-        <div className={`card ${className}`}>
+        <div className={`card ${className}`} {...restProps}>
             {imageUrl && <img class="image" src={imageUrl} />}
 
             <div className="card-content">

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

@@ -168,4 +168,36 @@ section.final-cta .buttons {
 
 section.final-cta .buttons .button {
     padding: 0.75em 2em;
+}
+
+.list-with-screenshot {
+    display: flex;
+    gap: 2em;
+}
+
+.list-with-screenshot ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.list-with-screenshot ul li {
+    margin-bottom: 1em;
+}
+
+.list-with-screenshot ul li .card {
+    border: 1px solid transparent;
+}
+
+.list-with-screenshot ul li.selected .card {
+    border: 1px solid var(--brand-1);
+}
+
+.list-with-screenshot ul li:last-of-type {
+    margin-bottom: 0;
+}
+
+.list-with-screenshot .details {
+    flex-basis: 50%;
+    flex-shrink: 0;
 }

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

@@ -8,6 +8,7 @@ import Button, { Link } from '../../components/Button';
 import gitHubIcon from "../../assets/boxicons/bx-github.svg?raw";
 import dockerIcon from "../../assets/boxicons/bx-docker.svg?raw";
 import { getPlatform } from '../../download-helper';
+import { useState } from 'preact/hooks';
 
 export function Home() {
     usePageTitle("");
@@ -116,16 +117,69 @@ function NoteTypesSection() {
 function CollectionsSection() {
     return (
         <Section className="collections" title="Collections">
-            <div className="collections-container grid-2-cols">
-                <Card title="Calendar" imageUrl="./src/assets/collection_calendar.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Calendar%20View.html">Organize your personal or professional events using a calendar, with support for all-day and multi-day events. See your events at a glance with the week, month and year views. Easy interaction to add or drag events.</Card>
-                <Card title="Table" imageUrl="./src/assets/collection_table.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Table%20View.html">Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date &amp; time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table.</Card>
-                <Card title="Board" imageUrl="./src/assets/collection_board.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Board%20View.html">Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board.</Card>
-                <Card title="Geomap" imageUrl="./src/assets/collection_geomap.png" moreInfoUrl="https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Geo%20Map%20View.html">Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries.</Card>
-            </div>
+            <ListWithScreenshot items={[
+                {
+                    title: "Calendar",
+                    imageUrl: "./src/assets/collection_calendar.png",
+                    moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Calendar%20View.html",
+                    description: "Organize your personal or professional events using a calendar, with support for all-day and multi-day events. See your events at a glance with the week, month and year views. Easy interaction to add or drag events."
+                },
+                {
+                    title: "Table",
+                    imageUrl: "./src/assets/collection_table.png",
+                    moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Table%20View.html",
+                    description: "Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date & time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table." },
+                {
+                    title: "Board",
+                    imageUrl: "./src/assets/collection_board.png",
+                    moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Board%20View.html",
+                    description: "Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board."
+                },
+                {
+                    title: "Geomap",
+                    imageUrl: "./src/assets/collection_geomap.png",
+                    moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Geo%20Map%20View.html",
+                    description: "Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries."
+                }
+            ]} />
         </Section>
     );
 }
 
+function ListWithScreenshot({ items }: {
+    items: { title: string, imageUrl: string, description: string, moreInfo: string }[];
+}) {
+    const [ selectedItem, setSelectedItem ] = useState(items[0]);
+
+    return (
+        <div className="list-with-screenshot">
+            <ul>
+                {items.map(item => (
+                    <li className={`${item === selectedItem ? "selected" : ""}`}>
+                        <Card
+                            title={item.title}
+                            onMouseEnter={() => setSelectedItem(item)}
+                            onClick={() => setSelectedItem(item)}
+                        >
+                            {item.description}
+
+                            <div class="card-footer">
+                                <Link href={selectedItem.moreInfo}>More info</Link>
+                            </div>
+                        </Card>
+                    </li>
+                ))}
+            </ul>
+
+            <div className="details">
+                <h3>{selectedItem.title}</h3>
+
+                <img src={selectedItem.imageUrl} />
+            </div>
+        </div>
+    )
+}
+
 function FaqSection() {
     return (
         <Section className="faq" title="Frequently Asked Questions">