From 5818f1388b8167b4867942d1ab5e940854dc721d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:33:41 +0000
Subject: [PATCH 1/5] Initial plan


From e53e4daa203db0d6ec43770788760a01fc974eae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:37:15 +0000
Subject: [PATCH 2/5] Fix accessibility, functionality and CSS issues from PR
 review

- Add aria-labels to TopicChip buttons for screen reader support
- Add consistent hover:bg-[position:100%_0] to Button danger/success variants
- Fix SuggestedPrompts to open YouTube search in new tab
- Add "Example Preview" label to video preview card and remove cursor-pointer
- Fix navigation Link group-hover by adding inline-flex items-center gap-2
- Rename duplicate shimmer animation to skeleton-shimmer
- Remove unused CSS utility classes (.input-glow, .chip, .text-shadow-*)
- Add prefers-reduced-motion support with motion-reduce classes
- Use CSS custom properties (--animation-delay) for animation delays

Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com>
---
 apps/web/src/app/globals.css                  | 82 +++----------------
 apps/web/src/app/page.tsx                     | 18 ++--
 apps/web/src/components/ui/Button.tsx         |  2 +
 .../src/components/ui/SuggestedPrompts.tsx    | 26 ++++--
 4 files changed, 44 insertions(+), 84 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index ea4c2b23d..b6e191e6c 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -557,76 +557,7 @@ pre {
 }
 
 /* ============================================
-   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
+   Skeleton Loading (Used by loading states)
    ============================================ */
 
 .skeleton {
@@ -637,6 +568,15 @@ pre {
     rgba(255, 255, 255, 0.03) 100%
   );
   background-size: 200% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
   border-radius: 0.5rem;
 }
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 6d86e1ff7..c5d28f2a7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -502,10 +502,10 @@ export default function HomePage() {
           </Link>
           <Link
             href="/dashboard"
-            className="btn btn-primary px-5 py-2.5 group"
+            className="btn btn-primary px-5 py-2.5 group inline-flex items-center gap-2"
           >
             Get Started
-            <span className="ml-1 transition-transform group-hover:translate-x-1">→</span>
+            <span className="transition-transform group-hover:translate-x-1">→</span>
           </Link>
         </div>
 
@@ -613,14 +613,22 @@ 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 */}
+          {/* Video Preview Card - Visual Example Only */}
           <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>
+              
               {/* 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" />
 
@@ -632,7 +640,7 @@ export default function HomePage() {
 
                   {/* 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">
+                    <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>
                   </div>
diff --git a/apps/web/src/components/ui/Button.tsx b/apps/web/src/components/ui/Button.tsx
index 9bc0ca9d1..1c3a60174 100644
--- a/apps/web/src/components/ui/Button.tsx
+++ b/apps/web/src/components/ui/Button.tsx
@@ -64,6 +64,7 @@ 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'
       ),
@@ -71,6 +72,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         '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'
       ),
diff --git a/apps/web/src/components/ui/SuggestedPrompts.tsx b/apps/web/src/components/ui/SuggestedPrompts.tsx
index e20d3c606..41c3dc644 100644
--- a/apps/web/src/components/ui/SuggestedPrompts.tsx
+++ b/apps/web/src/components/ui/SuggestedPrompts.tsx
@@ -58,11 +58,12 @@ export interface TopicChipProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 const TopicChip = forwardRef<HTMLButtonElement, TopicChipProps>(
-  ({ topic, onSelect, className, ...props }, ref) => {
+  ({ topic, onSelect, className, style, ...props }, ref) => {
     return (
       <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,8 +77,10 @@ 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:transform-none',
           className
         )}
+        style={style}
         {...props}
       >
         <span className={clsx(
@@ -89,7 +92,7 @@ const TopicChip = forwardRef<HTMLButtonElement, TopicChipProps>(
         <span className={clsx(
           'text-sm font-medium',
           topic.textColor,
-          'group-hover:text-white transition-colors'
+          'group-hover:text-white transition-colors motion-reduce:transition-none'
         )}>
           {topic.label}
         </span>
@@ -106,16 +109,22 @@ export interface SuggestedPromptsProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
-  ({ onSelectTopic, title = 'TRY A SUGGESTED TOPIC:', className, ...props }, ref) => {
+  ({ onSelectTopic, title = 'TRY A SUGGESTED TOPIC:', className, style, ...props }, ref) => {
     return (
       <div
         ref={ref}
         className={clsx(
           'w-full max-w-2xl mx-auto',
-          'animate-fade-in-up',
+          'animate-fade-in-up motion-reduce:animate-none',
           className
         )}
-        style={{ animationDelay: '200ms', opacity: 0 }}
+        style={{
+          ...style,
+          '--animation-delay': '200ms',
+          animationDelay: 'var(--animation-delay)',
+          opacity: 0,
+          animationFillMode: 'forwards'
+        } as React.CSSProperties}
         {...props}
       >
         <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">
@@ -128,11 +137,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"
+              } as React.CSSProperties}
+              className="animate-fade-in-up motion-reduce:animate-none motion-reduce:opacity-100"
             />
           ))}
         </div>

From 0e2674dfd463df7774e8f4883f73200487054756 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:38:06 +0000
Subject: [PATCH 3/5] Revert branding from Video2Learn to UVAI.io for
 consistency

The rebrand to "Video2Learn" was incomplete - only the homepage was changed
while all other pages (dashboard, playground), metadata, and API still use
UVAI.io. Reverting to maintain consistent branding across the application.

Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com>
---
 apps/web/src/app/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index c5d28f2a7..3fdcb554a 100644
--- a/apps/web/src/app/page.tsx
+++ b/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 */}
@@ -899,9 +899,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.
@@ -981,7 +981,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">

