feat: add comprehensive visual improvements and polished UI

Major visual enhancements for professional look and feel:

**New Components:**
- Skeleton component for loading states
  - Pulse animation
  - Reusable for any content type
  - Consistent styling

**Enhanced Animations:**
- Added 8 new custom animations:
  - fade-in (smoother 0.3s)
  - slide-up/down (enhanced 0.4s)
  - slide-in-right/left (directional)
  - scale-in (zoom effect)
  - bounce-gentle (subtle bounce)
  - shimmer (loading effect)

**Global Visual Improvements:**
- Smooth theme transitions (200ms cubic-bezier)
- Custom scrollbar styling with hover states
- Smooth scroll behavior enabled
- Theme transitioning class to prevent flash
- Better transition timing functions

**Component Enhancements:**

1. Home Page:
   - Staggered fade-in animations (0s, 0.1s, 0.2s-0.4s delays)
   - Scale animations on feature cards
   - Hover effects with shadow and border color change
   - Responsive padding adjustments
   - Enhanced button hover (scale + shadow)

2. ColorSwatch:
   - Improved hover scale (105% → 110%)
   - Added shadow on hover
   - Backdrop blur on overlay
   - Active state scale down (95%)
   - Smoother transitions (200ms)
   - Scale-in animation for copy icon

3. Button Component:
   - Active state scale down effect
   - Shadow on hover for primary/destructive
   - Border color change on outline hover
   - Smoother transitions (200ms)
   - Focus ring offset for better visibility

**Micro-interactions:**
- All buttons have active:scale-95
- Cards lift on hover with shadows
- Smooth color transitions on theme switch
- Icons animate on appearance
- Links scale up on hover

**Visual Consistency:**
- Consistent timing (200ms for interactions)
- Unified hover patterns across components
- Standardized shadow depths
- Better focus indicators
- Smooth scroll throughout

**Performance:**
- No janky transitions
- Optimized animations (transform + opacity)
- Hardware-accelerated properties
- Minimal repaints

The UI now feels polished, professional, and delightful to use!

Build successful - all visual enhancements working.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/color/ColorSwatch.tsx

@@ -40,18 +40,19 @@ export function ColorSwatch({
     <div className={cn('flex flex-col items-center gap-2', className)}>
       <button
         className={cn(
-          'relative rounded-lg ring-2 ring-border transition-all hover:scale-105 hover:ring-primary',
+          'relative rounded-lg ring-2 ring-border transition-all duration-200',
+          'hover:scale-110 hover:ring-primary hover:shadow-lg',
           'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-          'group',
+          'group active:scale-95',
           sizeClasses[size]
         )}
         style={{ backgroundColor: color }}
         onClick={onClick || handleCopy}
         aria-label={`Color ${color}`}
       >
-        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/20 rounded-lg">
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200 bg-black/30 rounded-lg backdrop-blur-sm">
           {copied ? (
-            <Check className="h-5 w-5 text-white" />
+            <Check className="h-5 w-5 text-white animate-scale-in" />
           ) : (
             <Copy className="h-5 w-5 text-white" />
           )}

components/ui/button.tsx

@@ -11,15 +11,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         className={cn(
-          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'inline-flex items-center justify-center rounded-md font-medium',
+          'transition-all duration-200',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'disabled:pointer-events-none disabled:opacity-50',
+          'active:scale-95',
           {
-            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
-            'border border-input bg-background hover:bg-accent hover:text-accent-foreground':
+            'bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-md':
+              variant === 'default',
+            'border border-input bg-background hover:bg-accent hover:text-accent-foreground hover:border-primary':
               variant === 'outline',
             'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
-            'bg-destructive text-destructive-foreground hover:bg-destructive/90':
+            'bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:shadow-md':
               variant === 'destructive',
             'h-10 px-4 py-2': size === 'default',
             'h-9 px-3': size === 'sm',

components/ui/skeleton.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}