From d7afa8526d214f1e069e15bae2b96d86af042f6b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 26 Sep 2025 23:18:38 +0300
Subject: [PATCH] chore(website): port collections

---
 apps/website2/src/index.html           | 38 --------------------------
 apps/website3/src/pages/Home/index.tsx |  9 ++++++
 2 files changed, 9 insertions(+), 38 deletions(-)

diff --git a/apps/website2/src/index.html b/apps/website2/src/index.html
index b674a100e..067f39cc7 100644
--- a/apps/website2/src/index.html
+++ b/apps/website2/src/index.html
@@ -34,44 +34,6 @@
         </div>
     </section>
 
-    <section class="collections">
-        <div class="content-wrapper">
-            <h2> Collections </h2>
-            <div class="collections-container">
-                <div class="card">
-                    <img class="image" src="./assets/collection_calendar.png" width="1651" height="810">
-                    <p>
-                        <span class="text-big">Calendar</span><br>
-                        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.
-                    </p>
-                </div>
-                <div class="card">
-                    <img src="./assets/collection_table.png" width="1643" height="647">
-                    <p>
-                        <span class="text-big">Table</span><br>
-                        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. </p>
-                </div>
-                <div class="card">
-                    <img src="./assets/collection_board.png" width="1174" height="850">
-                    <p>
-                        <span class="text-big"> Board</span><br>
-                        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.
-                    </p>
-                </div>
-                <div class="card">
-                    <img class="image" src="./assets/collection_geomap.png" width="844" height="639">
-                    <p>
-                        <span class="text-big">Geomap</span><br>
-                        Plan your vacations or mark your points of interest directly on a geographical map
-                        using customizable markers. Display recorded GPX tracks to track itineraries.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </section>
-
     <section class="faq">
         <div class="content-wrapper">
             <h2> FAQ </h2>
diff --git a/apps/website3/src/pages/Home/index.tsx b/apps/website3/src/pages/Home/index.tsx
index 54b6ec7e2..35dba0f4c 100644
--- a/apps/website3/src/pages/Home/index.tsx
+++ b/apps/website3/src/pages/Home/index.tsx
@@ -37,6 +37,15 @@ export function Home() {
                 </div>
                 <p>and others: note map, relation map, saved searches, render note, web views.</p>
             </Section>
+
+            <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>
+                    <Card title="Table" imageUrl="./src/assets/collection_table.png">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">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">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>
         </>
 	);
 }