Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cb8bf5
Initial plan
Copilot Jan 28, 2026
c77ffa4
fix: Address PR review comments - accessibility, performance, and UX …
Copilot Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 10 additions & 80 deletions apps/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
59 changes: 36 additions & 23 deletions apps/web/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions apps/web/src/components/ui/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
'bg-gradient-to-r from-red-500 via-red-600 to-red-500 bg-[length:200%_100%]',
'text-white shadow-lg shadow-red-500/30',
'hover:shadow-xl hover:shadow-red-500/40 hover:-translate-y-0.5',
'hover:bg-[position:100%_0]',
'active:translate-y-0',
'transition-all duration-300'
),
success: clsx(
'bg-gradient-to-r from-green-500 via-green-600 to-green-500 bg-[length:200%_100%]',
'text-white shadow-lg shadow-green-500/30',
'hover:shadow-xl hover:shadow-green-500/40 hover:-translate-y-0.5',
'hover:bg-[position:100%_0]',
'active:translate-y-0',
'transition-all duration-300'
),
Expand Down
12 changes: 9 additions & 3 deletions apps/web/src/components/ui/SuggestedPrompts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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">
Expand All @@ -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"
/>
))}
Expand Down