feat: replace placeholders with video support in features and remove unused media configurations

Author: pavanpodila

website/.vitepress/theme/ProPage.vue

@@ -54,11 +54,7 @@ const workflowFeatures = [
       'Conditional branching and parallel execution paths',
       'Simulation mode with step-through debugging',
     ],
-    placeholder: {
-      type: 'video' as const,
-      title: 'Workflow Editor Demo',
-      description: 'See the visual workflow designer in action',
-    },
+    video: '/editor.webm',
   },
   {
     tag: 'Dart Execution',
@@ -74,7 +70,6 @@ const workflowFeatures = [
       'Custom executor plugins for specialized tasks',
     ],
     placeholder: {
-      type: 'animation' as const,
       title: 'Executor Pipeline',
       description: 'Watch workflows execute step-by-step',
     },
@@ -93,7 +88,6 @@ const workflowFeatures = [
       'Alerting and notification integrations',
     ],
     placeholder: {
-      type: 'image' as const,
       title: 'Monitoring Dashboard',
       description: 'Live workflow analytics and insights',
     },
@@ -112,7 +106,6 @@ const workflowFeatures = [
       'Integration with external systems and APIs',
     ],
     placeholder: {
-      type: 'image' as const,
       title: 'Infrastructure Overview',
       description: 'Scalable workflow architecture',
     },
@@ -310,6 +303,7 @@ const comparisonRows: ComparisonRow[] = [
           :title="feature.title"
           :subtitle="feature.subtitle"
           :bullets="feature.bullets"
+          :video="feature.video"
           :placeholder="feature.placeholder"
           :reverse="index % 2 === 1"
         />

website/.vitepress/theme/components/FeatureSection.vue

@@ -4,7 +4,6 @@ import Badge from './Badge.vue';
 import MediaPlaceholder from './MediaPlaceholder.vue';
 
 export interface PlaceholderConfig {
-  type: 'video' | 'animation' | 'image' | 'gif';
   title: string;
   description: string;
 }
@@ -52,7 +51,6 @@ defineProps<{
       <!-- Fallback to placeholder -->
       <MediaPlaceholder
         v-else-if="placeholder"
-        :type="placeholder.type"
         :title="placeholder.title"
         :description="placeholder.description"
       />

website/.vitepress/theme/components/MediaPlaceholder.vue

@@ -1,34 +1,16 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
 defineProps<{
-  type: 'video' | 'animation' | 'image' | 'gif';
   title: string;
   description: string;
   aspectRatio?: string;
 }>();
-
-const typeConfig = {
-  video: { icon: 'ph:video-fill', label: 'Video' },
-  animation: { icon: 'ph:gif-fill', label: 'Animation' },
-  image: { icon: 'ph:image-fill', label: 'Image' },
-  gif: { icon: 'ph:gif-fill', label: 'GIF' },
-};
 </script>
 
 <template>
   <div class="media-placeholder" :style="{ aspectRatio: aspectRatio || '16/10' }">
     <div class="media-placeholder-inner">
-      <div class="media-placeholder-badge">
-        <Icon :icon="typeConfig[type].icon" />
-        <span>{{ typeConfig[type].label }}</span>
-      </div>
       <h4 class="media-placeholder-title">{{ title }}</h4>
       <p class="media-placeholder-desc">{{ description }}</p>
-      <div class="media-placeholder-hint">
-        <Icon icon="ph:arrow-square-out-fill" />
-        <span>Replace with actual media</span>
-      </div>
     </div>
   </div>
 </template>
@@ -50,30 +32,12 @@ const typeConfig = {
   @apply text-center p-10 max-w-full box-border;
 }
 
-.media-placeholder-badge {
-  @apply inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider;
-  @apply bg-white dark:bg-zinc-800 text-slate-500 dark:text-zinc-400 border border-slate-200 dark:border-zinc-600 mb-4;
-  font-family: var(--vn-font-mono);
-}
-
-.media-placeholder-badge svg {
-  @apply text-sm text-violet-600 dark:text-violet-400;
-}
-
 .media-placeholder-title {
   @apply text-base font-bold text-slate-800 dark:text-zinc-200 mb-2;
   font-family: var(--vn-font-display);
 }
 
 .media-placeholder-desc {
-  @apply text-sm text-slate-500 dark:text-zinc-400 leading-normal mb-4;
-}
-
-.media-placeholder-hint {
-  @apply inline-flex items-center gap-1.5 text-xs text-slate-400 dark:text-zinc-500;
-}
-
-.media-placeholder-hint svg {
-  @apply text-sm;
+  @apply text-sm text-slate-500 dark:text-zinc-400 leading-normal;
 }
 </style>