feat: redesign dashboard page with minimalist layout

Author: ForceFledgling

example/static/assets/css/custom.css

@@ -0,0 +1,37 @@
+/* Custom lightweight tweaks for minimalist dashboard */
+
+:root {
+  --cot-primary: #cb0c9f;      /* already used in Soft-UI */
+  --cot-dark: #344767;
+}
+
+/* Hero section */
+.hero {
+  padding: 4rem 1rem;
+}
+.hero .display-4 {
+  color: var(--cot-dark);
+  letter-spacing: -0.5px;
+}
+.hero p.lead {
+  color: #6c757d;
+}
+
+/* Statistic cards */
+.card.shadow-sm {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.card.shadow-sm:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+/* Button */
+.btn-primary {
+  background-color: var(--cot-primary);
+  border-color: var(--cot-primary);
+}
+.btn-primary:hover {
+  background-color: #b30c8d;
+  border-color: #b30c8d;
+}

example/templates/layouts/base.html

@@ -25,6 +25,8 @@
     <!-- CSS Files -->
     <link id="pagestyle" href="{{ url_for('static', filename = 'assets/css/soft-ui-dashboard.css' )}}" rel="stylesheet" />
     <link id="pagestyle_dark" href="{{ url_for('static', filename = 'assets/css/dark-theme-core.css' )}}" rel="stylesheet" />
+    <!-- Custom minimal CSS -->
+    <link id="customstyle" href="{{ url_for('static', filename = 'assets/css/custom.css' )}}" rel="stylesheet" />
 
 </head>
 
@@ -62,4 +64,4 @@
 <script src="{{ url_for('static', filename = 'assets/js/scripts.js' )}}"></script>
 
 </body>
-</html>
+</html>