feat: add Pastel color toolkit and update grid layout
- Added Pastel tool card with color palette icon - Updated grid to 3-column layout (responsive) - Removed "More tools coming soon..." message - Updated README with Pastel tool description Pastel features: - Color manipulation and format conversion - Palette generation with multiple harmony types - Accessibility testing (WCAG, color blindness) - Supports hex, RGB, HSL, Lab, OkLab, and more 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -26,6 +26,20 @@ const tools = [
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Pastel',
|
||||
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-purple-blue',
|
||||
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" />
|
||||
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
|
||||
<circle cx="15" cy="8.5" r="1.5" fill="currentColor" />
|
||||
<circle cx="8.5" cy="15" r="1.5" fill="currentColor" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function ToolsGrid() {
|
||||
@@ -49,7 +63,7 @@ export default function ToolsGrid() {
|
||||
</motion.div>
|
||||
|
||||
{/* Tools grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{tools.map((tool, index) => (
|
||||
<ToolCard
|
||||
key={tool.title}
|
||||
@@ -62,19 +76,6 @@ export default function ToolsGrid() {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Coming soon hint */}
|
||||
<motion.div
|
||||
className="mt-16 text-center"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
<p className="text-gray-500 text-sm">
|
||||
More tools coming soon...
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user