fiexs

frontend/package.json

 {
   "name": "frontend",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "private": true,
   "dependencies": {
     "@faceless-ui/slider": "^1.1.14",

frontend/src/components/ArticleAuthorSection.jsx

 import React from 'react'
 
-const api_url = process.env.REACT_APP_API_URL;
-
 const ArticleAuthorSection = ({data}) => {
   return (
     <div className="flex gap-4 mb-32p items-center">
     <img
       className="max-h-[60px] object-fit rounded-full"
-      src={api_url + data.AuthorImage.data.attributes.url}
-      alt={api_url + data.AuthorImage.data.attributes.alternativeText}
+      src={data.AuthorImage.data.attributes.url}
+      alt={data.AuthorImage.data.attributes.alternativeText}
     />
     <div className="flex flex-col items-start align-middle">
       <p className="paragraph">{data.Author}</p>

frontend/src/components/BlogSection.jsx

                 <div className="mb-12">
                   <div className="w-full">
                     <img
-                      src={api_url + post.image.data.attributes.formats.thumbnail.url}
+                      src={post.image.data.attributes.formats.thumbnail.url}
                       alt="Post's image"
                       className="max-w-fit max-h-fit"
                     />

frontend/src/components/CareerCardsTemplates/CareerCard.jsx

       className={'card max-w-[360px]'}
     >
       <img
-        src={api_url + card.icon.data.attributes.url}
+        src={card.icon.data.attributes.url}
         alt={card.icon.data.attributes.alternativeText}
         className={'ml-auto mr-auto block w-[70px] bg-none text-dark-gray rounded-full'}
       />

frontend/src/components/CareerCardsTemplates/ExpandedCard.jsx

           </div>
 
           <img
-            src={api_url + card.icon.data.attributes.url}
+            src={card.icon.data.attributes.url}
             className="ml-auto mr-auto block w-[70px] text-dark-gray bg-none rounded-full"
           />
           <h3 className="ml-6 w-full font-semibold text-2xl">{card.title}</h3>

frontend/src/components/CaseStudy.jsx

             </h3>
             <p className="text-sm">{props.client_paragraph}</p>
           </div>
-          <img src={api_url + props.image} alt="Case Study's Image" />
+          <img src={props.image} alt="Case Study's Image" />
         </div>
       </div>
       {/* Summary, Engineers & Technologies */}
         <ul className="flex flex-row items-center justify-center mt-2 md:mt-0">
           {study.technologies.data.map(technology => (
             <li key={technology.id} className="mr-2">
-              <img src={api_url + technology.attributes.url} alt="Technology's Icon" width={27} />
+              <img src={technology.attributes.url} alt="Technology's Icon" width={27} />
             </li>
           ))}
         </ul>

frontend/src/components/HRProcess.jsx

         (item.media.data && 
           <img
           key={index}
-          src={api_url + item.media.data.attributes.url}
+          src={item.media.data.attributes.url}
           alt={item.media.data.attributes.alternativeText}
           className={
             'image-switch bg-fixed hidden sm:block opacity-0 absolute top-1/4 right-10 w-2/5  transition-all' +

frontend/src/components/LatestArticles.jsx

                 <div className="flex gap-2">
                   <img
                     className="max-h-[36px] object-fit rounded-full"
-                    src={api_url + element.attributes.AuthorImage.data.attributes.url}
+                    src={element.attributes.AuthorImage.data.attributes.url}
                     alt={
                       api_url +
                       element.attributes.AuthorImage.data.attributes.alternativeText
               </div>
             </div>
             <img
-              src={api_url + element.attributes.ArticleImage.data.attributes.url}
+              src={element.attributes.ArticleImage.data.attributes.url}
               alt={
-                api_url + element.attributes.ArticleImage.data.attributes.alternativeText
+                element.attributes.ArticleImage.data.attributes.alternativeText
               }
             />
           </a>

frontend/src/components/ProcessSection.jsx

   btn: 'check it out',
 };
 
-const api_url = process.env.REACT_APP_API_URL;
-
 const ProcessSection = ({ image, imageAlt, heading, btn, mobileImages }) => {
   const [isMobile, setIsMobile] = useState(false);
 
       <div className="relative mx-auto my-32p md:my-90p">
         {!isMobile ? (
           <div className="w-full">
-            {image ? <img src={api_url + image.data.attributes.url} alt={image.data.attributes.alternativeText}></img> : null}
+            {image ? <img src={image.data.attributes.url} alt={image.data.attributes.alternativeText}></img> : null}
           </div>
         ) : (
           <div className="">

frontend/src/components/ServiceCard.jsx

 import propTypes from 'prop-types';
 
 export default function ServiceCard(props) {
-  const api_url = process.env.REACT_APP_API_URL;
 
   return (
     <div className="flex flex-col md:flex-row items-center md:items-center justify-center py-16" key={props.key}>
       <div className="flex flex-col items-center justify-center">
-        <img src={api_url + props.icon} alt="Icon" className="w-24 md:w-64" />
+        <img src={props.icon} alt="Icon" className="w-24 md:w-64" />
       </div>
       <div className="mt-2 md:mt-0 flex flex-col items-center md:items-start text-center md:text-left">
         <h3 className="ml-0 md:ml-3 text-lg font-semibold dark:text-white">{props.heading}</h3>

frontend/src/components/Testimonials.jsx

                           name={item[0].attributes.Name}
                           role={item[0].attributes.Role}
                           company={item[0].attributes.Company}
-                          clientImg={api_url + item[0].attributes.Image.data?.attributes.url}
+                          clientImg={item[0].attributes.Image.data?.attributes.url}
                           paragraph={item[0].attributes.Quote}
                         />
                       </Fragment>
                           name={item[1].attributes.Name}
                           role={item[1].attributes.Role}
                           company={item[1].attributes.Company}
-                          clientImg={api_url + item[1].attributes.Image.data?.attributes.url}
+                          clientImg={item[1].attributes.Image.data?.attributes.url}
                           paragraph={item[1].attributes.Quote}
                         />
                       </Fragment>

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={api_url + props.image}
+        src={props.image}
         alt={props.alt}
         className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full"
       />

frontend/src/components/blog-micro-components/Image.jsx

 
 const Image = ({data}) => {
   return (
-    <img src={api_url + data.data.attributes.url} alt={data.data.attributes.alternativeText} className='rounded-md w-full' />
+    <img src={data.data.attributes.url} alt={data.data.attributes.alternativeText} className='rounded-md w-full' />
   )
 }
 

frontend/src/components/blog-micro-components/ImageGrid.jsx

               index == leng - 1 ? (
                 <img
                   className="col-start-1 col-span-2 row-start-1 row-span-1 w-full rounded-md"
-                  src={api_url + item.attributes.url}
+                  src={item.attributes.url}
                   alt={item.attributes.alternativeText}
                 />
               ) : (
                 <img
                   className="col-span-1 w-full rounded-md"
-                  src={api_url + item.attributes.url}
+                  src={item.attributes.url}
                   alt={item.attributes.alternativeText}
                 />
               )
             ) : (
               <img
                 className="col-span-1 w-full rounded-md"
-                src={api_url + item.attributes.url}
+                src={item.attributes.url}
                 alt={item.attributes.alternativeText}
               />
             )}

frontend/src/components/shared/ArticleCard.jsx

               <div className="flex gap-4">
                 <img
                   className="max-h-[45px] object-fit rounded-full"
-                  src={api_url + data.AuthorImage.data.attributes.url}
+                  src={data.AuthorImage.data.attributes.url}
                   alt={data.AuthorImage.data.attributes.alternativeText}
                 />
                 <div className="flex flex-col items-start">
           </div>
           <div className="w-full md:w-[450px] rounded-8 overflow-hidden">
             <img
-              src={api_url + data.ArticleImage.data.attributes.url}
+              src={data.ArticleImage.data.attributes.url}
               alt={data.ArticleImage.data.attributes.alternativeText}
             />
           </div>

frontend/src/components/shared/Card.jsx

 import propTypes from 'prop-types';
 
-const api_url = process.env.REACT_APP_API_URL;
-
 export default function Card(props) {
   return (
     <div className="card mb-8 lg:mb-0 lg:mr-8" key={props.key}>
-      <img src={api_url + props.image} className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full p-4" />
+      <img src={props.image} className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full p-4" />
       <h3 className="mt-6 font-semibold text-2xl">{props.heading}</h3>
       <p className="mt-6 text-sm">
         {props.paragraph}

frontend/src/components/shared/ClientForm.jsx

           exit={{ x: 60, opacity: 0 }}
           transition={{ duration: 0.3, ease: 'easeOut' }}
         >
-          <img src={api_url + img.data.attributes.url} alt={img.data.attributes.alternativeText} />
+          <img src={img.data.attributes.url} alt={img.data.attributes.alternativeText} />
         </motion.div>
       </div>
     </div>

frontend/src/components/shared/Contact.jsx

     vid.playbackRate = 2;
     axios
       .get(
-        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
+        `${api_url}/api/w-home-page?populate[0]=BusinessInquiry.image&populate[1]=ApplyPosition.image`,
       )
       .then(res => {
         setCntCareers(res.data.data.attributes);
               onMouseDown={handleTabClick}
             >
               {tab ? (
-                <PageTitle left heading={business.title} subheading={business.subtitle} />
+                <PageTitle left heading={cntCareers.BusinessInquiry.title} subheading={cntCareers.BusinessInquiry.subtitle} />
               ) : (
-                <PageTitle left heading={job.title} subheading={job.title} />
+                <PageTitle left heading={cntCareers.ApplyPosition.title} subheading={cntCareers.ApplyPosition.subtitle} />
               )}
 
               <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">

frontend/src/components/shared/JobForm.jsx

           transition={{ duration: 0.3, ease: 'easeOut' }}
         >
           <img
-            src={api_url + props.img.data.attributes.url}
+            src={props.img.data.attributes.url}
             alt={props.img.data.attributes.alternativeText}
           />
         </motion.div>

frontend/src/components/shared/PortfolioCardNew.jsx

         <a className={'card box my-2 flex- flex-col items-center'} href={`/case-studies/${data.Slug}`}>
           {data.BackgroundImage && (
             <img
-              src={api_url + data.BackgroundImage.data.attributes?.url}
+              src={data.BackgroundImage.data.attributes?.url}
               alt={data.BackgroundImage.data.attributes?.alternativeText}
               className={'mb-12 mx-auto self-center'}
             ></img>

frontend/src/components/shared/ProcessFacelessSlider.jsx

           {slides.map((slide, index) => (
             <Slide key={index} index={index} className={'h-full'}>
               <img
-                src={api_url + slide.url}
+                src={slide.url}
                 alt={slide.alternativeText}
                 className={'h-full mx-auto'}
               ></img>

frontend/src/components/shared/ReactHelmet.jsx

           <meta name="description" content={seo.metaDescription} />
           <link rel="canonical" href={seo.canonicalURL} />
           <meta name="keywords" content={seo.keywords} />
-          <meta name="viewport" content={seo.metaViewport} />
+          <meta name="viewport" content={seo.metaViewport ? seo.metaViewport : 'width=device-width, height=device-height'} />
+
           <meta name="robots" content={seo.metaRobots} />
           {seo.metaSocial && seo.metaSocial.lenght > 0 && (
             <Fragment>
               <meta property="og:title" content={seo.metaSocial[0]?.title} />
               <meta
                 property="og:image"
-                content={`${api_url}${seo.metaSocial[0]?.image?.data?.attributes?.url}`}
+                content={`${seo.metaSocial[0]?.image?.data?.attributes?.url}`}
               />
               <meta property="og:description" content={seo.metaSocial[0]?.description} />
               <meta property="twitter:title" content={seo.metaSocial[1]?.title} />
               {seo.metaSocial[1]?.image?.data && (
                 <meta
                   property="twitter:image"
-                  content={`${api_url}${seo.metaSocial[1]?.image?.data?.attributes?.url}`}
+                  content={`${seo.metaSocial[1]?.image?.data?.attributes?.url}`}
                 />
               )}
 

frontend/src/components/shared/VideoComponent.jsx

 import React, { useRef } from 'react';
+import { useEffect } from 'react';
 
 import { useState } from 'react';
 import UseAnimations from 'react-useanimations';
 
 const VideoComponent = ({ source, alt }) => {
   const [mute, setMute] = useState(true);
+  const [string, setString] = useState('');
 
   const vidRef = useRef();
   const muteRef = useRef();
     setMute(!mute);
   }
 
+  // this is needed becouse Strapi has a wierd bug that duplicates the folder path from Cloudflare,
+  // this function checks the prop for dublicate folder path and removes one instance
+  function handleString(str) {
+    if (str.indexOf('media-lib/') !== -1) {
+      let afterMediaLib = str.substring(str.indexOf('media-lib/') + 'media-lib/'.length);
+
+      if (
+        afterMediaLib.indexOf('media-lib/') !== -1 &&
+        afterMediaLib.substring(
+          0,
+          afterMediaLib.indexOf('media-lib/') + 'media-lib/'.length,
+        ) === 'media-lib/'
+      ) {
+        str = str.replace('media-lib/', '');
+      }
+    }
+    setString(str);
+  }
+
+  useEffect(() => {
+    handleString(source);
+  }, [source]);
+
   return (
     <div className="w-full py-48p lg:py-72p relative">
-      <video autoPlay loop ref={vidRef} muted className="rounded-[32px]">
-        <source type="video/mp4" src={api_url + source} alt={api_url + alt} />
-      </video>
+      {string != '' && (
+        <video autoPlay loop ref={vidRef} muted className="rounded-[32px]">
+          <source type="video/mp4" src={string} alt={alt} />
+        </video>
+      )}
+
       <div className="absolute bottom-16 right-4 md:bottom-24 md:right-8 rounded-full overflow-clip">
         <UseAnimations
           reverse={mute}

frontend/src/layout/PageLayout.jsx

-import React, {useEffect} from "react";
+import React, {Fragment, useEffect} from "react";
 
 const PageLayout = ({children}) => {
 
     //   }, [])
     
     return (
-        <div className="">{children}</div>
+        <Fragment>{children}</Fragment>
     );
 }
 

frontend/src/pages/About.jsx

                   <p className="mt-4 paragraph">{data.Heading.Paragraph}</p>
                 </div>
                 <img
-                  src={api_url + data.Heading.Image.data.attributes.url}
+                  src={data.Heading.Image.data.attributes.url}
                   alt="Our Team's image"
                   className="w-full md:w-1/2 text-center -ml-2 lg-ml-0"
                 />
                   >
                     <p className="mt-4 paragraph w-full md:w-1/2">{item.Paragraph}</p>
                     <img
-                      src={api_url + item.Image.data.attributes.url}
+                      src={item.Image.data.attributes.url}
                       alt="Our Team's image"
                       className="w-full md:w-1/2 text-center -ml-2 lg-ml-0"
                     />
             >
               <div className="flex flex-col items-center justify-center w-full">
                 <img
-                  src={api_url + data.ItalicSection.Section.Image.data.attributes.url}
+                  src={data.ItalicSection.Section.Image.data.attributes.url}
                   alt={
-                    api_url +
                     data.ItalicSection.Section.Image.data.attributes.alternativeText
                   }
                   className="max-w-[660px] w-full"
                 <p className="paragraph mt-4">{data.Mission.Paragraph}</p>
               </div>
               <img
-                src={api_url + data.Mission.Image.data.attributes.url}
-                alt={api_url + data.Mission.Image.data.attributes.alternativeText}
+                src={data.Mission.Image.data.attributes.url}
+                alt={data.Mission.Image.data.attributes.alternativeText}
                 className="text-center w-full md:w-1/2"
               />
             </div>
             <div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
               <img
-                src={api_url + data.Vision.Image.data.attributes.url}
-                alt={api_url + data.Vision.Image.data.attributes.alternativeText}
+                src={data.Vision.Image.data.attributes.url}
+                alt={data.Vision.Image.data.attributes.alternativeText}
                 className="text-center w-full md:w-1/2 mt-8 md:mt-0"
               />
               <div className="w-full md:w-1/2 md:pl-16">
                 {data.Values.Items && data.Values.Items.map((item, index) => (
                   <CardValues
                     key={index}
-                    image={api_url + item.Image.data.attributes.url}
-                    alt={api_url + item.Image.data.attributes.alternativeText || 'alt'}
+                    image={item.Image.data.attributes.url}
+                    alt={item.Image.data.attributes.alternativeText || 'alt'}
                     heading={item.heading}
                     paragraph={item.paragraph}
                   />
                 {data.Partners.images.data && data.Partners.images.data.map((item, index) => (
                   <img
                     key={index}
-                    src={api_url + item.attributes.url}
-                    alt={api_url + item.attributes.alternativeText}
+                    src={item.attributes.url}
+                    alt={item.attributes.alternativeText}
                     className="w-16 md:w-20 lg:w-24"
                   />
                 ))}
                     <p className="paragraph mt-2">{industry.paragraph}</p>
                     {industry.Image.data && (
                       <img
-                        src={api_url + industry.Image.data.attributes.url}
-                        alt={api_url + industry.Image.data.attributes.alternativeText}
+                        src={industry.Image.data.attributes.url}
+                        alt={industry.Image.data.attributes.alternativeText}
                         className="m-auto"
                       />
                     )}

frontend/src/pages/Careers.jsx

                 </p>
 
                 {/* Video Frame */}
-                {data && data.Video != undefined ? (
+                {data && data.Video && data.Video.data &&
                   <VideoComponent source={data.Video.data.attributes.url} alt={data.Video.data.attributes.alternativeText} />
-                ) : null}
+                }
               </div>
             </div>
 
                   {data.benefits_card.map((item, index) => (
                     <CardValues
                       key={index}
-                      image={api_url + item.media.data.attributes.url}
+                      image={item.media.data.attributes.url}
                       heading={item.heading}
                       paragraph={item.paragraph}
                     />

frontend/src/pages/CaseStudyPage.jsx

             >
               <div className="absolute top-0 left-[-50%] lg:left-0 right-[-50%] lg:right-0 bottom-0">
                 <img
-                  src={api_url + data[0].attributes.BackgroundImage.data?.attributes.url}
+                  src={data[0].attributes.BackgroundImage.data?.attributes.url}
                   alt={
                     data[0].attributes.BackgroundImage.data?.attributes.alternativeText
                   }
                 </div>
                 {data[0].attributes.CaseStudyImage.data && (
                   <img
-                    src={api_url + data[0].attributes.CaseStudyImage.data.attributes.url}
+                    src={data[0].attributes.CaseStudyImage.data.attributes.url}
                     alt={
                       data[0].attributes.CaseStudyImage.data.attributes.alternativeText
                     }

frontend/src/pages/Culture.jsx

                       </div>
                     </div>
                     <img
-                      src={api_url + item.img.data.attributes.url}
+                      src={item.img.data.attributes.url}
                       alt={item.img.data.attributes.alternativeText}
                       className="text-center w-full md:w-1/2"
                     />

frontend/src/pages/Home.jsx

             />
           ) : null}
 
-          {/* Our Services Section */}
-          {/* <ServicesHome /> */}
-
           {/* Our Process Section */}
-
           {data ? (
             <ProcessSection
               heading={data.ProcessHeading}

frontend/src/pages/ProcessPage.jsx

                 <div className="w-full">
                   {data ? (
                     <img
-                      src={api_url + data.ProcessImage.data.attributes.url}
+                      src={data.ProcessImage.data.attributes.url}
                       alt={data.ProcessImage.data.attributes.alternativeText}
                     ></img>
                   ) : null}

frontend/src/pages/WorkWithUs.jsx

                     }
                   >
                     <div>
-                      <img src={api_url + item.img.data.attributes.url}></img>
+                      <img src={item.img.data.attributes.url}></img>
                     </div>
                     <div className="flex flex-col gap-[8px] md:gap-[16px] max-w-[520px]">
                       <h6 className="n-h3-heading text-dark-gray">{item.title}</h6>
                 <div className="radial-gradient absolute top-0 left-0 right-0 bottom-0"></div>
                 <div className="max-w-custom mx-auto">
                   <img
-                    src={api_url + data.OfficeImg.data.attributes.url}
+                    src={data.OfficeImg.data.attributes.url}
                     alt={data.OfficeImgAlt}
                   ></img>
                 </div>