Logo - Fixing overlapping text and placeholder image (#2345)

* Logo - Fixing overlapping text and placeholder image

Fixed: #2344

Affected Route: `/logo/ssw`

Screenshot: TODO

* Adding placeholder image

* Adding new broken image

* Removing PNG

components/blocks/colorBlock.tsx

@@ -51,7 +51,7 @@ const ColorRow = (props: ColorRow) => {
     <>
       <div
         className={classNames(
-          "col-span-1 my-0 flex flex-col items-center justify-center px-4 md:h-10",
+          "col-span-1 my-0 flex flex-col items-center justify-center px-4",
           sswColors[`${firstColor}`]
         )}
       >
@@ -61,7 +61,7 @@ const ColorRow = (props: ColorRow) => {
       </div>
       <div
         className={classNames(
-          "col-span-1 my-0 flex flex-col items-center justify-center px-4 md:h-10",
+          "col-span-1 my-0 flex flex-col items-center justify-center px-4 ",
           sswColors[`${secondColor}`]
         )}
       >

components/blocks/downloadBlock.tsx

@@ -58,6 +58,8 @@ const Download = (data: Downloads) => {
     secondLink,
     secondLinkText,
   } = data;
+
+  const srcImage = img && !isImgBroken ? img : "/images/broken-image.jpg";
   return (
     <div className="col-span-1">
       <div className={classNames("py-3 text-black md:px-6")}>
@@ -69,10 +71,10 @@ const Download = (data: Downloads) => {
           )}
           data-tina-field={tinaField(data, "img")}
         >
-          {img && !isImgBroken && (
+          {img && (
             <Image
               onError={() => setIsImgBroken(true)}
-              src={img}
+              src={srcImage}
               alt={header}
               height={400}
               width={210}