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

90 B

Raw Blame History

View Raw