Landing Pages
Landing 1 Components
Header, Hero, API Demo, Features, Social Proof, Pricing, How It Works, FAQ, Final CTA, Footer.
Overview
Landing 1 components live in app/landing-1/. Each file is a self-contained section.
Components
| Component | File | Description |
|---|---|---|
| Header | header.tsx | Top navigation, logo, links, auth buttons |
| Hero | hero-section.tsx | Headline, subheadline, primary/secondary CTAs |
| API Demo | api-demo.tsx | Interactive API demo (e.g. request/response) |
| Features Showcase | features-showcase.tsx | Feature cards with icons and descriptions |
| Social Proof | social-proof.tsx | Logos, testimonials, or trust indicators |
| Pricing | pricing-section.tsx | Plan cards, prices, CTA buttons |
| How It Works | how-it-works.tsx | Step-by-step flow (1, 2, 3) |
| FAQ | faq.tsx | Accordion FAQ |
| Final CTA | final-cta.tsx | Final call-to-action block |
| Footer | footer.tsx | Links, legal, social |
Customization
Edit each component file to change copy, links, and styling. All use Tailwind CSS and shadcn/ui. Update app/page.tsx to reorder or remove sections.
Shared Usage
LandingHeader and LandingFooter are reused by:
- Docs layout (
app/docs/layout.tsx) - Blog pages
- Legal pages (privacy, terms)
- About page
- PSEO layout
Next Steps
- Landing Page — Overview and flow
- Landing 2 Components — Landing 2 sections