Marketing

Pricing

Three-tier pricing table with a feature comparison and FAQ block.

Components: 28
Files exported: 15
Lines of code: 379
Runtime dependencies: next, react, react-dom, lucide-react

Live render — this is real DOM, not a screenshot

Simple, Transparent Pricing

Choose the plan that fits your team. Upgrade or downgrade at any time.

Free

Free forever

Up to 3 projects
Basic analytics
Community support
1 GB storage

Pro

$19

per user / month

Unlimited projects
Advanced analytics
Priority support
50 GB storage
Custom domains
Team collaboration

Enterprise

$49

per user / month

Everything in Pro
Unlimited storage
SSO & SAML
Dedicated account manager
Custom integrations
99.99% uptime SLA
Audit logs

Interaction is disabled on this page. In the builder the same tree is fully editable.

The code you get

Generated by the same exporter the Export button calls. Standard Next.js App Router and Tailwind — no InBuild runtime, no proprietary imports, nothing to license.

app/page.tsx

71 lines

import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — Pricing",
  openGraph: {
    title: "Home",
    description: "Home — Pricing",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-white">
    <section className="w-full py-20 px-6 text-center">
      <h1 className="text-4xl font-bold text-4xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h1>
      <p className="text-base text-lg text-gray-500 max-w-xl mx-auto">Choose the plan that fits your team. Upgrade or downgrade at any time.</p>
    </section>
    <section className="w-full pb-24 px-6 max-w-5xl mx-auto">
      <div className="grid min-w-0 grid grid-cols-3 gap-8 items-start">
        <div className="p-8 rounded-2xl border border-gray-200">
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Free</h3>
          <p className="text-base text-4xl font-bold text-gray-900 mb-1">$0</p>
          <p className="text-base text-sm text-gray-500 mb-6">Free forever</p>
          <hr className="border-gray-100 mb-6" />
          <ul className="list-disc pl-5 space-y-2 space-y-3 text-gray-600 text-sm mb-8">
            <li>Up to 3 projects</li>
            <li>Basic analytics</li>
            <li>Community support</li>
            <li>1 GB storage</li>
          </ul>
          <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 w-full border border-gray-300 text-gray-700 py-2.5 rounded-lg font-medium hover:bg-gray-50 transition">Get Started</button>
        </div>
        <div className="p-8 rounded-2xl border-2 border-blue-600 relative">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Most Popular</span>
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Pro</h3>
          <p className="text-base text-4xl font-bold text-gray-900 mb-1">$19</p>
          <p className="text-base text-sm text-gray-500 mb-6">per user / month</p>
          <hr className="border-gray-100 mb-6" />
          <ul className="list-disc pl-5 space-y-2 space-y-3 text-gray-600 text-sm mb-8">
            <li>Unlimited projects</li>
            <li>Advanced analytics</li>
            <li>Priority support</li>
            <li>50 GB storage</li>
            <li>Custom domains</li>
            <li>Team collaboration</li>
          </ul>
          <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 w-full bg-blue-600 text-white py-2.5 rounded-lg font-medium hover:bg-blue-700 transition">Start Free Trial</button>
        </div>
        <div className="p-8 rounded-2xl border border-gray-200">
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Enterprise</h3>
          <p className="text-base text-4xl font-bold text-gray-900 mb-1">$49</p>
          <p className="text-base text-sm text-gray-500 mb-6">per user / month</p>
          <hr className="border-gray-100 mb-6" />
          <ul className="list-disc pl-5 space-y-2 space-y-3 text-gray-600 text-sm mb-8">
            <li>Everything in Pro</li>
            <li>Unlimited storage</li>
            <li>SSO & SAML</li>
            <li>Dedicated account manager</li>
            <li>Custom integrations</li>

Truncated — 11 more lines in the exported file.

Every file in the export

.env.local.example
.gitignore
README.md
app/api/contact/route.ts
app/globals.css
app/layout.tsx
app/page.tsx
app/robots.ts
app/sitemap.ts
eslint.config.mjs
next-env.d.ts
next.config.ts
package.json
postcss.config.mjs
tsconfig.json

package.json

30 lines

{
  "name": "pricing",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "lucide-react": "^0.456.0"
  },
  "devDependencies": {
    "typescript": "^5.6.0",
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "tailwindcss": "^4.0.0",
    "@tailwindcss/postcss": "^4.0.0",
    "postcss": "^8.4.0",
    "autoprefixer": "^10.4.0",
    "eslint": "^9.0.0",
    "eslint-config-next": "^15.0.0"
  }
}

Start from this template

Every plan includes all templates, the visual editor, and code export. From $49/mo — no free tier, no trial.