Developer tool landingPro
An API platform landing page: terminal hero, code sample, features grid, plan comparison and changelog.
What's inside
- Typing terminal hero
- Highlighted code sample
- Plan comparison
- Changelog
When to use
- SDKs, APIs, infrastructure and developer tools.
When not to use
- Consumer apps.
Installation
Usage
Import it from @/components/templates/devtool-landing after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
// app/page.tsx
import { DevtoolLanding } from "@/components/templates/devtool-landing";
export default function Page() {
return <DevtoolLanding />;
}API reference
DevtoolLanding
A complete API platform landing page: typing terminal hero, a highlighted code sample on a grid, features, plan comparison, changelog, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through header, code tabs, plans and changelog filters |
Accessibility
- Terminal output is a live log readable by screen readers; code is real selectable text.
Motion
- The terminal types the install; grid cells glow behind the code; feature cells fade in.
Responsive behavior
- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.
Performance
- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.
Notes for AI
- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Replace CODE with your real quickstart snippet.
This page as Markdown, for assistants and coding agents:
/templates/devtool-landing/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt