new blog articles

frontend/package.json

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

frontend/src/components/LatestArticles.jsx

     const strapi = strapiApiBuilder('articles', strapiPopulate, '?sort[0]=date&pagination[pageSize]=3');
 
     const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+    console.log(data);
 
   return (
     <div className='col-span-1 md:col-span-2 flex flex-col gap-4'>
       <h4 className='text-n-subhead font-semibold text-dark-gray mb-8'>Latest Blog Posts</h4>
-      {data && data.map((element,index) => (
+      {data && data.length > 0 && data.map((element,index) => (
           <a
           key={index}
           className={'card box flex flex-col items-center justify-between gap-[24px]'}
           href={`/articles/${element.attributes.Slug}`}
         >
           <div className="flex flex-col gap-[4px]">
+            {element.attributes.AuthorTitle && 
             <div className="flex gap-2">
-              <img
-                className="max-h-[36px] object-fit rounded-full"
-                src={api_url + element.attributes.AuthorImage.data.attributes.url}
-                alt={api_url + element.attributes.AuthorImage.data.attributes.alternativeText}
-              />
-              <div className="flex flex-col items-start">
-                <p className="paragraph">{element.attributes.Author}</p>
-                <p className="text-small-subhead text-gray-400 leading-normal">
-                  {element.attributes.AuthorTitle}
-                </p>
-              </div>
+            <img
+              className="max-h-[36px] object-fit rounded-full"
+              src={api_url + element.attributes.AuthorImage.data.attributes.url}
+              alt={api_url + element.attributes.AuthorImage.data.attributes.alternativeText}
+            />
+            <div className="flex flex-col items-start">
+              <p className="paragraph">{element.attributes.Author}</p>
+              <p className="text-small-subhead text-gray-400 leading-normal">
+                {element.attributes.AuthorTitle}
+              </p>
             </div>
+          </div>
+            }
+            
             <div className='text-left flex flex-col gap-[8px]'>
               <h2 className="n-paragraph-title text-dark-gray leading-normal">{element.attributes.ArticleTitle}</h2>
             </div>

frontend/src/components/shared/ArticleCard.jsx

 
 const api_url = process.env.REACT_APP_API_URL;
 
-const temp = {
-  ArticleTitle: 'BI Healthcare Monitoring System',
-  ArticleLeadingParagraph:
-    'Our philosophy is based on the idea of ​​innovation. We work tirelessly to provide useful solutions.',
-};
 
 const ArticleCard = ({ data }) => {
   //console.log(data);
           />
           <div className="flex flex-col items-start">
             <p className="paragraph">{data.Author}</p>
-            <p className="text-small-subhead text-gray-400 leading-normal">
+            <p className="text-small-subhead text-gray-400 leading-normal text-left">
               {data.AuthorTitle}
             </p>
           </div>
         }
         
         <div className="text-left flex flex-col gap-[8px]">
-          <h2 className="n-h3-heading text-dark-gray">{temp.ArticleTitle}</h2>
-          <p className="n-paragraph">{temp.ArticleLeadingParagraph}</p>
+          <h2 className="n-h3-heading text-dark-gray">{data.ArticleTitle}</h2>
+          <p className="n-paragraph w-full md:w-[450px]">{data.ArticleDescription}</p>
         </div>
 
         <div className="flex gap-4 items-center">

frontend/src/components/shared/ProcessCardWrapper.jsx

     return (
         <div className="relative flex flex-col gap-72p md:gap-140p my-32p md:my-0">
             <div className="hidden lg:block absolute h-full top-0 left-4 right-4 mt-140p mb-140p overflow-hidden">
-                <img className="mx-auto h-[90%]" src={bg} alt="background" />
+                <img className="mx-auto h-[90%]" src={bg} alt="process-background" />
             </div>
             {children}
         </div>