diff --git a/index.html b/index.html index 9b03156..ebfe82d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + - ArDrive Turbo App + ArDrive Gift App
diff --git a/src/components/Expandable.css b/src/components/Expandable.css new file mode 100644 index 0000000..687f16d --- /dev/null +++ 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 new file mode 100644 index 0000000..9b72059 --- /dev/null +++ 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 ( +
+ + {expanded && <>{answer}} +
+ ); +} diff --git a/src/components/Faq.content.tsx b/src/components/Faq.content.tsx new file mode 100644 index 0000000..f0f2f03 --- /dev/null +++ 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: ( + <> +

+ 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. +

+

+ 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. +

+ + ), + }, + { + question: "How are fees calculated?", + answer: ( + <> +

+ The file size determines the fee to upload data to the network. The + larger the file the higher the price will be. +

+

+ Note: All file sizes are represented using binary units of measurement + (i.e. 1 MB = 1024 KB). +

+ + ), + }, + + { + question: "What are Credits?", + answer: ( + <> +

+ 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. +

+

+ Learn more about + Credits. +

+ + ), + }, + { + question: "Is the price of data consistent?", + answer: ( + <> +

+ 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. +

+

+ 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. +

+ + ), + }, + { + question: "How do I know how big a file is?", + answer: ( +

+ 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. +

+ ), + }, + { + question: "How do I use a credit card?", + answer: ( +

+ You can purchase Credits with your credit card in the web app from the + profile menu. +

+ ), + }, +]; diff --git a/src/components/Faq.css b/src/components/Faq.css new file mode 100644 index 0000000..473a27f --- /dev/null +++ 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 new file mode 100644 index 0000000..8beee12 --- /dev/null +++ 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(undefined); + + return ( +
+

FAQs

+ {faqQuestionsAnswers.map((qa, index) => ( + + index === expanded ? setExpanded(undefined) : setExpanded(index) + } + > + ))} +
+ ); +} diff --git a/src/components/icons/UpArrowIcon.tsx b/src/components/icons/UpArrowIcon.tsx new file mode 100644 index 0000000..fe28715 --- /dev/null +++ b/src/components/icons/UpArrowIcon.tsx @@ -0,0 +1,20 @@ +import { JSX } from "react"; + +export default function UpArrowIcon(): JSX.Element { + return ( + + ); +} diff --git a/src/pages/GiftPage.tsx b/src/pages/GiftPage.tsx index de98b7c..55989ef 100644 --- a/src/pages/GiftPage.tsx +++ b/src/pages/GiftPage.tsx @@ -11,6 +11,7 @@ import { useCreditsForFiat } from "../hooks/useCreditsForFiat"; import { getCheckoutSessionUrl } from "../utils/getCheckoutSessionUrl"; import { Page } from "./Page"; import { ErrMsgCallbackAsProps } from "../types"; +import Faq from "../components/Faq"; const maxUSDAmount = 10000; const minUSDAmount = 5; @@ -74,134 +75,140 @@ function GiftForm({ errorCallback }: ErrMsgCallbackAsProps) { }; return ( -
-

Gift Credits to a friend.

- -
- -
- - - + <> + +

Gift Credits to a friend.

+ +
+ +
+ + + +
+ + +
+ {"$".toLocaleUpperCase()} + +
- -
- {"$".toLocaleUpperCase()} + {credits && ( +
+ {wincForOneGiB && ( +
+ {"$".toLocaleUpperCase()} + + {usdWhenCreditsWereLastUpdatedRef} + {" "} + ≈{" "} + {credits.toFixed(4)} + Credits ≈{" "} + + {( + Number(credits * wincPerCredit) / Number(wincForOneGiB) + ).toFixed(2)} + + GiB +
+ )} +
+ )} + +
+ { + setRecipientEmail(e.target.value); + }} />
-
- - {credits && ( -
- {wincForOneGiB && ( -
- {"$".toLocaleUpperCase()} - - {usdWhenCreditsWereLastUpdatedRef} - {" "} - ≈ {credits.toFixed(4)} - Credits ≈{" "} - - {( - Number(credits * wincPerCredit) / Number(wincForOneGiB) - ).toFixed(2)} - - GiB -
- )} + +
+ +