refactor(website): split each section into a component

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

@@ -7,6 +7,17 @@ import "./index.css";
 export function Home() {
 	return (
         <>
+            <HeroSection />
+            <BenefitsSection />
+            <NoteTypesSection />
+            <CollectionsSection />
+            <FaqSection />
+        </>
+	);
+}
+
+function HeroSection() {
+    return (
         <Section className="hero-section">
             <div class="title-section">
                 <h1>Organize your thoughts. Build your personal knowledge base.</h1>
@@ -16,7 +27,11 @@ export function Home() {
 
             <figure class="image"><img src="./src/assets/screenshot_desktop_win.png" /></figure>
         </Section>
+    )
+}
 
+function BenefitsSection() {
+    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>
@@ -38,7 +53,11 @@ 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>
+    );
+}
 
+function NoteTypesSection() {
+    return (
         <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>
@@ -50,7 +69,11 @@ export function Home() {
             </div>
             <p>and others: note map, relation map, saved searches, render note, web views.</p>
         </Section>
+    );
+}
 
+function CollectionsSection() {
+    return (
         <Section className="collections" title="Collections">
             <div className="collections-container">
                 <Card title="Calendar" imageUrl="./src/assets/collection_calendar.png">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>
@@ -59,7 +82,11 @@ export function Home() {
                 <Card title="Geomap" imageUrl="./src/assets/collection_geomap.png">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>
         </Section>
+    );
+}
 
+function FaqSection() {
+    return (
         <Section className="faq" title="Frequently Asked Questions">
             <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>
@@ -68,7 +95,6 @@ export function Home() {
             <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="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>
         </Section>
-        </>
     );
 }