process strpai

frontend/src/components/shared/ProcessCard.jsx

         {paragraphs &&
           paragraphs.map((item, index) => (
             <p className="paragraph" key={index}>
-              {item.paragraph}
+              {item.ParagraphElement}
             </p>
           ))}
       </div>

frontend/src/pages/Home.jsx

     document.title = 'Diligent Software';
   }, []);
 
-  useEffect(() => {
-    console.log(data);
-  }, [data]);
-
   useEffect(() => {
     const url = window.location.pathname;
     const h = window.document.body.offsetHeight;

frontend/src/pages/ProcessPage.jsx

 import useWindowSize from '../hooks/useWindowSize';
 import ProcessSlider from '../components/ProcessSlider';
 import useAnalytics from '../hooks/useAnalytics';
+import useDataApi from './../hooks/useDataApi';
+import { strapiApiBuilder } from '../utils/strapiApiBuilder';
 
 const _data = {
   heading: {
     paragraph:
       'We work with our clients to deliver the full software release lifecycle, from development to final rollout. We understand how important a good process is for success because our team members have deep backgrounds in product development. Our clients can rely on us for a complete software release solution that meets their needs and achieves their desired outcomes.',
   },
+
   processImg: {
     url: '',
   },
   ],
   ActionCard: {
     heading: 'Let’s Work Together!',
-    paragraph:
-      'Grow faster with a dedicated team of .NET & JS experts.',
+    paragraph: 'Grow faster with a dedicated team of .NET & JS experts.',
     primaryBtn: 'Contact Us',
     secondaryBtn: 'Portfolio',
   },
 };
 
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+  'WorkTogether',
+  'Heading',
+  'ProcessImage',
+  'ProcessMobileImages',
+  'Step',
+  'Step.paragraphs',
+  // 'SEO',
+  // 'SEO.metaSocial',
+  // 'SEO.metaImage',
+  // 'SEO.metaSocial.image',
+];
+
 const ProcessPage = () => {
   const [isMobile, setIsMobile] = useState(false);
 
+  const strapi = strapiApiBuilder('processpage', strapiPopulate);
+
+  const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
+
   const windowInfo = useWindowSize();
 
   useEffect(() => {
     document.title = 'Process';
   }, []);
 
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
+
   useAnalytics('Process');
 
   useEffect(() => {
   return (
     <PageLayout>
       <div className="pt-32">
-        {_data.heading.heading && (
           <Wrapper>
-            <h1 className="hidden">Our Process - How We Do It?</h1>
+          {data ? (
             <PageTitle
-              left
-              color
-              heading={_data.heading.heading}
-              subheading={_data.heading.subheading}
-            />
-            {/* <div className="flex justify-center items-center mt-90p overflow-x-auto">
-            <div className='w-full' draggable >
-                <ProcessSvg className='' />
-            </div>
+            left
+            color
+            heading={data.Heading.title}
+            subheading={data.Heading.subtitle}
+          />
+          ) : null}
+            
             
-          </div> */}
             <div className="relative mx-auto my-32p md:my-90p">
-              {!isMobile ? (
-                <div className="flex w-full">
-                  <ProcessSvg className="" />
-                </div>
-              ) : (
-                <div className="">
-                  <ProcessSlider />
-                </div>
-              )}
+            {!isMobile ? (
+          <div className="w-full">
+            {data ? <img src={api_url + data.ProcessImage.data.attributes.url} alt={data.ProcessImage.data.attributes.alternativeText}></img> : null}
+          </div>
+        ) : (
+          <div className="">
+            <ProcessSlider images={data.ProcessMobileImages.data} />
+          </div>
+        )}
             </div>
-            <p className="my-90p">{_data.heading.paragraph}</p>
+            {data ? <p className="my-90p">{data.paragraph}</p> : null}
+            
           </Wrapper>
-        )}
         <Wrapper bg padding={' py-90p'}>
-          {_data.cards.length > 0 && (
-            <ProcessCardsWrapper>
-              {_data.cards.map((item, index) => (
+          {data ? 
+            (data.Step.length > 0 && (
+              <ProcessCardsWrapper>
+              {data.Step.map((item, index) => (
                 <ProcessCard
                   key={index}
-                  id={item.id}
+                  id={index + 1}
                   title={item.title}
                   subtitle={item.subtitle}
                   text={item.paragraphs}
                 />
               ))}
             </ProcessCardsWrapper>
-          )}
+
+              ))
+            
+          
+          
+          : null}
+          
         </Wrapper>
         <Wrapper>
           <div className="my-90p">
-            <ActionCard
-              title={_data.ActionCard.heading}
-              text={_data.ActionCard.paragraph}
-              btn1={_data.ActionCard.primaryBtn}
-              btn2={_data.ActionCard.secondaryBtn}
+            {data ? <ActionCard
+              title={data.WorkTogether.title}
+              text={data.WorkTogether.paragraph}
+              btn1={data.WorkTogether.ButtonPrimary}
+              btn2={data.WorkTogether.ButtonSecondary}
               link1={'/contact'}
               link2={'/portfolio'}
-            />
+            /> : null}
+            
           </div>
         </Wrapper>
       </div>