add one article and optional Author

frontend/src/components/BlogHeadingSection.jsx

@@ -14,9 +14,9 @@ const BlogHeadingSection = ({ data }) => {
           AuthorImage: data.AuthorImage,
         }}
       />
-      <H1 data={data.ArticleTitle} />
+      {/* <H1 data={data.ArticleTitle} />
       <Paragraph data={data.ArticleDescription} />
-      <Image data={data.ArticleImage} />
+      <Image data={data.ArticleImage} /> */}
     </Fragment>
   );
 };

frontend/src/components/DynamicZones.jsx

@@ -10,12 +10,12 @@ import H1 from './blog-micro-components/H1';
 
 const DynamicZones = ({ data }) => {
   return (
-    <Fragment>
+    <div className='flex flex-col gap-32p'>
       {/* Dymanic zones */}
       {data &&
         data.length > 0 &&
         data.map((item, index) => (
-          <Fragment key={index}>
+          <div key={index}>
             {/* H1 */}
             {item.__component && item.__component === 'blog-components.h1' && (
               <H1 data={item.field}></H1>
@@ -49,9 +49,9 @@ const DynamicZones = ({ data }) => {
             {item.__component && item.__component === 'blog-components.quote' && (
               <Quote data={item.field}></Quote>
             )}
-          </Fragment>
+          </div>
         ))}
-    </Fragment>
+    </div>
   );
 };
 

frontend/src/components/shared/ArticleCard.jsx

@@ -16,15 +16,18 @@ const ArticleCard = ({ data }) => {
   return (
     // <div className={"card box" + (isLarge ? ' col-span-2' : '')}>
     <a
-      className={'card box my-2 flex flex-col md:flex-row items-center justify-between gap-[72px]'}
+      className={
+        'card box my-2 flex flex-col md:flex-row items-center justify-between gap-[72px]'
+      }
       href={`/articles/${data.Slug}`}
     >
       <div className="flex flex-col gap-[18px]">
-        <div className="flex gap-4">
+        { data.Author &&
+          <div className="flex gap-4">
           <img
             className="max-h-[45px] object-fit rounded-full"
             src={api_url + data.AuthorImage.data.attributes.url}
-            alt={api_url + data.AuthorImage.data.attributes.alternativeText}
+            alt={data.AuthorImage.data.attributes.alternativeText}
           />
           <div className="flex flex-col items-start">
             <p className="paragraph">{data.Author}</p>
@@ -33,7 +36,9 @@ const ArticleCard = ({ data }) => {
             </p>
           </div>
         </div>
-        <div className='text-left flex flex-col gap-[8px]'>
+        }
+        
+        <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>
         </div>
@@ -47,10 +52,12 @@ const ArticleCard = ({ data }) => {
           )}
         </div>
       </div>
-      <img
-        src={api_url + data.ArticleImage.data.attributes.url}
-        alt={api_url + data.ArticleImage.data.attributes.alternativeText}
-      />
+      <div className="w-full md:w-[450px] rounded-8 overflow-hidden">
+        <img
+          src={api_url + data.ArticleImage.data.attributes.url}
+          alt={data.ArticleImage.data.attributes.alternativeText}
+        />
+      </div>
 
       {/* <img src={api_url + data.img} alt={api_url + data.alt} className={'mb-12 mx-auto self-center'}></img> */}
     </a>

frontend/src/pages/ArticlePage.jsx

@@ -76,7 +76,8 @@ export default function ArticlePage() {
                 </a>
                 <OneArticlesGrid>
                   <div className="col-span-1 md:col-span-4">
-                    <BlogHeadingSection
+                    {data[0].attributes.Author &&
+                      <BlogHeadingSection
                       data={{
                         ArticleImage: data[0].attributes.ArticleImage,
                         ArticleTitle: data[0].attributes.ArticleTitle,
@@ -86,6 +87,8 @@ export default function ArticlePage() {
                         AuthorImage: data[0].attributes.AuthorImage,
                       }}
                     />
+                    }
+                    
                     <DynamicZones data={data[0].attributes.DynamicZone1} />
                   </div>
                   <LatestArticles />