Merge pull request #15 from EthereumBogota/faq-section

Added FAQ section
EthereumBogota · Sep 20, 2023 · 64c2e47 · 64c2e47
2 parents 4afae48 + f48aaa3
commit 64c2e47
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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>
+  )
+}
diff --git 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
@@ -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
@@ -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>
+    </>
+  )
+}
diff --git 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
@@ -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
@@ -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>