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)

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "lucide-react": "^1.7.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
       },
@@ -2739,6 +2740,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz",
+      "integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",