a22e4bf7b5
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/
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])