Update index.mdx

[mjmolina]

Add the Sponsor information to the PyLadies lunch section.
Take a look if this align with the sponsors needs. If not lets change it :)!

🖼️ Preview available 🖼️ : https://ep-website--1713.org.readthedocs.build/

@clytaemnestra @hypha @deutranium

[hypha]

Hey @mjmolina I've made some comments. I'm really sorry this is proving to be more complicated than I imagined. Thanks so much for taking this up!

[hypha]

Currently, it does not render, because I don't think it resolve relative path inside the tag.
We could replace it with ![Arm logo](../../sponsors/arm/arm.svg) to make it render, but we have some small problems:

1. We don't have any control over the alt text or the width
2. The Arm's logo is dark, so in darkmode, we cannot see it without extra control.
3. We need the logo to be clickable, pointing to their website

So I think we will have to go through the more convoluted way of importing the image and modifying it to look nice

1. add the import after formatter ---, in line 6:

import armLogo from '../../sponsors/arm/arm.svg';

2. change the <p> to a div with all the image attributes:

<div class="flex justify-center">
  <a href="https://www.arm.com" target="_blank" rel="noopener noreferrer">
    <img
      src={armLogo.src}
      alt="Arm logo"
      width="200"
      class="bg-white p-4 rounded-lg inline-block"
    />
  </a>
</div>

[nikoshell]

If I can suggest something, just add image src/content/pages/pyladies
and add it to markdown like in other places,
then add Button "Visit our Sponsor Website"

[hypha]

That works too. I dropped in a new svg with rounded white bg here: https://drive.google.com/file/d/1rDaa7q3FBWdA5GTYqW68aFKMQxkCl675/view?usp=drive_link so it can be placed in the folder.

But I think the prose border should be removed for this, and it should be smaller, so maybe something like

<div class="no-border max-w-70 mx-auto">
  ![Arm logo](./arm-white-bg.svg)                                                                                                                                                                                                                    
</div>                                                                                                                                                                                                                                                              
<Button url="https://www.arm.com">Visit our sponsor Arm</Button> 

And it'll look like this:

[mjmolina]

Good morning @hypha !
Sound good your suggestions and the display looks very nice. Regarding to the image, I don't have access to the folder, only to the image view that I can not download or update to the pyladies folder.
What is the easier solution? If it is easier for you open a new PR work for me!

[nikoshell]

let me help, I will prepare component for this as we want use it in other places as well

[nikoshell]

@mjmolina Thank you for contributing, I create new PR with you commits and new component.

[mjmolina]

Thank you @nikoshell, sounds great! Then, I will close this one to avoid having duplicated PR :). Sounds good to you?