84338ea861
Create two new landing page sections following Day 3 objectives: ProblemSolution.tsx: - Before/After comparison layout (2-column grid) - Terminal simulation showing cryptic PostgreSQL logs - Telegram message simulation with clear solution - Pain points vs benefits comparison lists - Arrow connector between problem and solution - Final CTA button HowItWorks.tsx: - 3-step card layout (Monitor, Analyze, Notify) - StepCard sub-component with icons from Lucide React - Server, Brain, MessageSquare icons for each step - Detailed bullet points for each step - Connector lines between cards (desktop) - CSS fade-up animations with stagger effect - Final CTA box with button Accessibility Features: - Respects prefers-reduced-motion media query - Disables all animations if user prefers reduced motion - Proper focus rings on interactive elements - Aria-labels and aria-hidden on decorative icons - Semantic HTML structure Animation Implementation: - Pure CSS animations (no Framer Motion - parsimony) - @keyframes fadeUp: 600ms ease-out - Stagger delays: 0.1s, 0.2s, 0.3s between cards - Smooth hover transitions on cards - Transform scale on icon hover Responsive Design: - Mobile: single column layout - Tablet: 2-column grid - Desktop: 3-column grid with connector lines - Adaptive spacing and font sizes Integration: - Added exports to components/index.ts - Integrated into App.tsx below Hero section - Consistent styling with existing components Build Verification: - TypeScript compilation: ✓ 0 errors - Vite build: ✓ Success - Bundle size: 208KB (65KB gzipped) - All components render correctly Icons Installed: - lucide-react for consistent iconography - Terminal, AlertCircle, CheckCircle, ArrowRight - Server, Brain, MessageSquare Refs: .opencode/skills/ui-ux-master (animation best practices)
36 lines
863 B
JSON
36 lines
863 B
JSON
{
|
|
"name": "frontend",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"lucide-react": "^1.7.0",
|
|
"react": "^19.2.4",
|
|
"react-dom": "^19.2.4"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.39.4",
|
|
"@tailwindcss/postcss": "^4.2.2",
|
|
"@types/node": "^24.12.0",
|
|
"@types/react": "^19.2.14",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@vitejs/plugin-react": "^6.0.1",
|
|
"autoprefixer": "^10.4.27",
|
|
"eslint": "^9.39.4",
|
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
"eslint-plugin-react-refresh": "^0.5.2",
|
|
"globals": "^17.4.0",
|
|
"postcss": "^8.5.8",
|
|
"tailwindcss": "^4.2.2",
|
|
"typescript": "~5.9.3",
|
|
"typescript-eslint": "^8.57.0",
|
|
"vite": "^8.0.1"
|
|
}
|
|
}
|