From 093079ec07f9e7f51553d26aaea129b7db91be78 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Jan 2026 18:11:49 +0000
Subject: [PATCH 01/11] Polish UI design with enhanced visual components

- Add SuggestedPrompts component with topic chips (Photosynthesis, Fermi
  Paradox, French Revolution, How Engines Work, Ancient Greece)
- Update homepage hero section with new "VIDEO TO LEARNING APP" typography
- Enhance Button component with improved gradients and hover states
- Improve Card component with better hover interactions and glow effects
- Polish Input component with enhanced focus and hover states
- Add new CSS utilities: input-glow, chip styles, skeleton loading
- Improve main CTA input with glow effect on hover
- Add video preview card placeholder
- Update navigation with better branding and hover animations

https://claude.ai/code/session_014pLJQUfgLbwFbKDBcYJSyL
---
 apps/web/src/app/globals.css                  |  96 +++++++++++-
 apps/web/src/app/page.tsx                     | 136 +++++++++++-----
 apps/web/src/components/ui/Button.tsx         |  42 ++---
 apps/web/src/components/ui/Card.tsx           |  25 +--
 apps/web/src/components/ui/Input.tsx          |  14 +-
 .../src/components/ui/SuggestedPrompts.tsx    | 146 ++++++++++++++++++
 apps/web/src/components/ui/index.ts           |   3 +
 7 files changed, 388 insertions(+), 74 deletions(-)
 create mode 100644 apps/web/src/components/ui/SuggestedPrompts.tsx

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 41199fbc9..6715d1062 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -379,12 +379,17 @@ pre {
     rgb(var(--color-primary-dark)) 100%
   );
   color: white;
