feat: enhance UI responsiveness, update workflow labels, and improve text styling

Author: pavanpodila

packages/demo/lib/example_detail_view.dart

@@ -15,12 +15,14 @@ class ExampleDetailView extends StatelessWidget {
     }
 
     final isMobile = Responsive.isMobile(context);
+    final isTablet = Responsive.isTablet(context);
+    final useDrawerNavigation = isMobile || isTablet;
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        // Skip header in mobile mode as title is shown in AppBar
-        if (!isMobile) _buildHeader(context, example!),
+        // Skip header in mobile/tablet mode as title is shown in AppBar
+        if (!useDrawerNavigation) _buildHeader(context, example!),
         Expanded(child: example!.builder(context)),
       ],
     );

website/.vitepress/theme/CustomHome.vue

@@ -20,7 +20,6 @@ const flipperWords = [
   'PROCESS FLOW',
   'NODE FLOW',
   'CONTENT FLOW',
-  'MIND FLOW',
   'STATE FLOW',
   'CODE FLOW',
 ];
@@ -447,21 +446,33 @@ const ctaBlinkCells = generateBlinkCells(15, 73);
 
       <div class="hero-content">
         <div class="hero-text">
-          <Badge icon="simple-icons:flutter" color="blue">Built for Flutter</Badge>
+          <Badge icon="simple-icons:flutter" color="blue"
+            >Built for Flutter</Badge
+          >
           <h1 class="hero-title">
             <span class="hero-title-static">Visualize any</span>
             <WordFlipper :words="flipperWords" :interval="1500" />
           </h1>
           <p class="hero-subtitle">
             A flexible, high-performance node-based flow editor for
-            <FlutterBrand />. Build workflow editors, visual programming interfaces, and
-            interactive diagrams.
+            <FlutterBrand />. Build workflow editors, visual programming
+            interfaces, and interactive diagrams.
           </p>
           <div class="hero-actions">
-            <CtaButton href="/docs/getting-started/installation" variant="primary" size="large">
+            <CtaButton
+              href="/docs/getting-started/installation"
+              variant="primary"
+              size="large"
+            >
               Get Started <Icon icon="ph:arrow-right-bold" />
             </CtaButton>
-            <CtaButton href="https://flow.demo.vyuh.tech" icon="ph:play-fill" variant="secondary" size="large" external>
+            <CtaButton
+              href="https://flow.demo.vyuh.tech"
+              icon="ph:play-fill"
+              variant="secondary"
+              size="large"
+              external
+            >
               Live Demo
             </CtaButton>
           </div>
@@ -496,7 +507,7 @@ const ctaBlinkCells = generateBlinkCells(15, 73);
       <div class="code-container">
         <SectionHeader
           badge="Quick Start"
-          badge-icon="ph:terminal-fill"
+          badge-icon="simple-icons:flutter"
           badge-color="blue"
           title="Simple & Intuitive API"
         />
@@ -559,7 +570,7 @@ const ctaBlinkCells = generateBlinkCells(15, 73);
     <section class="use-cases-section">
       <SectionHeader
         badge="Infinite Possibilities"
-        badge-icon="ph:infinity-fill"
+        badge-icon="ph:infinity"
         badge-color="teal"
         title="Build Anything"
         subtitle="From simple diagrams to complex visual programming environments, Vyuh Node Flow adapts to your needs."

website/.vitepress/theme/components/ProPage.vue

@@ -46,7 +46,7 @@ const workflowFeatures = [
       'Visual canvas for designing workflow processes',
       'Pre-built activity, gateway, and event nodes',
       'Conditional branching and parallel execution paths',
-      'Reusable sub-workflows and templates',
+      'Simulation mode with step-through debugging',
     ],
     media: {
       type: 'video' as const,
@@ -56,8 +56,8 @@ const workflowFeatures = [
   },
   {
     tag: 'Dart Execution',
-    tagIcon: 'ph:terminal-fill',
-    tagColor: 'teal' as const,
+    tagIcon: 'simple-icons:dart',
+    tagColor: 'blue' as const,
     title: 'Native Dart Executors',
     subtitle: 'Run workflows on the server with type-safe Dart executors. Full control over execution logic with native performance.',
     bullets: [

website/.vitepress/theme/custom.css

@@ -11,6 +11,7 @@
   /* Accent Colors */
   --vn-blue: #2563eb;
   --vn-blue-light: #3b82f6;
+  --vn-blue-fill: #bfdbfe;
   --vn-blue-dim: rgba(37, 99, 235, 0.1);
   --vn-blue-glow: rgba(37, 99, 235, 0.4);
 
@@ -26,6 +27,7 @@
 
   --vn-amber: #f59e0b;
   --vn-amber-light: #fbbf24;
+  --vn-amber-fill: #fde68a;
   --vn-amber-dim: rgba(245, 158, 11, 0.1);
   --vn-amber-glow: rgba(245, 158, 11, 0.4);
 
@@ -1632,10 +1634,39 @@ body {
 .pro-title-sub {
   display: block;
   font-size: 0.6em;
-  background: linear-gradient(135deg, var(--vn-purple), var(--vn-blue));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--vn-blue-fill);
+  letter-spacing: 0.05em;
+  text-shadow:
+    /* Blue border */
+    -1px -1px 0 var(--vn-blue),
+    1px -1px 0 var(--vn-blue),
+    -1px 1px 0 var(--vn-blue),
+    1px 1px 0 var(--vn-blue),
+    /* Glow */
+    0 0 20px var(--vn-blue-glow),
+    0 0 40px rgba(37, 99, 235, 0.2);
+  animation: proGlow 3s ease-in-out infinite alternate;
+}
+
+@keyframes proGlow {
+  0% {
+    text-shadow:
+      -1px -1px 0 var(--vn-blue),
+      1px -1px 0 var(--vn-blue),
+      -1px 1px 0 var(--vn-blue),
+      1px 1px 0 var(--vn-blue),
+      0 0 15px rgba(37, 99, 235, 0.3),
+      0 0 30px rgba(37, 99, 235, 0.15);
+  }
+  100% {
+    text-shadow:
+      -1px -1px 0 var(--vn-blue),
+      1px -1px 0 var(--vn-blue),
+      -1px 1px 0 var(--vn-blue),
+      1px 1px 0 var(--vn-blue),
+      0 0 25px var(--vn-blue-glow),
+      0 0 50px rgba(37, 99, 235, 0.3);
+  }
 }
 
 .pro-subtitle {