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

![image](https://github.com/zesty-io/website/assets/83058948/99f1a7ef-876f-4aa7-b26d-48b6183c6556)

.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"
    }
 }

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 (
+    <Box
+      sx={{
+        width: '100%',
+        margin: 0,
+        padding: 0,
+        py: 10,
+        backgroundColor: '#101828',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Container maxWidth={'lg'}>
+        <Grid
+          container
+          direction={{ xs: 'column', md: 'row' }}
+          alignItems={{ xs: 'flex-start', md: 'center' }}
+          mb={5}
+        >
+          <Grid item xs={12} md={6} lg={4}>
+            <Typography
+              sx={{
+                fontSize: { sm: '44px', xs: '36px' },
+                fontWeight: 'bold',
+                textAlign: 'left',
+                lineHeight: '1.2',
+                mb: 2,
+                color: 'white',
+              }}
+            >
+              {title}
+            </Typography>
+          </Grid>
+          <Grid item xs={0} lg={2} />
+          {subtitle !== '' && subtitle && (
+            <Grid item xs={12} md={6} lg={6}>
+              <Typography
+                sx={{
+                  fontSize: { sm: '20px', xs: '18px' },
+                }}
+              >
+                {subtitle}
+              </Typography>
+            </Grid>
+          )}
+        </Grid>
+        <Box sx={{ borderTop: '2.64px solid #181A1D' }}>
+          {faqs.map((faq, index) => (
+            <Accordion
+              key={index}
+              expanded={expanded === `panel${index + 1}`}
+              onChange={handleChange(`panel${index + 1}`)}
+            >
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls={`panel${index + 1}a-content`}
+                id={`panel${index + 1}a-header`}
+                sx={{ height: '80px', minHeight: '80px' }}
+              >
+                <Typography
+                  sx={{ fontSize: { xs: '18px', sm: '20px', md: '24px' } }}
+                >
+                  {faq.question}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <MuiMarkdown
+                  options={{
+                    overrides: {
+                      p: {
+                        component: Typography,
+                        props: {
+                          style: {
+                            padding: 0,
+                          },
+                        },
+                      },
+                    },
+                  }}
+                >
+                  {faq.answer}
+                </MuiMarkdown>
+              </AccordionDetails>
+            </Accordion>
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default FAQs;