Usage based

import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@cooud-ui/ui";
import { Check } from "lucide-react";

export function UsagePricingBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-5xl rounded-3xl border border-border bg-surface-raised p-6 shadow-lg sm:p-8">
        <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_20rem]">
          <div>
            <Badge variant="primary">Usage based</Badge>
            <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
              Start small, pay only when your product grows.
            </h2>
            <p className="mt-4 max-w-2xl text-fg-secondary">
              A pricing layout for APIs, infrastructure, and usage-metered products.
            </p>
          </div>
          <Card className="border-primary bg-surface-floating shadow-glow">
            {/* Highlight your metered plan here */}
          </Card>
        </div>
      </div>
    </section>
  );
}