feat: placeholder for broken images

src/components/TestimonyCard/index.js

@@ -4,9 +4,10 @@ export default function HomepageList(props) {
   return (
     <div className={styles.wholeCard +" avatar avatar--vertical"}>
       <a href={props.url} className={styles.avatarSegment + " text--center margin-bottom--md"} target="_blank" rel="noreferrer"> 
-        <img
-          className="avatar__photo avatar__photo--xl margin--sm"
-          src={props.img} />
+        <div className={styles.imgBackground +" avatar__photo avatar__photo--xl margin--sm"}>
+          <img
+            src={props.img} />
+        </div>
         <div className={styles.underline + " avatar__name"}> 
           {props.name} 
         </div>

src/components/TestimonyCard/styles.module.css

@@ -9,10 +9,17 @@
 
 .avatarSegment {
   transform: translateY(55%);
+
 }
 
-.avatarSegment img {
+.imgBackground {
+  background-color: var(--ifm-color-primary);
+  background-image: url('../../../static/img/happy.png');
+  background-size: 115%;
+  background-repeat: no-repeat;
+  background-position: 50% 20px;
   outline: solid 8px var(--ifm-card-background-color);
+
 }
  
 .avatarSegment:hover {