-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(STK-198): update FAQ section structure to support QA abstractio…
…n and FA events
- Loading branch information
1 parent
dc1fe69
commit a3339ce
Showing
5 changed files
with
160 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| "use client"; | ||
|
|
||
| import { HeadingText } from "@/ui"; | ||
|
|
||
| import { QAndAAccordion } from "./QAndAAccordion"; | ||
| import { FAQ_QUESTIONS_AND_ANSWERS, FaqQa } from "./constants"; | ||
| import { useFathomAnalytics } from "@/contexts"; | ||
|
|
||
| export const FAQ = () => { | ||
| const { trackClick } = useFathomAnalytics(); | ||
|
|
||
| return ( | ||
| <section className="px-6 py-12 md:py-32" id="faqs"> | ||
| <div className="max-w-6xl mx-auto"> | ||
| <div className="flex flex-col md:flex-row md:justify-between"> | ||
| <HeadingText size={4} className="pb-10 md:pb-0"> | ||
| Frequently asked questions | ||
| </HeadingText> | ||
| <div className="w-full max-w-lg space-y-4"> | ||
| {FAQ_QUESTIONS_AND_ANSWERS.map((faq: FaqQa, faqIndex: number) => ( | ||
| <QAndAAccordion | ||
| key={faqIndex} | ||
| onClick={() => trackClick(faq.trackEventName)} | ||
| question={faq.question} | ||
| startOpen={faq.startOpen} | ||
| > | ||
| {faq.answers.map((answer: string, answerIndex: number) => ( | ||
| <p key={answerIndex}>{answer}</p> | ||
| ))} | ||
| </QAndAAccordion> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; |
49 changes: 49 additions & 0 deletions
49
packages/landing/components/sections/FAQ/QAndAAccordion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| "use client"; | ||
|
|
||
| import { PropsWithChildren, useState } from "react"; | ||
|
|
||
| import { Icon } from "@/ui"; | ||
|
|
||
| interface QAndAAccordionProps extends PropsWithChildren { | ||
| onClick?: (args?: any) => void; | ||
| question: string; | ||
| startOpen?: boolean; | ||
| } | ||
|
|
||
| export const QAndAAccordion = ({ | ||
| children, | ||
| onClick, | ||
| question, | ||
| startOpen, | ||
| }: QAndAAccordionProps) => { | ||
| const [isOpen, setIsOpen] = useState(startOpen ?? false); | ||
| const toggle = () => setIsOpen(!isOpen); | ||
|
|
||
| return ( | ||
| <div | ||
| className={` | ||
| bg-white hover:bg-surface-25 | ||
| border | ||
| cursor-pointer | ||
| px-6 py-3 | ||
| rounded-xl | ||
| space-y-4 | ||
| ${isOpen ? "shadow-md" : "shadow-sm"} | ||
| `} | ||
| onClick={() => { | ||
| if (onClick && !isOpen) onClick(); | ||
| toggle(); | ||
| }} | ||
| > | ||
| <div className="flex items-center justify-between"> | ||
| <p className="text-lg font-semibold md:text-xl">{question}</p> | ||
| <Icon name={isOpen ? "caret-up" : "caret-down"} /> | ||
| </div> | ||
| {isOpen && ( | ||
| <div className="space-y-3 text-lg font-medium text-em-med"> | ||
| {children} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { EVENTS } from "@/analytics"; | ||
|
|
||
| type FaqAnswers = string[]; | ||
|
|
||
| export interface FaqQa { | ||
| answers: FaqAnswers; | ||
| question: string; | ||
| startOpen?: boolean; | ||
| trackEventName: string; | ||
| } | ||
|
|
||
| export const FAQ_QUESTIONS_AND_ANSWERS: FaqQa[] = [ | ||
| { | ||
| question: "What is Stackly?", | ||
| answers: [ | ||
| `Stackly is a simple non-custodial DCA app that makes it easy to do recurring | ||
| swaps of any token.`, | ||
| ], | ||
| startOpen: true, | ||
| trackEventName: EVENTS.SECTIONS.FAQ.WHAT_IS_STACKLY_CLICK, | ||
| }, | ||
| { | ||
| question: "What is a stack?", | ||
| answers: [ | ||
| `We call it stack the creation of the recurrent order with the total amount | ||
| that will be used to swap the choosen tokens on the choosen frequency | ||
| (hourly, daily, etc).`, | ||
| `Example: A stack of WETH using 500WXDAI that will do recurrent swaps every | ||
| day till the end of the week.`, | ||
| ], | ||
| trackEventName: EVENTS.SECTIONS.FAQ.WHAT_IS_STACK_CLICK, | ||
| }, | ||
| { | ||
| question: "How does Stackly work?", | ||
| answers: [ | ||
| `When you stack a token, stackly creates a contract for you with the funds | ||
| and uses CoW protocol to place recurring orders (stacks) at the frequency | ||
| you choose.`, | ||
| ], | ||
| trackEventName: EVENTS.SECTIONS.FAQ.HOW_STACKLY_WORKS, | ||
| }, | ||
| { | ||
| question: "What is DCA?", | ||
| answers: [ | ||
| `DCA stands for Dollar-Cost Averaging, which is an investment strategy used | ||
| in the financial markets. DCA involves regularly investing a fixed amount | ||
| of money at predetermined intervals, regardless of the asset's price.`, | ||
| ], | ||
| trackEventName: EVENTS.SECTIONS.FAQ.WHAT_IS_DCA, | ||
| }, | ||
| { | ||
| question: "Why one should do DCA?", | ||
| answers: [ | ||
| `Recurring swaps (aka DCA) remove the need to time the market, neutralising | ||
| the short term market volatility, and helps you build a portfolio, | ||
| distributed over a period of time.`, | ||
| ], | ||
| trackEventName: EVENTS.SECTIONS.FAQ.WHY_TO_DCA, | ||
| }, | ||
| { | ||
| question: "Can I cancel my stacks?", | ||
| answers: [ | ||
| `Yes. You can cancel your stacks anytime. Your funds will be withdrawn | ||
| immediately to your wallet. To do it, you have to connect your wallet, | ||
| go to your stacks, choose a stack, click cancel and confirm transaction | ||
| with your wallet.`, | ||
| ], | ||
| trackEventName: EVENTS.SECTIONS.FAQ.HOW_CANCEL_STACK, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./FAQ"; |