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

@@ -9,6 +9,7 @@ const tools = [
description: 'Privacy-focused file converter that processes images, audio, and documents locally on your device. No file size limits, completely open source.',
url: 'https://vert.kit.pivoine.art',
gradient: 'gradient-green-teal',
badges: ['Privacy', 'Open Source', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -20,6 +21,7 @@ const tools = [
description: 'An advanced image editor running in your browser. Edit photos, create graphics, and more.',
url: 'https://paint.kit.pivoine.art',
gradient: 'gradient-orange-pink',
badges: ['Browser-Based', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
@@ -31,6 +33,7 @@ const tools = [
description: 'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
url: 'https://pastel.kit.pivoine.art',
gradient: 'gradient-indigo-purple',
badges: ['Open Source', 'WCAG', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
@@ -44,7 +47,7 @@ const tools = [
export default function ToolsGrid() {
return (
<section className="relative py-20 px-4">
<section id="tools" className="relative py-20 px-4">
<div className="max-w-6xl mx-auto">
{/* Section heading */}
<motion.div
@@ -72,6 +75,7 @@ export default function ToolsGrid() {
icon={tool.icon}
url={tool.url}
gradient={tool.gradient}
badges={tool.badges}
index={index}
/>
))}