From 4560b2b2a5647689b04dc4870d0a9fa8f668636a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:40:35 +0000
Subject: [PATCH 4/5] Simplify animation delays and remove unused CSS

- Remove CSS custom property wrapper for animation delays (use direct values)
- Remove unused .animate-shimmer class that was never used in components
- Simplify inline style objects in SuggestedPrompts

Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com>
---
 apps/web/src/app/globals.css                    | 11 -----------
 apps/web/src/components/ui/SuggestedPrompts.tsx | 10 ++++------
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index b6e191e6c..83ecac012 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -269,17 +269,6 @@ pre {
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
-.animate-shimmer {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.1) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2s linear infinite;
-}
-
 .animate-gradient {
   background-size: 200% 200%;
   animation: gradient-shift 8s ease infinite;
diff --git a/apps/web/src/components/ui/SuggestedPrompts.tsx b/apps/web/src/components/ui/SuggestedPrompts.tsx
index 41c3dc644..936e4dbe3 100644
--- a/apps/web/src/components/ui/SuggestedPrompts.tsx
+++ b/apps/web/src/components/ui/SuggestedPrompts.tsx
@@ -120,11 +120,10 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
         )}
         style={{
           ...style,
-          '--animation-delay': '200ms',
-          animationDelay: 'var(--animation-delay)',
+          animationDelay: '200ms',
           opacity: 0,
           animationFillMode: 'forwards'
-        } as React.CSSProperties}
+        }}
         {...props}
       >
         <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">
@@ -137,11 +136,10 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
               topic={topic}
               onSelect={onSelectTopic}
               style={{
-                '--animation-delay': `${300 + index * 100}ms`,
-                animationDelay: 'var(--animation-delay)',
+                animationDelay: `${300 + index * 100}ms`,
                 animationFillMode: 'forwards',
                 opacity: 0
-              } as React.CSSProperties}
+              }}
               className="animate-fade-in-up motion-reduce:animate-none motion-reduce:opacity-100"
             />
           ))}

From 6a19127cdc17987885fb490998a198d06ceefd7d Mon Sep 17 00:00:00 2001
From: Hayden <154503486+groupthinking@users.noreply.github.com>
Date: Wed, 4 Feb 2026 23:55:15 -0600
Subject: [PATCH 5/5] Update apps/web/src/components/ui/SuggestedPrompts.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 apps/web/src/components/ui/SuggestedPrompts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/SuggestedPrompts.tsx b/apps/web/src/components/ui/SuggestedPrompts.tsx
index 936e4dbe3..efe1e7414 100644
--- a/apps/web/src/components/ui/SuggestedPrompts.tsx
+++ b/apps/web/src/components/ui/SuggestedPrompts.tsx
@@ -115,7 +115,7 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
         ref={ref}
         className={clsx(
           'w-full max-w-2xl mx-auto',
-          'animate-fade-in-up motion-reduce:animate-none',
+          'animate-fade-in-up motion-reduce:animate-none motion-reduce:opacity-100',
           className
         )}
         style={{