Change images in the Features3 and Testimonials

src/components/widgets/Content.astro

@@ -1,23 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
-
-interface Item {
-  title: string;
-  description?: string;
-  icon?: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  tagline?: string;
-  content?: string;
-  items?: Array<Item>;
-  image?: string | any; // TODO: find HTMLElementProps
-  isReversed?: boolean;
-  isAfterContent?: boolean;
-}
+import type { Content } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -28,7 +12,7 @@ const {
   image = await Astro.slots.render('image'),
   isReversed = false,
   isAfterContent = false,
-} = Astro.props;
+} = Astro.props as Content;
 ---
 
 <section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-page py-16 md:py-20 not-prose']}>
@@ -95,7 +79,7 @@ const {
                   widths={[400, 768]}
                   sizes="(max-width: 768px) 100vw, 432px"
                   aspectRatio="500:500"
-                  {...image}
+                  {...(image as any)}
                 />
               )}
             </div>

src/components/widgets/Features3.astro

@@ -1,4 +1,5 @@
 ---
+import { Picture } from '@astrojs/image/components';
 import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
@@ -22,8 +23,25 @@ const {
 <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container} bg={bg}>
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline} />
 
-  <div class="aspect-w-16 aspect-h-7">
-    {image && image.src && <img src={image.src} alt={image.alt || ''} class="w-full h-80 object-cover rounded-xl" />}
+  <div aria-hidden="true" class="aspect-w-16 aspect-h-7">
+    {
+      image && (
+        <div class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg">
+          {typeof image === 'string' ? (
+            <Fragment set:html={image} />
+          ) : (
+            <Picture
+              class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
+              width={0}
+              height={320}
+              widths={[400, 768]}
+              aspectRatio="16:7"
+              {...(image as any)}
+            />
+          )}
+        </div>
+      )
+    }
   </div>
 
   <ItemGrid

src/components/widgets/Testimonials.astro

@@ -3,6 +3,7 @@ import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import type { Testimonials } from '~/types';
 import CTA from '../ui/CTA.astro';
+import { Picture } from '@astrojs/image/components';
 
 const {
   title = '',
@@ -37,12 +38,21 @@ const {
               <hr class="border-slate-200 dark:border-slate-600 my-4" />
 
               <div class="flex items-center">
-                {image && image.src && (
-                  <img
-                    src={image.src}
-                    alt={image.alt}
-                    class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
-                  />
+                {image && (
+                  <div class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600">
+                    {typeof image === 'string' ? (
+                      <Fragment set:html={image} />
+                    ) : (
+                      <Picture
+                        class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
+                        width={40}
+                        height={40}
+                        widths={[400, 768]}
+                        aspectRatio="1:1"
+                        {...(image as any)}
+                      />
+                    )}
+                  </div>
                 )}
 
                 <div class="grow ml-3">