Fix UI polish review feedback: accessibility, consistency, and UX improvements

apps/web/src/app/globals.css

@@ -556,75 +556,6 @@ pre {
     radial-gradient(at 80% 100%, rgba(34, 211, 238, 0.08) 0px, transparent 50%);
 }
 
-/* ============================================
-   Enhanced Input Styling
-   ============================================ */
-
-.input-glow {
-  position: relative;
-}
-
-.input-glow::before {
-  content: "";
-  position: absolute;
-  inset: -2px;
-  background: linear-gradient(
-    135deg,
-    rgba(139, 92, 246, 0.3) 0%,
-    rgba(34, 211, 238, 0.3) 100%
-  );
-  border-radius: inherit;
-  opacity: 0;
-  transition: opacity var(--transition-base);
-  z-index: -1;
-  filter: blur(8px);
-}
-
-.input-glow:focus-within::before {
-  opacity: 1;
-}
-
-/* ============================================
-   Topic Chip Styles
-   ============================================ */
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.75rem;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.8);
-  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
-  cursor: pointer;
-}
-
-.chip:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.15);
-  transform: translateY(-2px);
-}
-
-.chip:active {
-  transform: translateY(0);
-}
-
-/* ============================================
-   Text Utilities
-   ============================================ */
-
-.text-shadow-lg {
-  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-}
-
-.text-shadow-glow {
-  text-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
-}
-
 /* ============================================
    Skeleton Loading
    ============================================ */
@@ -640,3 +571,9 @@ pre {
   animation: shimmer 1.5s ease-in-out infinite;
   border-radius: 0.5rem;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}

apps/web/src/app/page.tsx

@@ -484,9 +484,9 @@ export default function HomePage() {
       <nav className="relative z-50 flex items-center justify-between px-6 lg:px-12 py-5 border-b border-white/[0.06]">
         <div className="flex items-center gap-3">
           <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center font-black text-lg shadow-lg shadow-primary-500/30 transition-transform hover:scale-105">
-            V
+            U
           </div>
-          <span className="font-bold text-xl tracking-tight bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">Video2Learn</span>
+          <span className="font-bold text-xl tracking-tight bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">UVAI.io</span>
         </div>
 
         {/* Desktop Navigation */}
@@ -582,7 +582,7 @@ export default function HomePage() {
                   type="submit"
                   disabled={isAnalyzing}
                   className={clsx(
-                    'px-8 py-4 rounded-xl font-bold text-lg',
+                    'group px-8 py-4 rounded-xl font-bold text-lg',
                     'bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 bg-[length:200%_100%]',
                     'shadow-lg shadow-primary-500/30',
                     'hover:shadow-xl hover:shadow-primary-500/40',
@@ -613,13 +613,19 @@ export default function HomePage() {
           <div className="mb-16">
             <SuggestedPrompts
               onSelectTopic={(query) => {
-                setVideoUrl(`https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`);
+                const searchUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`;
+                if (typeof window !== 'undefined') {
+                  window.open(searchUrl, '_blank', 'noopener,noreferrer');
+                }
               }}
             />
           </div>
 
           {/* Video Preview Card */}
           <div className="max-w-lg mx-auto mb-16">
+            <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">
+              EXAMPLE OUTPUT PREVIEW
+            </p>
             <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" />
@@ -628,14 +634,7 @@ export default function HomePage() {
                 {/* 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 cursor-pointer">
-                      <span className="text-2xl ml-1">▶</span>
-                    </div>
-                  </div>
+                  <div className="text-6xl opacity-50 transition-opacity">🎬</div>
 
                   {/* Video info overlay */}
                   <div className="absolute bottom-4 left-4 right-4">
@@ -891,9 +890,9 @@ console.log(result.deployedUrl);
             <div className="col-span-2 md:col-span-1">
               <div className="flex items-center gap-3 mb-4">
                 <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center font-bold shadow-lg shadow-primary-500/25">
-                  V
+                  U
                 </div>
-                <span className="font-bold text-lg">Video2Learn</span>
+                <span className="font-bold text-lg">UVAI.io</span>
               </div>
               <p className="text-white/40 text-sm leading-relaxed mb-4">
                 Transform any video into interactive learning experiences with AI.
@@ -973,7 +972,7 @@ console.log(result.deployedUrl);
           {/* Footer Bottom */}
           <div className="pt-8 border-t border-white/[0.05] flex flex-col md:flex-row justify-between items-center gap-4">
             <p className="text-white/30 text-sm">
-              © 2026 Video2Learn. Built with AI by <span className="text-primary-400">Aaron Wade</span>
+              © 2026 UVAI.io. Built with AI by <span className="text-primary-400">Aaron Wade</span>
             </p>
             <div className="flex items-center gap-2 text-white/30 text-sm">
               <span className="relative flex h-2 w-2">

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

@@ -64,13 +64,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         'bg-gradient-to-r from-red-500 via-red-600 to-red-500 bg-[length:200%_100%]',
         'text-white shadow-lg shadow-red-500/30',
         'hover:shadow-xl hover:shadow-red-500/40 hover:-translate-y-0.5',
+        'hover:bg-[position:100%_0]',
         'active:translate-y-0',
         'transition-all duration-300'
       ),
       success: clsx(
         'bg-gradient-to-r from-green-500 via-green-600 to-green-500 bg-[length:200%_100%]',
         'text-white shadow-lg shadow-green-500/30',
         'hover:shadow-xl hover:shadow-green-500/40 hover:-translate-y-0.5',
+        'hover:bg-[position:100%_0]',
         'active:translate-y-0',
         'transition-all duration-300'
       ),

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

@@ -63,6 +63,7 @@ const TopicChip = forwardRef<HTMLButtonElement, TopicChipProps>(
       <button
         ref={ref}
         onClick={() => onSelect?.(topic.query)}
+        aria-label={`Search for ${topic.label} videos`}
         className={clsx(
           'group inline-flex items-center gap-2.5 px-4 py-2.5',
           'rounded-xl',
@@ -76,6 +77,7 @@ const TopicChip = forwardRef<HTMLButtonElement, TopicChipProps>(
           'hover:border-white/20',
           'active:scale-100',
           'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+          'motion-reduce:transition-none motion-reduce:hover:scale-100',
           className
         )}
         {...props}
@@ -113,9 +115,13 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
         className={clsx(
           'w-full max-w-2xl mx-auto',
           'animate-fade-in-up',
+          'motion-reduce:animate-none motion-reduce:opacity-100',
           className
         )}
-        style={{ animationDelay: '200ms', opacity: 0 }}
+        style={{ 
+          animationDelay: '200ms',
+          opacity: 0 
+        }}
         {...props}
       >
         <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">
@@ -132,7 +138,7 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
                 animationFillMode: 'forwards',
                 opacity: 0
               }}
-              className="animate-fade-in-up"
+              className="animate-fade-in-up motion-reduce:animate-none motion-reduce:opacity-100"
             />
           ))}
         </div>