feat: update site with new logo, faq, misc. changes

src/components/FAQ.jsx

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

src/components/Features2.jsx

@@ -38,8 +38,7 @@ export const Features2 = () => (
                             >
                                 CKAN
                             </a>{" "}
-                            datastore & a data dictionary to specify file
+                            datastore to specify file metadata.
-                            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 />

src/components/FeaturesDiagonal.jsx

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

src/components/Footer.jsx

@@ -5,23 +5,43 @@ import { TwitterIcon } from "../assets/icons/TwitterIcon";
 
 const footerData = [
     {
-        title: "Products",
+        title: "qsv pro",
-        items: ["Services", "About Us", "News and Stories", "Roadmap"],
+        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",
+            { label: "Terms & Conditions", href: "#" },
-            "Our Journeys",
+            { label: "Privacy Policy", href: "#" },
-            "Pricing Plans",
-            "Roadmap",
-            "Terms & Conditions",
-            "Privacy Policy",
         ],
     },
     {
         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 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">
+                            <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="#"
+                                                href={item.href}
-                                                aria-label=""
+                                                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="#"
+                                                href={item.href}
-                                                aria-label=""
+                                                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">
-                        &copy; 2023 datHere Inc.
+                        &copy; 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>

src/components/Hero.jsx

@@ -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">
+                            <div className="custom-button-colored w-64 h-12 mr-0 sm:mr-4 lg:mr-6 mb-2 sm:mb-0">
-                                Start Your Free Trial
+                                Start Your 7-Day Free Trial
                             </div>
                         </a>
                         {/* <div

src/components/Navbar.jsx

@@ -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> */}
-                            <div className="text-white font-['Inter'] font-bold text-xl">
+                            {/* <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>

src/components/Pricing.jsx

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