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


From c77ffa4b095be1f6b6bf856a744f8419d8a34e92 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 28 Jan 2026 19:11:12 +0000
Subject: [PATCH 2/2] fix: Address PR review comments - accessibility,
 performance, and UX improvements

Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com>
---
 apps/web/src/app/globals.css                  | 90 +++----------------
 apps/web/src/app/page.tsx                     | 59 +++++++-----
 apps/web/src/components/ui/Button.tsx         |  2 +
 .../src/components/ui/SuggestedPrompts.tsx    | 12 ++-
 4 files changed, 57 insertions(+), 106 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index ea4c2b23d..5519b5da1 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -557,86 +557,16 @@ pre {
 }
 
 /* ============================================
-   Enhanced Input Styling
+   Accessibility - Reduced Motion
    ============================================ */
 
-.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 {
-  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;
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 6d86e1ff7..aa67fab7e 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-1"
           >
             Get Started
-            <span className="ml-1 transition-transform group-hover:translate-x-1">→</span>
+            <span className="ml-1 transition-transform duration-200 group-hover:translate-x-1">→</span>
           </Link>
         </div>
 
@@ -613,34 +613,47 @@ 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 - Example */}
           <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 className="relative">
+              {/* "Example" Badge */}
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
+                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-xs font-medium text-white/80">
+                  <span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse"></span>
+                  Example Preview
+                </span>
+              </div>
+
+              <div className="relative group">
+                {/* Glow effect */}
+                <div className="absolute -inset-4 bg-gradient-to-r from-primary-500/10 via-accent-500/10 to-primary-500/10 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
+
+                <div className="relative overflow-hidden rounded-2xl border border-white/[0.1] bg-surface-900/80 backdrop-blur-xl shadow-2xl transition-all duration-500 group-hover:border-white/[0.15]">
+                  {/* Video thumbnail placeholder */}
+                  <div className="relative aspect-video bg-gradient-to-br from-surface-800 to-surface-900 flex items-center justify-center">
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                    <div className="text-6xl opacity-50 group-hover:opacity-70 transition-opacity">🎬</div>
+
+                    {/* Play button overlay */}
+                    <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
+                      <div className="w-16 h-16 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center transition-transform">
+                        <span className="text-2xl ml-1">▶</span>
+                      </div>
                     </div>
-                  </div>
 
-                  {/* Video info overlay */}
-                  <div className="absolute bottom-4 left-4 right-4">
-                    <p className="text-sm text-white/70 font-medium">Sample: How to build a startup</p>
-                    <p className="text-xs text-white/40 mt-1">12:34 • Ready to transform</p>
+                    {/* Video info overlay */}
+                    <div className="absolute bottom-4 left-4 right-4">
+                      <p className="text-sm text-white/70 font-medium">Sample: How to build a startup</p>
+                      <p className="text-xs text-white/40 mt-1">12:34 • Ready to transform</p>
+                    </div>
                   </div>
                 </div>
               </div>
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..3c8223758 100644
--- a/apps/web/src/components/ui/SuggestedPrompts.tsx
+++ b/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',
@@ -115,7 +116,11 @@ const SuggestedPrompts = forwardRef<HTMLDivElement, SuggestedPromptsProps>(
           'animate-fade-in-up',
           className
         )}
-        style={{ animationDelay: '200ms', opacity: 0 }}
+        style={{ 
+          '--animation-delay': '200ms',
+          animationDelay: 'var(--animation-delay)',
+          opacity: 0 
+        } as React.CSSProperties}
         {...props}
       >
         <p className="text-xs font-semibold tracking-widest text-white/40 mb-4 text-center">
@@ -128,10 +133,11 @@ 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
-              }}
+              } as React.CSSProperties}
               className="animate-fade-in-up"
             />
           ))}