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)
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])