src/components/sections/pricing-section.tsx

import { CheckIcon } from "lucide-react";
import { LampComponent } from "../ui/lamp";
import { CardContainer, CardBody, CardItem } from "../ui/3d-card";

const PricingSection = () => {
  return (
    <section id="pricing" className="">
      <LampComponent />
      <div className="flex flex-wrap items-center justify-center flex-col md:flex-row gap-8 -mt-72 mb-8">
        <CardContainer className="inter-var ">
          <CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-neutral-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-full md:!w-[350px] h-auto rounded-xl p-6 border">
            <CardItem
              translateZ="50"
              className="text-xl font-bold text-neutral-600 dark:text-white "
            >
              Basic
              <h2 className="text-6xl ">$0</h2>
            </CardItem>
            <CardItem
              translateZ="60"
              className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
            >
              <ul className="my-4 flex flex-col gap-2">
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  One license
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  0.5GB of storage
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Image and Video Processing
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  All Analytic Scenarios
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Offline support
                </li>
              </ul>
            </CardItem>
            <div className="flex justify-between items-center mt-8">
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
              >
                Try now →
              </CardItem>
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
              >
                Get Started Now
              </CardItem>
            </div>
          </CardBody>
        </CardContainer>
        <CardContainer className="inter-var">
          <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-neutral-500/[0.1] dark:bg-black dark:border-[#E2CBFF] border-black/[0.1] w-full md:!w-[350px] h-auto rounded-xl p-6 border">
            <CardItem
              translateZ="50"
              className="text-xl font-bold text-neutral-600 dark:text-white "
            >
              Storage
              <h2 className="text-6xl ">$300</h2>
            </CardItem>
            <CardItem
              translateZ="60"
              className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
            >
              <ul className="my-4 flex flex-col gap-2">
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  One license
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  5GB of storage
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Image and Video Processing
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  All Analytic Scenarios
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Basic Helpdesk
                </li>
              </ul>
            </CardItem>
            <div className="flex justify-between items-center mt-8">
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
              >
                Try now →
              </CardItem>
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
              >
                Get Started Now
              </CardItem>
            </div>
          </CardBody>
        </CardContainer>
        <CardContainer className="inter-var">
          <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-neutral-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-full md:!w-[350px] h-auto rounded-xl p-6 border">
            <CardItem
              translateZ="50"
              className="text-xl font-bold text-neutral-600 dark:text-white "
            >
              Explorer
              <h2 className="text-6xl">$1,500</h2>
            </CardItem>
            <CardItem
              translateZ="60"
              className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
            >
              <ul className="my-4 flex flex-col gap-2">
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  One license
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  50GB of storage
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Image and Video Processing
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  All Analytic Scenarios
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Expert Support
                </li>
              </ul>
            </CardItem>
            <div className="flex justify-between items-center mt-8">
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
              >
                Try now →
              </CardItem>
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
              >
                Get Started Now
              </CardItem>
            </div>
          </CardBody>
        </CardContainer>
        <CardContainer className="inter-var">
          <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-neutral-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-full md:!w-[350px] h-auto rounded-xl p-6 border">
            <CardItem
              translateZ="50"
              className="text-xl font-bold text-neutral-600 dark:text-white "
            >
              Enterprise
              <h2 className="text-6xl">$4,000</h2>
            </CardItem>
            <CardItem
              translateZ="60"
              className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
            >
              <ul className="my-4 flex flex-col gap-2">
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  4 concurrent users
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  200GB of storage
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Image and Video Processing
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  All Analytic Scenarios
                </li>
                <li className="flex items-center gap-2">
                  <CheckIcon className="text-emerald-500" />
                  Expert Microgravity Support
                </li>
              </ul>
            </CardItem>
            <div className="flex justify-between items-center mt-8">
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
              >
                Try now →
              </CardItem>
              <CardItem
                translateZ={20}
                as="button"
                className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
              >
                Get Started Now
              </CardItem>
            </div>
          </CardBody>
        </CardContainer>
      </div>
    </section>
  );
};

export default PricingSection;