docs: Merge pull request #627 from HRIDYANSHU054/fixes/Issue/608

docs: Adds alt text to four images on the index page. Fixes issue #608.

Author: eportis-cloudinary

docs/pages/index.mdx

@@ -86,7 +86,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-optimization_saagby`}
         sizes="50w"
-        alt=""
+        alt="Example of automatic image optimization and responsive delivery"
       />
       <h3 className="text-2xl font-semibold mb-4">Optimization</h3>
       <p>Automatically <Link className="underline underline-offset-2" href="/guides/image-optimization">optimize images</Link> and videos with <Link className="underline underline-offset-2" href="/guides/responsive-images">responsive sizes</Link> and modern formats.</p>
@@ -98,7 +98,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-transformations_vjacda`}
         sizes="50w"
-        alt=""
+        alt="Demo of image transformations: cropping, resizing and background removal"
       />
       <h3 className="text-2xl font-semibold mb-4">Transformations</h3>
       <p>Transform assets using dynamic <Link className="underline underline-offset-2" href="/cldimage/examples#cropping--resizing">Cropping and Resizing</Link>, <Link className="underline underline-offset-2" href="/guides/background-removal">Background Removal</Link>, Generative AI, and more.</p>
@@ -110,7 +110,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-upload-widget_fvrnjs`}
         sizes="50w"
-        alt=""
+        alt="Cloudinary upload widget UI for adding assets"
       />
       <h3 className="text-2xl font-semibold mb-4">Uploading</h3>
       <p>Drop-in widget for easily <Link className="underline underline-offset-2" href="/guides/uploading-images-and-videos">uploading assets</Link> into the cloud.</p>
@@ -122,7 +122,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-social-cards_ll4fqu`}
         sizes="50w"
-        alt=""
+        alt="Social card preview for Open Graph (OG) images"
       />
       <h3 className="text-2xl font-semibold mb-4">Social Cards</h3>
       <p>Easiest way to create beautiful <Link className="underline underline-offset-2" href="/guides/social-media-card">social cards</Link> in Next.js.</p>