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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user