fix: clarify experimental features, add to faq, add preview label

src/assets/icons/CheckArrowIcon.jsx

@@ -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>

src/assets/icons/Download.jsx

@@ -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;

src/components/FAQ.jsx

@@ -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",

src/components/Features0.jsx

@@ -40,8 +40,15 @@ export const Features0 = () => {
                                 <li className="mb-4 flex">
                                     <CheckArrowIcon />
                                     <span>
-                                        File formats: .csv, .tsv, .tab, .xlsx,
+                                        File formats: .csv, .xlsx,{" "}
-                                        .xls, .ods, .xlsm, .xlsb
+                                        <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">

src/components/Features2.jsx

@@ -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>

src/components/FeaturesDiagonal.jsx

@@ -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
+                            out our qsv Configurator graphical user interface
-                            commands with a 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

src/components/Hero.jsx

@@ -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">
+                            <div className="custom-button-colored w-64 h-12 mb-2 sm:mb-0">
-                                Start Your 7-Day Free Trial
+                                <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"
                         >

src/components/Navbar.jsx

@@ -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>
     );
 };

src/components/Pricing.jsx

@@ -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>
                                             ))}