+  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
 }
 
 .btn-primary:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-  box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px -8px rgba(139, 92, 246, 0.5);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.4);
 }
 
 .btn-secondary {
@@ -550,3 +555,88 @@ pre {
     radial-gradient(at 0% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%),
     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: all 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 {
+  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: shimmer 1.5s ease-in-out infinite;
+  border-radius: 0.5rem;
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 144f12289..ebdbe0766 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { useState, useEffect, useRef } from 'react';
 import { clsx } from 'clsx';
+import { SuggestedPrompts } from '@/components/ui';
 
 // ============================================
 // Animated Counter Component
@@ -310,29 +311,29 @@ export default function HomePage() {
       <FloatingOrbs />
 
       {/* Navigation */}
-      <nav className="relative z-50 flex items-center justify-between px-6 lg:px-12 py-4 border-b border-white/[0.05]">
+      <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-10 h-10 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/25">
-            U
+          <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
           </div>
-          <span className="font-bold text-xl tracking-tight">UVAI.io</span>
+          <span className="font-bold text-xl tracking-tight bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">Video2Learn</span>
         </div>
         <div className="hidden md:flex items-center gap-8">
-          <Link href="/dashboard" className="text-white/60 hover:text-white transition-colors font-medium">
+          <Link href="/dashboard" className="text-white/50 hover:text-white transition-all duration-200 font-medium hover:-translate-y-0.5">
             Dashboard
           </Link>
-          <Link href="/playground" className="text-white/60 hover:text-white transition-colors font-medium">
+          <Link href="/playground" className="text-white/50 hover:text-white transition-all duration-200 font-medium hover:-translate-y-0.5">
             API
           </Link>
-          <Link href="/docs" className="text-white/60 hover:text-white transition-colors font-medium">
+          <Link href="/docs" className="text-white/50 hover:text-white transition-all duration-200 font-medium hover:-translate-y-0.5">
             Docs
           </Link>
           <Link
             href="/dashboard"
-            className="btn btn-primary"
+            className="btn btn-primary px-5 py-2.5"
           >
             Get Started
-            <span className="ml-1">→</span>
+            <span className="ml-1 transition-transform group-hover:translate-x-1">→</span>
           </Link>
         </div>
       </nav>
@@ -356,48 +357,107 @@ export default function HomePage() {
           </div>
 
           {/* Main Headline */}
-          <h1 className="text-5xl md:text-7xl lg:text-8xl font-black leading-[0.95] mb-8 tracking-tight">
-            <span className="block text-white">
-              Transform Video into
+          <h1 className="text-5xl md:text-7xl lg:text-8xl font-black leading-[0.9] mb-6 tracking-tighter">
+            <span className="block text-white drop-shadow-lg">
+              VIDEO TO
             </span>
-            <span className="block bg-gradient-to-r from-primary-400 via-accent-400 to-primary-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
-              Actionable Intelligence
+            <span className="block text-white drop-shadow-lg">
+              LEARNING
+            </span>
+            <span className="block bg-gradient-to-r from-primary-400 via-accent-400 to-primary-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient drop-shadow-lg">
+              APP
             </span>
           </h1>
 
           {/* Subheadline */}
-          <p className="text-xl md:text-2xl text-white/50 max-w-2xl mx-auto mb-12 leading-relaxed font-light">
-            Stop watching. Start acting. UVAI extracts insights, generates action items,
-            and deploys live applications from any video in{' '}
-            <strong className="text-accent-400 font-semibold">2.3 seconds</strong>.
+          <p className="text-lg md:text-xl text-white/60 max-w-xl mx-auto mb-10 leading-relaxed">
+            Generate interactive learning apps from
+            <br />
+            <span className="text-white/80">YouTube content</span>
+          </p>
+
+          {/* Attribution */}
+          <p className="text-sm text-white/40 mb-10">
+            An experiment by <span className="text-primary-400 hover:text-primary-300 transition-colors cursor-pointer">Aaron Wade</span>
           </p>
 
           {/* Main CTA Input */}
-          <form onSubmit={handleAnalyze} className="max-w-2xl mx-auto mb-16">
-            <div className="flex gap-3 p-2 rounded-2xl bg-white/[0.03] border border-white/[0.08] backdrop-blur-xl shadow-2xl shadow-primary-500/5">
-              <input
-                type="text"
-                value={videoUrl}
-                onChange={(e) => setVideoUrl(e.target.value)}
-                placeholder="Paste any YouTube URL or video link..."
-                className="flex-1 px-5 py-4 bg-transparent text-white placeholder:text-white/30 focus:outline-none text-lg"
-              />
-              <button
-                type="submit"
-                className="px-8 py-4 rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 font-bold text-lg hover:shadow-xl hover:shadow-primary-500/25 transition-all hover:-translate-y-0.5 flex items-center gap-2"
-              >
-                Analyze Now
-                <span className="text-xl">→</span>
-              </button>
+          <form onSubmit={handleAnalyze} className="max-w-2xl mx-auto mb-8">
+            <div className="relative group">
+              {/* Glow effect */}
+              <div className="absolute -inset-1 bg-gradient-to-r from-primary-500/20 via-accent-500/20 to-primary-500/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+              <div className="relative flex gap-3 p-2.5 rounded-2xl bg-surface-900/80 border border-white/[0.1] backdrop-blur-xl shadow-2xl shadow-primary-500/10 transition-all duration-300 group-hover:border-primary-500/30">
+                <input
+                  type="text"
+                  value={videoUrl}
+                  onChange={(e) => setVideoUrl(e.target.value)}
+                  placeholder="Paste a URL from YouTube..."
+                  className="flex-1 px-6 py-4 bg-transparent text-white text-lg placeholder:text-white/40 focus:outline-none"
+                />
+                <button
+                  type="submit"
+                  className={clsx(
+                    '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',
+                    'hover:-translate-y-0.5 active:translate-y-0',
+                    'transition-all duration-300',
+                    'flex items-center gap-2',
+                    'animate-gradient'
+                  )}
+                >
+                  Generate app
+                  <span className="text-xl transition-transform group-hover:translate-x-1">→</span>
+                </button>
+              </div>
             </div>
           </form>
 
+          {/* Suggested Topics */}
+          <div className="mb-16">
+            <SuggestedPrompts
+              onSelectTopic={(query) => {
+                setVideoUrl(`https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`);
+              }}
+            />
+          </div>
+
+          {/* Video Preview Card */}
+          <div className="max-w-lg mx-auto mb-16">
+            <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 hover:scale-110 transition-transform cursor-pointer">
+                      <span className="text-2xl ml-1">▶</span>
+                    </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>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           {/* Stats */}
-          <div className="flex justify-center gap-16 md:gap-24">
+          <div className="flex justify-center gap-12 md:gap-20">
             <AnimatedCounter value="50K" suffix="+" label="Videos Processed" />
-            <AnimatedCounter value="2.3" suffix="s" label="Avg Processing Time" />
-            <AnimatedCounter value="7" label="AI Brains Connected" />
-            <AnimatedCounter value="99.9" suffix="%" label="Uptime SLA" />
+            <AnimatedCounter value="2.3" suffix="s" label="Avg Processing" />
+            <AnimatedCounter value="7" label="AI Models" />
           </div>
         </div>
       </section>
diff --git a/apps/web/src/components/ui/Button.tsx b/apps/web/src/components/ui/Button.tsx
index 1f4e15112..9bc0ca9d1 100644
--- a/apps/web/src/components/ui/Button.tsx
+++ b/apps/web/src/components/ui/Button.tsx
@@ -39,34 +39,40 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const variants = {
       primary: clsx(
-        'bg-gradient-to-r from-primary-500 to-primary-600',
-        'text-white shadow-lg shadow-primary-500/25',
-        'hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5',
-        'active:translate-y-0'
+        'bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 bg-[length:200%_100%]',
+        'text-white shadow-lg shadow-primary-500/30',
+        'hover:shadow-xl hover:shadow-primary-500/40 hover:-translate-y-0.5',
+        'hover:bg-[position:100%_0]',
+        'active:translate-y-0 active:shadow-lg',
+        'transition-all duration-300'
       ),
       secondary: clsx(
-        'bg-white/5 border border-white/10',
-        'text-white',
-        'hover:bg-white/10 hover:border-white/20',
-        'active:bg-white/5'
+        'bg-white/[0.04] border border-white/[0.1]',
+        'text-white/90',
+        'hover:bg-white/[0.08] hover:border-white/[0.2] hover:text-white',
+        'active:bg-white/[0.05]',
+        'transition-all duration-200'
       ),
       ghost: clsx(
         'bg-transparent',
         'text-white/70',
-        'hover:bg-white/5 hover:text-white',
-        'active:bg-white/10'
+        'hover:bg-white/[0.06] hover:text-white',
+        'active:bg-white/[0.08]',
+        'transition-all duration-200'
       ),
       danger: clsx(
-        'bg-gradient-to-r from-red-500 to-red-600',
-        'text-white shadow-lg shadow-red-500/25',
-        'hover:shadow-xl hover:shadow-red-500/30 hover:-translate-y-0.5',
-        'active:translate-y-0'
+        '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',
+        'active:translate-y-0',
+        'transition-all duration-300'
       ),
       success: clsx(
-        'bg-gradient-to-r from-green-500 to-green-600',
-        'text-white shadow-lg shadow-green-500/25',
-        'hover:shadow-xl hover:shadow-green-500/30 hover:-translate-y-0.5',
-        'active:translate-y-0'
+        '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',
+        'active:translate-y-0',
+        'transition-all duration-300'
       ),
     };
 
diff --git a/apps/web/src/components/ui/Card.tsx b/apps/web/src/components/ui/Card.tsx
index 66df5bcba..b4ab18f75 100644
--- a/apps/web/src/components/ui/Card.tsx
+++ b/apps/web/src/components/ui/Card.tsx
@@ -30,24 +30,28 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
 
     const variants = {
       default: clsx(
-        'bg-surface-900/50',
+        'bg-surface-900/60',
         'border border-white/[0.08]',
-        'backdrop-blur-xl'
+        'backdrop-blur-xl',
+        'hover:bg-surface-900/70'
       ),
       glass: clsx(
         'bg-white/[0.03]',
         'border border-white/[0.08]',
-        'backdrop-blur-2xl'
+        'backdrop-blur-2xl',
+        'hover:bg-white/[0.05]'
       ),
       gradient: clsx(
-        'bg-gradient-to-br from-white/[0.08] to-white/[0.02]',
+        'bg-gradient-to-br from-white/[0.06] to-white/[0.02]',
         'border border-white/[0.08]',
-        'backdrop-blur-xl'
+        'backdrop-blur-xl',
+        'hover:from-white/[0.08] hover:to-white/[0.03]'
       ),
       elevated: clsx(
         'bg-surface-900',
         'border border-white/[0.08]',
-        'shadow-xl shadow-black/20'
+        'shadow-xl shadow-black/25',
+        'hover:shadow-2xl hover:shadow-black/30'
       ),
     };
 
@@ -61,10 +65,11 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
     const hoverStyles = hoverable
       ? clsx(
           'cursor-pointer',
-          'hover:border-primary-500/30',
-          'hover:shadow-lg hover:shadow-primary-500/10',
-          'hover:-translate-y-1',
-          'active:translate-y-0'
+          'hover:border-primary-500/40',
+          'hover:shadow-xl hover:shadow-primary-500/15',
+          'hover:-translate-y-1.5',
+          'active:translate-y-0 active:shadow-lg',
+          'will-change-transform'
         )
       : '';
 
diff --git a/apps/web/src/components/ui/Input.tsx b/apps/web/src/components/ui/Input.tsx
index 29eb1b383..8578c7235 100644
--- a/apps/web/src/components/ui/Input.tsx
+++ b/apps/web/src/components/ui/Input.tsx
@@ -44,18 +44,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const variants = {
       default: clsx(
-        'bg-white/[0.03] border border-white/[0.08]',
-        'focus:border-primary-500/50 focus:ring-2 focus:ring-primary-500/20',
+        'bg-surface-900/80 border border-white/[0.1]',
+        'hover:border-white/[0.15] hover:bg-surface-900/90',
+        'focus:border-primary-500/60 focus:ring-2 focus:ring-primary-500/25',
+        'focus:bg-surface-900',
         error && 'border-red-500/50 focus:border-red-500 focus:ring-red-500/20'
       ),
       ghost: clsx(
-        'bg-transparent border-b border-white/[0.08] rounded-none',
+        'bg-transparent border-b-2 border-white/[0.1] rounded-none',
+        'hover:border-white/[0.2]',
         'focus:border-primary-500',
         error && 'border-red-500/50 focus:border-red-500'
       ),
       filled: clsx(
-        'bg-white/[0.08] border border-transparent',
-        'focus:bg-white/[0.05] focus:border-primary-500/50',
+        'bg-white/[0.06] border border-transparent',
+        'hover:bg-white/[0.08]',
+        'focus:bg-white/[0.04] focus:border-primary-500/50 focus:ring-2 focus:ring-primary-500/20',
         error && 'bg-red-500/10 focus:border-red-500'
       ),
     };
diff --git a/apps/web/src/components/ui/SuggestedPrompts.tsx b/apps/web/src/components/ui/SuggestedPrompts.tsx
new file mode 100644
index 000000000..116ff7264
--- /dev/null
+++ b/apps/web/src/components/ui/SuggestedPrompts.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import { clsx } from 'clsx';
+
+// Topic data with icons (using text-based icons for consistency)
+const SUGGESTED_TOPICS = [
+  {
+    id: 'photosynthesis',
+    label: 'Photosynthesis',
+    icon: '🌿',
+    gradient: 'from-green-500/20 to-emerald-500/20',
+    borderColor: 'border-green-500/30',
+    textColor: 'text-green-400',
+    query: 'photosynthesis explained'
+  },
+  {
+    id: 'fermi-paradox',
+    label: 'Fermi Paradox',
+    icon: '👽',
+    gradient: 'from-purple-500/20 to-violet-500/20',
+    borderColor: 'border-purple-500/30',
+    textColor: 'text-purple-400',
+    query: 'fermi paradox'
+  },
+  {
+    id: 'french-revolution',
+    label: 'French Revolution',
+    icon: '🏛️',
+    gradient: 'from-red-500/20 to-orange-500/20',
+    borderColor: 'border-red-500/30',
+    textColor: 'text-red-400',
+    query: 'french revolution history'
+  },
+  {
+    id: 'engines',
+    label: 'How Engines Work',
+    icon: '⚙️',
+    gradient: 'from-blue-500/20 to-cyan-500/20',
+    borderColor: 'border-blue-500/30',
+    textColor: 'text-blue-400',
+    query: 'how engines work'
+  },
+  {
+    id: 'ancient-greece',
+    label: 'Ancient Greece',
+    icon: 'Λ',
+    gradient: 'from-amber-500/20 to-yellow-500/20',
+    borderColor: 'border-amber-500/30',
+    textColor: 'text-amber-400',
+    query: 'ancient greek philosophy'
+  },
+];
+
+export interface TopicChipProps extends HTMLAttributes<HTMLButtonElement> {
+  topic: typeof SUGGESTED_TOPICS[0];
+  onSelect?: (query: string) => void;
+}
+
+const TopicChip = forwardRef<HTMLButtonElement, TopicChipProps>(
+  ({ topic, onSelect, className, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        onClick={() => onSelect?.(topic.query)}
+        className={clsx(
+          'group inline-flex items-center gap-2.5 px-4 py-2.5',
+          'rounded-xl',
+          'bg-gradient-to-r',
+          topic.gradient,
+          'border',
+          topic.borderColor,
+          'backdrop-blur-sm',
+          'transition-all duration-300 ease-out',
+          'hover:scale-105 hover:shadow-lg',
+          'hover:border-white/20',
+          'active:scale-100',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+          className
+        )}
+        {...props}
+      >
+        <span className={clsx(
+          'text-lg font-medium',
+          topic.id === 'ancient-greece' ? 'font-serif' : ''
+        )}>
+          {topic.icon}
+        </span>
+        <span className={clsx(
+          'text-sm font-medium',
+          topic.textColor,
+          'group-hover:text-white transition-colors'
+        )}>
+          {topic.label}
+        </span>
+      </button>
+    );
+  }
+);
+
+TopicChip.displayName = 'TopicChip';
+
+export interface SuggestedPromptsProps extends HTMLAttributes<HTMLDivElement> {
+  onSelectTopic?: (query: string) => void;
+  title?: string;
+}
+
+const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
+  ({ onSelectTopic, title = 'TRY A SUGGESTED TOPIC:', className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          'w-full max-w-2xl mx-auto',
+          'animate-fade-in-up',
+          className
+        )}
+        style={{ animationDelay: '200ms', animationFillMode: 'forwards', opacity: 0 }}
+        {...props}
+      >
+        <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">
+          {title}
+        </p>
+        <div className="flex flex-wrap justify-center gap-3">
+          {SUGGESTED_TOPICS.map((topic, index) => (
+            <TopicChip
+              key={topic.id}
+              topic={topic}
+              onSelect={onSelectTopic}
+              style={{
+                animationDelay: `${300 + index * 100}ms`,
+                animationFillMode: 'forwards',
+                opacity: 0
+              }}
+              className="animate-fade-in-up"
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+);
+
+SuggestedPrompts.displayName = 'SuggestedPrompts';
+
+export { SuggestedPrompts, TopicChip, SUGGESTED_TOPICS };
diff --git a/apps/web/src/components/ui/index.ts b/apps/web/src/components/ui/index.ts
index 00b991f1f..837b1efd5 100644
--- a/apps/web/src/components/ui/index.ts
+++ b/apps/web/src/components/ui/index.ts
@@ -12,3 +12,6 @@ export type { BadgeProps } from './Badge';
 
 export { Input } from './Input';
 export type { InputProps } from './Input';
+
+export { SuggestedPrompts, TopicChip, SUGGESTED_TOPICS } from './SuggestedPrompts';
+export type { SuggestedPromptsProps, TopicChipProps } from './SuggestedPrompts';

From bbcf9f15366954869c618831796627ad950e3c23 Mon Sep 17 00:00:00 2001
From: Hayden <154503486+groupthinking@users.noreply.github.com>
Date: Tue, 27 Jan 2026 12:46:40 -0600
Subject: [PATCH 02/11] Update apps/web/src/app/page.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 apps/web/src/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index ebdbe0766..577bef36f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -330,7 +330,7 @@ export default function HomePage() {
           </Link>
           <Link
             href="/dashboard"
-            className="btn btn-primary px-5 py-2.5"
+            className="btn btn-primary px-5 py-2.5 group"
           >
             Get Started
             <span className="ml-1 transition-transform group-hover:translate-x-1">→</span>

From 0fc6d87fd05f63393c76aa0dd437a387180881c9 Mon Sep 17 00:00:00 2001
From: Hayden <154503486+groupthinking@users.noreply.github.com>
Date: Tue, 27 Jan 2026 14:41:07 -0600
Subject: [PATCH 03/11] Update apps/web/src/app/globals.css

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 apps/web/src/app/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 6715d1062..ea4c2b23d 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -599,7 +599,7 @@ pre {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.8);
-  transition: all var(--transition-base);
+  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
   cursor: pointer;
 }
 

From ae94151a12067d1f6aca56aac8b4992c16beba26 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 27 Jan 2026 21:37:33 +0000
Subject: [PATCH 04/11] Add mobile navigation, scroll-to-top, loading states,
 and footer polish

- Add mobile hamburger menu with slide-out navigation panel
- Add scroll-to-top floating button (appears after scrolling 500px)
- Add LoadingSpinner component for form submission states
- Show loading state on "Generate app" button while processing
- Polish footer with 4-column layout (Brand, Product, Resources, Company)
- Add social icons (GitHub, Twitter, Discord) with proper SVG icons
- Add system status indicator in footer
- Improve overall mobile responsiveness

https://claude.ai/code/session_014pLJQUfgLbwFbKDBcYJSyL
---
 apps/web/src/app/page.tsx | 311 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 295 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 577bef36f..6d86e1ff7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -273,6 +273,165 @@ function TestimonialCard({
   );
 }
 
+// ============================================
+// Loading Spinner Component
+// ============================================
+function LoadingSpinner({ size = 20 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className="animate-spin"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeOpacity="0.25"
+      />
+      <path
+        d="M12 2a10 10 0 0 1 10 10"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+// ============================================
+// Mobile Menu Component
+// ============================================
+function MobileMenu({
+  isOpen,
+  onClose
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={clsx(
+          'fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] transition-opacity duration-300 md:hidden',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={onClose}
+      />
+
+      {/* Menu Panel */}
+      <div
+        className={clsx(
+          'fixed top-0 right-0 h-full w-72 bg-surface-900/95 backdrop-blur-xl border-l border-white/[0.08] z-[101] transition-transform duration-300 ease-out md:hidden',
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        )}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute top-5 right-5 w-10 h-10 flex items-center justify-center rounded-lg bg-white/[0.05] hover:bg-white/[0.1] transition-colors"
+          aria-label="Close menu"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+
+        {/* Menu Links */}
+        <nav className="flex flex-col pt-20 px-6">
+          <Link
+            href="/dashboard"
+            className="py-4 text-lg font-medium text-white/70 hover:text-white border-b border-white/[0.05] transition-colors"
+            onClick={onClose}
+          >
+            Dashboard
+          </Link>
+          <Link
+            href="/playground"
+            className="py-4 text-lg font-medium text-white/70 hover:text-white border-b border-white/[0.05] transition-colors"
+            onClick={onClose}
+          >
+            API
+          </Link>
+          <Link
+            href="/docs"
+            className="py-4 text-lg font-medium text-white/70 hover:text-white border-b border-white/[0.05] transition-colors"
+            onClick={onClose}
+          >
+            Docs
+          </Link>
+
+          {/* CTA Button */}
+          <Link
+            href="/dashboard"
+            className="mt-8 btn btn-primary text-center"
+            onClick={onClose}
+          >
+            Get Started
+            <span className="ml-1">→</span>
+          </Link>
+        </nav>
+      </div>
+    </>
+  );
+}
+
+// ============================================
+// Scroll to Top Button
+// ============================================
+function ScrollToTopButton() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 500);
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={clsx(
+        'fixed bottom-8 right-8 z-50 w-12 h-12 rounded-full',
+        'bg-gradient-to-br from-primary-500 to-primary-600',
+        'shadow-lg shadow-primary-500/30',
+        'flex items-center justify-center',
+        'transition-all duration-300',
+        'hover:shadow-xl hover:shadow-primary-500/40 hover:-translate-y-1',
+        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'
+      )}
+      aria-label="Scroll to top"
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+        <path d="M18 15l-6-6-6 6" />
+      </svg>
+    </button>
+  );
+}
+
 // ============================================
 // Floating Orbs Background
 // ============================================
@@ -293,6 +452,8 @@ function FloatingOrbs() {
 export default function HomePage() {
   const [videoUrl, setVideoUrl] = useState('');
   const [isLoaded, setIsLoaded] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
 
   useEffect(() => {
     setIsLoaded(true);
@@ -300,7 +461,10 @@ export default function HomePage() {
 
   const handleAnalyze = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (videoUrl.trim()) {
+    if (videoUrl.trim() && !isAnalyzing) {
+      setIsAnalyzing(true);
+      // Small delay to show loading state before navigation
+      await new Promise(resolve => setTimeout(resolve, 300));
       window.location.href = `/dashboard?video=${encodeURIComponent(videoUrl)}`;
     }
   };
@@ -310,6 +474,12 @@ export default function HomePage() {
       {/* Animated background */}
       <FloatingOrbs />
 
+      {/* Mobile Menu */}
+      <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} />
+
+      {/* Scroll to Top Button */}
+      <ScrollToTopButton />
+
       {/* Navigation */}
       <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">
@@ -318,6 +488,8 @@ export default function HomePage() {
           </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>
         </div>
+
+        {/* Desktop Navigation */}
         <div className="hidden md:flex items-center gap-8">
           <Link href="/dashboard" className="text-white/50 hover:text-white transition-all duration-200 font-medium hover:-translate-y-0.5">
             Dashboard
@@ -336,6 +508,17 @@ export default function HomePage() {
             <span className="ml-1 transition-transform group-hover:translate-x-1">→</span>
           </Link>
         </div>
+
+        {/* Mobile Hamburger Button */}
+        <button
+          onClick={() => setIsMobileMenuOpen(true)}
+          className="md:hidden w-10 h-10 flex items-center justify-center rounded-lg bg-white/[0.05] hover:bg-white/[0.1] transition-colors"
+          aria-label="Open menu"
+        >
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
       </nav>
 
       {/* Hero Section */}
@@ -397,6 +580,7 @@ export default function HomePage() {
                 />
                 <button
                   type="submit"
+                  disabled={isAnalyzing}
                   className={clsx(
                     '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%]',
@@ -405,11 +589,21 @@ export default function HomePage() {
                     'hover:-translate-y-0.5 active:translate-y-0',
                     'transition-all duration-300',
                     'flex items-center gap-2',
-                    'animate-gradient'
+                    'animate-gradient',
+                    'disabled:opacity-80 disabled:cursor-not-allowed disabled:hover:translate-y-0'
                   )}
                 >
-                  Generate app
-                  <span className="text-xl transition-transform group-hover:translate-x-1">→</span>
+                  {isAnalyzing ? (
+                    <>
+                      <LoadingSpinner size={20} />
+                      <span>Processing...</span>
+                    </>
+                  ) : (
+                    <>
+                      Generate app
+                      <span className="text-xl transition-transform group-hover:translate-x-1">→</span>
+                    </>
+                  )}
                 </button>
               </div>
             </div>
@@ -689,20 +883,105 @@ console.log(result.deployedUrl);
       </section>
 
       {/* Footer */}
-      <footer className="relative z-10 border-t border-white/[0.05] px-6 py-12">
-        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
-          <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center font-bold shadow-lg shadow-primary-500/25">
-              U
+      <footer className="relative z-10 border-t border-white/[0.05] px-6 py-16">
+        <div className="max-w-6xl mx-auto">
+          {/* Footer Top */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
+            {/* Brand Column */}
+            <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
+                </div>
+                <span className="font-bold text-lg">Video2Learn</span>
+              </div>
+              <p className="text-white/40 text-sm leading-relaxed mb-4">
+                Transform any video into interactive learning experiences with AI.
+              </p>
+              {/* Social Icons */}
+              <div className="flex gap-3">
+                <a
+                  href="https://github.com/groupthinking/EventRelay"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-9 h-9 rounded-lg bg-white/[0.05] hover:bg-white/[0.1] flex items-center justify-center transition-colors"
+                  aria-label="GitHub"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-white/60 hover:text-white">
+                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                  </svg>
+                </a>
+                <a
+                  href="https://twitter.com/uvai_io"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-9 h-9 rounded-lg bg-white/[0.05] hover:bg-white/[0.1] flex items-center justify-center transition-colors"
+                  aria-label="Twitter"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-white/60 hover:text-white">
+                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                  </svg>
+                </a>
+                <a
+                  href="https://discord.gg/uvai"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-9 h-9 rounded-lg bg-white/[0.05] hover:bg-white/[0.1] flex items-center justify-center transition-colors"
+                  aria-label="Discord"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-white/60 hover:text-white">
+                    <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+
+            {/* Product Column */}
+            <div>
+              <h4 className="font-semibold text-white mb-4">Product</h4>
+              <ul className="space-y-3 text-sm">
+                <li><Link href="/dashboard" className="text-white/40 hover:text-white transition-colors">Dashboard</Link></li>
+                <li><Link href="/playground" className="text-white/40 hover:text-white transition-colors">API Playground</Link></li>
+                <li><Link href="/docs" className="text-white/40 hover:text-white transition-colors">Documentation</Link></li>
+                <li><Link href="/pricing" className="text-white/40 hover:text-white transition-colors">Pricing</Link></li>
+              </ul>
+            </div>
+
+            {/* Resources Column */}
+            <div>
+              <h4 className="font-semibold text-white mb-4">Resources</h4>
+              <ul className="space-y-3 text-sm">
+                <li><Link href="/blog" className="text-white/40 hover:text-white transition-colors">Blog</Link></li>
+                <li><Link href="/changelog" className="text-white/40 hover:text-white transition-colors">Changelog</Link></li>
+                <li><Link href="/support" className="text-white/40 hover:text-white transition-colors">Support</Link></li>
+                <li><Link href="/status" className="text-white/40 hover:text-white transition-colors">Status</Link></li>
+              </ul>
+            </div>
+
+            {/* Company Column */}
+            <div>
+              <h4 className="font-semibold text-white mb-4">Company</h4>
+              <ul className="space-y-3 text-sm">
+                <li><Link href="/about" className="text-white/40 hover:text-white transition-colors">About</Link></li>
+                <li><Link href="/privacy" className="text-white/40 hover:text-white transition-colors">Privacy</Link></li>
+                <li><Link href="/terms" className="text-white/40 hover:text-white transition-colors">Terms</Link></li>
+                <li><a href="mailto:hello@uvai.io" className="text-white/40 hover:text-white transition-colors">Contact</a></li>
+              </ul>
             </div>
-            <span className="font-bold">UVAI.io</span>
-            <span className="text-white/30 text-sm ml-2">© 2026</span>
           </div>
-          <div className="flex gap-8 text-white/40 text-sm">
-            <Link href="/privacy" className="hover:text-white transition-colors">Privacy</Link>
-            <Link href="/terms" className="hover:text-white transition-colors">Terms</Link>
-            <Link href="https://github.com/groupthinking/EventRelay" className="hover:text-white transition-colors">GitHub</Link>
-            <Link href="https://twitter.com/uvai_io" className="hover:text-white transition-colors">Twitter</Link>
+
+          {/* 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>
+            </p>
+            <div className="flex items-center gap-2 text-white/30 text-sm">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-green-400" />
+              </span>
+              All systems operational
+            </div>
           </div>
         </div>
       </footer>

From 83afdd7d2b788fc1df5137381104f70630125a95 Mon Sep 17 00:00:00 2001
From: Hayden <154503486+groupthinking@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:53:48 -0600
Subject: [PATCH 05/11] Update apps/web/src/components/ui/SuggestedPrompts.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@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 116ff7264..4dd73b107 100644
--- a/apps/web/src/components/ui/SuggestedPrompts.tsx
+++ b/apps/web/src/components/ui/SuggestedPrompts.tsx
@@ -82,7 +82,7 @@ const TopicChip = forwardRef<HTMLButtonElement, TopicChipProps>(
       >
         <span className={clsx(
           'text-lg font-medium',
-          topic.id === 'ancient-greece' ? 'font-serif' : ''
+          topic.iconClassName
         )}>
           {topic.icon}
         </span>

From 2b2c7609478dba2ec529149167f2ce786acadea7 Mon Sep 17 00:00:00 2001
From: Hayden <154503486+groupthinking@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:54:02 -0600
Subject: [PATCH 06/11] Update apps/web/src/components/ui/SuggestedPrompts.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@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 4dd73b107..e20d3c606 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>(
           'animate-fade-in-up',
           className
         )}
-        style={{ animationDelay: '200ms', animationFillMode: 'forwards', opacity: 0 }}
+        style={{ animationDelay: '200ms', opacity: 0 }}
         {...props}
       >
         <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">

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 07/11] 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 08/11] 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 09/11] 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 10/11] 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 11/11] 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={{