website: include adopter logos on homepage

[Dylannni]

Checklist:

• You have signed off your commits
• Ensure you follow best practices from our guide. Contributing.
• You have included screenshots when changing the website style or adding a new page.

Description of your changes:
Added - Companies Name/Logo, a case studies markdown file under /docs/about
Edited - Front page layout (_index.html)

Issue

Closes: #4036

Labels

/area website

---

[google-oss-prow]

Hi @Dylannni. Thanks for your PR.

I'm waiting for a kubeflow member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[Dylannni]

@andreyvelich Just realised everything from last time is ready for PR. Please continue confirming the companies so I can replace the placeholders I have right now. Also, what are your thoughts on case study page? I could make something fancier than this tomorrow if needed.

cc @chasecadet @castrojo

[Arhell]

/ok-to-test

[andreyvelich]

Thank you for opening this PR @Dylannni!
/assign @kubeflow/kubeflow-steering-committee @castrojo @chasecadet @akgraner @jbottum @varodrig @kubeflow/release-team @rimolive

[terrytangyuan]

LGTM

[franciscojavierarceo]

Thank you for this!

[Dylannni]

When should I replace the palceholder?

[andreyvelich]

I could make something fancier than this tomorrow if needed.

@Dylannni What do you have in mind for the Case Studies section ?

[Dylannni]

@andreyvelich We could have a case study board (logo with a short description) for each company, instead of just listing out the case studies. What do you think?

[andreyvelich]

Yeah, or maybe we can learn something from CNCF Case Study page: https://www.cncf.io/case-studies/
We can do that in the followup PR.

[thesuperzapper]

/hold

We haven't got approval from the CNCF to use trademarks, or confirmation about which trademarks we can use, please continue that discussion on:

• List companies using Kubeflow Projects on the website #4036

Also, please rebase after the dark-mode PR to ensure it looks good in both.

I want to take a look at the styles again once you rebase, so please tag me.

[thesuperzapper]

@castrojo ccing you for legal discussion about what is required to include these logos on the Kubeflow homepage.

But feel free to respond on the issue instead, incase we dont end up using this specific PR:

• List companies using Kubeflow Projects on the website #4036

[Dylannni]

@thesuperzapper Rebased onto latest master branch, have a look! I noticed that the Amazon/RedHat logos look faint in dark mode as their name are in Black, any suggestion on how I could deal with it?

[castrojo]

LGTM

[andreyvelich]

Given that @castrojo gave /lgtm for this PR, I think we can move forward.
/lgtm
/hold for others review
/cc @kubeflow/kubeflow-steering-committee @rimolive @varodrig @kubeflow/release-team @StefanoFioravanzo

[vara-bonthu]

/lgtm

[andreyvelich]

We've got /lgtm from Amazon and RedHat. Can we get someone from Google, Microsoft, and ByteDance to move this forward.
@Jeffwan Would you mind approving it from the ByteDance point of view ?

For Google, @james-jwu please can you help us with the approval ?

@chasecadet Who we can reach out for Microsoft approval ?

[andreyvelich]

cc @chensun for the Google approval.

[thesuperzapper]

@andreyvelich as I was saying in #4065 (comment), to establish a process we should:

1. Have the organization first add themselves to ADOPTERS.md (so we know who to contact)
2. Ensure the organization is a Member of the CNCF Foundation (which prevents most trademark lawsuit risk)
3. Have the KSC vote to approve adding the organization to the front page
4. Get approval from the organization in a specific PR which adds their logo

Notes:

• Regarding requirement 2, ByteDance is not a CNCF member, so should be removed.
• Regarding requirement 3 and 4, we can do them in bulk for the initial batch.

[thesuperzapper]

Additionally for this PR to be mergable, there are a few things we need to fix.

Changes:

1. Fix the styling of the logos on dark mode, as this is currently not compliant with trademark guidelines (or easy to read):

   • 
   • My suggestion for is that we use the "white" version of these logos in dark mode, and color versions in light mode.
   • Add show_light-only or show_dark-only CSS class to an element to hide it on one theme or the other.

2. Lets remove the "case studies" page and link for now, as we have none:

   • We can replace the "Read our User Stories" link on the homepage with a "See Our Adopters" button which links to ADOPTERS.md

3. Discuss if we should say "Trusted By" or "Adopted By":

   • Since they will all be listed on ADOPTERS.md, this might be more appropriate.
   • Also, saying "Adopted By" might be less controversial for organizations.

[andreyvelich]

@Dylannni Please would you help updating this PR to incorporate @thesuperzapper feedback:

1. Fix the styling of the logos on dark mode,
2. Remove the "case studies", and redirect to our ADOPTERS page.

Trusted By vs Adopted By, maybe Trusted By make sense looking at what others are doing:

1. Istio: https://istio.io/
2. Argo: https://argoproj.github.io/

@castrojo @kubeflow/kubeflow-steering-committee thoughts ?

[Dylannni]

@andreyvelich @thesuperzapper Thank you for the feedback — I’ve made some changes accordingly.
As I aiming to refine the logos properly this time, would it be more appropriate to use the specific branding for cloud engineering teams, such as AWS/Google Cloud, instead of Amazon/Google?

Apologies for any confusion — I initially thought this PR was meant to be a mock-up.

[thesuperzapper]

@franciscojavierarceo can you /approve cancel for now so we can finalize this with a specific KSC vote?

I think you ended up "approving" in the eyes of Prow because of the old GitHub review being treated as a prow approval issue.

[thesuperzapper]

@Dylannni there are still other fixes to do based on previous comments (e.g. dark/light) but here are a few things.

[franciscojavierarceo]

/approve cancel
/hold

[google-oss-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from andreyvelich. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Dylannni]

@thesuperzapper I’ve made some changes accordingly, but I’m still facing one issue that I’m not sure how to resolve. Could you kindly help me?

I’ve added both color logos and white logos in the HTML, and assigned them trusted-logo-light and trusted-logo-dark classes respectively, defined in /scss/_styles_project.scss.

I want to switch to the white logo when dark theme is selected. I tried adding the following:

html[data-theme='dark'] .show_dark-only {
  display: block !important;
}
html[data-theme='dark'] .show_light-only {
  display: none !important;
}

But it doesn’t seem to work as expected.
Could you advise me on the correct way to implement this logo switching behavior based on the selected theme?

Thank you very much!

[andreyvelich]

@thesuperzapper @kubeflow/kubeflow-steering-committee @Dylannni @castrojo What is blocking us to move this forward?

[Dylannni]

@andreyvelich The main blocker is switching the color logo to a white logo for dark mode. I can only work on it this weekend because I have my final exam on Friday.

[thesuperzapper]

@Dylannni @andreyvelich I have rebased the PR and fixed the build errors with 95729bd

I have also very carefully created SVGs for each logo in both dark and light modes (which are exactly the same size).

The next steps are to get confirmation from each listed company:

• Nvidia
• RedHat
• Google Cloud
• AWS (seemingly approved by @vara-bonthu in website: include adopter logos on homepage #4065 (review), but please confirm)

Then have the KSC vote to accept these specific logos on the homepage.