From ccab7806902e42ae1c6abb1a1c10bab768e70cec Mon Sep 17 00:00:00 2001
From: "Japheth Louie M. Gofredo" <83058948+japhethLG@users.noreply.github.com>
Date: Mon, 20 May 2024 09:46:02 +0800
Subject: [PATCH] feat: Demo page add testimonial section and FAQs (#2456)
# Description
Added the FAQs component below the form.
Background color for Testimonial and FAQs the same blue #101828 hex code
throughout the page to make it look cohesive.
Fixes # 2454
## Type of change
Please delete options that are not relevant.
- [x] New feature (non-breaking change which adds functionality)
# How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce.
- [x] Manual Test
# Screenshots / Screen recording
Please add screenshots or recording if applicable
---
.vscode/settings.json | 2 +-
src/revamp/ui/GetDemoSection/FAQs.js | 115 +++++++++
src/revamp/ui/GetDemoSection/index.js | 356 ++++++++++++++------------
src/views/zesty/Contact.js | 9 +
4 files changed, 318 insertions(+), 164 deletions(-)
create mode 100644 src/revamp/ui/GetDemoSection/FAQs.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7856f76af..5f21e24fb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,6 @@
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
- "source.fixAll.format": false
+ "source.fixAll.format": "never"
}
}
diff --git a/src/revamp/ui/GetDemoSection/FAQs.js b/src/revamp/ui/GetDemoSection/FAQs.js
new file mode 100644
index 000000000..b90a47144
--- /dev/null
+++ b/src/revamp/ui/GetDemoSection/FAQs.js
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Box,
+ Container,
+ Grid,
+ Typography,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiMarkdown from 'markdown-to-jsx';
+
+const FAQs = ({ faqs, title, subtitle }) => {
+ const [expanded, setExpanded] = useState(false);
+
+ const handleChange = (panel) => (event, isExpanded) => {
+ setExpanded(isExpanded ? panel : false);
+ };
+
+ if (!faqs) return null;
+ return (
+
+
+
+
+
+ {title}
+
+
+
+ {subtitle !== '' && subtitle && (
+
+
+ {subtitle}
+
+
+ )}
+
+
+ {faqs.map((faq, index) => (
+
+ }
+ aria-controls={`panel${index + 1}a-content`}
+ id={`panel${index + 1}a-header`}
+ sx={{ height: '80px', minHeight: '80px' }}
+ >
+
+ {faq.question}
+
+
+
+
+ {faq.answer}
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default FAQs;
diff --git a/src/revamp/ui/GetDemoSection/index.js b/src/revamp/ui/GetDemoSection/index.js
index 8c7ea2c63..c2394a33d 100644
--- a/src/revamp/ui/GetDemoSection/index.js
+++ b/src/revamp/ui/GetDemoSection/index.js
@@ -17,6 +17,7 @@ import getLastVisitedPathAndUrl from 'revamp/utils/getLastVisitedPathAndUrl';
import { generateAlt } from 'utils';
import useGetDynamicData from './useGetDynamicData';
import { useRouter } from 'next/router';
+import ZestyImage from 'blocks/Image/ZestyImage';
const acorns =
'https://storage.googleapis.com/assets.zesty.io/website/images/assets/demo/Acorns%20Logo.svg',
@@ -41,6 +42,7 @@ const GetDemoSection = ({
formTitle = 'Enter your details to connect with a Content Expert',
cta,
id,
+ review,
}) => {
const router = useRouter();
const { lastVisitedPath, lastVisitedURL } = getLastVisitedPathAndUrl();
@@ -90,154 +92,156 @@ const GetDemoSection = ({
};
return (
-
- ({
- [theme.breakpoints.up('xs')]: {
- maxWidth: theme.maxWidth,
- mx: 'auto',
- py: 4,
- px: 2,
- },
- [theme.breakpoints.up('tablet')]: {
- py: 6,
- px: 4,
- },
- [theme.breakpoints.up('lg')]: {
- flexDirection: 'row',
- py: 10,
- px: 14,
- gap: 8,
- },
- [theme.breakpoints.up('desktopWide')]: {
- gap: 15,
- },
- })}
- >
+ <>
+
({
+ [theme.breakpoints.up('xs')]: {
+ maxWidth: theme.maxWidth,
+ mx: 'auto',
+ py: 4,
+ px: 2,
+ },
+ [theme.breakpoints.up('tablet')]: {
+ py: 6,
+ px: 4,
+ },
+ [theme.breakpoints.up('lg')]: {
+ flexDirection: 'row',
+ py: 10,
+ px: 14,
+ gap: 8,
+ },
+ [theme.breakpoints.up('desktopWide')]: {
+ gap: 15,
+ },
+ })}
>
-
-
- {data?.title || title}
-
+
+
+
+ {data?.title || title}
+
-
- {data?.description || supportingText}
-
+ }}
+ >
+ {data?.description || supportingText}
+
+
+ {review && }
+
-
-
-
- ({
- height: '100%',
- alignSelf: { lg: !isLong && 'center' },
- p: 4,
- bgcolor: theme.palette.mode === 'light' ? 'white' : 'grey.800',
- width: { xs: '100%', lg: '456px', desktopWide: '548px' },
- })}
- >
- {
- await onSubmit(values);
- }}
+
+ ({
+ height: '100%',
+ alignSelf: { lg: !isLong && 'center' },
+ p: 4,
+ bgcolor: theme.palette.mode === 'light' ? 'white' : 'grey.800',
+ width: { xs: '100%', lg: '456px', desktopWide: '548px' },
+ })}
>
- {({
- handleSubmit,
- getFieldProps,
- errors,
- touched,
- initialValues,
- isSubmitting,
- setFieldValue,
- values,
- }) => (
-
+ )}
+
+
-
+
);
};
export default GetDemoSection;
+function Testimonial({ review }) {
+ return (
+
+
+ {review?.review}
+
+
+
+
+
+ {review?.reviewer_name}
+
+ {review?.reviewer_title}
+
+
+
+ );
+}
+
function TrustLogos() {
return (
-
+
diff --git a/src/views/zesty/Contact.js b/src/views/zesty/Contact.js
index da563e84c..d16eb8b9c 100644
--- a/src/views/zesty/Contact.js
+++ b/src/views/zesty/Contact.js
@@ -28,6 +28,7 @@ import React from 'react';
import { ThemeProvider, useTheme } from '@mui/material/styles';
import revampTheme from 'theme/revampTheme';
import GetDemoSection from 'revamp/ui/GetDemoSection';
+import FAQs from 'revamp/ui/GetDemoSection/FAQs';
function Contact({ content }) {
const theme = useTheme();
@@ -38,11 +39,19 @@ function Contact({ content }) {
formTitle: content?.demo_section_formtitle,
cta: content?.cta_button_text,
id: '#contact-cta',
+ review: content?.review.data[0],
+ };
+
+ const faqsProps = {
+ faqs: content?.faqs.data,
+ title: content?.faq_title,
+ subtitle: content?.faq_subtitle,
};
return (
revampTheme(theme.palette.mode)}>
+
);
}