s

frontend/.env

 REACT_APP_JOB_TEMPLATE_ID = template_bfuv1sb
 REACT_APP_CLIENT_TEMPLATE_ID = template_bd6fjli
 REACT_APP_USER_ID = 27spvSZ2Lsf2j8RKw
-REACT_APP_API_URL = "https://websitediligentapi.azurewebsites.net"
-//http://localhost:1337
+# 
+# REACT_APP_API_URL = "https://websitediligentapi.azurewebsites.net"
+REACT_APP_API_URL = "http://localhost:1337"
+# 
+
 MAILCHIMP_FORM_URL = http://eepurl.com/iaRrv1
 GOOGLE_TRACKING_ID = "G-PTZC3WLTZ1"

frontend/src/components/Landing.jsx

-import React from 'react';
+import React, { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import LandingSVGv2 from './shared/graphics/LandingSVG-v2';
 import HiringWidget from './HiringWidget';
 import Wrapper from '../layout/Wrapper';
 import OpenDayBanner from './OpenDayBanner';
 
-const _data = {
-  cto: 'contact us',
-};
-const numbers = [
-  {
-    value: 90,
-    static: '+',
-    title: 'Employees',
-  },
-  {
-    value: '20',
-    static: '+',
-    title: 'Projects',
-  },
-  {
-    value: '100',
-    static: '%',
-    title: 'Client-Retention',
-  },
-];
+// const _data = {
+//   cto: 'contact us',
+// };
+// const number = [
+//   {
+//     value: 90,
+//     static: '+',
+//     title: 'Employees',
+//   },
+//   {
+//     value: '20',
+//     static: '+',
+//     title: 'Projects',
+//   },
+//   {
+//     value: '100',
+//     static: '%',
+//     title: 'Client-Retention',
+//   },
+// ];
+
+const Landing = ({ heading,numbers,button,paragraph }) => {
 
-const Landing = ({ data }) => {
+  useEffect(() => {
+    //console.log(data);
+  }, [])
+  
   return (
     <Wrapper>
       <div className="flex flex-col gap-90p pb-164p">
           <div className="mb-16 -mt-12 md:mt-5 flex flex-col lg:flex-row justify-between items-center gap-90p">
             <div className="flex flex-col gap-8p">
               <h6 className="subheading">
-                {/* {data.subheading} */}
+                {heading.subtitle}
               </h6>
+              
               <h1 className="heading">
-                Software Solutions Tailored to Each Client
+                 {heading.title} 
               </h1>
               <p className="paragraph">
-                {/* {data.paragraph} */}
+                {paragraph}
 
               </p>
             </div>
               href="#contact"
               className="btn-primary px-64p py-20p w-full lg:w-max whitespace-nowrap"
             >
-              {_data.cto}
+              {button}
             </a>
           </div>
         </motion.section>
             <div key={i} className="flex flex-col">
               <p className="display-number text-center">
                 {item.value}
-                {item.static}
               </p>
               <h3 className="number-title text-center">{item.title}</h3>
             </div>

frontend/src/components/WhySection.jsx

   },
 };
 
-const WhySection = ({ data }) => {
+const WhySection = ({ heading,cards,p1,p2 }) => {
   return (
     <Wrapper bg hideOverflow>
       <div className="relative">
           <div className="flex flex-col justify-center items-center gap-90p">
             <div className="max-w-[780px]">
               <PageHeading
-                subheading={_data.heading.subheading}
-                heading={_data.heading.heading}
-                paragraph1={_data.heading.paragraph1}
-                paragraph2={_data.heading.paragraph2}
+                subheading={heading.subtitle}
+                heading={heading.title}
+                paragraph1={p1}
+                paragraph2={p2}
               />
             </div>
 
                 transition={{ delay: 0, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                  image={_data.card_left.imgUrl}
-                  alt={_data.card_left.alt}
-                  heading={_data.card_left.heading}
-                  paragraph={_data.card_left.paragraph}
+                  image={cards.Card1.Icon.data.attributes.url}
+                  alt={cards.Card1.Icon.data.attributes.alternativeText}
+                  heading={cards.Card1.Title}
+                  paragraph={cards.Card1.paragraph}
                 />
               </motion.div>
               {/* Card - mid */}

frontend/src/components/WhyUsCard.jsx

 import propTypes from 'prop-types';
 
+const api_url = process.env.REACT_APP_API_URL;
+
 export default function WhyUsCard(props) {
   return (
     <div className="card-no-hover w-fit h-full flex flex-col text-center justify-between group">
       <img
-        src={props.image}
+        src={api_url + props.image}
         alt={props.alt}
         className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full"
       />

frontend/src/hooks/useDataApi.js

         const result = await axios(url);
 
         if (!didCancel) {
-          dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
+          dispatch({ type: 'FETCH_SUCCESS', payload: result.data.data.attributes });
         }
       } catch (error) {
         if (!didCancel) {

frontend/src/pages/Home.jsx

 import MapDilig from '../components/Map';
 import useDataApi from '../hooks/useDataApi';
 
-//const api_url = process.env.REACT_APP_API_URL;
-const api_url = 'http://localhost:1337';
+const api_url = process.env.REACT_APP_API_URL;
 
 //const query = '';
 
 const strapiPopulate = [
+  'Heading',
+  'Heading.subtitle',
+  'Heading.title',
+  'WhyUsHeading',
   'Cards',
   'Cards.Card1',
   'Cards.Card1.Icon',
   'Cards.Card3.Icon',
   'HeroNumbers',
   'HeroNumbers.number',
-]
+];
 
 const stringBuilder = () => {
   let stringQuery = '';
-  strapiPopulate.map((item,index) => {
+  strapiPopulate.map((item, index) => {
     if (index !== 0) stringQuery += '&';
     stringQuery += `populate=${item}`;
   });
   return stringQuery;
 };
 
-export default function Home({forwardedRef}) {
+export default function Home({ forwardedRef }) {
   const [cnt, setCnt] = useState('');
+  const [landingData, setLandingData] = useState(null);
+  const [cardData, setCardData] = useState(null);
 
-  const [contactRef, setRef] = useState(forwardedRef)
+  const [contactRef, setRef] = useState(forwardedRef);
 
-
-
-  const [{data, isLoading, isError}, doFetch] = useDataApi(`${api_url}/api/w-home-page?${stringBuilder()}`);
-
-  const landingData = {
-    data
-  }
+  const [{ data, isLoading, isError }, doFetch] = useDataApi(
+    `${api_url}/api/w-home-page?${stringBuilder()}`,
+  );
 
   useEffect(() => {
     document.title = 'Diligent Software';
-  },[]);
+  }, []);
 
   useEffect(() => {
     console.log(data);
-    //stringBuilder();
-  },[data]);
-
-
+    setLandingData(data?.Heading);
+  }, [data]);
 
   // useEffect(() => {
   //   var vid = document.getElementById('animation');
   // }, []);
 
   useEffect(() => {
-    
-   
     const url = window.location.pathname;
     const h = window.document.body.offsetHeight;
-
-  }, [contactRef, cnt])
+  }, [contactRef, cnt]);
 
   if (isLoading) {
     return (
   } else {
     return (
       <PageLayout>
-      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">
-        {/* <FormSwitch /> */}
+        <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">
+          {/* <FormSwitch /> */}
 
-        {/* <Tab.Group>
+          {/* <Tab.Group>
       <Tab.List>
         <Tab>Tab 1</Tab>
         <Tab>Tab 2</Tab>
       </Tab.Panels>
     </Tab.Group> */}
 
-        {/* Landing Section */}
-       <Landing />
+          {/* Landing Section */}
+          {data && <Landing heading={data.Heading} numbers={data.HeroNumbers.number} button={data.button} paragraph={data.paragraph} />}
 
-        {/* Why Us Section */}
-        <WhySection data={cnt.why} />
+          {/* Why Us Section */}
+          {data && <WhySection heading={data.WhyUsHeading} cards={data.Cards} p1={data.WhyUsParagraph1} p2={data.WhyUsParagraph2} />}
 
-        {/* Our Services Section */}
-        {/* <ServicesHome /> */}
+          {/* Our Services Section */}
+          {/* <ServicesHome /> */}
 
-        {/* Our Process Section */}
-        <ProcessSection />
+          {/* Our Process Section */}
+          <ProcessSection />
 
-        {/* Our Process Section */}
-        <TechStack />
+          {/* Our Process Section */}
+          <TechStack />
 
-        {/* Testimonials Section*/}
-        <Testimonials
-        />
+          {/* Testimonials Section*/}
+          <Testimonials />
 
-        {/* Social Networks Section */}
-        {/* <section
+          {/* Social Networks Section */}
+          {/* <section
           id="socials"
           className="h-fit bg-white dark:bg-dg-primary-1700 flex flex-col items-center px-4"
         >
           <SocialNetworks />
         </section> */}
 
-        <PortfolioSection />
+          <PortfolioSection />
 
-        {/* Contact Section */}
-        <section id="contact" className="" ref={forwardedRef}>
-          <Contact defaultIndex={0} />
-        </section>
+          {/* Contact Section */}
+          <section id="contact" className="" ref={forwardedRef}>
+            <Contact defaultIndex={0} />
+          </section>
 
-
-        <MapDilig />
-       
-      </div>
+          <MapDilig />
+        </div>
       </PageLayout>
     );
   }