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 |
|