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, - }) => ( -
- - - {formTitle} - + { + await onSubmit(values); + }} + > + {({ + handleSubmit, + getFieldProps, + errors, + touched, + initialValues, + isSubmitting, + setFieldValue, + values, + }) => ( + + + + {formTitle} + - {/* Save this component as backup */} + {/* Save this component as backup */} - {isContact ? ( - <> - - - ) : ( - <> - {/* Singleform field component */} - {/* + + + ) : ( + <> + {/* Singleform field component */} + {/* */} - - - )} - - - )} - + + + )} +
+ + )} +
+
-
+ ); }; 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)}> + ); }