From f48aaa3ef892b589970d62533268a7d792faf67e Mon Sep 17 00:00:00 2001
From: Christian Arevalo <tiancris200@gmail.com>
Date: Wed, 20 Sep 2023 13:00:21 -0500
Subject: [PATCH] Added FAQ section

---
 public/locales/en/translation.json      |  3 ++
 public/locales/es/translation.json      |  3 ++
 src/utils/components/AccordionC.tsx     | 70 +++++++++++++++++++++++++
 src/utils/components/EventCard.tsx      |  3 +-
 src/utils/components/Events.tsx         | 15 +++---
 src/utils/components/FAQ.tsx            | 21 ++++++++
 src/utils/components/MiddleSections.tsx |  3 ++
 src/utils/components/Navbar.tsx         |  4 +-
 src/utils/components/Section.tsx        | 20 +++++--
 9 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/components/AccordionC.tsx
 create mode 100644 src/utils/components/FAQ.tsx

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index f58538c..132b8d0 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -43,6 +43,9 @@
       "title": "Your Safety, Our Priority",
       "description": "Safeguard your event experience. Our platform ensures each event remains secure and transparent, empowering you with peace of mind. Your personal data remains private, allowing you to focus wholeheartedly on what truly matters: connecting with others in a worry-free environment.",
       "button": "Discover More"
