Documentation

1. Overview

2. Project structure

src/app/templates/nimbus/
├── demo/
│   └── page.tsx   // the entire landing page — hero, features,
│                  // stats, integrations, testimonials, pricing, FAQ
└── docs/
    └── page.tsx   // this page

All copy and data is declared as constants at the top of demo/page.tsx: FEATURES, PLANS, STATS, INTEGRATIONS, TESTIMONIALS and FAQS.

3. Editing content

Each array maps directly to a section. To rename a feature, edit its entry in FEATURES:

const FEATURES = [
  { icon: Zap, title: "Instant deploys", desc: "..." },
  // add, remove or reorder entries — the grid adapts automatically
];

4. Pricing plans

The pricing toggle reads monthly and yearly prices from the same object — no separate yearly table:

const PLANS = [
  {
    name: "Growth",
    monthly: 49,
    yearly: 39,        // shown when the Yearly toggle is active
    featured: true,    // highlights this plan with the accent border
    features: ["5 workspaces", "25 team seats", "..."],
  },
];

5. Styling

Colors are inline Tailwind hex classes throughout demo/page.tsx — find-and-replace to rebrand:

6. Connecting checkout

Point each button's onClick (or wrap it in an <a>) at your checkout link — e.g. a LemonSqueezy or Stripe Checkout URL per plan — to make the pricing section live.