Flatten

packages/leafcutter-common/components/FAQ.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { FC } from "react";
+import { useTranslate } from "react-polyglot";
+import { Box, Grid } from "@mui/material";
+import { PageHeader } from "./PageHeader";
+import { Question } from "./Question";
+import { useAppContext } from "../../../apps/leafcutter/app/_components/AppProvider";
+import FaqHeader from "../images/faq-header.svg";
+
+export const FAQ: FC = () => {
+  const t = useTranslate();
+  const {
+    colors: { lavender },
+    typography: { h1, h4, p },
+  } = useAppContext();
+
+  const questions = [
+    {
+      question: t("whatIsLeafcutterQuestion"),
+      answer: t("whatIsLeafcutterAnswer"),
+    },
+    {
+      question: t("whoBuiltLeafcutterQuestion"),
+      answer: t("whoBuiltLeafcutterAnswer"),
+    },
+    {
+      question: t("whoCanUseLeafcutterQuestion"),
+      answer: t("whoCanUseLeafcutterAnswer"),
+    },
+    {
+      question: t("whatCanYouDoWithLeafcutterQuestion"),
+      answer: t("whatCanYouDoWithLeafcutterAnswer"),
+    },
+
+    {
+      question: t("whereIsTheDataComingFromQuestion"),
+      answer: t("whereIsTheDataComingFromAnswer"),
+    },
+    {
+      question: t("whereIsTheDataStoredQuestion"),
+      answer: t("whereIsTheDataStoredAnswer"),
+    },
+    {
+      question: t("howDoWeKeepTheDataSafeQuestion"),
+      answer: t("howDoWeKeepTheDataSafeAnswer"),
+    },
+
+    {
+      question: t("howLongDoYouKeepTheDataQuestion"),
+      answer: t("howLongDoYouKeepTheDataAnswer"),
+    },
+    {
+      question: t("whatOrganizationsAreParticipatingQuestion"),
+      answer: t("whatOrganizationsAreParticipatingAnswer"),
+    },
+    {
+      question: t("howDidYouGetMyProfileInformationQuestion"),
+      answer: t("howDidYouGetMyProfileInformationAnswer"),
+    },
+    {
+      question: t("howCanILearnMoreAboutLeafcutterQuestion"),
+      answer: t("howCanILearnMoreAboutLeafcutterAnswer"),
+    },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        backgroundColor={lavender}
+        sx={{
+          backgroundImage: `url(${FaqHeader.src})`,
+          backgroundSize: "150px",
+          backgroundPosition: "bottom right",
+          backgroundRepeat: "no-repeat",
+        }}
+      >
+        <Grid
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Grid item>
+            <Box component="h1" sx={{ ...h1 }}>
+              {t("frequentlyAskedQuestionsTitle")}
+            </Box>
+            <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
+              {t("frequentlyAskedQuestionsSubtitle")}
+            </Box>
+            <Box component="p" sx={{ ...p }}>
+              {t("frequentlyAskedQuestionsDescription")}
+            </Box>
+          </Grid>
+        </Grid>
+      </PageHeader>
+      {questions.map((q: any, index: number) => (
+        <Question key={index} question={q.question} answer={q.answer} />
+      ))}
+    </>
+  );
+};