+    },
+    "FAQ": {
+      "title": "Frequently Asked Questions (FAQ)"
     }
   },
   "footer": {
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
index e906fa4..aaa03d9 100644
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@@ -43,6 +43,9 @@
       "title": "Tu Seguridad, Nuestra Prioridad",
       "description": "Protege la experiencia de tu evento. Nuestra plataforma garantiza que cada evento sea seguro y transparente, brindando tranquilidad. Tus datos personales permanecen privados, lo que permite que te concentres absolutamente en lo que realmente importa: conectar con otras personas en un entorno sin preocupaciones.",
       "button": "Discover More"
+    },
+    "FAQ": {
+      "title": "Preguntas Frecuentes (PF)"
     }
   },
   "footer": {
diff --git a/src/utils/components/AccordionC.tsx b/src/utils/components/AccordionC.tsx
new file mode 100644
index 0000000..094b5eb
--- /dev/null
+++ b/src/utils/components/AccordionC.tsx
@@ -0,0 +1,70 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  Flex,
+  Text,
+  Container,
+} from '@chakra-ui/react'
+import { FaChevronDown } from 'react-icons/fa'
+
+
+export default function AccordionC() {
+  return (
+    <Flex
+      align={'center'}
+      justify={'center'}
+    >
+      <Container w={"80%"}>
+        <Accordion allowMultiple width="100%" maxW="lg" rounded="lg" fontFamily={"space"}>
+          <AccordionItem>
+            <AccordionButton
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              p={4}>
+              <Text fontSize="md">What is MeetDapp?</Text>
+              <FaChevronDown fontSize="24px" />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Text color="gray.600">
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore eum culpa similique vitae veritatis commodi, asperiores magni officiis quis molestiae, recusandae, unde animi ad rem nesciunt placeat praesentium temporibus aut.
+              </Text>
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              p={4}>
+              <Text fontSize="md">What advantages to use?</Text>
+              <FaChevronDown fontSize="24px" />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Text color="gray.600">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore quis minus ipsum similique expedita quo, dolorum a iure, hic eum! Aliquid nihil error recusandae illum praesentium. Eligendi, voluptates voluptas?
+              </Text>
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              p={4}>
+              <Text fontSize="md">How to start using MeetDapp?</Text>
+              <FaChevronDown fontSize="24px" />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Text color="gray.600">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, nam tenetur laudantium nemo expedita eum facilis hic eos consequatur vel consequuntur suscipit dolore ex quod eius iusto optio saepe a.
+              </Text>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </Container>
+    </Flex>
+  )
+}
\ No newline at end of file
diff --git a/src/utils/components/EventCard.tsx b/src/utils/components/EventCard.tsx
index e094c90..e733eb5 100644
--- a/src/utils/components/EventCard.tsx
+++ b/src/utils/components/EventCard.tsx
@@ -3,8 +3,6 @@
 import {
   Box,
   Text,
-  List,
-  ListItem,
   Image,
   Heading,
   Flex,
@@ -25,6 +23,7 @@ export default function EventCard() {
       maxW={"400px"}
     >
       <Image
+        objectFit={'cover'}
         w={"full"}
         h={'200px'}
         src={"/img/BSL.jpg"}
diff --git a/src/utils/components/Events.tsx b/src/utils/components/Events.tsx
index 2c339bf..99ef464 100644
--- a/src/utils/components/Events.tsx
+++ b/src/utils/components/Events.tsx
@@ -6,6 +6,7 @@ import {
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import EventCard from "./EventCard";
+import Link from "next/link";
 
 export default function Events(): React.ReactNode {
   const { t } = useTranslation()
@@ -17,15 +18,11 @@ export default function Events(): React.ReactNode {
           {t('landing.top-events.title')} 🔥
         </Heading>
         <Grid width={"full"} templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }} gap={{ base: 10, lg: 16 }}>
-          <GridItem justifySelf={"center"}>
-            <EventCard />
-          </GridItem>
-          <GridItem justifySelf={"center"}>
-            <EventCard />
-          </GridItem>
-          <GridItem justifySelf={"center"}>
-            <EventCard />
-          </GridItem>
+          <Link href={"/dashboard"}>
+            <GridItem justifySelf={"center"}>
+              <EventCard />
+            </GridItem>
+          </Link>
         </Grid>
       </Flex>
     </>
diff --git a/src/utils/components/FAQ.tsx b/src/utils/components/FAQ.tsx
new file mode 100644
index 0000000..72afc36
--- /dev/null
+++ b/src/utils/components/FAQ.tsx
@@ -0,0 +1,21 @@
+import {
+  Flex,
+  Heading,
+} from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import AccordionC from "./AccordionC";
+
+export default function Events(): React.ReactNode {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Flex width={"90%"} maxW={"1200px"} flexDirection={'column'} gap={10} zIndex={50} color={'#00001C'} px={{ base: 4, lg: 0 }} my={10}>
+        <Heading textAlign={"center"} fontFamily="spaceBold">
+          {t('landing.FAQ.title')}
+        </Heading>
+        <AccordionC />
+      </Flex>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/utils/components/MiddleSections.tsx b/src/utils/components/MiddleSections.tsx
index 8fb94e9..848fa27 100644
--- a/src/utils/components/MiddleSections.tsx
+++ b/src/utils/components/MiddleSections.tsx
@@ -4,6 +4,7 @@ import { Flex } from '@chakra-ui/react'
 import Section from './Section'
 import { useTranslation } from 'react-i18next'
 import Events from './Events'
+import FAQ from './FAQ'
 
 export default function MiddleSections() {
   const { t } = useTranslation()
@@ -43,6 +44,8 @@ export default function MiddleSections() {
         image={'/img/Section 4 Image.png'}
         imageRight={false}
       />
+
+      <FAQ />
     </Flex >
 
   )
diff --git a/src/utils/components/Navbar.tsx b/src/utils/components/Navbar.tsx
index 915037e..381d2d8 100644
--- a/src/utils/components/Navbar.tsx
+++ b/src/utils/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import '@/styles/globals.css'
-import { Box, Flex, Text, Button, Input, ButtonGroup, Avatar, CloseButton, Tooltip } from '@chakra-ui/react'
+import { Box, Flex, Text, Button, ButtonGroup, Avatar, CloseButton, Tooltip } from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Logo from './Logo'
@@ -83,7 +83,7 @@ export default function Navbar(): React.ReactNode {
 					px={{ base: 4, lg: 0 }}
 					maxWidth={'1200px'}
 				>
-					<Link href={'/'}>
+					<Link href={'/'} _hover={{ textDecoration: "none" }}>
 						<Logo />
 					</Link>
 
diff --git a/src/utils/components/Section.tsx b/src/utils/components/Section.tsx
index 4bd0423..c56ab50 100644
--- a/src/utils/components/Section.tsx
+++ b/src/utils/components/Section.tsx
@@ -22,7 +22,14 @@ export default function Section(props: ISectionProps): React.ReactNode {
 
 
   return (
-    <Flex width={"90%"} maxW={"1200px"} flexDirection={'column'} color={'#00001C'} fontFamily="space" fontWeight={"normal"} px={{ base: 4, lg: 0 }}>
+    <Flex
+      width={"90%"}
+      maxW={"1200px"}
+      flexDirection={'column'}
+      color={'#00001C'}
+      fontFamily="space"
+      fontWeight={"normal"}
+      px={{ base: 4, lg: 0 }}>
       <Flex width={"100%"}>
         <StackDivider >
           <Heading
@@ -48,8 +55,13 @@ export default function Section(props: ISectionProps): React.ReactNode {
         </StackDivider>
       </Flex>
 
-      <Flex zIndex={50} justify={{ lg: "space-between" }} alignContent={{ base: "center" }} flexDirection={{ base: 'column', lg: `${imageRight ? "row" : "row-reverse"}` }}>
-        <Flex direction={"column"} justifyContent={'space-between'} h={'full'} w={{ base: 'full', lg: "50%" }} gap={'40px'}>
+      <Flex
+        zIndex={50}
+        justify={{ lg: "space-between" }}
+        alignContent={{ base: "center" }}
+        gap={{ base: "20px", lg: 0 }}
+        flexDirection={{ base: 'column', lg: `${imageRight ? "row" : "row-reverse"}` }}>
+        <Flex direction={"column"} justifyContent={'space-between'} h={'full'} w={{ base: 'full', lg: "50%" }} gap={{ base: "20px", lg: '30px' }}>
           <Text
             fontFamily="space"
             fontWeight={"normal"}
@@ -68,7 +80,6 @@ export default function Section(props: ISectionProps): React.ReactNode {
             color={'#DDEBED'}
             fontSize={{ base: "20px", lg: '24px' }}
             fontWeight={"light"}
-            mt={"15px"}
             _hover={{
               bg: '#227682',
               transform: 'scale(1.03)',
@@ -81,6 +92,7 @@ export default function Section(props: ISectionProps): React.ReactNode {
           alt={'Section 1 Image'}
           width={{ base: "70%", md: "50%", lg: "40%" }}
           objectFit={'cover'}
+          mx={{ base: "auto", lg: 0 }}
           src={image}
         />
       </Flex>