diff --git a/bun.lockb b/bun.lockb index aa09122..bb767f0 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 6f7382a..23e7a35 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "@astrojs/tailwind": "^5.1.0", "@fontsource/inter": "^5.0.18", "astro": "^4.7.1", + "embla-carousel-autoplay": "^8.2.1", + "embla-carousel-react": "^8.2.0", "framer-motion": "^11.1.7", "npm-check-updates": "^16.14.20", "tailwindcss": "^3.4.3" diff --git a/src/assets/images/v1/api-demo.gif b/src/assets/images/v1/api-demo.gif new file mode 100644 index 0000000..d6179b4 Binary files /dev/null and b/src/assets/images/v1/api-demo.gif differ diff --git a/src/assets/images/v1/configurator-demo.gif b/src/assets/images/v1/configurator-demo.gif new file mode 100644 index 0000000..2688221 Binary files /dev/null and b/src/assets/images/v1/configurator-demo.gif differ diff --git a/src/assets/images/v1/drag-and-drop.gif b/src/assets/images/v1/drag-and-drop.gif new file mode 100644 index 0000000..f3edfc8 Binary files /dev/null and b/src/assets/images/v1/drag-and-drop.gif differ diff --git a/src/assets/images/v1/flow-demo.gif b/src/assets/images/v1/flow-demo.gif new file mode 100644 index 0000000..60818fd Binary files /dev/null and b/src/assets/images/v1/flow-demo.gif differ diff --git a/src/assets/images/v1/qsv-pro-command-demo.gif b/src/assets/images/v1/qsv-pro-command-demo.gif new file mode 100644 index 0000000..8f55577 Binary files /dev/null and b/src/assets/images/v1/qsv-pro-command-demo.gif differ diff --git a/src/assets/images/v1/toolbox-demo.gif b/src/assets/images/v1/toolbox-demo.gif new file mode 100644 index 0000000..9fd9bad Binary files /dev/null and b/src/assets/images/v1/toolbox-demo.gif differ diff --git a/src/components/EmblaCarousel.jsx b/src/components/EmblaCarousel.jsx new file mode 100644 index 0000000..36673a4 --- /dev/null +++ b/src/components/EmblaCarousel.jsx @@ -0,0 +1,68 @@ +import React, { useState, useEffect, useCallback } from 'react' +import useEmblaCarousel from 'embla-carousel-react' +import { Thumb } from './EmblaCarouselThumbsButton' + +const EmblaCarousel = (props) => { + const { slides, options, plugins } = props + const [selectedIndex, setSelectedIndex] = useState(0) + const [emblaMainRef, emblaMainApi] = useEmblaCarousel(options, plugins) + const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({ + containScroll: 'keepSnaps', + dragFree: true, + } + ) + + const onThumbClick = useCallback( + (index) => { + if (!emblaMainApi || !emblaThumbsApi) return + emblaMainApi.scrollTo(index) + }, + [emblaMainApi, emblaThumbsApi] + ) + + const onSelect = useCallback(() => { + if (!emblaMainApi || !emblaThumbsApi) return + setSelectedIndex(emblaMainApi.selectedScrollSnap()) + emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap()) + }, [emblaMainApi, emblaThumbsApi, setSelectedIndex]) + + useEffect(() => { + if (!emblaMainApi) return + onSelect() + + emblaMainApi.on('select', onSelect).on('reInit', onSelect) + }, [emblaMainApi, onSelect]) + + return ( +
+
+
+ {slides.map((slide, index) => ( +
+ qsv pro feature demo GIF +

{slide.title}

+

{slide.description}

+
+ ))} +
+
+ +
+
+
+ {slides.map((slide, index) => ( + onThumbClick(index)} + selected={index === selectedIndex} + index={slide} + /> + ))} +
+
+
+
+ ) +} + +export default EmblaCarousel diff --git a/src/components/EmblaCarouselThumbsButton.jsx b/src/components/EmblaCarouselThumbsButton.jsx new file mode 100644 index 0000000..6aff8cf --- /dev/null +++ b/src/components/EmblaCarouselThumbsButton.jsx @@ -0,0 +1,21 @@ +import React from 'react' + +export const Thumb = (props) => { + const { selected, index, onClick } = props + + return ( +
+ +
+ ) +} diff --git a/src/components/FAQ.jsx b/src/components/FAQ.jsx index 9fe4789..936db26 100644 --- a/src/components/FAQ.jsx +++ b/src/components/FAQ.jsx @@ -5,34 +5,24 @@ import generateCkanApiToken from "../assets/images/faq/generate-ckan-api-token.p const FAQData = [ { question: "What is qsv pro?", - answer: "qsv pro is a spreadsheet data wrangling desktop application to view, transform, and upload data to CKAN with a graphical user interface based on the qsv CLI tool. It 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 (features may also be removed). If you encounter any bugs or have any feature/feedback requests, you may contact us on our support site by creating a ticket.", + answer: "qsv pro is a desktop application to view and transform spreadsheet data (for example Microsoft Excel data and CSV) with a graphical user interface based on the qsv CLI tool. It includes multiple features for data wrangling and is available on compatible Windows, macOS, and Linux devices.", links: [ { - label: "Support site", - url: "https://support.dathere.com", + label: "About datHere", + url: "https://dathere.com", }, - ], - }, - { - 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 on our support site by creating a ticket.", - links: [ { - label: "Support site", - url: "https://support.dathere.com", + label: "Learn to use qsv", + url: "https://100.dathere.com", }, ], }, { question: "How do I get qsv pro?", - answer: "You may download the latest version of qsv pro with a 7-day free trial (no payment method required) from the top of this page. 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), macOS (.app.tar.gz), and Linux (.AppImage).", + answer: "You may download the latest version of qsv pro from the top of this page. Within the app you may continue with the free plan or you may purchase a license key from store.dathere.com to use paid features. You may choose between any of the installers for Windows (.msi), macOS (.app.tar.gz), and Linux (.AppImage).", links: [ { - label: "Purchase a license", + label: "Purchase a license key", url: "https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5", }, ], @@ -42,7 +32,7 @@ const FAQData = [ answer: "You may provide feedback on our support site by creating a ticket.", links: [ { - label: "Support site", + label: "Contact support", url: "https://support.dathere.com", }, ], @@ -57,6 +47,20 @@ const FAQData = [ }, ], }, + { + question: "How can I use qsv pro on more than one device?", + answer: "Each license key can only be activated for 1 device at a time. If you used your license key on a device and want to use it on a different device, you may deactivate your license key by navigating to your billing information page then deactivate your license. Then you may activate your license key on your other device. If you need more than 1 device to use qsv pro at one time, you may purchase an additional license key.", + links: [ + { + label: "Manage billing information", + url: "https://store.dathere.com/billing", + }, + { + label: "Purchase a license key", + url: "https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5", + }, + ], + }, { question: "Where can I manage my billing information?", answer: "You may manage your billing information at store.dathere.com/billing.", @@ -69,7 +73,41 @@ const FAQData = [ }, { question: "Is there a light theme?", - answer: "Yes, you may change the theme with the sun/moon icon on the top right of qsv pro.", + answer: "Yes, you may change the theme with the sun/moon icon on the navigation panel of qsv pro.", + }, + { + question: "Can I change the zoom size?", + answer: "Yes, you may change the zoom size in the settings panel of qsv pro.", + }, + { + question: "What is qsv pro's current status?", + answer: "qsv pro has reached version 1, but that does not mean it cannot contain errors and features may still be added and/or improved. If you encounter any bugs or have any feature/feedback requests, you may contact us on our support site by creating a ticket.", + links: [ + { + label: "Contact support", + url: "https://support.dathere.com", + }, + ], + }, + { + question: 'Why is "experimental" mentioned?', + answer: "qsv pro may include \"experimental\" features that may not be fully functional/tested and may be outdated. If you encounter any bugs or have any feature/feedback requests, you may contact us on our support site by creating a ticket.", + links: [ + { + label: "Contact support", + url: "https://support.dathere.com", + }, + ], + }, + { + question: 'What is CKAN?', + answer: "CKAN is an open-source data management system used around the world. You may learn more at ckan.org.", + links: [ + { + label: "CKAN website", + url: "https://ckan.org", + }, + ], }, ]; diff --git a/src/components/FeatureCarousel.jsx b/src/components/FeatureCarousel.jsx new file mode 100644 index 0000000..cfb1bc4 --- /dev/null +++ b/src/components/FeatureCarousel.jsx @@ -0,0 +1,70 @@ +import React from 'react' +import flowDemo from "../assets/images/v1/flow-demo.gif"; +import apiDemo from "../assets/images/v1/api-demo.gif"; +import configuratorDemo from "../assets/images/v1/configurator-demo.gif"; +import workflowDemo from "../assets/images/v1/drag-and-drop.gif"; +import commandDemo from "../assets/images/v1/qsv-pro-command-demo.gif"; +import toolboxDemo from "../assets/images/v1/toolbox-demo.gif"; +import EmblaCarousel from './EmblaCarousel'; +import Autoplay from 'embla-carousel-autoplay' + +const FeatureCarousel = () => { + + const SLIDES = [ + { + title: "Workflow - Explore your spreadsheet data with interactive data tables", + description: + "Drag and drop your spreadsheet data into the qsv pro Workflow. Once imported successfully, you may browse statistics, frequency, and metadata about your file. Run Polars SQL queries and recipes, view your file with csvlens on Windows, search your file (optionally by regex), export to multiple file formats, download/upload from/to compatible CKAN instances, and more.", + image: workflowDemo, + }, + { + title: "Flow - Build custom node-based flows and data pipelines", + description: + "Engineer data pipelines using an interactive node-based UI. Access multiple qsv commands and pipe them together along with custom nodes to architect data pipelines. Share or import your pipelines with other qsv pro users.", + image: flowDemo, + }, + { + title: "Toolbox - Run scripts on your data based on use cases", + description: + 'Run tools in qsv pro\'s Toolbox including scripts such as Copy CSV to clipboard, Sort CSV rows, Get CSV row count, and more.', + image: toolboxDemo, + }, + { + title: "API - Interact with qsv pro using external services", + description: + "Interact with the local qsv pro API server from other apps and services such as importing a file path into the qsv pro Workflow or on Windows launching an Alacritty terminal running csvlens on a provided file path. Explore the API's capabilities through locally served API documentation or through the qsv pro command available on the qsv command-line tool. qsv pro closes to the system tray so that you may continue to use the API with the window closed (some endpoints may have conditions to work properly such as having the Workflow open for the Workflow endpoint).", + image: apiDemo, + }, + { + title: "qsv pro command - Interact with qsv pro using the qsv command-line tool", + description: + "Use the qsv pro command available from the qsv command-line tool to import local files by their file path into the qsv pro Workflow or on Windows launch an Alacritty terminal running csvlens on the file.", + image: commandDemo, + }, + { + title: "Configurator (Experimental) - Run qsv commands in an interactive GUI", + description: + "Run qsv commands in a graphical user interface and explore its stdout and stderr as raw output. The command's elapsed time is also provided. Note: Not all commands are supported and this feature may be broken/outdated.", + image: configuratorDemo, + }, + ]; + + const OPTIONS = {} + const PLUGINS = [Autoplay({ delay: 30000 })] + + return ( + + //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ ) +} + +export default FeatureCarousel; diff --git a/src/components/Features0.jsx b/src/components/Features0.jsx index 8beb1d7..d9a6508 100644 --- a/src/components/Features0.jsx +++ b/src/components/Features0.jsx @@ -6,8 +6,7 @@ import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon"; export const Features0 = () => { return (
{
  • - File formats: .csv, .xlsx,{" "} - - .tsv, .tab, .xls, .ods, .xlsm, .xlsb - -
    - - *Experimental file formats, may not - work as expected. - + File formats: .csv, .xlsx, .tsv, .tab, .xls, .ods, .xlsm, .xlsb
  • @@ -61,8 +52,8 @@ export const Features0 = () => {
  • - Begins scanning and analyzing your data - on import + Begins process to scan and analysis file data + after import
  • diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 64b5f5e..cc87add 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -4,6 +4,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.jsx"; +import FeatureCarousel from "./FeatureCarousel.jsx"; export const Hero = () => { const [downloadData, setDownloadData] = useState(); @@ -71,7 +72,7 @@ export const Hero = () => { return (
    @@ -104,24 +105,13 @@ export const Hero = () => { transition={{ duration: 0.5, delay: 0.1 }} >
    - Transform and upload spreadsheet data to{" "} - CKAN - {" "} - with our streamlined desktop app, featuring "recipes" - for common data wrangling tasks. Based on the{" "} - - qsv - {" "} - CLI tool. + instances, and explore qsv pro.
    { {downloadData && OS !== "unknown" ? ( <>

    - Start your 7-day free trial,{" "} - no payment required. + Download qsv pro and explore the free plan or unlock features with a paid plan.

    {Object.keys(downloadData).map( @@ -182,8 +171,7 @@ export const Hero = () => {

    - Start your 7-day free trial,{" "} - no payment required. + Download qsv pro and explore the free plan or unlock features with a paid plan.

    )} @@ -198,17 +186,20 @@ export const Hero = () => { initial={{ opacity: 0, y: 10, zIndex: 20 }} animate={{ opacity: 1, y: 0, zIndex: 20 }} transition={{ duration: 0.5, delay: 0.15 }} + id="features" + className="w-full" > -
    - + + {/*123 + />*/}
    -
    +
    { alt="qsv pro logo" className="h-8" /> - + {/* Download v1 now! Website update is planned. - + */}
    diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx index 90adc83..8b3bf13 100644 --- a/src/components/Pricing.jsx +++ b/src/components/Pricing.jsx @@ -4,11 +4,25 @@ import { motion } from "framer-motion"; import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon"; const pricingData = [ - "Import local spreadsheet data", - "Transform data with recipes", - "Upload to CKAN instances", - "Interactive data table view", - "Configurator GUI (experimental)", + ["Import spreadsheets up to 1MB", + "Transform data with free recipes", + "List 1 CKAN instance", + "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 = () => { @@ -29,7 +43,7 @@ export const Pricing = () => { transition={{ duration: 0.5, delay: 0.2 }} >
    -
    +
    Pick a Plan @@ -37,10 +51,8 @@ export const Pricing = () => { Choose your plan

    - After you complete your 7-day free trial, you'll - need a license key to continue using qsv pro. - Select the subscription plan that suits your - needs and benefit from qsv pro. + To unlock paid features, you'll + need to purchase and activate a license key. USD pricing.

    -
    +
    - {/*
    -

    - Beginner +
    +

    + Free

    $0
    -
    - {isMonthly ? "/ month" : "/ year"} -
    - -

    - The perfect way to get started and get - used to our tools. +

    + No license key required

    -
      - {pricingData.map((text, index) => ( +
        + {pricingData[0].map((text, index) => (
      • - + {text}
        • ))}
      -
      - Get Started -
      -
    */} + +
    + Download qsv pro +
    +     +

    -
    -

    - qsv pro (preview) +
    +

    + Pro

    {isMonthly ? "$99.99" : "$999.00"}
    -
    +
    {isMonthly ? "/ month" : "/ year"}
    -

    - 1 license key +

    + 1 license key (1 device at a time)

      - {pricingData.map((text, index) => ( + {pricingData[1].map((text, index) => (
    • { } target="_blank" > -
      +
      Purchase a License Key
    - {/*
    -

    - Premium +
    +

    + Business / Enterprise

    - {isMonthly ? "$36" : "$390"} -
    -
    - {isMonthly ? "/ month" : "/ year"} + Contact us
    -

    - Experience the full power of our - analytic platform +

    + License keys by approved request

    -
      - {pricingData.map((text, index) => ( +
        + {pricingData[2].map((text, index) => (
      • - + {text}
        • ))}
      -
      - Get Started -
      -
    */} + +
    + Contact us +
    +     +

    diff --git a/src/pages/index.astro b/src/pages/index.astro index 6c13723..ca8db6d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -17,7 +17,6 @@ import "../styles/Theme.css"; import "../styles/Diagonals.css"; import { Features0 } from "../components/Features0"; import { Features3 } from "../components/Features3"; - --- @@ -30,7 +29,7 @@ import { Features3 } from "../components/Features3"; - + diff --git a/src/styles/Diagonals.css b/src/styles/Diagonals.css index 8fce1da..bd544dd 100644 --- a/src/styles/Diagonals.css +++ b/src/styles/Diagonals.css @@ -16,6 +16,16 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.embla { + overflow: hidden; +} +.embla__container { + display: flex; +} +.embla__slide { + flex: 0 0 100%; + min-width: 0; +} /* Features Top */