chore(website): port note types

apps/website2/src/index.html

@@ -34,55 +34,6 @@
         </div>
     </section>
 
-    <section class="note-types">
-        <div class="content-wrapper">
-            <h2>Note types</h2>
-            <div class="note-types-container">
-                <div class="card">
-                    <img class="image" src="./assets/type_text.png" width="1320" height="757">
-                    <p><span class="text-big"> Text notes </span><br>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. </p>
-                </div>
-                <div class="card">
-                    <img class="image" src="./assets/type_code.png" width="1441" height="946">
-                    <p><span class="text-big"> Code notes </span><br>Large
-                        samples of source code or scripts use a dedicated editor, with syntax highlighting for many
-                        programming languages and with various color themes </p>
-                </div>
-                <div class="card">
-                    <img class="image" src="./assets/type_file.png" width="1522"
-                            height="942">
-                    <p><span class="text-big"> File notes </span><br>Embed
-                        multimedia files such as PDFs, images, videos with an in-application preview. </p>
-                </div>
-                <div class="card">
-                    <img class="image" src="./assets/type_canvas.png" width="835"
-                            height="627">
-                    <p><span class="text-big"> Canvas </span><br>Arrange
-                        shapes, images and text across an infinite canvas, using the same technology behind <a
-                            href="https://excalidraw.com">excalidraw.com</a> . Ideal for diagrams, sketches and visual
-                        planning. </p>
-                </div>
-                <div class="card">
-                    <img class="image" src="./assets/type_mermaid.png" width="831"
-                            height="640">
-                    <p><span class="text-big">Mermaid diagrams
-                        </span><br>Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and
-                        many more, using the Mermaid syntax. </p>
-                </div>
-                <div class="card">
-                    <img class="image" src="./assets/type_mindmap.png" width="832" height="631">
-                    <p><span class="text-big"> Mind maps </span> 
-                        <br>Organize your thoughts visually or do a brainstorming session by using <a href="https://en.wikipedia.org/wiki/Mind_map">mind map diagrams</a>.
-                    </p>
-                </div>
-            </div>
-            <p> and others: note map, relation map, saved searches, render note, web views. </p>
-        </div>
-    </section>
-
     <section class="collections">
         <div class="content-wrapper">
             <h2> Collections </h2>

apps/website3/src/components/Card.tsx

@@ -2,12 +2,14 @@ import { ComponentChildren } from "preact";
 
 interface CardProps {
     title: string;
+    imageUrl?: string;
     children: ComponentChildren;
 }
 
-export default function Card({ title, children }: CardProps) {
+export default function Card({ title, children, imageUrl }: CardProps) {
     return (
         <div className="card">
+            {imageUrl && <img class="image" src={imageUrl} />}
             <p>
                 <span class="text-big">{title}</span><br />
                 {children}

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

@@ -1,9 +1,9 @@
 import Card from '../../components/Card';
 import Section from '../../components/Section';
-import './style.css';
 
 export function Home() {
 	return (
+        <>
             <Section className="benefits" title="Benefits">
                 <div className="benefits-container">
                     <Card title="Note structure">Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy.</Card>
@@ -25,5 +25,18 @@ export function Home() {
                     <Card title="Advanced scripting and REST API">Create your own integrations within Trilium by writing custom widgets, or custom-server side logic. Interact externally with the Trilium database by using the built-in REST API.</Card>
                 </div>
             </Section>
+
+            <Section className="note-types" title="Note types">
+                <div class="note-types-container">
+                    <Card title="Text notes" imageUrl="./src/assets/type_text.png">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">Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes.</Card>
+                    <Card title="File notes" imageUrl="./src/assets/type_file.png">Embed multimedia files such as PDFs, images, videos with an in-application preview.</Card>
+                    <Card title="Canvas" imageUrl="./src/assets/type_canvas.png">Arrange shapes, images and text across an infinite canvas, using the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>. Ideal for diagrams, sketches and visual planning.</Card>
+                    <Card title="Mermaid diagrams" imageUrl="./src/assets/type_mermaid.png">Create diagrams such as flowcharts, class &amp; sequence diagrams, Gantt charts and many more, using the Mermaid syntax.</Card>
+                    <Card title="Mindmap" imageUrl="./src/assets/type_mindmap.png">Organize your thoughts visually or do a brainstorming session by using <a href="https://en.wikipedia.org/wiki/Mind_map">mind map diagrams</a>.</Card>
+                </div>
+                <p>and others: note map, relation map, saved searches, render note, web views.</p>
+            </Section>
+        </>
 	);
 }

apps/website3/src/pages/Home/style.css

@@ -1,47 +0,0 @@
-img {
-	margin-bottom: 1.5rem;
-}
-
-img:hover {
-	filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-.home section {
-	margin-top: 5rem;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	column-gap: 1.5rem;
-}
-
-.resource {
-	padding: 0.75rem 1.5rem;
-	border-radius: 0.5rem;
-	text-align: left;
-	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
-}
-
-.resource:hover {
-	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
-}
-
-@media (max-width: 639px) {
-	.home section {
-		margin-top: 5rem;
-		grid-template-columns: 1fr;
-		row-gap: 1rem;
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	.resource {
-		color: #ccc;
-		background-color: #161616;
-	}
-	.resource:hover {
-		border: 1px solid #bbb;
-	}
-}

apps/website3/src/style.css

@@ -20,6 +20,10 @@ body {
     color: black;
 }
 
+a {
+    color: var(--brand-3);
+}
+
 /* #region Header */
 header {
     padding: 1em;