Address PR #7 review comments: accessibility, performance, and code quality

apps/web/src/app/globals.css

@@ -546,19 +546,18 @@ pre {
 }
 
 /* ============================================
-   Skeleton Loading (Used by loading states)
+   Accessibility - Reduced Motion
    ============================================ */
 
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.03) 0%,
-    rgba(255, 255, 255, 0.08) 50%,
-    rgba(255, 255, 255, 0.03) 100%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-shimmer 1.5s ease-in-out infinite;
-  border-radius: 0.5rem;
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 @keyframes skeleton-shimmer {

apps/web/src/app/page.tsx

@@ -621,34 +621,39 @@ export default function HomePage() {
             />
           </div>
 
-          {/* Video Preview Card - Visual Example Only */}
+          {/* Video Preview Card - Example */}
           <div className="max-w-lg mx-auto mb-16">
-            <div className="relative group">
-              {/* Example label */}
-              <div className="absolute -top-8 left-0 right-0 flex justify-center">
-                <span className="text-xs font-semibold tracking-widest text-white/30 uppercase">Example Preview</span>
+            <div className="relative">
+              {/* "Example" Badge */}
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
+                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-xs font-medium text-white/80">
+                  <span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse"></span>
+                  Example Preview
+                </span>
               </div>
-
-              {/* Glow effect */}
-              <div className="absolute -inset-4 bg-gradient-to-r from-primary-500/10 via-accent-500/10 to-primary-500/10 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
-
-              <div className="relative overflow-hidden rounded-2xl border border-white/[0.1] bg-surface-900/80 backdrop-blur-xl shadow-2xl transition-all duration-500 group-hover:border-white/[0.15]">
-                {/* Video thumbnail placeholder */}
-                <div className="relative aspect-video bg-gradient-to-br from-surface-800 to-surface-900 flex items-center justify-center">
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                  <div className="text-6xl opacity-50 group-hover:opacity-70 transition-opacity">🎬</div>
-
-                  {/* Play button overlay */}
-                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
-                    <div className="w-16 h-16 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center hover:scale-110 transition-transform">
-                      <span className="text-2xl ml-1">▶</span>
+
+              <div className="relative group">
+                {/* Glow effect */}
+                <div className="absolute -inset-4 bg-gradient-to-r from-primary-500/10 via-accent-500/10 to-primary-500/10 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
+
+                <div className="relative overflow-hidden rounded-2xl border border-white/[0.1] bg-surface-900/80 backdrop-blur-xl shadow-2xl transition-all duration-500 group-hover:border-white/[0.15]">
+                  {/* Video thumbnail placeholder */}
+                  <div className="relative aspect-video bg-gradient-to-br from-surface-800 to-surface-900 flex items-center justify-center">
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                    <div className="text-6xl opacity-50 group-hover:opacity-70 transition-opacity">🎬</div>
+
+                    {/* Play button overlay */}
+                    <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
+                      <div className="w-16 h-16 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center transition-transform">
+                        <span className="text-2xl ml-1">▶</span>
+                      </div>
                     </div>
-                  </div>
 
-                  {/* Video info overlay */}
-                  <div className="absolute bottom-4 left-4 right-4">
-                    <p className="text-sm text-white/70 font-medium">Sample: How to build a startup</p>
-                    <p className="text-xs text-white/40 mt-1">12:34 • Ready to transform</p>
+                    {/* Video info overlay */}
+                    <div className="absolute bottom-4 left-4 right-4">
+                      <p className="text-sm text-white/70 font-medium">Sample: How to build a startup</p>
+                      <p className="text-xs text-white/40 mt-1">12:34 • Ready to transform</p>
+                    </div>
                   </div>
                 </div>
               </div>

apps/web/src/components/ui/SuggestedPrompts.tsx

@@ -136,11 +136,12 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
               topic={topic}
               onSelect={onSelectTopic}
               style={{
-                animationDelay: `${300 + index * 100}ms`,
+                '--animation-delay': `${300 + index * 100}ms`,
+                animationDelay: 'var(--animation-delay)',
                 animationFillMode: 'forwards',
                 opacity: 0
-              }}
-              className="animate-fade-in-up motion-reduce:animate-none motion-reduce:opacity-100"
+              } as React.CSSProperties}
+              className="animate-fade-in-up"
             />
           ))}
         </div>