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 |
|
Luca Sacchi Ricciardi
|
a22e4bf7b5
|
feat: add Navbar and Hero components with Tailwind styling
Create landing page structure following 'Little Often' principle:
Components Created:
- Navbar.tsx: Logo + CTA button with sticky positioning
- Hero.tsx: Headline, sub-headline, dual CTAs, trust indicators, stats
- components/index.ts: Centralized exports
Design Features:
- Mobile-first responsive design (sm:, lg: breakpoints)
- WCAG AA compliant contrast ratios (4.5:1+)
- Accessible focus rings and aria-labels
- Modern color palette (indigo primary, slate neutrals)
- Smooth gradients and shadows
Layout Structure:
frontend/src/
├── components/
│ ├── layout/
│ │ └── Navbar.tsx
│ ├── sections/
│ │ └── Hero.tsx
│ └── index.ts
├── App.tsx: Clean integration of Navbar + Hero
Fixes Applied:
- Install @tailwindcss/postcss for Tailwind v4 compatibility
- Update postcss.config.js with new plugin
- Remove @tailwind directives from index.css (v4 style)
Build Verification:
✅ TypeScript compilation successful
✅ Tailwind CSS processing successful
✅ Production build completed (dist/ folder)
Content:
- Headline: 'Il DevOps tascabile che traduce i crash...'
- Sub-headline: Explains monitoring + AI + Telegram flow
- Primary CTA: 'Ottieni il tuo Webhook URL'
- Secondary CTA: 'Guarda la Demo'
- Stats: <5s response, 300+ models, €0.15/month
Refs: docs/frontend_landing_plan.md, .opencode/skills/frontend-ui-ux/
|
2026-04-03 14:26:16 +02:00 |
|
Luca Sacchi Ricciardi
|
c7b86de3fb
|
feat: setup React + Vite + TypeScript frontend with Tailwind CSS
Initialize frontend infrastructure for Sprint 3 Landing Page:
Infrastructure Setup:
- Create React + Vite + TypeScript project in frontend/ directory
- Install Tailwind CSS, PostCSS, Autoprefixer dependencies
- Generate tailwind.config.js with content paths
- Generate postcss.config.js with plugins configuration
- Add Tailwind directives (@tailwind base/components/utilities) to src/index.css
- Update root .gitignore to exclude frontend/node_modules and build artifacts
Documentation Updates:
- Add CHANGELOG.md entry for Sprint 3 Landing Page development start
- Update README.md with frontend development instructions
- Add Node.js and npm prerequisites
- Document npm commands: install, dev, build, preview
Project Structure:
├── frontend/
│ ├── src/
│ │ ├── App.tsx
│ │ ├── main.tsx
│ │ ├── index.css (with Tailwind)
│ │ └── assets/
│ ├── index.html
│ ├── package.json
│ ├── tailwind.config.js
│ ├── postcss.config.js
│ └── vite.config.ts
Safety First:
- Verified directory doesn't exist before creation
- Checked all configuration files are valid
- Excluded node_modules from git
- No project code modified, only new frontend directory added
Refs: docs/frontend_landing_plan.md
Next: Start developing landing page components
|
2026-04-03 13:20:48 +02:00 |
|