Updated home page buttons

src/meshcore_hub/web/templates/base.html

@@ -27,6 +27,9 @@
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="{{ logo_url }}">
 
+    <!-- Enable View Transitions API for smooth page navigation -->
+    <meta name="view-transition" content="same-origin">
+
     <!-- Tailwind CSS with DaisyUI -->
     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.tailwindcss.com"></script>
@@ -84,6 +87,70 @@
         .prose th { background: oklch(var(--b2)); font-weight: 600; }
         .prose hr { border: none; border-top: 1px solid oklch(var(--bc) / 0.2); margin: 2rem 0; }
         .prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
+
+        /* View Transitions API - Cross-document page transitions */
+        .navbar { view-transition-name: navbar; position: relative; z-index: 50; }
+        main { view-transition-name: main-content; position: relative; z-index: 10; }
+        footer { view-transition-name: footer; position: relative; z-index: 10; }
+
+        /* Subtle slide + fade for main content */
+        ::view-transition-old(main-content) {
+            animation: vt-fade-out 200ms ease-out forwards;
+        }
+        ::view-transition-new(main-content) {
+            animation: vt-slide-up 250ms ease-out forwards;
+        }
+
+        /* Keep navbar and footer stable */
+        ::view-transition-old(navbar),
+        ::view-transition-new(navbar),
+        ::view-transition-old(footer),
+        ::view-transition-new(footer) {
+            animation: none;
+        }
+
+        /* Subtle crossfade for background */
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+            animation-duration: 150ms;
+        }
+
+        @keyframes vt-fade-out {
+            from { opacity: 1; }
+            to { opacity: 0; }
+        }
+        @keyframes vt-slide-up {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Card entrance animations - only for stat cards with .animate-stagger class */
+        .animate-stagger > .card,
+        .animate-stagger > .stat {
+            animation: card-fade-in 300ms ease-out backwards;
+        }
+        .animate-stagger > :nth-child(1) { animation-delay: 0ms; }
+        .animate-stagger > :nth-child(2) { animation-delay: 50ms; }
+        .animate-stagger > :nth-child(3) { animation-delay: 100ms; }
+        .animate-stagger > :nth-child(4) { animation-delay: 150ms; }
+        .animate-stagger > :nth-child(5) { animation-delay: 200ms; }
+        .animate-stagger > :nth-child(6) { animation-delay: 250ms; }
+
+        @keyframes card-fade-in {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Respect reduced motion preferences */
+        @media (prefers-reduced-motion: reduce) {
+            .card,
+            ::view-transition-old(main-content),
+            ::view-transition-new(main-content),
+            ::view-transition-old(root),
+            ::view-transition-new(root) {
+                animation: none !important;
+            }
+        }
     </style>
 
     {% block extra_head %}{% endblock %}

src/meshcore_hub/web/templates/dashboard.html

@@ -23,7 +23,7 @@
 {% endif %}
 
 <!-- Stats Cards -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 animate-stagger">
     <!-- Total Nodes -->
     <div class="stat bg-base-100 rounded-box shadow">
         <div class="stat-figure text-primary">
@@ -62,7 +62,7 @@
 </div>
 
 <!-- Activity Charts -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 animate-stagger">
     <!-- Node Count Chart -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">
@@ -113,7 +113,7 @@
 </div>
 
 <!-- Additional Stats -->
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 animate-stagger">
     <!-- Recent Advertisements -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">

src/meshcore_hub/web/templates/home.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% from "macros/icons.html" import icon_dashboard, icon_map, icon_nodes, icon_advertisements, icon_messages %}
+{% from "macros/icons.html" import icon_dashboard, icon_map, icon_nodes, icon_advertisements, icon_messages, icon_page %}
 
 {% block title %}{{ network_name }} - Home{% endblock %}
 
@@ -48,11 +48,17 @@
                 {{ icon_map("h-5 w-5 mr-2") }}
                 Map
             </a>
+            {% for page in custom_pages[:3] %}
+            <a href="{{ page.url }}" class="btn btn-outline btn-neutral">
+                {{ icon_page("h-5 w-5 mr-2") }}
+                {{ page.title }}
+            </a>
+            {% endfor %}
         </div>
     </div>
 
     <!-- Stats Column (stacked vertically) -->
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4 animate-stagger">
         <!-- Total Nodes -->
         <div class="stat bg-base-200 rounded-box">
             <div class="stat-figure text-primary">
@@ -85,7 +91,7 @@
     </div>
 </div>
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6 animate-stagger">
     <!-- Network Info Card -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">