Sebastian Krüger
36742949bd
🎯 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>
99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface ToolCardProps {
|
|
title: string;
|
|
description: string;
|
|
icon: ReactNode;
|
|
url: string;
|
|
gradient: string;
|
|
index: number;
|
|
badges?: string[];
|
|
}
|
|
|
|
export default function ToolCard({ title, description, icon, url, gradient, index, badges }: ToolCardProps) {
|
|
return (
|
|
<motion.a
|
|
href={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group relative block"
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
whileHover={{ y: -10 }}
|
|
>
|
|
<div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 hover:shadow-2xl">
|
|
{/* Gradient overlay on hover */}
|
|
<div
|
|
className={`absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-300 ${gradient}`}
|
|
/>
|
|
|
|
{/* Glow effect */}
|
|
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl -z-10">
|
|
<div className={`w-full h-full ${gradient}`} />
|
|
</div>
|
|
|
|
{/* Icon */}
|
|
<motion.div
|
|
className="mb-6 flex justify-center"
|
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
|
transition={{ type: 'spring', stiffness: 300 }}
|
|
>
|
|
<div className={`p-4 rounded-xl ${gradient}`}>
|
|
{icon}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-2xl font-bold mb-3 text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-cyan-400 transition-all duration-300">
|
|
{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}
|
|
</p>
|
|
|
|
{/* Arrow icon */}
|
|
<motion.div
|
|
className="absolute bottom-8 right-8 text-gray-600 group-hover:text-purple-400"
|
|
initial={{ x: 0 }}
|
|
whileHover={{ x: 5 }}
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
/>
|
|
</svg>
|
|
</motion.div>
|
|
</div>
|
|
</motion.a>
|
|
);
|
|
}
|