Adding used by section

[bennyvasquez]

This is a draft for #488, but it's got problems.

• I can't get the logos to vertically center there, but I'm betting someone who's a bit CSS/HTML smarter than me will be able to make it happen very easily.
• These should be relatively small, just big enough to be easily seen.
• Adding this section here messes up all of the dark/light background patterns, so those will need to be adjusted.
• I haven't done any work on making it mobile friendly.
• I'd LOVE to see these scroll along.

[bennyvasquez]

@sboldyreva do you think you can take this across the finish line?

[sboldyreva]

@bennyvasquez let me take a look

[bennyvasquez]

Two more logos to add. Tried to just add them to the PR but my local version got messed up soooooooo.

[codyro]

Thanks @mattlasheboro for getting a version of the global layer logo done up.

[sboldyreva]

@bennyvasquez we can ask @Shone-Kristas to help with mobile version adjustments

[sboldyreva]

Suggested change

	<h4 class="pb-2 border-bottom">
	{{ i18n "Trusted by" }}
	</h4>
	<h2 class="pb-2 text-center border-bottom">
	{{ i18n "Trusted by" }}
	</h2>

[sboldyreva]

I suggest we have it h2 and centered as the rest sections on the page

[bennyvasquez]

Consistency is very good, for sure, and your suggestion is correct if we want to keep it.

As a note: I'm worried about how much space this title in addition to the logos adds to the page, though, and was considering dropping the text entirely here. That seemed consistent with what other organizations do when providing the same information (or maybe even change it to something a bit more verbose 'Our users come from industries across the globe').

However, I'm worried that it won't be clear what these logos represent without the text. What do you think?

[sboldyreva]

Ah! In this case, how about placing this info and logos right under the very first and main section? It will take less space and can work even without sections colors adjustments

[bennyvasquez]

OH! I like that a TON, actually.

[sboldyreva]

Adding this should do the job

<div class="al-index-backed-by al-py-lg" style="width: 100%; padding: 0 15px;">
                    <div class="container">
                        <h3 class="pb-2">
                            Trusted by
                        </h3>
                        <div class="row row-cols-2 row-cols-sm-4 row-cols-md-6 g-5 al-used-by-list ">
                                
                                    <div class="col d-flex flex-fill align-items-center justify-content-center al-used-by-logo-container">
                                        <img loading="lazy" src="/usedby/akamai.svg" alt="akamai" class="al-used-by-logo" style="height: 100%; width: 120px;">
                                    </div>        
                            
                                    <div class="col d-flex flex-fill align-items-center justify-content-center al-used-by-logo-container">
                                        <img loading="lazy" src="/usedby/arista.svg" alt="arista" class="al-used-by-logo" style="height: 100%; width: 120px;">
                                    </div>
                            
                                    <div class="col d-flex flex-fill align-items-center justify-content-center al-used-by-logo-container">
                                        <img loading="lazy" src="/usedby/colorodostateuniveristy.svg" alt="colorodostateuniveristy" class="al-used-by-logo" style="height: 100%; width: 120px;">
                                    </div>

                                    <div class="col d-flex flex-fill align-items-center justify-content-center al-used-by-logo-container">
                                        <img loading="lazy" src="/usedby/hetzner.png" alt="hetzner" class="al-used-by-logo" style="height: 100%; width: 120px;">
                                    </div>
                                    
                                    <div class="col d-flex flex-fill align-items-center justify-content-center al-used-by-logo-container">
                                        <img loading="lazy" src="/usedby/lacework.svg" alt="lacework" class="al-used-by-logo" style="height: 100%; width: 120px;">
                                    </div>
                                    
                                    <div class="col d-flex flex-fill align-items-center justify-content-center al-used-by-logo-container">
                                        <img loading="lazy" src="/usedby/phoronix.svg" alt="phoronix" class="al-used-by-logo" style="height: 100%; width: 120px;">
                                    </div>
                        </div>
                    </div>
                </div>