mirror of
https://github.com/dathere/qsvpro.dathere.com.git
synced 2025-12-19 05:59:24 +00:00
234 lines
14 KiB
JavaScript
234 lines
14 KiB
JavaScript
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
|
|
|
|
const pricingData = [
|
|
["Import spreadsheets up to 1MB",
|
|
"Transform data with free recipes",
|
|
"View spreadsheet statistics and frequency data",
|
|
"Run Polars SQL queries",
|
|
"Upload/Download compatible data from a CKAN instance",
|
|
"List 1 CKAN instance at a time",
|
|
"Use free tools in Toolbox",
|
|
"Use qsv slice from Flow",
|
|
"Use qsv count and qsv slice in Configurator (experimental)",
|
|
"Export Workflow file data and various data table data to CSV, TSV, TAB, and SSV",
|
|
],
|
|
["Import spreadsheets larger than 1MB",
|
|
"View extra statistics in the Workflow based on your file",
|
|
"Transform data with Pro recipes",
|
|
"List more than 1 CKAN instance",
|
|
"Use Pro tools in Toolbox",
|
|
"Use more qsv commands other than qsv slice from Flow",
|
|
"Use more qsv commands other than qsv count and qsv slice in Configurator (experimental)",
|
|
"Export Workflow file data and various data table data to 16 formats",
|
|
"Run csvlens on a spreadsheet or data table in a new Alacritty terminal (Windows only)"
|
|
],
|
|
[]
|
|
];
|
|
|
|
export const Pricing = () => {
|
|
const [isMonthly, setIsMonthly] = useState(true);
|
|
|
|
const handleChange = () => {
|
|
setIsMonthly(!isMonthly);
|
|
};
|
|
|
|
return (
|
|
<section className="w-screen flex justify-center bg-customDarkBg2 relative">
|
|
<div className="absolute -top-16" id="pricing" />
|
|
<div className="pb-20 pt-12 bg-customDarkBg2 2xl:w-[1150px] lg:w-[1050px] md:w-4/5 ">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
>
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<span className="custom-block-subtitle">
|
|
Pick a Plan
|
|
</span>
|
|
<h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
|
|
Choose your plan
|
|
</h2>
|
|
<p className="mb-6 text-customGrayText">
|
|
To unlock paid features, you'll
|
|
need to purchase and activate a license key. USD pricing.
|
|
</p>
|
|
<label className="mx-auto bg-customDarkBg3 relative flex justify-between items-center group text-xl w-44 h-12 rounded-lg pr-36 pl-1 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="peer appearance-none"
|
|
checked={!isMonthly}
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="h-8 w-[5.5rem] flex items-center pr-2 bg-customDarkBg3 after:rounded-lg duration-300 ease-in-out after:w-[30rem] after:h-10 after:bg-customPrimary after:shadow-md after:duration-300 peer-checked:after:translate-x-[5.5rem] cursor-pointer"></span>
|
|
<div className="flex absolute text-white text-sm font-bold">
|
|
<div
|
|
className={
|
|
isMonthly
|
|
? "mr-9 ml-3"
|
|
: "mr-9 ml-3 text-gray-400"
|
|
}
|
|
>
|
|
Monthly
|
|
</div>
|
|
<div
|
|
className={isMonthly && "text-gray-400"}
|
|
>
|
|
Yearly
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div className="flex flex-wrap flex-col lg:flex-row -mx-4 items-center mt-6">
|
|
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
|
<div className="px-8 py-8 bg-customDarkBg3 rounded-3xl">
|
|
<h4 className="mb-2 2xl:mb-4 text-2xl font-bold font-heading text-white text-left">
|
|
Free
|
|
</h4>
|
|
<div className="flex justify-start items-end">
|
|
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
|
$0
|
|
</div>
|
|
</div>
|
|
<p className="my-4 text-gray-400 leading-loose text-left">
|
|
No license key required
|
|
</p>
|
|
<ul className="mb-14 text-white">
|
|
{pricingData[0].map((text, index) => (
|
|
<li
|
|
className="mb-4 flex"
|
|
key={`${text}-${index}`}
|
|
>
|
|
<CheckArrowIcon
|
|
fillColor={
|
|
text.includes(
|
|
"(experimental)"
|
|
)
|
|
? "fill-red-300"
|
|
: ""
|
|
}
|
|
/>
|
|
<span>{text}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a href="#">
|
|
<div className="inline-block text-center py-2 px-4 w-full custom-button-colored leading-loose transition duration-200">
|
|
Download qsv pro
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
|
<div className="px-8 py-8 bg-blue-950 rounded-3xl border-4 border-blue-600">
|
|
<h4 className="mb-2 2xl:mb-4 text-3xl font-bold font-heading text-white text-left">
|
|
Pro
|
|
</h4>
|
|
<div className="flex justify-start items-end">
|
|
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
|
{isMonthly ? "$99.99" : "$999.00"}
|
|
</div>
|
|
<div className="text-gray-400">
|
|
{isMonthly ? "/ month" : "/ year"}
|
|
</div>
|
|
</div>
|
|
<p className="mt-8 mb-8 2xl:mb-12 text-gray-400 leading-loose text-left">
|
|
1 license key (1 device at a time)
|
|
</p>
|
|
<ul className="mb-14 text-white">
|
|
{pricingData[1].map((text, index) => (
|
|
<li
|
|
className="mb-4 flex"
|
|
key={`${text}-${index}`}
|
|
>
|
|
<CheckArrowIcon
|
|
fillColor={
|
|
text.includes(
|
|
"(experimental)"
|
|
)
|
|
? "fill-red-300"
|
|
: ""
|
|
}
|
|
/>
|
|
<span>{text}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a
|
|
href={
|
|
isMonthly
|
|
? "https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5"
|
|
: "https://store.dathere.com/checkout/buy/88fed582-ffd4-41e0-a94e-457fdd038130"
|
|
}
|
|
target="_blank"
|
|
data-rybbit-event="qsv_pro_purchase"
|
|
data-rybbit-prop-plan="Pro"
|
|
>
|
|
<div className="inline-block text-center py-2 px-4 w-full custom-button-colored leading-loose transition duration-200">
|
|
Start 30-day free trial
|
|
</div>
|
|
<p className="mt-8 text-center text-white">After your trial ends in 30 days, you will be charged ${isMonthly ? "99.99" : "999.99"}, then ${isMonthly? "99.99" : "999.99"} every {isMonthly ? "month" : "year"}.</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
|
<div className="px-8 py-8 bg-customDarkBg3 rounded-3xl">
|
|
<h4 className="mb-2 2xl:mb-4 text-2xl font-bold font-heading text-white text-left">
|
|
Business / Enterprise
|
|
</h4>
|
|
<div className="flex justify-start items-end">
|
|
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
|
Contact us
|
|
</div>
|
|
</div>
|
|
<p className="my-4 text-gray-400 leading-loose text-left">
|
|
License keys by approved request
|
|
</p>
|
|
<ul className="mb-14 text-white">
|
|
{pricingData[2].map((text, index) => (
|
|
<li
|
|
className="mb-4 flex"
|
|
key={`${text}-${index}`}
|
|
>
|
|
<CheckArrowIcon
|
|
fillColor={
|
|
text.includes(
|
|
"(experimental)"
|
|
)
|
|
? "fill-red-300"
|
|
: ""
|
|
}
|
|
/>
|
|
<span>{text}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a href="https://dathere.com/contact" data-rybbit-event="qsv_pro_purchase" data-rybbit-prop-plan="Business">
|
|
<div className="inline-block text-center py-2 px-4 w-full custom-button-colored leading-loose transition duration-200">
|
|
Contact us
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<p className="text-center text-zinc-200">
|
|
Want to learn more?{" "}
|
|
<a
|
|
className="text-blue-400"
|
|
href="https://dathere.com/product-demo-request/"
|
|
>
|
|
Request a demo
|
|
</a>
|
|
.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|