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/
35 lines
833 B
JSON
35 lines
833 B
JSON
{
|
|
"name": "frontend",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"react": "^19.2.4",
|
|
"react-dom": "^19.2.4"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.39.4",
|
|
"@tailwindcss/postcss": "^4.2.2",
|
|
"@types/node": "^24.12.0",
|
|
"@types/react": "^19.2.14",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@vitejs/plugin-react": "^6.0.1",
|
|
"autoprefixer": "^10.4.27",
|
|
"eslint": "^9.39.4",
|
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
"eslint-plugin-react-refresh": "^0.5.2",
|
|
"globals": "^17.4.0",
|
|
"postcss": "^8.5.8",
|
|
"tailwindcss": "^4.2.2",
|
|
"typescript": "~5.9.3",
|
|
"typescript-eslint": "^8.57.0",
|
|
"vite": "^8.0.1"
|
|
}
|
|
}
|