valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate heart icon, dynamic tools count in stats, trim tool summaries

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-02-28 17:53:33 +01:00
parent d6e01e4bf5
commit 83f071ec6b
4 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer.tsx
View File

@@ -19,7 +19,7 @@ export default function Footer() {
{/* Copyright */} {/* Copyright */}
<p className="text-sm text-muted-foreground flex items-center gap-1"> <p className="text-sm text-muted-foreground flex items-center gap-1">
© {currentYear} Kit. © {currentYear} Kit.
<Heart className="h-4 w-4 text-primary shrink-0" fill="currentColor" /> <Heart className="h-4 w-4 text-primary shrink-0 animate-pulse" fill="currentColor" />
<a <a
href="https://pivoine.art" href="https://pivoine.art"
target="_blank" target="_blank"

3
components/Stats.tsx
View File

@@ -1,10 +1,11 @@
'use client'; 'use client';
import { tools } from '@/lib/tools';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
const stats = [ const stats = [
{ {
number: '5', number: tools.length,
label: 'Tools', label: 'Tools',
icon: ( icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

2
components/layout/AppSidebar.tsx
View File

@@ -127,7 +127,7 @@ export function AppSidebar() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="flex items-center gap-1 text-[10px] text-muted-foreground"> <p className="flex items-center gap-1 text-[10px] text-muted-foreground">
© {new Date().getFullYear()} Kit. © {new Date().getFullYear()} Kit.
<Heart className="h-2.5 w-2.5 text-primary shrink-0" fill="currentColor" /> <Heart className="h-2.5 w-2.5 text-primary shrink-0 animate-pulse" fill="currentColor" />
<a <a
href="https://pivoine.art" href="https://pivoine.art"
target="_blank" target="_blank"

6
lib/tools.tsx
View File

@@ -60,7 +60,7 @@ export const tools: Tool[] = [
href: '/media', href: '/media',
description: 'Browser-based media conversion for video, audio, and images.', description: 'Browser-based media conversion for video, audio, and images.',
summary: summary:
'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.', 'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads.',
icon: MediaIcon, icon: MediaIcon,
badges: ['Open Source', 'Converter', 'Free'], badges: ['Open Source', 'Converter', 'Free'],
}, },
@@ -71,7 +71,7 @@ export const tools: Tool[] = [
href: '/favicon', href: '/favicon',
description: 'Create a complete set of icons for your website.', description: 'Create a complete set of icons for your website.',
summary: summary:
'Generate a complete set of favicons for your website. Includes PWA manifest and HTML embed code. All processing happens locally in your browser.', 'Generate a complete set of favicons for your website. Includes PWA manifest and HTML embed code.',
icon: FaviconIcon, icon: FaviconIcon,
badges: ['Open Source', 'Generator', 'Free'], badges: ['Open Source', 'Generator', 'Free'],
}, },
@@ -93,7 +93,7 @@ export const tools: Tool[] = [
href: '/animate', href: '/animate',
description: 'Visual editor for CSS keyframe animations with live preview.', description: 'Visual editor for CSS keyframe animations with live preview.',
summary: summary:
'Build and export CSS @keyframe animations visually. Configure timing, easing, transforms, and more — with a live preview and 20+ built-in presets. Export to plain CSS or Tailwind v4.', 'Build and export CSS @keyframe animations visually. Configure timing, easing, transforms, and more — with a live preview and 20+ built-in presets.',
icon: AnimateIcon, icon: AnimateIcon,
badges: ['Open Source', 'CSS', 'Free'], badges: ['Open Source', 'CSS', 'Free'],
}, },