Improve Gephi Desktop page

Author: jacomyma

public/desktop/graph.png

@@ -68,13 +68,13 @@ import Layout from "../../layouts/Layout.astro";
         </section>
       </section>
 
-      <section class="feature feature-flat">
-        <div class="feature-background" style="opacity: 0.1; background-image: url(/lite/graph.png);"></div>
+      <section class="feature">
+        <div class="feature-background" style="opacity: 0.1; background-image: url(/desktop/Divided-they-blog.png);"></div>
         <section class="feature-headline">
           <div class="feature-text">
             <h2>
-              <Icon name="ph:star" class="text-primary" />
-              <span>Features</span>
+              <Icon name="ph:eye" class="text-primary" />
+              <span>Visual thinking</span>
             </h2>
             <p>
               Like GIMP but for <strong>graph data</strong>, the user interacts with the representation, manipulate the
@@ -96,6 +96,10 @@ import Layout from "../../layouts/Layout.astro";
         </section>
 
         <section class="feature-arguments">
+          <figure class="figure">
+            <img src="/public/desktop/Gephi Desktop Screenshot DtB.png"  style="height: 315px"class="border figure-img img-fluid" alt="" />
+            <figcaption class="figure-caption text-muted text-center">Visual user interface</figcaption>
+          </figure>
           <figure class="figure">
             <iframe
               width="560"
@@ -106,16 +110,13 @@ import Layout from "../../layouts/Layout.astro";
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               referrerpolicy="strict-origin-when-cross-origin"
               allowfullscreen></iframe>
-            <figcaption class="figure-caption text-muted text-center">A short introduction to Gephi</figcaption>
-          </figure>
-          <figure class="figure">
-            <img src="/public/desktop/Gephi Desktop Screenshot DtB.png"  style="height: 315px"class="border figure-img img-fluid" alt="" />
+            <figcaption class="figure-caption text-muted text-center">Short introduction to Gephi</figcaption>
           </figure>
         </section>
       </section>
 
-      <section class="feature feature-flat">
-        <div class="feature-background" style="opacity: 0.15; background-image: url(/desktop/Divided-they-blog.png);"></div>
+      <section class="feature">
+        <div class="feature-background" style="opacity: 0.15; background-image: url(/desktop/graph.png);"></div>
         <section class="feature-headline">
           <div class="feature-text">
             <h2>
@@ -142,16 +143,18 @@ import Layout from "../../layouts/Layout.astro";
         <section class="feature-arguments">
           <figure class="figure">
             <img src="/public/desktop/realtime_01.png" class="border figure-img img-fluid" alt="" />
+            <figcaption class="figure-caption text-muted text-center">Drag and drop nodes</figcaption>
           </figure>
 
           <figure class="figure">
             <img src="/public/desktop/realtime_02.png" class="border figure-img img-fluid" alt="" />
+            <figcaption class="figure-caption text-muted text-center">Highlight neighbors</figcaption>
           </figure>
         </section>
       </section>
 
-      <section class="feature feature-flat">
-        <div class="feature-background" style="opacity: 0.1; background-image: url(/desktop/c-elegans-layout.png);"></div>
+      <section class="feature">
+        <div class="feature-background" style="opacity: 0.1; background-image: url(/desktop/layout-clusters.png);"></div>
         <section class="feature-headline">
           <div class="feature-text">
             <h2>
@@ -177,11 +180,13 @@ import Layout from "../../layouts/Layout.astro";
 
         <section class="feature-arguments">
           <figure class="figure">
-            <img src="/public/desktop/layout_01.png" class="border figure-img img-fluid" alt="" />
+            <img src="/public/desktop/layout_02.png" class="border figure-img img-fluid" alt="" />
+            <figcaption class="figure-caption text-muted text-center">Separate clusters</figcaption>
           </figure>
 
           <figure class="figure">
-            <img src="/public/desktop/layout_02.png" class="border figure-img img-fluid" alt="" />
+            <img src="/public/desktop/layout_01.png" class="border figure-img img-fluid" alt="" />
+            <figcaption class="figure-caption text-muted text-center">Keep your network compact</figcaption>
           </figure>
         </section>
       </section>