mirror of
https://github.com/dathere/qsvpro.dathere.com.git
synced 2025-12-19 05:59:24 +00:00
feat: update site with new logo, faq, misc. changes
This commit is contained in:
rzmk
parent
dbc0920734
commit
b137943bbf
12 changed files with 192 additions and 53 deletions
BIN
src/assets/images/faq/ckan-api-key-location.png
Normal file
BIN
src/assets/images/faq/ckan-api-key-location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
src/assets/images/faq/ckan-url-location.png
Normal file
BIN
src/assets/images/faq/ckan-url-location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
src/assets/images/faq/generate-ckan-api-key.png
Normal file
BIN
src/assets/images/faq/generate-ckan-api-key.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
src/assets/logos/qsv-pro-logo-dark.png
Normal file
BIN
src/assets/logos/qsv-pro-logo-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/logos/qsv-pro-logo.png
Normal file
BIN
src/assets/logos/qsv-pro-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -1,5 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import ckanUrlLocation from "../assets/images/faq/ckan-url-location.png";
|
||||
import generateCkanApiKey from "../assets/images/faq/generate-ckan-api-key.png";
|
||||
import ckanApiKeyLocation from "../assets/images/faq/ckan-api-key-location.png";
|
||||
|
||||
const FAQData = [
|
||||
{
|
||||
|
|
@ -8,11 +11,56 @@ const FAQData = [
|
|||
},
|
||||
{
|
||||
question: "How do I get qsv pro?",
|
||||
answer: "qsv pro is currently in beta. You can get beta access by purchasing a subscription to qsv pro on our store. You will receive an email with a download link to qsv pro after purchasing a subscription, or you may click the Download button on this page's navigation bar to download qsv pro (license key still required).",
|
||||
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.",
|
||||
links: [
|
||||
{
|
||||
label: "Download qsv pro",
|
||||
url: "https://github.com/dathere/qsv-pro/releases/latest",
|
||||
},
|
||||
{
|
||||
label: "Purchase a license",
|
||||
url: "https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
question: "Where can I provide feedback?",
|
||||
answer: "There is a feedback button in the top right corner of qsv pro. You may also email us at dathere.com/contact.",
|
||||
answer: "There is a feedback button in the top right corner of qsv pro. You may also contact us with the links in the footer.",
|
||||
},
|
||||
{
|
||||
question:
|
||||
"Where can I find my CKAN dataset's URL that I want to upload my data to?",
|
||||
answer: "Your CKAN dataset's URL is the URL of your CKAN instance (e.g. https://demo.ckan.org) followed by /dataset/ and the dataset's ID (for example: https://demo.ckan.org/dataset/sample-dataset).",
|
||||
screenshots: [
|
||||
{
|
||||
src: ckanUrlLocation,
|
||||
alt: "Example of CKAN dataset URL location",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
question: "Where can I generate a CKAN API key?",
|
||||
answer: "You can generate a CKAN API key by logging into your CKAN account, clicking on the user settings gear icon on the top right corner, and clicking 'Regenerate API Key' on the bottom right corner of the page. Then when you click on your username on the top right corner, you will see your API key on the bottom left corner of the page.",
|
||||
screenshots: [
|
||||
{
|
||||
src: generateCkanApiKey,
|
||||
alt: "Example of CKAN API key generation on user's settings page",
|
||||
},
|
||||
{
|
||||
src: ckanApiKeyLocation,
|
||||
alt: "Example of CKAN API key location on user's profile page",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
question: "Where can I manage my billing information?",
|
||||
answer: "You may manage your billing information at store.dathere.com/billing.",
|
||||
links: [
|
||||
{
|
||||
label: "Manage billing information",
|
||||
url: "https://store.dathere.com/billing",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -38,6 +86,8 @@ export const FAQ = () => (
|
|||
<div key={index} className="w-full p-1">
|
||||
<FAQBox
|
||||
title={item.question}
|
||||
links={item.links}
|
||||
screenshots={item.screenshots}
|
||||
content={item.answer}
|
||||
key={`${item.question}-${item.answer}`}
|
||||
defaultOpen={index === 0}
|
||||
|
|
@ -51,7 +101,7 @@ export const FAQ = () => (
|
|||
</section>
|
||||
);
|
||||
|
||||
const FAQBox = ({ defaultOpen, title, content }) => {
|
||||
const FAQBox = ({ defaultOpen, title, links, screenshots, content }) => {
|
||||
const [isOpen, setIsOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
|
|
@ -70,6 +120,55 @@ const FAQBox = ({ defaultOpen, title, content }) => {
|
|||
>
|
||||
{content}
|
||||
</p>
|
||||
|
||||
{/* Links as buttons with link.url and link.label */}
|
||||
{links && links.length > 0 && (
|
||||
<div
|
||||
className={`transition-all duration-500 my-2 ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-wrap -m-1 space-x-2">
|
||||
{links.map((link, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-fit mt-1 py-1 px-2 border rounded border-blue-300"
|
||||
>
|
||||
<a
|
||||
href={link.url}
|
||||
className="text-blue-300 hover:text-blue-200"
|
||||
target="_blank"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{screenshots && screenshots.length > 0 && (
|
||||
<div
|
||||
className={`transition-all duration-500 my-2 ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-wrap -m-1">
|
||||
{screenshots.map((screenshot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-full p-1 space-y-2"
|
||||
>
|
||||
<img
|
||||
src={screenshot.src}
|
||||
alt={screenshot.alt}
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute top-6 right-4 sm:top-8 sm:right-8">
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -38,8 +38,7 @@ export const Features2 = () => (
|
|||
>
|
||||
CKAN
|
||||
</a>{" "}
|
||||
datastore & a data dictionary to specify file
|
||||
metadata.
|
||||
datastore to specify file metadata.
|
||||
</p>
|
||||
<ul className="mb-6 text-white">
|
||||
<li className="mb-4 flex">
|
||||
|
|
@ -49,6 +48,9 @@ export const Features2 = () => (
|
|||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>In-app data dictionary form</span>
|
||||
<span className="ml-2 text-red-300">
|
||||
(experimental)
|
||||
</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
|
|
|
|||
|
|
@ -29,24 +29,16 @@ 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">
|
||||
Early Access
|
||||
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
|
||||
</h2>
|
||||
<p className="mb-16 text-customGrayText leading-loose">
|
||||
No need to run qsv commands in your terminal. Try
|
||||
out our early access qsv Configurator GUI to use qsv
|
||||
out our experimental qsv Configurator GUI to use qsv
|
||||
commands with a graphical user interface.
|
||||
</p>
|
||||
<a
|
||||
href="https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="w-[210px] h-12 custom-button-colored mr-10 ">
|
||||
Start Your Free Trial
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-4/5 lg:w-2/3 lg:pl-16 flex justify-center mx-auto pt-16 lg:pt-0">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -5,23 +5,43 @@ import { TwitterIcon } from "../assets/icons/TwitterIcon";
|
|||
|
||||
const footerData = [
|
||||
{
|
||||
title: "Products",
|
||||
items: ["Services", "About Us", "News and Stories", "Roadmap"],
|
||||
title: "qsv pro",
|
||||
items: [
|
||||
{
|
||||
label: "Download",
|
||||
href: "https://github.com/dathere/qsv-pro-releases/releases",
|
||||
},
|
||||
{
|
||||
label: "Purchase a license key",
|
||||
href: "https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5",
|
||||
},
|
||||
{
|
||||
label: "Feedback form",
|
||||
href: "https://dathere.com/qsv-feedback-form/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Important Links",
|
||||
items: [
|
||||
"Organization Team",
|
||||
"Our Journeys",
|
||||
"Pricing Plans",
|
||||
"Roadmap",
|
||||
"Terms & Conditions",
|
||||
"Privacy Policy",
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: ["About Us", "Jobs", "Press", "Contact Us"],
|
||||
items: [
|
||||
{ label: "About Us", href: "https://dathere.com" },
|
||||
{ label: "Contact Us", href: "https://dathere.com/contact" },
|
||||
{
|
||||
label: "Terms and Conditions",
|
||||
href: "https://dathere.com/terms-and-conditions/",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "https://dathere.com/privacy-policy/",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -59,25 +79,25 @@ export const Footer = () => {
|
|||
</a>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="w-full lg:w-2/3 lg:pl-16 hidden lg:flex flex-wrap justify-between">
|
||||
{/* <div className="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
|
||||
<div className="w-full lg:w-2/3 lg:pl-16 lg:flex flex-wrap justify-between mb-4">
|
||||
<div className="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
|
||||
<h3 className="mb-6 text-2xl font-bold text-white">
|
||||
Products
|
||||
qsv pro
|
||||
</h3>
|
||||
<ul>
|
||||
{footerData[0].items.map((item, i) => (
|
||||
<li key={i} className="mb-4">
|
||||
<a
|
||||
className="text-gray-400 hover:text-gray-300"
|
||||
href="#"
|
||||
aria-label=""
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
>
|
||||
{item}
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* <div className="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
|
||||
<h3 className="mb-6 text-2xl font-bold text-white">
|
||||
Important Links
|
||||
|
|
@ -96,7 +116,7 @@ export const Footer = () => {
|
|||
))}
|
||||
</ul>
|
||||
</div> */}
|
||||
{/* <div className="w-full md:w-1/3 lg:w-auto">
|
||||
<div className="w-full md:w-1/3 lg:w-auto">
|
||||
<h3 className="mb-6 text-2xl font-bold text-white">
|
||||
Company
|
||||
</h3>
|
||||
|
|
@ -105,19 +125,36 @@ export const Footer = () => {
|
|||
<li key={i} className="mb-4">
|
||||
<a
|
||||
className="text-gray-400 hover:text-gray-300"
|
||||
href="#"
|
||||
aria-label=""
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
>
|
||||
{item}
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="lg:text-center text-sm text-gray-400 border-t border-[rgb(255,255,255,0.2)] pt-4 hidden lg:block">
|
||||
© 2023 datHere Inc.
|
||||
© 2023 datHere Inc. By using qsv pro and/or this
|
||||
site, you agree to our{" "}
|
||||
<a
|
||||
href="https://dathere.com/terms-and-conditions/"
|
||||
className="underline text-gray-400 hover:text-gray-300"
|
||||
target="_blank"
|
||||
>
|
||||
Terms and Conditions
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a
|
||||
href="https://dathere.com/privacy-policy/"
|
||||
className="underline text-gray-400 hover:text-gray-300"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useState } from "react";
|
|||
import { motion } from "framer-motion";
|
||||
|
||||
import dashboard from "../assets/images/dashboard.png";
|
||||
import qsvProLogo from "../assets/logos/qsv-pro-logo.png";
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
|
|
@ -9,7 +10,7 @@ export const Hero = () => {
|
|||
className="w-screen flex justify-center items-center bg-customDarkBg1 mb-[28vw] md:mb-[18vw] lg:mb-[10vw] xl:mb-[13vw] 2xl:mb-60 hero-bg-gradient pb-24 sm:pb-32 md:pb-44 lg:pb-0"
|
||||
id="home"
|
||||
>
|
||||
<div className="w-full w-[900px] md:w-[1100px] flex flex-col justify-center items-center pt-16 md:pt-16 lg:pt-20 text-center">
|
||||
<div className="w-full md:w-[1100px] flex flex-col justify-center items-center pt-16 md:pt-16 lg:pt-20 text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
|
|
@ -25,7 +26,12 @@ export const Hero = () => {
|
|||
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">
|
||||
<span>qsv pro</span>
|
||||
{/* <span>qsv pro</span> */}
|
||||
<img
|
||||
src={qsvProLogo}
|
||||
alt="qsv pro logo"
|
||||
className="w-72 sm:w-96 lg:w-120"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
|
|
@ -61,11 +67,11 @@ export const Hero = () => {
|
|||
>
|
||||
<div className="flex flex-col gap-2 sm:flex-row mt-14 mb-24 sm:mb-40 justify-center">
|
||||
<a
|
||||
href="https://store.dathere.com/checkout/buy/41f919fd-2b68-40ea-a5ed-0f531b2efba5"
|
||||
href="https://github.com/dathere/qsv-pro-releases/releases/latest"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="custom-button-colored w-64 sm:w-52 h-12 mr-0 sm:mr-4 lg:mr-6 mb-2 sm:mb-0">
|
||||
Start Your Free Trial
|
||||
<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>
|
||||
</a>
|
||||
{/* <div
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useState } from "react";
|
|||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
import datHereLogo from "../assets/logos/datHereLogo.png";
|
||||
import { GithubIcon } from "../assets/icons/GithubIcon";
|
||||
import qsvProLogo from "../assets/logos/qsv-pro-logo.png";
|
||||
|
||||
const navbarLinks = [
|
||||
{ label: "Home", href: "#home", ariaLabel: "Home" },
|
||||
|
|
@ -26,16 +26,21 @@ export const Navbar = () => {
|
|||
>
|
||||
<a className="navbar-link" href="#home" aria-label="Home">
|
||||
<div className="flex justify-start items-center grow basis-0">
|
||||
<div className="text-white mr-2 text-6xl">
|
||||
{/* <div className="text-white mr-2 text-6xl">
|
||||
<img
|
||||
src={datHereLogo}
|
||||
alt="datHere logo"
|
||||
className="w-6 h-6"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-white font-['Inter'] font-bold text-xl">
|
||||
</div> */}
|
||||
{/* <div className="text-white font-['Inter'] font-bold text-xl">
|
||||
qsv pro
|
||||
</div>
|
||||
</div> */}
|
||||
<img
|
||||
src={qsvProLogo}
|
||||
alt="qsv pro logo"
|
||||
className="w-24 h-6"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
|
|
@ -72,7 +77,6 @@ export const Navbar = () => {
|
|||
target="_blank"
|
||||
aria-label="source code"
|
||||
>
|
||||
<GithubIcon />
|
||||
<span className="pt-px">Download</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -117,7 +121,6 @@ export const Navbar = () => {
|
|||
href="https://github.com/dathere/qsv-pro-releases/releases/latest"
|
||||
target="_blank"
|
||||
>
|
||||
<GithubIcon />
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const pricingData = [
|
|||
"Transform data with recipes",
|
||||
"Upload to CKAN datastores",
|
||||
"Interactive data table view",
|
||||
"Early access to Configurator",
|
||||
"Experimental Configurator GUI",
|
||||
];
|
||||
|
||||
export const Pricing = () => {
|
||||
|
|
@ -117,7 +117,7 @@ export const Pricing = () => {
|
|||
</div>
|
||||
</div>
|
||||
<p className="mt-8 mb-8 2xl:mb-12 text-gray-500 leading-loose text-left">
|
||||
1 license key + 7 days free trial
|
||||
1 license key
|
||||
</p>
|
||||
<ul className="mb-14 text-white">
|
||||
{pricingData
|
||||
|
|
@ -145,7 +145,7 @@ export const Pricing = () => {
|
|||
target="_blank"
|
||||
>
|
||||
<div className="inline-block text-center py-2 px-4 w-full custom-button-colored leading-loose transition duration-200 mt-20">
|
||||
Start Your 7-Day Free Trial
|
||||
Purchase a License Key
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue