integrations section started

[paulo-valim]

@josevalim I started the section. Before I start the logos and texts, I want to clear the design with you; that's why it is not ready yet. I also made it responsive; please check it out on other device screens. =)

[netlify[bot]]

✅ Deploy Preview for livebook-dev ready!

Name	Link
🔨 Latest commit	14c03801c26269dee894cc4f0ae49db4a77f4371
🔍 Latest deploy log	https://app.netlify.com/sites/livebook-dev/deploys/638920e540bbee0008471db5
😎 Deploy Preview	https://deploy-preview-54--livebook-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[josevalim]

1. We can definitely decrease the size of each integration.

2. On small screens, we still want to show all integrations. For md, perhaps we show 2->3->3->2 and for sm, we show 2->2->2->2->2.

[josevalim]

@paulo-valim, this is a better indicator of the size:

I used h-40 for the height of each grid row. Inside the cell, I used:

        <img
        class="h-[60px]"
        src="/images/Integrations/elixir_logo.svg"
        alt="Livebook Aplication Screenshot"
        />
        <span class="text-gray-700 font-medium text-base text-lg mt-2">Elixir</span>
        <span class="text-gray-500 font-medium md:font-semibold text-xs tracking-wider sm:tracking-widest">LANGUAGE</span>

I saw that for large screens you are showing 5 columns, but we should continue showing 4. You should use max-w-sm around the grid so it doesn't grow too much.

[hugobarauna]

Can we add "Integrations" to the menu as well?

Like this:

When the visitor clicks that menu item, the site scrolls to the integrations section.

That way, we can bring awareness that we have integrations without requiring the visitor to scroll.

[josevalim]

:green_heart: :blue_heart: :purple_heart: :yellow_heart: :heart: