feat: add InteractiveDemo section with mock AI analysis

Create interactive demo component showcasing AI log analysis:

Layout:
- Two-column responsive grid (side-by-side desktop, stacked mobile)
- Left panel: Terminal-style input with log selection
- Right panel: AI analysis output with results

Terminal Panel (Left):
- Dark terminal design (bg-slate-900) with header
- 3 preset log buttons: PostgreSQL OOM, Nginx 502, Node.js Exception
- Terminal content area with monospace font
- Blinking cursor animation
- Log content display with syntax highlighting

Analysis Panel (Right):
- Initial state with guidance message
- Loading animation: 'Analisi in corso...' with 1.5s delay
- Result display with title, description, command
- Command box with copy button and feedback
- Safety badge and additional notes

React Logic:
- useState for selection, loading, analysis states
- Simulated 1.5s delay with setTimeout
- Static mock data (no API calls)
- Copy to clipboard functionality with visual feedback

Accessibility:
- aria-live=polite on output panel for screen readers
- aria-atomic=true for complete announcements
- aria-pressed on selection buttons
- aria-label on interactive elements
- Icons hidden from screen readers

TypeScript:
- LogAnalysis interface defined
- Proper type safety throughout
- Build passes without errors

Integration:
- Added to components/index.ts exports
- Integrated in App.tsx after HowItWorks section

Refs: Giorno 4 - Sprint 3 Landing Page development
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-03 16:19:23 +02:00
parent 644622f21c
commit 04db2b30be
3 changed files with 286 additions and 2 deletions

View File

@@ -1,4 +1,5 @@
export { Navbar } from './layout/Navbar';
export { Hero } from './sections/Hero';
export { ProblemSolution } from './sections/ProblemSolution';
export { HowItWorks } from './sections/HowItWorks';
export { HowItWorks } from './sections/HowItWorks';
export { InteractiveDemo } from './sections/InteractiveDemo';