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';
-
+import type { Content } from '~/types';
-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;
-}
 
 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">
+  <div aria-hidden="true" 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" />}
+    {
+      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,13 +38,22 @@ const {
               <hr class="border-slate-200 dark:border-slate-600 my-4" />
 
               <div class="flex items-center">
-                {image && image.src && (
+                {image && (
-                  <img
+                  <div class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600">
-                    src={image.src}
+                    {typeof image === 'string' ? (
-                    alt={image.alt}
+                      <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">
                   {name && <p class="text-base font-semibold">{name}</p>}

src/pages/landing/mobile-app.astro

@@ -88,8 +88,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
+      src: import('~/assets/images/colors.jpg'),
-      alt: 'Astronaut Image',
+      alt: 'Colorful Image',
     }}
   />
 
@@ -125,8 +125,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
+      src: import('~/assets/images/caos.jpg'),
-      alt: 'Features Image',
+      alt: 'Colorful Image',
     }}
   >
     <Fragment slot="content">
@@ -168,8 +168,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
+      src: import('~/assets/images/vintage.jpg'),
-      alt: 'Benefits Image',
+      alt: 'Vintage Image',
     }}
   >
     <Fragment slot="content">
@@ -188,7 +188,7 @@ const metadata = {
         name: 'Cary Kennedy',
         job: 'Film director',
         image: {
-          src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
+          src: import('~/assets/images/colors.jpg'),
           alt: 'Cary Kennedy Image',
         },
       },
@@ -198,7 +198,7 @@ const metadata = {
         name: 'Josh Wilkinson',
         job: 'Product Manager',
         image: {
-          src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
+          src: import('~/assets/images/vintage.jpg'),
           alt: 'Josh Wilkinson Image',
         },
       },
@@ -208,7 +208,7 @@ const metadata = {
         name: 'Sidney Hansen',
         job: 'Decorator',
         image: {
-          src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
+          src: import('~/assets/images/caos.jpg'),
           alt: 'Sidney Hansen Image',
         },
       },

src/types.d.ts

@@ -149,7 +149,7 @@ export interface Testimonial {
   testimonial?: string;
   name?: string;
   job?: string;
-  image?: Image;
+  image?: string | unknown;
 }
 
 // COMPONENTS
@@ -207,7 +207,7 @@ export interface Clients extends Headline, Widget {
 }
 
 export interface Features extends Headline, Widget {
-  image?: Image;
+  image?: string | unknown;
   video?: Video;
   items: Array<Item>;
   columns: number;
@@ -235,8 +235,10 @@ export interface Steps extends Headline, Widget {
 }
 
 export interface Content extends Headline, Widget {
-  image?: string;
+  content?: string;
+  image?: string | unknown;
   items?: Array<Item>;
   columns?: number;
   isReversed?: boolean;
+  isAfterContent?: boolean;
 }