Homepage cms

src/revamp/ui/EnterpriseGrowth/index.js

@@ -219,7 +219,7 @@ const EnterpriseGrowth = ({
         </Typography>
 
         <Grid container spacing={{ xs: 3, tablet: 4, lg: 8 }}>
-          {caseStudiesList.map((c, index) => (
+          {caseStudiesList?.map((c, index) => (
             <Grid item xs={12} lg={6} key={index}>
               <Stack
                 sx={{ cursor: 'pointer' }}
@@ -229,6 +229,7 @@ const EnterpriseGrowth = ({
                   src={c.mainImage}
                   loading="lazy"
                   alt={generateAlt('')}
+                  style={{ width: '100%', height: 'auto' }}
                   width={600}
                   height={400}
                 />

src/revamp/ui/HeroV2/index.js

@@ -61,21 +61,19 @@ const logos = [
 ];
 
 const Hero = ({
-  header = 'Data Driven, Drag & Drop, Composable, Content Management',
-  subtitle = 'Drive business growth with a Hybrid Headless CMS to create, deliver, measure, and optimize your content marketing at scale. ',
+  HeroText = ['Composable', 'Data Driven', 'Drag & Drop', 'AI Assisted'],
   primaryBtn = 'Free Consultation',
   primaryBtnLink = '/demo?ab=light',
   secondaryBtn = 'Watch Demo Video',
   secondaryBtnLink = '/demos/video?ab=light',
   subtitle2 = 'TRUSTED BY INDUSTRY LEADING COMPANIES',
+  heroImage = media,
 }) => {
   const theme = useTheme();
   const isLg = useMediaQuery(theme.breakpoints.up('lg'), {
     defaultMatches: true,
   });
 
-  const HeroText = ['Composable', 'Data Driven', 'Drag & Drop', 'AI Assisted'];
-
   const [currentTextIndex, setCurrentTextIndex] = useState(0);
 
   useEffect(() => {
@@ -267,13 +265,7 @@ const Hero = ({
           },
         })}
       >
-        <img
-          src={media}
-          alt={generateAlt('Zesty image')}
-          loading="eager"
-          width={'100%'}
-          height={'100%'}
-        />
+        <img src={heroImage} alt={generateAlt('Zesty image')} loading="eager" />
       </Box>
     </Box>
   );

src/revamp/ui/SecurityFeature/index.js

@@ -93,6 +93,7 @@ const SecurityFeature = ({
             src={image}
             loading="lazy"
             alt="zesty-image"
+            style={{ width: '100%', height: '100%' }}
             width={700}
             height={420}
           />

src/revamp/ui/TabsSection/index.js

@@ -9,6 +9,33 @@ import SchemaRoundedIcon from '@mui/icons-material/SchemaRounded';
 import TabSection from './TabSection';
 import React, { useEffect, useState } from 'react';
 
+const icons = [
+  {
+    name: 'ScienceRoundedIcon',
+    icon: <ScienceRoundedIcon sx={{ fontSize: '20px' }} />,
+  },
+  {
+    name: 'EditRoundedIcon',
+    icon: <EditRoundedIcon sx={{ fontSize: '20px' }} />,
+  },
+  {
+    name: 'SchemaRoundedIcon',
+    icon: <SchemaRoundedIcon sx={{ fontSize: '20px' }} />,
+  },
+  {
+    name: 'ImageRoundedIcon',
+    icon: <ImageRoundedIcon sx={{ fontSize: '20px' }} />,
+  },
+  {
+    name: 'PsychologyRoundedIcon',
+    icon: <PsychologyRoundedIcon sx={{ fontSize: '20px' }} />,
+  },
+  {
+    name: 'TranslateRoundedIcon',
+    icon: <TranslateRoundedIcon sx={{ fontSize: '20px' }} />,
+  },
+];
+
 const tabLists = [
   {
     name: 'A/B Testing',
@@ -122,8 +149,40 @@ function TabPanel(props) {
 
 const TabsSection = ({
   header = 'Personalization, A/B Testing, Integrated Analytics, Any Business Configuration',
+  tabs,
 }) => {
   const [value, setValue] = useState('Content');
+  const [list, setList] = useState(tabLists);
+
+  useEffect(() => {
+    if (tabs) {
+      setList(
+        tabs?.data?.map((tab) => {
+          const regex = /<li>(.*?)<\/li>/g;
+          const liTextArray = [];
+
+          // Use a loop to iterate through matches and extract the text content
+          let match;
+          while ((match = regex.exec(tab.lists)) !== null) {
+            liTextArray.push(match[1]);
+          }
+
+          const tabSectionProps = {
+            header: tab?.header,
+            lists: liTextArray,
+            image: tab?.image?.data[0]?.url,
+            primaryBtn: tab?.cta_text,
+            primaryBtnLink: tab?.cta_link,
+          };
+          return {
+            name: tab.name,
+            icon: icons?.find((icon) => icon.name === tab.feature_icon)?.icon,
+            component: <TabSection {...tabSectionProps} />,
+          };
+        }),
+      );
+    }
+  }, []);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -132,16 +191,14 @@ const TabsSection = ({
   useEffect(() => {
     const interval = setInterval(() => {
       setValue((prevValue) => {
-        const currentIndex = tabLists.findIndex(
-          (tab) => tab.name === prevValue,
-        );
-        const nextIndex = (currentIndex + 1) % tabLists.length;
-        return tabLists[nextIndex].name;
+        const currentIndex = list?.findIndex((tab) => tab.name === prevValue);
+        const nextIndex = (currentIndex + 1) % list?.length;
+        return list[nextIndex]?.name;
       });
     }, 2500);
 
     return () => clearInterval(interval);
-  }, [tabLists]);
+  }, [list]);
 
   return (
     <Stack
@@ -198,7 +255,7 @@ const TabsSection = ({
           }}
           onChange={handleChange}
         >
-          {tabLists.map((tab) => (
+          {list?.map((tab) => (
             <Tab
               aria-selected={value === tab.name}
               role="tab"
@@ -215,7 +272,7 @@ const TabsSection = ({
             />
           ))}
         </TabList>
-        {tabLists.map((tab) => (
+        {list?.map((tab) => (
           <TabPanel
             key={tab.name}
             sx={{ p: 0, pt: 3 }}

src/views/zesty/Homepage.js

@@ -74,6 +74,11 @@ const GetDemoSection = dynamic(() => import('revamp/ui/GetDemoSection'), {
   loading: () => <p>Loading...</p>,
 });
 
+export const removeHTMLtags = (str) => {
+  if (str == '' || str == null || str == undefined) return undefined;
+  return str.replace(/<[^>]*>/g, '');
+};
+
 function Homepage({ content }) {
   const { palette } = useTheme();
   const isLoggedIn = useIsLoggedIn();
@@ -90,17 +95,110 @@ function Homepage({ content }) {
     }
   }, [content.zesty.isAuthenticated, isLoggedIn]);
 
+  const heroProps = {
+    HeroText: removeHTMLtags(content?.header_title_and_description)
+      .replace('&amp;', '&')
+      .split(','),
+    primaryBtn: content?.primarybtn,
+    primaryBtnLink: content?.primarybtnlink?.data?.[0].meta?.web?.uri,
+    secondaryBtn: content?.secondarybtn,
+    secondaryBtnLink: content?.secondarybtnlink?.data?.[0].meta?.web?.uri,
+    subtitle2: content?.subtitle,
+    heroImage: content?.header_graphic?.data?.[0]?.url,
+  };
+
+  const tabSectionProps = {
+    header: removeHTMLtags(content?.features_title),
+    tabs: content?.features_options,
+  };
+
+  const statsProps = {
+    title: content?.stats_title,
+    header: content?.stats_header,
+    subHeading: content?.stats_subheading,
+  };
+
+  const enterpriseProps = {
+    overline: content?.enterprise_overline,
+    heading: content?.enterprise_heading,
+    supportingText: content?.enterprise_supporting_text,
+    primaryBtn: content?.enterprise_primary_btn_text,
+    primaryBtnLink: content?.enterprise_primary_btn_link,
+    secondaryBtn: content?.enterprise_secondary_btn_text,
+    secondaryBtnLink: content?.enterprise_secondary_btn_link,
+    caseStudiesList: content?.enterpise_case_study?.data?.map((item) => {
+      return {
+        mainImage: item?.main_image?.data?.[0]?.url,
+        logo: item?.logo?.data?.[0]?.url,
+        description: item?.description,
+        link: item?.link?.data[0]?.meta?.web?.uri,
+      };
+    }),
+  };
+
+  const regex = /<li>(.*?)<\/li>/g;
+  const featureTestimonialsList = [];
+
+  // Use a loop to iterate through matches and extract the text content
+  let match;
+  while (
+    (match = regex.exec(content?.feature_testimonial_list_items)) !== null
+  ) {
+    featureTestimonialsList.push(match[1]);
+  }
+
+  const featureTestimonialsProps = {
+    overline: content?.feature_testimonial_overline,
+    heading: content?.feature_testimonial_heading,
+    supportingText: content?.feature_testimonial_supporting__text,
+    image: content.feature_testimonial_image?.data?.[0]?.url,
+    testimonial: content?.feature_testimonial_,
+    testimonialLogo: content.feature_testimonial_logo?.data?.[0]?.url,
+    lists: featureTestimonialsList,
+  };
+
+  const singleTestimonialProps = {
+    witness: content?.singletestimonial_witness?.data?.[0]?.url,
+    name: content?.singletestimonial_name,
+    role: content?.singletestimonial_role,
+    logo: content?.singletestimonial_logo?.data?.[0]?.url,
+    header: content?.singletestimonial_header,
+    quote: content?.singletestimonial_quote,
+  };
+
+  const gridFeatureProps = {
+    overline: content?.grid_feature_overline,
+    heading: content?.grid_feature_heading,
+    supportingText: content?.grid_feature_supporting_text,
+    featureLists: content?.grid_feature_list?.data?.map((item) => {
+      return {
+        image: item?.feature_image?.data?.[0]?.url,
+        title: item?.feature_title,
+        description: item?.feature_description,
+      };
+    }),
+  };
+
+  const securityFeatureProps = {
+    overline: content?.security_feature_overline,
+    heading: content?.security_feature_heding,
+    supportingText: content?.security_feature_supporting_text,
+    image: content?.security_feature_image?.data?.[0]?.url,
+  };
+
   return (
     <>
       <ThemeProvider theme={() => revampTheme(palette.mode)}>
-        <Hero />
-        <TabsSection />
-        <Stats />
-        <EnterpriseGrowth />
-        <FeatureBulletWithTestimonials />
-        <SingleTestimonial />
-        <GridFeature />
-        <SecurityFeature />
+        <Hero {...heroProps} />
+      </ThemeProvider>
+      <ThemeProvider theme={() => revampTheme(palette.mode)}>
+        <TabsSection {...tabSectionProps} />
+        <Stats {...statsProps} />
+        <EnterpriseGrowth {...enterpriseProps} />
+        <FeatureBulletWithTestimonials {...featureTestimonialsProps} />
+        <SingleTestimonial {...singleTestimonialProps} />
+        <GridFeature {...gridFeatureProps} />
+        <SecurityFeature {...securityFeatureProps} />
         <GetDemoSection />
       </ThemeProvider>
     </>