recategorize everything in front page

index.html

@@ -66,8 +66,62 @@
         </a>
       </div>
 
-      <h3 style="margin-top: 5vh;">บริการ โปรเจกต์ และคอนเทนต์</h3>
+      <h3 style="margin-top: 5vh;">Campaigns</h3>
 
+      <div class="section">
+        <!-- <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://thailinux.techtransthai.org/">
+          <div class="listaction">
+            <img src="icons/tux.svg" alt="TTT-Blog" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>OpenStreetMap</h3>
+              <p>---</p>
+            </div>
+          </div>
+        </a>
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://thailinux.techtransthai.org/">
+          <div class="listaction">
+            <img src="icons/tux.svg" alt="TTT-Blog" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Common Voice</h3>
+              <p>---</p>
+            </div>
+          </div>
+        </a>
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://thailinux.techtransthai.org/">
+          <div class="listaction">
+            <img src="icons/tux.svg" alt="TTT-Blog" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Compute4Change</h3>
+              <p>---</p>
+            </div>
+          </div>
+        </a>
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://thailinux.techtransthai.org/">
+          <div class="listaction">
+            <img src="icons/tux.svg" alt="TTT-Blog" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Localization</h3>
+              <p>---</p>
+            </div>
+          </div>
+        </a> -->
+        <a class="itemcard" href="/opensourcefund.html">
+          <div class="listaction">
+            <img src="icons/opensourcefund.svg" alt="openLKB" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Open Source Fund</h3>
+              <p>สนับสนุนโปรเจกต์ที่ทำให้เราเติบโต</p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <!-- <h3 style="margin-top: 5vh;">Linux app development</h3>
+
+      <div class="section">
+      </div> -->
+
+      <h3 style="margin-top: 5vh;">Web development</h3>
       <div class="section">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://thailinux.techtransthai.org/">
           <div class="listaction">
@@ -78,6 +132,21 @@
             </div>
           </div>
         </a>
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://little-lines.techtransthai.org/">
+          <div class="listaction">
+            <img src="icons/ll.svg" alt="little-lines" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Little Lines</h3>
+              <p>ระบบนำทางสำหรับล้อขนาดเล็ก</p>
+            </div>
+          </div>
+        </a>
+      </div>
+
+      <h3 style="margin-top: 5vh">Content</h3>
+
+      <div class="section">
+
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/@FOSS4ChangeTH">
           <div class="listaction">
             <img src="icons/f4c.svg" alt="FOSS4Change" width="80" height="80" style="margin: 0.3cm;"> 
@@ -96,24 +165,6 @@
             </div>
           </div>
         </a>
-        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://test.techtransthai.org/">
-          <div class="listaction">
-            <img src="icons/librespeed.png" alt="LibreSpeed" width="80" height="80" style="margin: 0.3cm;"> 
-            <div>
-              <h3>LibreSpeed</h3>
-              <p>ทดสอบความเร็วอินเทอร์เน็ต</p>
-            </div>
-          </div>
-        </a>
-        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://little-lines.techtransthai.org/">
-          <div class="listaction">
-            <img src="icons/ll.svg" alt="little-lines" width="80" height="80" style="margin: 0.3cm;"> 
-            <div>
-              <h3>Little Lines</h3>
-              <p>ระบบนำทางสำหรับล้อขนาดเล็ก</p>
-            </div>
-          </div>
-        </a>
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/techtransthai/openlkb-slides">
           <div class="listaction">
             <img src="icons/slides-openlkb.svg" alt="openLKB Slides" width="80" height="80" style="margin: 0.3cm;"> 
@@ -123,24 +174,6 @@
             </div>
           </div>
         </a>
-        <a class="itemcard" href="/opensourcefund.html">
-          <div class="listaction">
-            <img src="icons/opensourcefund.svg" alt="openLKB" width="80" height="80" style="margin: 0.3cm;"> 
-            <div>
-              <h3>Open Source Fund</h3>
-              <p>สนับสนุนโปรเจกต์ที่ทำให้เราเติบโต</p>
-            </div>
-          </div>
-        </a>
-        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://relays.syncthing.net/">
-          <div class="listaction">
-            <img src="icons/syncthing.svg" alt="syncthing-relay" width="80" height="80" style="margin: 0.3cm;"> 
-            <div>
-              <h3>Syncthing Relay</h3>
-              <p>Relay server แห่งแรกในไทย</p>
-            </div>
-          </div>
-        </a>
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://blog.techtransthai.org/">
           <div class="listaction">
             <img src="icons/blog.svg" alt="TTT-Blog" width="80" height="80" style="margin: 0.3cm;"> 
@@ -150,21 +183,31 @@
             </div>
           </div>
         </a>
-        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://video.techtransthai.org">
-          <div class="listaction">
-            <img src="icons/peertube-logo.svg" alt="Peertube" width="80" height="80" style="margin: 0.3cm;"> 
-            <div>
-              <h3>TechTransThai Video</h3>
-              <p>รับชมวิดีโอในเครือของเราได้ที่นี่</p>
-            </div>
-          </div>
-        </a>
+
       </div>
       
 
-      <h3 style="margin-top: 5vh">สำหรับใช้งานภายในเท่านั้น</h3>
+      <h3 style="margin-top: 5vh">Hosting</h3>
 
       <div class="section">
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://test.techtransthai.org/">
+          <div class="listaction">
+            <img src="icons/librespeed.png" alt="LibreSpeed" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>LibreSpeed</h3>
+              <p>ทดสอบความเร็วอินเทอร์เน็ต</p>
+            </div>
+          </div>
+        </a>
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://relays.syncthing.net/">
+          <div class="listaction">
+            <img src="icons/syncthing.svg" alt="syncthing-relay" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Syncthing Relay</h3>
+              <p>Relay server แห่งแรกในไทย</p>
+            </div>
+          </div>
+        </a>
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://ci.techtransthai.org/">
           <div class="listaction">
             <svg width="80" height="80" viewBox="0 0 285 254" xmlns="http://www.w3.org/2000/svg" style="margin: 0.3cm;">
@@ -230,6 +273,15 @@
             </div>
           </div>
         </a>
+        <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://video.techtransthai.org">
+          <div class="listaction">
+            <img src="icons/peertube-logo.svg" alt="Peertube" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>TechTransThai Video</h3>
+              <p>รับชมวิดีโอในเครือของเราได้ที่นี่</p>
+            </div>
+          </div>
+        </a>
       </div>
 
       <p style="margin-top: 5vh;text-align: center;">© 2024 TechTransThai</p>