fix: add missing alt text to What's Inside section for accessibility

Author: Meghana-2124

docs/pages/index.mdx

@@ -1,4 +1,4 @@
-import Head from 'next/head';
+import Head from 'next/head'; 
 import Link from 'next/link';
 import data from "../../next-cloudinary/package.json"
 
@@ -73,8 +73,6 @@ import Button from '../components/Button';
   <p className="mt-10"><Button href="/installation">Get Started</Button></p>
 </div>
 
-
-
 <div className="text-center max-w-4xl mx-auto my-14 md:my-36">
   <h2 className="text-4xl font-bold">What's Inside?</h2>
 
@@ -86,7 +84,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-optimization_saagby`}
         sizes="50w"
-        alt=""
+        alt="Galaxy image showing file size optimization from 2.8MB to 44KB for faster performance"
       />
       <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 +96,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-transformations_vjacda`}
         sizes="50w"
-        alt=""
+        alt="Person editing image representing Cloudinary’s image transformation and AI tools"
       />
       <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 +108,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-upload-widget_fvrnjs`}
         sizes="50w"
-        alt=""
+        alt="Drag and drop widget interface showing how to upload images easily using Cloudinary"
       />
       <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 +120,7 @@ import Button from '../components/Button';
         height="600"
         src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-social-cards_ll4fqu`}
         sizes="50w"
-        alt=""
+        alt="Example social card for a Next.js project generated dynamically using Cloudinary"
       />
       <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>
@@ -199,4 +197,4 @@ import Button from '../components/Button';
 <div className="text-center max-w-2xl mx-auto my-20 md:my-44">
   <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold md:leading-[4rem]">Transform &amp; Deliver at Scale with Next Cloudinary</h2>
   <p className="mt-10"><Button href="/installation">Get Started</Button></p>
-</div>
+</div>