feat: refine UI components with improved backgrounds, lazy loading, and optimized media handling

Author: pavanpodila

website/.vitepress/theme/components/DemoFrame.vue

@@ -11,7 +11,7 @@ defineProps<{
 
 <template>
   <div
-    class="relative rounded-lg overflow-hidden border border-slate-200/50 dark:border-zinc-600/50 bg-transparent"
+    class="relative rounded-lg overflow-hidden border border-slate-200/50 dark:border-zinc-600/50 bg-white/75 dark:bg-zinc-900/75"
     style="
       box-shadow:
         0 20px 50px rgba(0, 0, 0, 0.1),
@@ -20,11 +20,10 @@ defineProps<{
   >
     <iframe
       :src="url"
-      class="w-full border-none bg-transparent"
+      class="w-full border-none"
       :style="{ height: height || '520px' }"
       :title="title || url"
       loading="lazy"
-      allowtransparency="true"
     />
   </div>
 </template>

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

@@ -40,13 +40,13 @@ defineProps<{
       <slot v-if="$slots.default" />
       <!-- Video prop -->
       <div v-else-if="video" class="feature-video">
-        <video autoplay loop muted playsinline>
+        <video autoplay loop muted playsinline preload="metadata">
           <source :src="video" type="video/webm" />
         </video>
       </div>
       <!-- Image prop -->
       <div v-else-if="image" class="feature-image">
-        <img :src="image" :alt="title" />
+        <img :src="image" :alt="title" loading="lazy" />
       </div>
       <!-- Fallback to placeholder -->
       <MediaPlaceholder