polish: Priority 2 improvements - smooth scroll, badges, back to top

🎯 Smooth Scroll Behavior:
- Added smooth scroll CSS for seamless navigation
- Scroll indicator now links to #tools section
- Added hover states for scroll indicator
- Accessibility: respects prefers-reduced-motion

🏷️ Tool Badges:
- Added feature badges to each tool card
- Vert: Privacy, Open Source, Free
- Paint: Browser-Based, Free
- Pastel: Open Source, WCAG, Free
- Subtle glassmorphic badge design

⬆️ Back to Top Button:
- Animated button appears after scrolling 300px
- Smooth scroll to top on click
- Hover tooltip with "Back to top" label
- Scale animations on hover/tap
- Progress bar at top showing scroll position
- Gradient progress indicator

 Accessibility:
- Added prefers-reduced-motion support
- Proper ARIA labels
- Keyboard accessible
- Smooth animations respect user preferences

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-07 12:39:14 +01:00
parent c7373430f9
commit 36742949bd
6 changed files with 124 additions and 7 deletions

View File

@@ -10,9 +10,10 @@ interface ToolCardProps {
url: string;
gradient: string;
index: number;
badges?: string[];
}
export default function ToolCard({ title, description, icon, url, gradient, index }: ToolCardProps) {
export default function ToolCard({ title, description, icon, url, gradient, index, badges }: ToolCardProps) {
return (
<motion.a
href={url}
@@ -52,6 +53,20 @@ export default function ToolCard({ title, description, icon, url, gradient, inde
{title}
</h3>
{/* Badges */}
{badges && badges.length > 0 && (
<div className="flex flex-wrap gap-2 mb-3">
{badges.map((badge) => (
<span
key={badge}
className="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400"
>
{badge}
</span>
))}
</div>
)}
{/* Description */}
<p className="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">
{description}