A modern, responsive landing page for Onflow - an AI-powered agentic testing platform with computer vision capabilities.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4.x
- Animations: Framer Motion
- Icons: Lucide React
- Package Manager: pnpm
- ✅ Fully responsive design (mobile-first)
- ✅ Modern gradient color scheme
- ✅ Smooth animations and transitions
- ✅ Accessible (WCAG 2.1 AA compliant)
- ✅ SEO optimized
- ✅ Performance optimized (Core Web Vitals)
- ✅ Type-safe with TypeScript
- Node.js 18+
- pnpm 8+
- Install dependencies:
```bash pnpm install ```
- Run the development server:
```bash pnpm dev ```
- Open http://localhost:3000 in your browser.
pnpm dev- Start development serverpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run ESLint
``` onflow-landing/ ├── app/ # Next.js app directory │ ├── layout.tsx # Root layout │ ├── page.tsx # Home page │ └── globals.css # Global styles ├── components/ │ ├── sections/ # Page sections │ │ ├── Navigation.tsx │ │ ├── Hero.tsx │ │ ├── ProblemStatement.tsx │ │ ├── SolutionOverview.tsx │ │ ├── KeyDifferentiators.tsx │ │ ├── HowItWorks.tsx │ │ ├── Pricing.tsx │ │ ├── FAQ.tsx │ │ ├── FinalCTA.tsx │ │ └── Footer.tsx │ └── ui/ # Reusable UI components │ ├── Button.tsx │ ├── Card.tsx │ ├── Container.tsx │ ├── Section.tsx │ └── Input.tsx ├── lib/ │ └── utils.ts # Utility functions └── public/ # Static assets
```
- Primary: #0e70f9 (Blue)
- Secondary: #008ba6 (Cyan)
- Background: #f8fafc
- Text: #003040
- Font: Inter (Google Fonts)
- Weights: 300, 400, 500, 600, 700, 800, 900
Based on 8px base unit (4, 8, 16, 24, 32, 48, 64, 96, 128px)
- Lighthouse Score: 90+
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3.5s
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
ISC
For questions or support, contact: hello@onflow.ai