41d463873e
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>
103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
const config: Config = {
|
|
content: [
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.3s ease-in-out',
|
|
'slide-up': 'slideUp 0.4s ease-out',
|
|
'slide-down': 'slideDown 0.4s ease-out',
|
|
'slide-in-right': 'slideInRight 0.3s ease-out',
|
|
'slide-in-left': 'slideInLeft 0.3s ease-out',
|
|
'scale-in': 'scaleIn 0.2s ease-out',
|
|
'bounce-gentle': 'bounceGentle 0.5s ease-in-out',
|
|
shimmer: 'shimmer 2s infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
slideDown: {
|
|
'0%': { transform: 'translateY(-20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
slideInRight: {
|
|
'0%': { transform: 'translateX(-20px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
slideInLeft: {
|
|
'0%': { transform: 'translateX(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
scaleIn: {
|
|
'0%': { transform: 'scale(0.95)', opacity: '0' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
},
|
|
bounceGentle: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-5px)' },
|
|
},
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '-1000px 0' },
|
|
'100%': { backgroundPosition: '1000px 0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
};
|
|
|
|
export default config;
|