Azbl/665 Make Before and After Text on Image Actual Text

src/app/(content-pages)/transform-property/TransformPropertyPage.tsx

@@ -30,15 +30,18 @@ export default function TransformPropertyPage() {
         improve the quality of life in the neighborhood.
       </p>
 
-      <div className="grid grid-cols-1 md:grid-cols-1 gap-6 md:gap-10">
+      <div className="grid grid-cols-1 md:grid-cols-1 ">
         <Image
           src={beforeAfter}
-          alt={
-            'A Philadelphia lot before a clean up and the same lot, filled with trees and greenery after a clean up.'
-          }
+          alt=""
           placeholder="blur"
           className="w-full overflow-hidden rounded-[20px] aspect-video md:aspect-auto object-cover object-center"
+          aria-labelledby="caption-before-after-image"
         />
+        <p id="caption-before-after-image" className="text-md text-center">
+          A Philadelphia lot before a clean up and the same lot, filled with
+          trees and greenery after a clean up.
+        </p>
       </div>
 
       <h2 className="heading-2xl font-bold mt-8 mb-6">Basic Interventions</h2>