Redesign KubeCon links on the main page

[shurup]

Description

I'm suggesting this redesign of the "Attend KubeCon…" block on the main page (see After):

In my understanding, it's needed since we have five KubeCons now, and adding more huge buttons (as we did before — see Before) won't really work anymore.

While working on this design improvement, I've also noticed a long-standing HTML bug since we had such entities for the KubeCon links for many years: <a href="..." button id="desktopKCButton">. They are not valid for two reasons: a) the <a> tag does not have the button attribute, and b) we can't use the same id for numerous HTML objects on the same page. Thus, I removed the button attribute and converted desktopKCButton from id to class.

UPDATE: To maintain back compatibility with the localised pages having old content at the moment, I left the #desktopKCButton blocks in the CSS file, which we'll be able to remove later (i.e. when all localisations switch to the new HTML code for KubeCon links).

Obviously, I've also synced the actual KubeCon events (links & dates) with the upcoming 2025 events.

I've checked how the suggested changes are rendered in two browsers (Firefox and Chrome in Linux). However, more testing, as well as general feedback, will be very much appreciated.

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e49c25c
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/677e4a7b1eaf030008d3f927
😎 Deploy Preview	https://deploy-preview-49167--kubernetes-io-main-staging.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 configuration.

[sftim]

I think we could use a more comprehensive redesign of our landing page.

This is progress. However, we shouldn't merge this as-is @shurup. Please look at the localized versions of this page; you'll see that the proposed change will break rendering for some (eg Korean).
Can we find a way to make an incremental change that leaves localizations' landing pages looking OK until they have caught up?

[shurup]

Good catch, thank you! I will find a way to keep the "backward compatibility."

P.S. Regarding a more general redesign of this page, I was actually thinking of suggesting some new options to replace that old video (behind the KubeCon links) as my next step...

[shurup]

Can we find a way to make an incremental change that leaves localizations' landing pages looking OK until they have caught up?

It's done. I added "old-fashioned" #desktopKCButton blocks (in addition to my new .desktopKCButton blocks) to CSS, and the localised pages (with no changes in content) look fine now.

[sftim]

Thanks!

/lgtm

[k8s-ci-robot]

LGTM label has been added.

Git tree hash: e8fe29bfafbf4608dcb3d69f971be52f3c7b26b5

[katcosgrove]

/approve

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: katcosgrove

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

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [katcosgrove]
• content/en/OWNERS [katcosgrove]

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