- Migrate from React CRA to Next.js 15 with modern architecture - Implement comprehensive shadcn/ui component library - Create complete dashboard system with layouts and navigation - Build authentication pages (login, register) with proper forms - Implement vote management pages (active, upcoming, history, archives) - Add user profile management with security settings - Configure Tailwind CSS with custom dark theme (accent: #e8704b) - Setup TypeScript with strict type checking - Backup old React-based frontend to .backups/frontend-old - All pages compile successfully and build passes linting Pages created: - Home page with hero section and features - Authentication (login/register) - Dashboard with stats and vote cards - Vote management (active, upcoming, history, archives) - User profile with form validation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ["class"],
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,jsx,ts,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Custom dark theme palette
|
|
accent: {
|
|
warm: '#e8704b', // --color-accent-warm
|
|
},
|
|
text: {
|
|
primary: '#e0e0e0',
|
|
secondary: '#a3a3a3',
|
|
tertiary: '#737373',
|
|
},
|
|
bg: {
|
|
primary: '#171717',
|
|
secondary: '#171717',
|
|
'overlay-light': 'rgba(255, 255, 255, 0.05)',
|
|
'overlay-dark': 'rgba(0, 0, 0, 0.8)',
|
|
},
|
|
border: '#4a4a4a',
|
|
// Semantic colors
|
|
success: '#10b981',
|
|
warning: '#f97316',
|
|
danger: '#ef4444',
|
|
info: '#3b82f6',
|
|
},
|
|
spacing: {
|
|
xs: '0.25rem',
|
|
sm: '0.5rem',
|
|
md: '1rem',
|
|
lg: '1.5rem',
|
|
xl: '2rem',
|
|
'2xl': '3rem',
|
|
},
|
|
borderRadius: {
|
|
sm: '0.375rem',
|
|
md: '0.5rem',
|
|
lg: '0.75rem',
|
|
xl: '1rem',
|
|
},
|
|
boxShadow: {
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
|
|
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
animation: {
|
|
spin: 'spin 1s linear infinite',
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
}
|