mirror of
https://github.com/dathere/qsvpro.dathere.com.git
synced 2025-12-18 21:59:24 +00:00
fix: clarify experimental features, add to faq, add preview label
This commit is contained in:
rzmk
parent
c8c8fe1b5d
commit
1407dde13d
9 changed files with 100 additions and 80 deletions
|
|
@ -1,11 +1,11 @@
|
|||
export const CheckArrowIcon = () => (
|
||||
export const CheckArrowIcon = ({ fillColor }) => (
|
||||
<div className="rounded-full bg-transparent w-5 h-5 flex justify-center items-center mr-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
width="20px"
|
||||
height="20px"
|
||||
className="fill-customSecondary"
|
||||
className={fillColor ? fillColor : "fill-customSecondary"}
|
||||
>
|
||||
<path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
|
||||
</svg>
|
||||
|
|
|
|||
23
src/assets/icons/Download.jsx
Normal file
23
src/assets/icons/Download.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
const Download = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="lucide lucide-download"
|
||||
>
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||
<polyline points="7 10 12 15 17 10" />
|
||||
<line x1="12" x2="12" y1="15" y2="3" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Download;
|
||||
|
|
@ -9,9 +9,29 @@ const FAQData = [
|
|||
question: "What is qsv pro?",
|
||||
answer: "qsv pro is a desktop application that allows you to run qsv commands with a graphical user interface based on the qsv CLI tool. It also features a suite of recipes (scripts) for common data wrangling tasks to perform on your spreadsheet, including sorting rows, removing duplicate rows, and removing Personally Identifiable Information (PII).",
|
||||
},
|
||||
{
|
||||
question: 'What does "preview" mean?',
|
||||
answer: "qsv pro is currently in preview, which means that it may contain bugs and does not include all of the features that are planned in a stable release. If you encounter any bugs or have any feature/feedback requests, you may contact us with our feedback form.",
|
||||
links: [
|
||||
{
|
||||
label: "Feedback form",
|
||||
url: "https://dathere.com/qsv-feedback-form/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
question: 'What does "experimental" mean?',
|
||||
answer: "qsv pro may include experimental features that may not be fully functional/tested or may not be included in a stable release. If you encounter any bugs or have any feature/feedback requests, you may contact us with our feedback form.",
|
||||
links: [
|
||||
{
|
||||
label: "Feedback form",
|
||||
url: "https://dathere.com/qsv-feedback-form/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
question: "How do I get qsv pro?",
|
||||
answer: "qsv pro is currently in preview. You may download the latest version of qsv pro with a 7-day free trial. During or after the trial, you may purchase a license to continue using qsv pro.",
|
||||
answer: "You may download the latest version of qsv pro with a 7-day free trial. During or after the trial, you may purchase a license to continue using qsv pro. You may choose between any of the installers for Windows (.msi, -setup.exe), macOS (.app, .dmg), and Linux (.AppImage, .deb).",
|
||||
links: [
|
||||
{
|
||||
label: "Download qsv pro",
|
||||
|
|
|
|||
|
|
@ -40,8 +40,15 @@ export const Features0 = () => {
|
|||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>
|
||||
File formats: .csv, .tsv, .tab, .xlsx,
|
||||
.xls, .ods, .xlsm, .xlsb
|
||||
File formats: .csv, .xlsx,{" "}
|
||||
<span className="text-red-300">
|
||||
.tsv, .tab, .xls, .ods, .xlsm, .xlsb
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-red-300">
|
||||
*Experimental file formats, may not
|
||||
work as expected.
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export const Features2 = () => (
|
|||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>In-app data dictionary form</span>
|
||||
In-app data dictionary form
|
||||
<span className="ml-2 text-red-300">
|
||||
(experimental)
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -28,17 +28,27 @@ export const FeaturesDiagonal = () => {
|
|||
>
|
||||
<div className=" 2xl:w-[1150px] xl:w-[1050px] md:w-4/5 flex justify-center bg-customDarkBg1 pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto lg:flex-row flex-col">
|
||||
<div className="w-3/4 lg:w-1/2 flex flex-col lg:mx-unset mx-auto">
|
||||
<span className="custom-block-subtitle">
|
||||
<span
|
||||
style={{ color: "rgb(252, 165, 165)" }}
|
||||
className="custom-block-subtitle"
|
||||
>
|
||||
Experimental Feature
|
||||
</span>
|
||||
<h2 className="mt-10 mb-8 text-4xl lg:text-5xl custom-block-big-title">
|
||||
Run qsv commands with our qsv Configurator GUI
|
||||
Run qsv terminal commands with the{" "}
|
||||
<u>Configurator GUI</u>
|
||||
</h2>
|
||||
<p className="mb-16 text-customGrayText leading-loose">
|
||||
No need to run qsv commands in your terminal. Try
|
||||
out our experimental qsv Configurator GUI to use qsv
|
||||
commands with a graphical user interface.
|
||||
out our qsv Configurator graphical user interface
|
||||
(GUI)<span className="text-red-300">*</span> as an
|
||||
interactive way to run qsv without the need to use a
|
||||
command line interface (CLI).
|
||||
</p>
|
||||
<span className="text-red-300">
|
||||
*Configurator does not currently support all qsv
|
||||
commands.
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-4/5 lg:w-2/3 lg:pl-16 flex justify-center mx-auto pt-16 lg:pt-0">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { motion } from "framer-motion";
|
|||
|
||||
import dashboard from "../assets/images/dashboard.png";
|
||||
import qsvProLogo from "../assets/logos/qsv-pro-logo.png";
|
||||
import Download from "../assets/icons/Download";
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
|
|
@ -25,13 +26,16 @@ export const Hero = () => {
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.05 }}
|
||||
>
|
||||
<div className="text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide text-white px-8 sm:px-8 md:px-20 lg:px-4">
|
||||
<div className="flex justify-center items-center ml-20">
|
||||
{/* <span>qsv pro</span> */}
|
||||
<img
|
||||
src={qsvProLogo}
|
||||
alt="qsv pro logo"
|
||||
className="w-72 sm:w-96 lg:w-120"
|
||||
/>
|
||||
<p className="text-white ml-1 font-['Inter'] text-xl mt-2 h-fit w-fit">
|
||||
(preview)
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
|
|
@ -65,15 +69,23 @@ export const Hero = () => {
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.15 }}
|
||||
>
|
||||
<div className="flex flex-col gap-2 sm:flex-row mt-14 mb-24 sm:mb-40 justify-center">
|
||||
<div className="grid grid-cols-1 place-items-center gap-2 sm:flex-row mt-14 mb-24 sm:mb-40 justify-center">
|
||||
<a
|
||||
href="https://github.com/dathere/qsv-pro-releases/releases/latest"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="custom-button-colored w-64 h-12 mr-0 sm:mr-4 lg:mr-6 mb-2 sm:mb-0">
|
||||
Start Your 7-Day Free Trial
|
||||
<div className="custom-button-colored w-64 h-12 mb-2 sm:mb-0">
|
||||
<Download />
|
||||
<span className="ml-1 text-lg">
|
||||
Download qsv pro
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<p className="text-white text-sm sm:text-base text-center mx-auto">
|
||||
Start your 7-day free trial,{" "}
|
||||
<u>no payment required</u>.
|
||||
</p>
|
||||
{/* <div
|
||||
className="w-64 sm:w-52 h-12 rounded-xl font-bold text-white border border-solid flex justify-center items-center cursor-pointer bg-customDarkBg2 hover:bg-customDarkBg3 border-customPrimary transition"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@ export const Navbar = () => {
|
|||
alt="qsv pro logo"
|
||||
className="h-6"
|
||||
/>
|
||||
<small className="text-white ml-1 font-['Inter'] text-xs mb-1 rounded-full px-1 border">
|
||||
preview
|
||||
</small>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
|
|
@ -50,7 +53,7 @@ export const Navbar = () => {
|
|||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div className="hidden lg:flex h-full pl-12 pb-2">
|
||||
<div className="hidden lg:flex h-full -ml-20 pb-2">
|
||||
{navbarLinks.map(({ href, label, ariaLabel }) => (
|
||||
<a
|
||||
className="navbar-link"
|
||||
|
|
@ -63,70 +66,7 @@ export const Navbar = () => {
|
|||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div className="grow basis-0 justify-end hidden lg:flex">
|
||||
<a
|
||||
className="text-white custom-border-gray rounded-xl
|
||||
bg-customDarkBg2 hover:bg-customDarkBg3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm flex"
|
||||
href="https://github.com/dathere/qsv-pro-releases/releases/latest"
|
||||
target="_blank"
|
||||
aria-label="source code"
|
||||
>
|
||||
<span className="pt-px">Download</span>
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div
|
||||
className="lg:hidden flex flex-col px-2 py-3 border-solid border border-gray-600 rounded-md cursor-pointer hover:bg-customDarkBg2"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
|
||||
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
|
||||
<div className="w-5 h-0.5 bg-gray-500 "></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile navbar */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 bg-customDarkBg1 z-50 w-full
|
||||
items-center gap-10 pb-10 border-y border-solid border-customDarkBg3 pt-10
|
||||
"
|
||||
>
|
||||
{navbarLinks.map(({ label, href, ariaLabel }) => (
|
||||
<a
|
||||
key={href}
|
||||
className="navbar-link"
|
||||
href={href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
className="text-white custom-border-gray rounded-xl
|
||||
bg-customDarkBg2 hover:bg-customDarkBg3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm flex"
|
||||
href="https://github.com/dathere/qsv-pro-releases/releases/latest"
|
||||
target="_blank"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const pricingData = [
|
|||
"Transform data with recipes",
|
||||
"Upload to CKAN datastores",
|
||||
"Interactive data table view",
|
||||
"Experimental Configurator GUI",
|
||||
"Configurator GUI (experimental)",
|
||||
];
|
||||
|
||||
export const Pricing = () => {
|
||||
|
|
@ -131,7 +131,15 @@ export const Pricing = () => {
|
|||
className="mb-4 flex"
|
||||
key={`${text}-${index}`}
|
||||
>
|
||||
<CheckArrowIcon />
|
||||
<CheckArrowIcon
|
||||
fillColor={
|
||||
text.includes(
|
||||
"(experimental)"
|
||||
)
|
||||
? "fill-red-300"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
<span>{text}</span>
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue