Pricing Section

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelPricingVariants = cva("relative w-full", {
  variants: {
    variant: {
      default: "bg-[#f5f5dc] dark:bg-[#1a1a1a]",
      primary: "bg-[#ff8c00] text-white",
      secondary: "bg-[#ffd700] text-black",
      dark: "bg-black text-white",
    },
    columns: {
      1: "grid-cols-1",
      2: "grid-cols-1 md:grid-cols-2",
      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
    },
    gap: {
      none: "gap-0",
      sm: "gap-4",
      md: "gap-8",
      lg: "gap-12",
      xl: "gap-16",
    },
  },
  defaultVariants: {
    variant: "default",
    columns: 3,
    gap: "lg",
  },
});

export interface PixelPricingProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelPricingVariants> {
  children?: React.ReactNode;
}

const PixelPricing = React.forwardRef<HTMLDivElement, PixelPricingProps>(
  ({ className, variant, columns, gap, children, ...props }, ref) => {
    return (
      <section
        ref={ref}
        className={cn(
          pixelPricingVariants({ variant }),
          "py-16 md:py-24",
          className,
        )}
        {...props}

// ... (more code below)