switched to agilitypic instead of img everywhere

components/agility-pageModules/HeroHeading.js

@@ -1,3 +1,5 @@
+import { AgilityPic } from "@agility/nextjs";
+
 /* This example requires Tailwind CSS v2.0+ */
 export default function HeroHeading({ module }) {
   const { fields } = module;
@@ -9,7 +11,11 @@ export default function HeroHeading({ module }) {
         <div className="absolute inset-0"></div>
         <div className="relative mx-auto py-10 px-4 sm:px-6 lg:px-8">
           {fields.image && fields.image.url && (
-            <img className="mx-auto mb-8" alt={fields.image.label} src={fields.image.url + "?w=100"} />
+            <AgilityPic
+              image={fields.image}
+              className="mx-auto mb-8"
+              fallbackWidth={100}
+            />
           )}
           <h1 className="sm:text-center md:text-left text-3xl font-semibold tracking-normal text-white md:text-5xl">
             {fields.title}

components/agility-pageModules/RighOrLeftAlignedImageLinks.js

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { getHrefRel, getHrefTarget } from "../../utils/linkUtils";
+import { AgilityPic } from "@agility/nextjs";
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -46,9 +47,9 @@ const RightOrLeftAlignedImageLinks = ({ module, customData }) => {
                       "rounded-lg inline-flex p-3 ring-4 ring-white"
                     )}
                   >
-                    <img
-                      alt={action.imageAlt}
-                      src={`${action.image}?w=40`}
+                    <AgilityPic
+                      image={action.image}
+                      fallbackWidth={40}
                       className="w-10"
                       aria-hidden="true"
                     />

components/agility-pageModules/SDKsFrameworks.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { getHrefRel, getHrefTarget } from "../../utils/linkUtils";
 import Link from "next/link";
+import { AgilityPic } from "@agility/nextjs";
 
 const SDKsFrameworks = ({ module, customData }) => {
   const { fields } = module;
@@ -23,9 +24,9 @@ const SDKsFrameworks = ({ module, customData }) => {
               key={index}
               className="bg-lightGray p-6 flex justify-center items-center"
             >
-              <img
-                alt={action.title}
-                src={`${action.image}?w=40`}
+              <AgilityPic
+                image={action.image}
+                fallbackWidth={40}
                 className="w-10"
                 aria-hidden="true"
               />

components/agility-pageModules/TextBlocksWithImages.js

@@ -1,3 +1,4 @@
+import { AgilityPic } from "@agility/nextjs";
 import Link from "next/link";
 
 const TextBlocksWithImages = ({ module }) => {
@@ -14,14 +15,13 @@ const TextBlocksWithImages = ({ module }) => {
                 <span className="inline-block w-[4px] h-[4px] rounded-full bg-darkerGray" />
                 <span className="inline-block w-[4px] h-[4px] rounded-full bg-darkerGray" />
               </div>
-              <img
-                alt={fields.image1.label}
-                src={fields.image1.url}
+              <AgilityPic
+                image={fields.image1}
+                fallbackWidth={300}
                 className="pb-2 w-[300px] hidden lg:block"
               />
-              <img
-                alt={fields.image1.label}
-                src={fields.image1.url}
+              <AgilityPic
+                image={fields.image1}
                 className="pb-2 w-full block lg:hidden"
               />
             </div>
@@ -44,16 +44,16 @@ const TextBlocksWithImages = ({ module }) => {
                 <span className="inline-block w-[4px] h-[4px] rounded-full bg-darkerGray" />
                 <span className="inline-block w-[4px] h-[4px] rounded-full bg-darkerGray" />
               </div>
-              <img
-                alt={fields.image2.label}
-                src={fields.image2.url}
+              <AgilityPic
+                image={fields.image2}
+                fallbackWidth={300}
                 className="pb-2 w-[300px] hidden lg:block"
               />
-              <img
-                alt={fields.image2.label}
-                src={fields.image2.url}
+              <AgilityPic
+                image={fields.image2}
                 className="pb-2 w-full block lg:hidden"
               />
+
             </div>
             <div className="text-center md:text-left mt-8 md:mt-0 md:ml-10 w-full flex items-center justify-center">
               <div>