Pricing

Pricing page template with 3-tier plan comparison. Uses PricingCard molecules, Button atoms, and Typography for a clean pricing layout.

Import

import { Button, Typography, Badge } from "poyraz-ui/atoms";
import { PricingCard } from "poyraz-ui/molecules";

Three-Tier Pricing

Starter / Pro / Enterprise layout. The highlighted plan stands out with a red left border.

Pricing

Simple, transparent pricing

No hidden fees. No surprises. Pick a plan that fits your needs and scale as you grow.

Starter

$0/month

For individuals and side projects.

  • 3 projects
  • 1 GB storage
  • Community support
  • Basic analytics

Pro

$29/month

For growing teams and products.

  • Unlimited projects
  • 50 GB storage
  • Priority support
  • Advanced analytics
  • API access
  • Custom domains

Enterprise

$99/month

For large organizations.

  • Everything in Pro
  • Unlimited storage
  • Dedicated support
  • SSO / SAML
  • Custom SLA
  • Audit logs

All plans include 14-day free trial · No credit card required · Cancel anytime

import { Button, Typography, Badge } from "poyraz-ui/atoms";
import { PricingCard } from "poyraz-ui/molecules";

export function PricingSection() {
  return (
    <section className="px-6 py-12">
      <div className="max-w-2xl mx-auto">
        <div className="text-center space-y-3 mb-10">
          <Badge variant="outline" className="text-[10px]">Pricing</Badge>
          <Typography variant="h2">
            Simple, transparent <span className="text-red-600">pricing</span>
          </Typography>
          <Typography variant="p" className="text-sm text-muted-foreground">
            No hidden fees. Pick a plan that fits your needs.
          </Typography>
        </div>

        <div className="grid sm:grid-cols-3 gap-4">
          <PricingCard
            title="Starter"
            price="$0"
            period="month"
            description="For side projects."
            features={["3 projects", "1 GB storage", "Community support"]}
            action={<Button variant="outline" className="w-full">Start Free</Button>}
          />
          <PricingCard
            title="Pro"
            price="$29"
            period="month"
            description="For growing teams."
            features={["Unlimited projects", "Priority support", "API access"]}
            highlighted
            action={<Button className="w-full">Get Started</Button>}
          />
          <PricingCard
            title="Enterprise"
            price="$99"
            period="month"
            description="For organizations."
            features={["Everything in Pro", "SSO / SAML", "Custom SLA"]}
            action={<Button variant="outline" className="w-full">Contact Sales</Button>}
          />
        </div>
      </div>
    </section>
  );
}