feat: make testimonials accessible ✨ (amanjaiman1#458)

## Related Issue

Closes: amanjaiman1#456 

### Describe the changes you've made
- Made Testimonials accessible by using `figure`, `figcaption` and
`blockquote`.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?
- Tested with NVDA Screen Reader

## Checklist

- [x] My code follows the guidelines of this project.
- [x] I have performed a self-review of my own code.
- [x] I have commented on my code, particularly wherever it was hard to
understand.
- [x] I have made corresponding changes to the documentation.
- [x] My changes generate no new warnings.
- [x] I have added tests that prove my fix is effective or that my
feature works.
- [x] Any dependent changes have been merged and published in downstream
modules.

## Screenshots (if applicable)
- We can't take screenshots of accessibility changes rather than code
changes, Accessibility changes are often invisible to the user because
it's intended to guide disabled people

## Code of Conduct

- [x] I agree to follow this project's [Code of
Conduct](https://github.com/amanjaiman1/Product_3D/blob/main/CODE_OF_CONDUCT.md)

client/src/containers/TeamPost/TeamPostCard.jsx

@@ -29,17 +29,17 @@ const Testimonials = () => {
           {cardData.map((card, index) => (
             <SwiperSlide key={index}>
               <div className="te bg-[#F8F9FF] h-60 md:h-48 w-[90%] md:w-[50%] p-7 rounded-[1.5rem]">
-                <div className="flex flex-row gap-x-4 pt-4 justify-center items-center">
+                <figure className="flex flex-row gap-x-4 pt-4 justify-center items-center">
                   <div>
                     <img src={img} alt={card.name} className="max-w-[60px]" />
                   </div>
-                  <div className="flex items-start flex-col">
+                  <figcaption className="flex items-start flex-col">
                     <h1 className="font-semibold text-xl h-full">{card.name}</h1>
                     <p className="font-normal">{card.role}</p>
-                  </div>
-                </div>
+                  </figcaption>
+                </figure>
                 <div className="mt-6 items-center">
-                  <p className="text-slate-500">{card.testimonial}</p>
+                  <blockquote className="text-slate-500">{card.testimonial}</blockquote>
                 </div>
               </div>
             </SwiperSlide>