Back to ShowcaseFull Canvas Preview
PricingFeatured

Pricing Cards Section

A feature-packed 3-tier pricing section with subtle textures, feature comparison list, and custom highlighted call-to-actions.

ReactTailwind CSSNext.js

Live Component Preview

Choose plan

Choose a right plan for you need

Start Free

$0/month

Perfect for individuals and small projects.

  • 5 projects
  • 1 GB storage
  • Basic Support
  • Regular Model
  • Limited Image Generation
  • Limited Video Generation
  • Deep Thinking

Pro

$50/month

Perfect for Designer and large projects.

  • 20 projects
  • 10 GB storage
  • Advanced Support
  • Latest Model
  • Unlimited Image Generation
  • 1M Tokens
  • Limited Video Generation
  • Deep Thinking

Ultra

$120/month

Perfect for Designer and large projects.

  • 50 projects
  • 20 GB storage
  • Advanced Support
  • Early Access Latest Model
  • Unlimited Image Generation
  • 10M Tokens
  • Unlimited Video Generation
  • Deep Thinking
pricing-section.tsx
type Plan = {
  id: 'free' | 'pro' | 'ultra'
  name: string
  price: string
  description: string
  texture: string
  featureIcon: string
  features: Array<{ label: string; available: boolean }>
}


const plans: Plan[] = [
  {
    id: 'free',
    name: 'Start Free',
    price: '0',
    description: 'Perfect for individuals and small projects.',
    texture: 'https://www.figma.com/api/mcp/asset/c066cc76-e8e2-4cf9-bb78-c0ff66f0c03a.svg',
    featureIcon: 'https://www.figma.com/api/mcp/asset/44a97415-c43c-4910-80fc-68cef6b67c27.svg',
    features: [
      { label: '5 projects', available: true },
      { label: '1 GB storage', available: true },
      { label: 'Basic Support', available: true },
      { label: 'Regular Model', available: true },
      { label: 'Limited Image Generation', available: true },
      { label: 'Limited Video Generation', available: false },
      { label: 'Deep Thinking', available: false },
    ],
  },
  {
    id: 'pro',
    name: 'Pro',
    price: '50',
    description: 'Perfect for Designer and large projects.',
    texture: 'https://www.figma.com/api/mcp/asset/948d866b-5e5e-4a01-b36c-b6a6357df18b.svg',
    featureIcon: 'https://www.figma.com/api/mcp/asset/f0ff4973-9d91-4816-bafd-ae26f3982f1a.svg',
    features: [
      { label: '20 projects', available: true },
      { label: '10 GB storage', available: true },
      { label: 'Advanced Support', available: true },
      { label: 'Latest Model', available: true },
      { label: 'Unlimited Image Generation', available: true },
      { label: '1M Tokens', available: true },
      { label: 'Limited Video Generation', available: true },
      { label: 'Deep Thinking', available: true },
    ],
  },
  {
    id: 'ultra',
    name: 'Ultra',
    price: '120',
    description: 'Perfect for Designer and large projects.',
    texture: 'https://www.figma.com/api/mcp/asset/0ae99fd6-62cc-4fa3-bda3-499ed37f14fe.svg',
    featureIcon: 'https://www.figma.com/api/mcp/asset/7cf72429-18ee-4976-9363-e330cb879d21.svg',
    features: [
      { label: '50 projects', available: true },
      { label: '20 GB storage', available: true },
      { label: 'Advanced Support', available: true },
      { label: 'Early Access Latest Model', available: true },
      { label: 'Unlimited Image Generation', available: true },
      { label: '10M Tokens', available: true },
      { label: 'Unlimited Video Generation', available: true },
      { label: 'Deep Thinking', available: true },
    ],
  },
]


const colorMap = {
  free: {
    bg: "bg-sky-100 dark:bg-sky-900/40",
    text: "text-sky-700 dark:text-sky-300",
    btn: "bg-[#0878ad] border-[#075985] ",
  },
  pro: {
    bg: "bg-purple-100 dark:bg-purple-900/40",
    text: "text-purple-700 dark:text-purple-300",
    btn: "bg-[#7028d9] border-[#6b21a8] ",
  },
  ultra: {
    bg: "bg-lime-100 dark:bg-lime-900/40",
    text: "text-lime-700 dark:text-lime-300",
    btn: "bg-[#4d7c0f] border-[#3f6212] ",
  },
}


export function PricingSection() {
  return (
    <main className="w-full py-12 px-6 flex flex-col items-center gap-10 font-sans" aria-labelledby="pricing-title">
      <header className="text-center max-w-150">
        <h1 id="pricing-title" className="m-0 mb-2 text-3xl md:text-4xl font-semibold tracking-tight leading-tight text-foreground">Choose plan</h1>
        <p className="m-0 text-muted-foreground text-[15px] leading-relaxed">Choose a right plan for you need</p>
      </header>


      <section className="w-full max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-7 justify-center" aria-label="Plans">
        {plans.map((plan) => {
          const colors = colorMap[plan.id];
          return (
            <article className="flex flex-col gap-2 p-2 border-2 border-border/50 rounded-2xl bg-card/60 backdrop-blur-sm shadow-sm transition-all duration-300  hover:shadow-xl hover:border-border" key={plan.id}>
              <div className={`relative h-31 overflow-hidden flex-none rounded-xl p-3 ${colors.bg}`}>
                <img className="absolute w-37.5 h-72.5 max-w-none -right-10 -top-22.5 opacity-85 pointer-events-none" src={plan.texture} alt="" />
                <div className="relative z-10 h-full flex flex-col items-start justify-between">
                  <p className={`inline-flex items-center px-2 py-1 rounded-md text-sm font-medium leading-none bg-background  shadow-sm ${colors.text}`}>{plan.name}</p>
                  <div className="w-full">
                    <p className="m-0 mb-0.5 text-2xl leading-none font-semibold text-foreground">
                      <span className="text-sm font-medium mr-0.5">$</span>{plan.price}<small className="text-[13px] font-medium text-muted-foreground ml-0.5">/month</small>
                    </p>
                    <p className="m-0 text-xs leading-tight text-muted-foreground">{plan.description}</p>
                  </div>
                </div>
              </div>


              <div className="flex-1 flex flex-col justify-between p-2 pt-1 pb-1">
                <ul className="flex flex-col gap-2 m-0 p-1 pl-5 list-none text-[13px] leading-snug">
                  {plan.features.map((feature) => (
                    <li className={`relative text-card-foreground ${!feature.available ? 'opacity-50' : ''}`} key={feature.label}>
                      <img className="absolute w-[13px] h-[13px] -left-[18px] top-0.5 object-contain" src={feature.available ? plan.featureIcon : 'https://www.figma.com/api/mcp/asset/eb4916fb-63c4-4aca-baa2-3e9b11703188.svg'} alt="" />
                      {feature.label}
                    </li>
                  ))}
                </ul>
                <button className={`mt-6 w-full h-[36px] px-4 border border-transparent rounded-lg text-white text-[13px] font-semibold flex items-center justify-center shadow-[inset_0_1px_2px_rgba(255,255,255,0.4),0_1px_3px_rgba(0,0,0,0.2)] transition-all active:translate-y-px ${colors.btn}`} type="button">Get Started</button>
              </div>
            </article>
          )
        })}
      </section>
    </main>
  )
}


export default PricingSection