Pricing

import { IconSquareCheckFilled } from '@tabler/icons-react';
import Tag from '@/components/ui/Tag';
import Button from '@/components/ui/Button';
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/Card';
import Heading from '@/components/ui/Heading';
import Divider from '@/components/ui/Divider';

export default function Page() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-10 md:py-0">
      <Heading as="h1" className="mb-10">
        Pricing plans
      </Heading>
      <div className="grid w-full gap-3 px-4 md:grid-cols-3 xl:max-w-5xl">
        <Card className="w-full">
          <CardHeader>
            <CardTitle>Basic plan</CardTitle>
          </CardHeader>
          <CardBody>
            <Heading as="h2" className="space-x-1">
              <span>$10.0</span>
              <span className="text-description text-sm">/ per month</span>
            </Heading>
            <p className="mt-2">Basic features for up to 12 users</p>
            <Button className="mt-5 w-full">Get Started</Button>
            <Divider className="my-5" />
            <div>
              <p className="font-semibold">Features</p>
              <ul className="mt-2 space-y-2">
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Access to basic features
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Parts of data analytics
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Up to 12 users
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  50G data storage
                </li>
              </ul>
            </div>
          </CardBody>
        </Card>
        <Card className="relative w-full">
          <Tag colors="neutral" className="absolute top-2 right-2">
            Popular
          </Tag>
          <CardHeader>
            <CardTitle>Business plan</CardTitle>
          </CardHeader>
          <CardBody>
            <Heading as="h2" className="space-x-1">
              <span>$25.0</span>
              <span className="text-description text-sm">/ per month</span>
            </Heading>
            <p className="mt-2">Basic features for up to 20 users</p>
            <Button className="mt-5 w-full">Get Started</Button>
            <Divider className="my-5" />
            <div>
              <p className="font-semibold">Features</p>
              <ul className="mt-2 space-y-2">
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Access to all components
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Advanced data analytics
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Up to 20 users
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  100G data storage
                </li>
              </ul>
            </div>
          </CardBody>
        </Card>
        <Card className="w-full">
          <CardHeader>
            <CardTitle>Enterprise plan</CardTitle>
          </CardHeader>
          <CardBody>
            <Heading as="h2" className="space-x-1">
              <span>$80.0</span>
              <span className="text-description text-sm">/ per month</span>
            </Heading>
            <p className="mt-2">Advanced features for unlimited users</p>
            <Button className="mt-5 w-full">Get Started</Button>
            <Divider className="my-5" />
            <div>
              <p className="font-semibold">Features</p>
              <ul className="mt-2 space-y-2">
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Advanced custom fields
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Access to logs and data history
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  Unlimited users
                </li>
                <li className="flex items-center gap-1 text-sm">
                  <IconSquareCheckFilled size={20} className="text-primary" />
                  300G data storage
                </li>
              </ul>
            </div>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}

import { IconCheck } from '@tabler/icons-react';
import Button from '@/components/ui/Button';
import Tag from '@/components/ui/Tag';
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/Card';
import Heading from '@/components/ui/Heading';
import Segment from '@/components/ui/Segment';

export default function Page() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-10 md:py-0">
      <div className="mb-8 flex w-full flex-col px-4 md:flex-row md:justify-between xl:max-w-5xl">
        <div>
          <Heading as="h1" className="text-center md:text-start">
            Pricing Plans
          </Heading>
          <p className="text-description mt-2 md:text-center">
            Start with any plan for 20 days free, no credit card required
          </p>
        </div>
        <Segment
          className="mt-4 self-center md:mt-0 md:self-end"
          option={[
            { label: 'Monthly', value: 'monthly' },
            { label: 'Yearly', value: 'yearly' },
          ]}
        />
      </div>
      <div className="grid w-full gap-4 px-4 md:grid-cols-3 md:gap-0 xl:max-w-5xl">
        <Card className="md:rounded-r-none md:border-r-0">
          <p className="text-description px-4 py-4 text-sm font-semibold">FREE</p>
          <CardHeader>
            <CardTitle>
              <p className="text-lg">$9.9</p>
              <p className="text-description text-sm">per month</p>
            </CardTitle>
          </CardHeader>
          <CardBody>
            <p className="text-sm text-white/80">Access all products and participate in community repositories</p>
            <Button variant="bordered" size="sm" colors="neutral" className="my-5 w-full">
              Free Plan
            </Button>
            <ul className="space-y-2">
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">1 year access</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">Access all products</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">New repositories added once a week</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">Propose & Vote on new products added</span>
              </li>
            </ul>
          </CardBody>
        </Card>
        <Card className="md:rounded-none">
          <p className="text-description space-x-2 px-4 py-4 text-sm font-semibold">
            <span>PROFESSIONAL</span>
            <Tag bordered colors="secondary">
              -20%
            </Tag>
          </p>
          <CardHeader>
            <CardTitle>
              <p className="text-lg">$29.9</p>
              <p className="text-description text-sm">per month</p>
            </CardTitle>
          </CardHeader>
          <CardBody>
            <p className="text-sm text-white/80">Get your own theme and support product development</p>
            <Button variant="solid" size="sm" colors="warning" className="my-5 w-full">
              Get Started
            </Button>
            <ul className="space-y-2">
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">1 year access</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">Access all products</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">New repositories added once a week</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">Propose & Vote on new products added</span>
              </li>
            </ul>
          </CardBody>
        </Card>
        <Card className="md:rounded-l-none md:border-l-0">
          <p className="text-description px-4 py-4 text-sm font-semibold">ENTERPRISE</p>
          <CardHeader>
            <CardTitle>
              <p className="text-lg">$59.9</p>
              <p className="text-description text-sm">per month</p>
            </CardTitle>
          </CardHeader>
          <CardBody>
            <p className="text-sm text-white/80">We all love to cooperate, make sure ti gift this to your team</p>
            <Button variant="solid" size="sm" colors="warning" className="my-5 w-full">
              Get Started
            </Button>
            <ul className="space-y-2">
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">1 year access</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">Access all products</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">New repositories added once a week</span>
              </li>
              <li className="text-description flex items-center gap-2 text-sm">
                <IconCheck size={16} />
                <span className="underline decoration-dashed">Propose & Vote on new products added</span>
              </li>
            </ul>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}