From c93981f090a6ed1b27842723682724709dd4b850 Mon Sep 17 00:00:00 2001
From: Sang Dang <sangdth@gmail.com>
Date: Thu, 7 Dec 2023 22:43:02 +0200
Subject: [PATCH] added FAQ section

---
 app/(home)/components/FAQs/index.tsx   | 74 ++++++++++++++++++++++++++
 app/(home)/components/Footer/index.tsx |  4 +-
 app/(home)/components/index.ts         |  1 +
 app/(home)/page.tsx                    |  4 +-
 components/client/NextLink/index.tsx   |  7 ---
 5 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 app/(home)/components/FAQs/index.tsx

diff --git a/app/(home)/components/FAQs/index.tsx b/app/(home)/components/FAQs/index.tsx
new file mode 100644
index 0000000..e3e0ae1
--- /dev/null
+++ b/app/(home)/components/FAQs/index.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Box,
+  Heading,
+  Container,
+  Text,
+  Stack,
+  Flex,
+} from '@/components/chakra';
+
+const data = [
+  {
+    question: 'Can I use the free plan for commercial purposes?',
+    answer:
+      'Yes, absolutely! We want to make sure that everyone can use pika.menu for free, whether it is for a small coffee shop or big restaurant use. However, we do have a fair use policy in place to prevent abuse. If you exceed the fair use policy, we may ask you to upgrade to the Pro plan.',
+  },
+  {
+    question: 'Can I cancel my subscription at any time?',
+    answer:
+      'Yes, you can cancel your subscription at any time. If you cancel your subscription, you will still be able to use pika.menu until the end of your billing period. After that, you will be downgraded to the free plan.',
+  },
+  {
+    question: 'Do you offer refunds?',
+    answer:
+      'We currently do not offer refunds. However, you can cancel your subscription at any time, after which you will not be charged again. We are constantly working on improving Dub, so this might change in the future.',
+  },
+];
+
+export const FAQs = () => {
+  return (
+    <Container maxW="container.xl" mb={20}>
+      <Flex gap={10}>
+        <Stack maxW="320px">
+          <Heading as="h2" fontSize="4xl">
+            FAQs
+          </Heading>
+          <Text>
+            Everything you need to know about the product and billing. For questions about
+            licensing, please see our licensing page.
+          </Text>
+        </Stack>
+
+        <Accordion allowToggle width="100%">
+          {data.map(({ question, answer }) => (
+            <AccordionItem key={question}>
+              <Heading as="h4">
+                <AccordionButton>
+                  <Box
+                    as="span"
+                    flex="1"
+                    py={3}
+                    textAlign="left"
+                    fontWeight="bold"
+                    fontSize="large"
+                  >
+                    {question}
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+              </Heading>
+              <AccordionPanel pb={4}>{answer}</AccordionPanel>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </Flex>
+    </Container>
+  );
+};
diff --git a/app/(home)/components/Footer/index.tsx b/app/(home)/components/Footer/index.tsx
index 41da434..94e6f65 100644
--- a/app/(home)/components/Footer/index.tsx
+++ b/app/(home)/components/Footer/index.tsx
@@ -103,7 +103,9 @@ export const Footer = () => {
               <UnorderedList minH={20} listStyleType="none" marginInline={0} spacing={2}>
                 {links.map(({ label, url, isExternal }) => (
                   <ListItem key={label}>
-                    <NextLink href={url}>{label}</NextLink>{' '}
+                    <Button variant="link" size="sm" as={NextLink} href={url}>
+                      {label}
+                    </Button>{' '}
                     {isExternal && <ExternalLinkIcon mx="2px" />}
                   </ListItem>
                 ))}
diff --git a/app/(home)/components/index.ts b/app/(home)/components/index.ts
index 8f642af..f2fc086 100644
--- a/app/(home)/components/index.ts
+++ b/app/(home)/components/index.ts
@@ -4,3 +4,4 @@ export * from './Features';
 export * from './Highlights';
 export * from './Pricing';
 export * from './Footer';
+export * from './FAQs';
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
index cd6994f..f189cb9 100644
--- a/app/(home)/page.tsx
+++ b/app/(home)/page.tsx
@@ -2,7 +2,7 @@ import { Box } from '@/components/chakra';
 import { getSession } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 
-import { Features, HeroSection, Highlights, PricingSection } from './components';
+import { FAQs, Features, HeroSection, Highlights, PricingSection } from './components';
 
 export default async function HomePage() {
   const { session } = await getSession();
@@ -20,6 +20,8 @@ export default async function HomePage() {
       <PricingSection />
 
       <Highlights />
+
+      <FAQs />
     </Box>
   );
 }
diff --git a/components/client/NextLink/index.tsx b/components/client/NextLink/index.tsx
index 82c58a7..467f074 100644
--- a/components/client/NextLink/index.tsx
+++ b/components/client/NextLink/index.tsx
@@ -17,11 +17,4 @@ export const NextLink = chakra<typeof Link, LinkProps>(Link, {
       'shallow',
       'target',
     ].includes(prop),
-  baseStyle: {
-    color: 'gray',
-
-    _hover: {
-      color: 'brand.500',
-    },
-  },
 });