Luca Sacchi Ricciardi 84338ea861 feat: add ProblemSolution and HowItWorks sections with accessible animations ...

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)

2026-04-03 14:42:02 +02:00

116 KiB

Raw Blame History

View Raw