pricing.tsx

import { Columns, Column } from '@/components/columns'
import { Card4 } from '@/components/card-4'
import { Section } from '@/components/section'
import { Heading } from '@/components/heading'
import { Paragraph } from '@/components/paragraph'
import { Button } from '@/components/button'
import { List, Li } from '@/components/list'
import checkIcon from '@iconify/icons-heroicons/check-20-solid'

export default function Pricing() {
  return (
    <Section
      id="pricing"
      className="py-30 bg-body relative overflow-hidden"
    >
      <div className="relative">
        <div className="text-center mb-16">
          <Heading
            as="h2"
            margin="mb-4"