Merge pull request #2067 from zesty-io/freestyle-landing

Freestyle landing

src/blocks/zesty/Hero/SimpleHeroWithImageAndCtaButtons.js

@@ -320,7 +320,7 @@ const SimpleHeroWithImageAndCtaButtons = ({
                     controls={true}
                   />
                 </Box>
-                <Box
+                  {integrationLogo &&       <Box
                   sx={{
                     width: '100%',
                     maxWidth: 250,
@@ -339,6 +339,8 @@ const SimpleHeroWithImageAndCtaButtons = ({
                     alt={mainTitle || 'Zesty.io integration'}
                   />
                 </Box>
+
+                  }
               </>
             )}
           </Grid>

src/lib/sync.js

@@ -38,7 +38,6 @@ async function ask(question) {
 // for now: can use password param for preview url (readonly)
 // if it creates developer token, need to account for token expiration
 // 0b include needed packages
-const fetch = require('node-fetch');
 const fs = require('fs'); // need to check folder and write files
 const chalk = require('chalk');
 const { promisify } = require('util');

src/views/zesty/EbookLandingPage.js

@@ -0,0 +1,54 @@
+/**
+ * Zesty.io Content Model Component
+ * When the ZestyLoader [..slug].js file is used, this component will autoload if it associated with the URL
+ * 
+ * Label: EBook Landing Page 
+ * Name: ebook_landing_page 
+ * Model ZUID: 6-eccfc69b9a-2gdhxs
+ * File Created On: Fri Oct 20 2023 20:52:41 GMT+0800 (Pacific Standard Time)
+ * 
+ * Model Fields:
+ * 
+  * hero_title (text)
+ * hero_body (wysiwyg_basic)
+
+ * 
+ * In the render function, text fields can be accessed like {content.field_name}, relationships are arrays,
+ * images are objects {content.image_name.data[0].url}
+ * 
+ * This file is expected to be customized; because of that, it is not overwritten by the integration script.
+ * Model and field changes in Zesty.io will not be reflected in this comment.
+ * 
+ * View and Edit this model's current schema on Zesty.io at https://8-aaeffee09b-7w6v22.manager.zesty.io/schema/6-eccfc69b9a-2gdhxs
+ * 
+ * Data Output Example: https://zesty.org/services/web-engine/introduction-to-parsley/parsley-index#tojson
+ * Images API: https://zesty.org/services/media-storage-micro-dam/on-the-fly-media-optimization-and-dynamic-image-manipulation
+ */
+
+import React from 'react';
+
+function EbookLandingPage({ content }) {
+  return (
+    <>
+      {/* Zesty.io Output Example and accessible JSON object for this component. Delete or comment out when needed.  */}
+      <h1
+        dangerouslySetInnerHTML={{ __html: content.meta.web.seo_meta_title }}
+      ></h1>
+      <div>{content.meta.web.seo_meta_description}</div>
+      <div
+        style={{
+          background: '#eee',
+          border: '1px #000 solid',
+          margin: '10px',
+          padding: '20px',
+        }}
+      >
+        <h2>Accessible Zesty.io JSON Object</h2>
+        <pre>{JSON.stringify(content, null, 2)}</pre>
+      </div>
+      {/* End of Zesty.io output example */}
+    </>
+  );
+}
+
+export default EbookLandingPage;

src/views/zesty/FeaturesOption.js

@@ -0,0 +1,59 @@
+/**
+ * Zesty.io Content Model Component
+ * When the ZestyLoader [..slug].js file is used, this component will autoload if it associated with the URL
+ * 
+ * Label: Features Options 
+ * Name: features_options 
+ * Model ZUID: 6-b0e0caa18c-zpjlsr
+ * File Created On: Fri Oct 20 2023 20:52:41 GMT+0800 (Pacific Standard Time)
+ * 
+ * Model Fields:
+ * 
+  * name (text)
+ * feature_icon (text)
+ * header (text)
+ * lists (wysiwyg_basic)
+ * image (images)
+ * cta_text (text)
+ * cta_link (text)
+
+ * 
+ * In the render function, text fields can be accessed like {content.field_name}, relationships are arrays,
+ * images are objects {content.image_name.data[0].url}
+ * 
+ * This file is expected to be customized; because of that, it is not overwritten by the integration script.
+ * Model and field changes in Zesty.io will not be reflected in this comment.
+ * 
+ * View and Edit this model's current schema on Zesty.io at https://8-aaeffee09b-7w6v22.manager.zesty.io/schema/6-b0e0caa18c-zpjlsr
+ * 
+ * Data Output Example: https://zesty.org/services/web-engine/introduction-to-parsley/parsley-index#tojson
+ * Images API: https://zesty.org/services/media-storage-micro-dam/on-the-fly-media-optimization-and-dynamic-image-manipulation
+ */
+
+import React from 'react';
+
+function FeaturesOption({ content }) {
+  return (
+    <>
+      {/* Zesty.io Output Example and accessible JSON object for this component. Delete or comment out when needed.  */}
+      <h1
+        dangerouslySetInnerHTML={{ __html: content.meta.web.seo_meta_title }}
+      ></h1>
+      <div>{content.meta.web.seo_meta_description}</div>
+      <div
+        style={{
+          background: '#eee',
+          border: '1px #000 solid',
+          margin: '10px',
+          padding: '20px',
+        }}
+      >
+        <h2>Accessible Zesty.io JSON Object</h2>
+        <pre>{JSON.stringify(content, null, 2)}</pre>
+      </div>
+      {/* End of Zesty.io output example */}
+    </>
+  );
+}
+
+export default FeaturesOption;

src/views/zesty/Freestyle.js

@@ -0,0 +1,248 @@
+/**
+ * Zesty.io Content Model Component
+ * When the ZestyLoader [..slug].js file is used, this component will autoload if it associated with the URL
+ * 
+ * Label: freestyle 
+ * Name: freestyle 
+ * Model ZUID: 6-bcf781c4e4-pbcmpl
+ * File Created On: Fri Oct 20 2023 20:52:41 GMT+0800 (Pacific Standard Time)
+ * 
+ * Model Fields:
+ * 
+  * hero_eyebrow (text)
+ * hero_promo_video (text)
+ * hero_title (text)
+ * hero_primary_cta_text (text)
+ * hero_primary_cta_link (text)
+ * hero_description (wysiwyg_basic)
+
+ * 
+ * In the render function, text fields can be accessed like {content.field_name}, relationships are arrays,
+ * images are objects {content.image_name.data[0].url}
+ * 
+ * This file is expected to be customized; because of that, it is not overwritten by the integration script.
+ * Model and field changes in Zesty.io will not be reflected in this comment.
+ * 
+ * View and Edit this model's current schema on Zesty.io at https://8-aaeffee09b-7w6v22.manager.zesty.io/schema/6-bcf781c4e4-pbcmpl
+ * 
+ * Data Output Example: https://zesty.org/services/web-engine/introduction-to-parsley/parsley-index#tojson
+ * Images API: https://zesty.org/services/media-storage-micro-dam/on-the-fly-media-optimization-and-dynamic-image-manipulation
+ */
+
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import Resources from 'components/marketing/IntegrationsIndividualPage/Resources';
+import FillerContent from 'components/globals/FillerContent';
+import dynamic from 'next/dynamic';
+import SimpleCardLogo from 'blocks/zesty/LogoGrid/SimpleCardLogo';
+import Feature from 'components/marketing/IntegrationsIndividualPage/Feature';
+import TryFreeButton from 'components/cta/TryFreeButton';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Container from 'components/Container';
+import MuiMarkdown from 'markdown-to-jsx';
+const SimpleHeroWithImageAndCtaButtons = dynamic(
+  () => import('blocks/zesty/Hero/SimpleHeroWithImageAndCtaButtons'),
+  {
+    ssr: false,
+  },
+);
+function Freestyle({ content }) {
+  const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMedium = useMediaQuery(theme.breakpoints.down('md'));
+  const isLarge = useMediaQuery(theme.breakpoints.down('lg'));
+  const isExtraLarge = useMediaQuery(theme.breakpoints.down('xl'));
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  const pageData = {
+    theme,
+    isSmall,
+    isMedium,
+    isLarge,
+    isExtraLarge,
+    isDarkMode,
+    content,
+    FillerContent,
+  };
+
+  const headerProps = {
+    title: content.hero_title || FillerContent.header,
+    video: content.hero_promo_video || FillerContent.image,
+    description: content.hero_description || FillerContent.description,
+    cta_left: content.hero_primary_cta_text || FillerContent.cta,
+    backgroundColor: theme.palette.zesty.zestyDarkBlue,
+    isDarkBackground: true,
+  };
+
+  console.log(content);
+
+  const faqProps = {
+    title: content?.faq_title || FillerContent.header,
+    faqs: content?.faqs?.data || [],
+  };
+
+  const popularFeaturesProps = {
+    title: content?.popular_features || FillerContent.header,
+    data: content?.freestyle_popular_features?.data || [],
+  };
+
+  return (
+    <>
+      <SimpleHeroWithImageAndCtaButtons {...headerProps} />{' '}
+      <Resources {...pageData} />
+      <Box sx={{ mt: -10 }}>
+        <Feature {...pageData} />
+      </Box>
+      <Box sx={{ pt: 10 }}>
+        <SimpleCardLogo
+          heading_text={content?.logos_title}
+          logoItems={content?.logos?.data}
+        />
+
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Card
+            sx={{
+              width: '100%',
+              maxWidth: 500,
+              borderRadius: 50,
+              p: 1,
+              display: 'flex',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              sx={{
+                textAlign: 'center',
+                mt: 2,
+                color: theme.palette.zesty.zestyZambezi,
+              }}
+            >
+              Have a questions? Give us a call and we walk you through it
+            </Typography>
+            <TryFreeButton variant="text" size="small" color="secondary" />
+          </Card>
+        </Box>
+
+        <Box sx={{ py: 10 }}>
+          <Container>
+            <Typography
+              sx={{
+                color: theme.palette.zesty.zestyZambezi,
+                fontWeight: 'bold',
+                textAlign: 'center',
+                mb: 4,
+              }}
+              variant="h4"
+              component="h2"
+            >
+              {faqProps?.title}
+            </Typography>
+            <Grid container spacing={4}>
+              {faqProps.faqs.map((faq) => {
+                return (
+                  <Grid key={faq.meta.zuid} item sm={4}>
+                    <Accordion defaultExpanded>
+                      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                        <Typography
+                          sx={{ color: theme.palette.zesty.zestyZambezi }}
+                        >
+                          {faq?.question}
+                        </Typography>
+                      </AccordionSummary>
+                      <AccordionDetails>
+                        <MuiMarkdown
+                          options={{
+                            overrides: {
+                              p: {
+                                component: Typography,
+                                props: {
+                                  sx: {
+                                    color: theme.palette.zesty.zestyZambezi,
+                                    mb: 4,
+                                  },
+                                },
+                              },
+                            },
+                          }}
+                        >
+                          {faq?.answer}
+                        </MuiMarkdown>
+                      </AccordionDetails>
+                    </Accordion>
+                  </Grid>
+                );
+              })}
+            </Grid>
+          </Container>
+        </Box>
+
+        <Box sx={{ background: theme.palette.zesty.zestyWhite, py: 10 }}>
+          <Container>
+            <Typography
+              sx={{
+                color: theme.palette.zesty.zestyZambezi,
+                fontWeight: 'bold',
+                textAlign: 'center',
+                mb: 4,
+              }}
+              variant="h4"
+              component="h2"
+            >
+              {popularFeaturesProps.title}
+            </Typography>
+            <Grid container spacing={4}>
+              {popularFeaturesProps.data.map((feature) => {
+                return (
+                  <Grid item sm={4}>
+                    <Card sx={{ position: 'relative' }}>
+                      <CardContent>
+                        <Typography
+                          sx={{
+                            fontWeight: 'bold',
+                            color: theme.palette.zesty.zestyZambezi,
+                            mb: 2,
+                            minHeight: 20,
+                          }}
+                        >
+                          {feature.title}
+                        </Typography>
+                        <Typography
+                          sx={{ color: theme.palette.zesty.zestyZambezi }}
+                        >
+                          {feature.description}
+                        </Typography>
+
+                        <Button
+                          sx={{ mt: 4 }}
+                          variant="contained"
+                          color="secondary"
+                        >
+                          Learn More
+                        </Button>
+                      </CardContent>
+                    </Card>
+                  </Grid>
+                );
+              })}
+            </Grid>
+          </Container>
+        </Box>
+      </Box>
+    </>
+  );
+}
+
+export default Freestyle;