replace the svg with dashboard gif

FlowFuse · Jul 30, 2024 · 7eea732 · 7eea732
1 parent 5090b54
commit 7eea732
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -1615,4 +1615,9 @@ input[type="range"] {
     margin: 0 auto;
     height: 2rem;
     width: 100%;
-  }
+  }
+
+  .dashboard-image img {
+    border: 2px solid  theme(colors.indigo.100);    
+    border-radius: 8px;
+ }
diff --git a/src/images/dashboard/bar-chart.jpeg b/src/images/dashboard/bar-chart.jpeg
diff --git a/src/images/dashboard/donut-chart.jpeg b/src/images/dashboard/donut-chart.jpeg
diff --git a/src/images/dashboard/line-chart.jpeg b/src/images/dashboard/line-chart.jpeg
diff --git a/src/product/dashboard.njk b/src/product/dashboard.njk
@@ -14,8 +14,10 @@ meta:
             <h4 class="font-light mt-2 text-gray-500">
                 Build visually appealing and useful UIs in minutes!
             </h4>
-            <div class="justify-center items-center m-auto w-full flex mt-10">
-                {% image "../images/dashboard/dashboard.svg", "FlowFuse Dashboard", [1920] %}
+            <div class="justify-center items-center m-auto w-full flex mt-10 gap-3 dashboard-image">
+                {% image "../images/dashboard/bar-chart.gif", "chart1",[1920]%}
+                {% image "../images/dashboard/donut-chart.gif", "chart2", [1920]%}
+                {% image "../images/dashboard/line-chart.gif", "chart3", [1920]%}
             </div>
             <p class="mt-8 text-left">
                 FlowFuse Dashboard is a revolutionary tool that allows you to create beautiful and functional dashboards