contact content

frontend/src/components/shared/ClientForm.jsx

@@ -11,7 +11,9 @@ import ReactGA from 'react-ga4';
 import ReCAPTCHA from 'react-google-recaptcha';
 import axios from 'axios';
 
-export default function ClientForm({ mg }) {
+const api_url = process.env.REACT_APP_API_URL;
+
+export default function ClientForm({ mg, img }) {
   //search context for prevous entry TODO
   const { clientForm, setClientForm } = useContext(ClientFormContext);
   const [sucMsg, setSucMsg] = useState(false);
@@ -237,7 +239,7 @@ export default function ClientForm({ mg }) {
                             type="submit"
                             className="btn btn_primary transition-all inline-flex justify-center py-4 px-14 border border-transparent shadow-md text-sm font-semibold rounded-xl text-white bg-dg-primary-600 hover:bg-dg-primary-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-dg-primary-600"
                           >
-                            Submit
+                            {props.cta}
                           </button>
                         </div>
                         {sucMsg && (
@@ -262,7 +264,7 @@ export default function ClientForm({ mg }) {
           exit={{ x: 60, opacity: 0 }}
           transition={{ duration: 0.3, ease: 'easeOut' }}
         >
-          <img src={img} alt="Our Team's image" />
+          <img src={api_url + img.data.attributes.url} alt={img.data.attributes.alternativeText} />
         </motion.div>
       </div>
     </div>

frontend/src/components/shared/Contact.jsx

@@ -26,9 +26,9 @@ const mg = mailgun.client({
   url: 'https://api.eu.mailgun.net',
 });
 
-export default function Contact(props) {
+export default function Contact({job, business, defaultIndex}) {
   const [tab, setTab] = useState(true);
-  const [tabTitle, setTabTitle] = useState('Tell Us About Your Idea!');
+  const [tabTitle, setTabTitle] = useState(business.title);
 
   function handleContextMenu(event) {
     event.preventDefault();
@@ -49,10 +49,10 @@ export default function Contact(props) {
   function handleTab(tabIndex) {
     if (tabIndex == 0) {
       setTab(true);
-      setTabTitle('Tell Us About Your Idea!');
+      setTabTitle(business.title);
     } else {
       setTab(false);
-      setTabTitle('Join Diligent!');
+      setTabTitle(job.title);
     }
   }
 
@@ -76,7 +76,7 @@ export default function Contact(props) {
 
   const api_url = process.env.REACT_APP_API_URL;
 
-  let defaultPositionSelection = props.defaultPositionSelection;
+  let defaultPositionSelection = null;
 
   const [clientForm, setClientForm] = useState(initialClientValues);
   const [jobForm, setJobForm] = useState(initialJobValues);
@@ -120,7 +120,7 @@ export default function Contact(props) {
       <div className="py-16 relative">
         <div className="flex justify-end flex-col">
           <Tab.Group
-            defaultIndex={props.defaultIndex}
+            defaultIndex={defaultIndex}
             onChange={index => handleTab(index)}
           >
             <div
@@ -130,11 +130,11 @@ export default function Contact(props) {
               {tab ? (
                 <PageTitle
                   left
-                  heading={'Tell Us About Your Idea!'}
-                  subheading={'Contact us'}
+                  heading={business.title}
+                  subheading={business.subtitle}
                 />
               ) : (
-                <PageTitle left heading={'Join Diligent!'} subheading={'Cotact us'} />
+                <PageTitle left heading={job.title} subheading={job.title} />
               )}
 
               <Tab.List className="flex flex-row items-center md:flex-col lg:flex-row h-fit w-fit max-w-max md:ml-auto z-20 p-1 min-h-12 space-x-1 bg-dg-primary-400 rounded-xl my-4 align-middle">
@@ -170,12 +170,16 @@ export default function Contact(props) {
             <Tab.Panels className="w-full mt-2 mx-auto">
               <Tab.Panel className={classNames('py-3', 'outline-none')}>
                 <ClientFormContext.Provider value={{ clientForm, setClientForm }}>
-                  <ClientForm mg={mg} />
+                  <ClientForm mg={mg}
+                  cta={business.cta}
+                  img={business.image} />
                 </ClientFormContext.Provider>
               </Tab.Panel>
               <Tab.Panel className={classNames('py-3', 'outline-none')}>
                 <JobFormContext.Provider value={{ jobForm, setJobForm }}>
                   <JobForm
+                    cta={job.cta}
+                    img={job.image}
                     cntCareers={cntCareers}
                     defaultPositionSelection={defaultPositionSelection}
                     mg={mg}

frontend/src/components/shared/JobForm.jsx

@@ -13,6 +13,8 @@ import HashPositions from './HashPositions';
 import ReCAPTCHA from 'react-google-recaptcha';
 import axios from 'axios';
 
+const api_url = process.env.REACT_APP_API_URL;
+
 export default function JobForm(props) {
   const [sucMsg, setSucMsg] = useState(false);
   const captchaRef = useRef(null);
@@ -400,7 +402,7 @@ export default function JobForm(props) {
                             type="submit"
                             className="btn btn_primary transition-all inline-flex justify-center py-4 px-14 border border-transparent shadow-md text-sm font-semibold rounded-xl text-white bg-dg-primary-600 hover:bg-dg-primary-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-dg-primary-600"
                           >
-                            Submit
+                            {props.cta}
                           </button>
                         </div>
                         {sucMsg && (
@@ -425,7 +427,7 @@ export default function JobForm(props) {
           exit={{ x: 60, opacity: 0 }}
           transition={{ duration: 0.3, ease: 'easeOut' }}
         >
-          <img src={img} alt="Our Team's image" />
+          <img src={api_url + props.img.data.attributes.url} alt={props.img.data.attributes.alternativeText} />
         </motion.div>
       </div>
     </div>

frontend/src/pages/Home.jsx

@@ -34,20 +34,6 @@ import useAnalytics from '../hooks/useAnalytics';
 import ReactHelmet from '../components/shared/ReactHelmet';
 
 const api_url = process.env.REACT_APP_API_URL;
-// const fieldArray = [
-//   'landing',
-//   'why',
-//   'why.heading',
-//   'why.card_left.icon',
-//   'why.card_mid.icon',
-//   'why.card_right.icon',
-//   'landing.heading',
-//   'SEO',
-//   'SEO.metaSocial',
-//   'SEO.metaImage',
-//   'SEO.metaSocial.image',
-// ];
-
 
 const strapiPopulate = [
   'Heading',
@@ -142,57 +128,70 @@ export default function Home({ forwardedRef }) {
     </Tab.Group> */}
 
           {/* Landing Section */}
-          {data ?
-           <Landing heading={data.Heading} numbers={data.HeroNumbers.number} paragraph={data.paragraph} button={data.button} />
-           : null
-          }
-          
+          {data ? (
+            <Landing
+              heading={data.Heading}
+              numbers={data.HeroNumbers.number}
+              paragraph={data.paragraph}
+              button={data.button}
+            />
+          ) : null}
 
           {/* Why Us Section */}
-          {data ?
-             <WhySection heading={data.WhyUsHeading} p1={data.WhyUsParagraph1} p2={data.WhyUsParagraph2} cards={data.Cards} /> 
-           : null
-          }
-          
+          {data ? (
+            <WhySection
+              heading={data.WhyUsHeading}
+              p1={data.WhyUsParagraph1}
+              p2={data.WhyUsParagraph2}
+              cards={data.Cards}
+            />
+          ) : null}
 
           {/* Our Services Section */}
           {/* <ServicesHome /> */}
 
           {/* Our Process Section */}
-          
-          {data ?
-             <ProcessSection heading={data.ProcessHeading} btn={data.ProcessCTA} image={data.ProcessImage} mobileImages={data.ProcessMobileImg.Image} />
-           : null
-          }
+
+          {data ? (
+            <ProcessSection
+              heading={data.ProcessHeading}
+              btn={data.ProcessCTA}
+              image={data.ProcessImage}
+              mobileImages={data.ProcessMobileImg.Image}
+            />
+          ) : null}
 
           {/* Our Process Section */}
-          {data ?
-             <TechStack heading={data.TechStackHeading} btn={data.TechStackCTA} />
-           : null
-          }
-          
+          {data ? (
+            <TechStack heading={data.TechStackHeading} btn={data.TechStackCTA} />
+          ) : null}
 
           {/* Testimonials Section*/}
-          {data ?
-             <Testimonials />
-           : null
-          }
+          {data ? <Testimonials /> : null}
 
           {/* Portfolio Section*/}
-          
-          {data ?
-             <PortfolioSection heading={data.CaseStudies} cta={data.CtaForCaseStudiesCards} />
-           : null
-          }
+
+          {data ? (
+            <PortfolioSection
+              heading={data.CaseStudies}
+              cta={data.CtaForCaseStudiesCards}
+            />
+          ) : null}
 
           {/* Contact Section */}
-          <section id="contact" className="" ref={forwardedRef}>
-            <Contact defaultIndex={0} />
-          </section>
+          {data ? (
+            <section id="contact" className="" ref={forwardedRef}>
+              <Contact
+                defaultIndex={0}
+                job={data.ApplyPosition}
+                business={data.BusinessInquiry}
+              />
+            </section>
+          ) : null}
 
           <MapDilig />
         </div>
       </PageLayout>
     );
   }
-}
+}