feat: add FAQ PE-5161

ardriveapp · Dec 12, 2023 · ac5f70b · ac5f70b
1 parent f8ab20a
commit ac5f70b
Show file tree

Hide file tree

Showing 8 changed files with 384 additions and 123 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="The ArDrive Turbo App" />
+    <meta name="description" content="The ArDrive Gift App" />
     <link rel="stylesheet" href="/font.css" />
     <link
       rel="preload"
@@ -39,7 +39,7 @@
       data-domain="gift.ardrive.io"
       src="https://plausible.io/js/plausible.js"
     ></script>
-    <title>ArDrive Turbo App</title>
+    <title>ArDrive Gift App</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/Expandable.css b/src/components/Expandable.css
@@ -0,0 +1,64 @@
+.expandable {
+  padding: 1.5rem 0;
+  font-family: "Wavehaus-Book";
+}
+
+.expandable h3 {
+  @media (min-width: 640px) {
+    font-size: 18px;
+  }
+
+  @media (min-width: 800px) {
+    font-size: 20px;
+  }
+
+  @media (min-width: 1200px) {
+    font-size: 24px;
+  }
+}
+
+.expandable:not(:last-of-type) {
+  border-bottom: 0.25px;
+  border-color: var(--off-gray);
+  border-bottom-style: solid;
+}
+
+.expandable button {
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+
+  padding: 0;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  text-align: left;
+  letter-spacing: 1.09px;
+  font-family: Wavehaus-Book;
+}
+
+.expandable div {
+  padding-left: 1rem;
+  height: 1rem;
+  width: 1rem;
+  display: flex;
+  justify-content: center;
+}
+
+.expandable p {
+  padding-top: 1rem;
+}
+
+.expandable strong {
+  font-family: "Wavehaus-Bold";
+}
+
+.expandable.expanded button {
+  font-family: Wavehaus-Semi;
+}
+
+.expandable.expanded div {
+  transform: rotate(180deg);
+}
diff --git a/src/components/Expandable.tsx b/src/components/Expandable.tsx
@@ -0,0 +1,30 @@
+import { JSX } from "react";
+import * as React from "react";
+import UpArrowIcon from "./icons/UpArrowIcon";
+import "./Expandable.css";
+
+interface ExpandableProps {
+  question: string;
+  answer: React.ReactNode;
+  expanded: boolean;
+  setExpanded: () => void;
+}
+
+export default function Expandable({
+  question,
+  answer,
+  expanded,
+  setExpanded,
+}: ExpandableProps): JSX.Element {
+  return (
+    <div className={`expandable ${expanded ? "expanded" : ""}`}>
+      <button aria-label={question} onClick={() => setExpanded()}>
+        <h3>{question}</h3>
+        <div className="expandable-icon-container">
+          <UpArrowIcon />
+        </div>
+      </button>
+      {expanded && <>{answer}</>}
+    </div>
+  );
+}
diff --git a/src/components/Faq.content.tsx b/src/components/Faq.content.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+export const faqQuestionsAnswers: Array<{
+  question: string;
+  answer: React.JSX.Element;
+}> = [
+  {
+    question: "How much storage do I need?",
+    answer: (
+      <>
+        <p>
+          A little bit of money can go a long way in data storage. As you can
+          see, a small amount of USD can purchase storage for thousands of
+          documents or hundreds of photos or songs.
+        </p>
+        <p>
+          Files of the same type (docs, jpegs, or mp3) will vary in sizes, but
+          in general: 1 document 0.31 MB (320KB); 1 HD Photo 2.5 MB; 3.5 minute
+          Song 3.5 MB; 1 minute HD video 100 MB.
+        </p>
+      </>
+    ),
+  },
+  {
+    question: "How are fees calculated?",
+    answer: (
+      <>
+        <p>
+          The file size determines the fee to upload data to the network. The
+          larger the file the higher the price will be.
+        </p>
+        <p>
+          Note: All file sizes are represented using binary units of measurement
+          (i.e. 1 MB = 1024 KB).
+        </p>
+      </>
+    ),
+  },
+
+  {
+    question: "What are Credits?",
+    answer: (
+      <>
+        <p>
+          Credits offers users the ability to pay via credit card instead of
+          using the AR Token. Credits represent a 1:1 value with the AR Token,
+          but are used solely to pay for uploads with ArDrive.
+        </p>
+        <p>
+          <span>Learn more about </span>
+          <a href="https://ardrive.io/turbo/infographic/">Credits</a>.
+        </p>
+      </>
+    ),
+  },
+  {
+    question: "Is the price of data consistent?",
+    answer: (
+      <>
+        <p>
+          Not exactly. The Arweave network protocol is always adjusting the data
+          price to maintain sustainable, perpetual storage. The data price is
+          lowered as the network increases its overall capacity.
+        </p>
+        <p>
+          This can result in a fluctuating data price. However, for most files
+          these fluctuations would only increase or decrease costs by fractions
+          of a cent.
+        </p>
+      </>
+    ),
+  },
+  {
+    question: "How do I know how big a file is?",
+    answer: (
+      <p>
+        In ArDrive, before any files are uploaded to the network, we calculate
+        their size and estimate the price to upload. Before it is paid for and
+        stored permanently, you must approve the upload. This ensures you are
+        only uploading the right data for the right price.
+      </p>
+    ),
+  },
+  {
+    question: "How do I use a credit card?",
+    answer: (
+      <p>
+        You can purchase Credits with your credit card in the web app from the
+        profile menu.
+      </p>
+    ),
+  },
+];
diff --git a/src/components/Faq.css b/src/components/Faq.css
@@ -0,0 +1,23 @@
+.faq {
+  letter-spacing: 1.09px;
+  width: 100%;
+  padding-top: 4rem;
+  max-width: 40rem;
+
+  @media (min-width: 640px) {
+    font-size: 18px;
+  }
+
+  @media (min-width: 800px) {
+    font-size: 20px;
+  }
+
+  @media (min-width: 1200px) {
+    font-size: 24px;
+  }
+}
+
+.faq h2 {
+  font-family: Wavehaus-Extra;
+  padding-bottom: 1rem;
+}
diff --git a/src/components/Faq.tsx b/src/components/Faq.tsx
@@ -0,0 +1,25 @@
+import { JSX, useState } from "react";
+import Expandable from "./Expandable";
+import { faqQuestionsAnswers } from "./Faq.content";
+import "./Faq.css";
+
+export default function Faq(): JSX.Element {
+  const [expanded, setExpanded] = useState<number | undefined>(undefined);
+
+  return (
+    <section className="faq">
+      <h2 aria-label="Frequently asked questions">FAQs</h2>
+      {faqQuestionsAnswers.map((qa, index) => (
+        <Expandable
+          key={qa.question}
+          question={qa.question}
+          answer={qa.answer}
+          expanded={index === expanded}
+          setExpanded={() =>
+            index === expanded ? setExpanded(undefined) : setExpanded(index)
+          }
+        ></Expandable>
+      ))}
+    </section>
+  );
+}
diff --git a/src/components/icons/UpArrowIcon.tsx b/src/components/icons/UpArrowIcon.tsx
@@ -0,0 +1,20 @@
+import { JSX } from "react";
+
+export default function UpArrowIcon(): JSX.Element {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fas"
+      data-icon="chevron-up"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"
+      ></path>
+    </svg>
+  );
+}