Feat: New website

[thisisobate]

Todo

• change theme font
• Add new video resource section
• create hero section
• create why serverless section
• update knative components section
• update navbar with new design
• show version picker only in docs page
• update links
• Make mobile responsive
• Add spacing to the right of the nav menu
• Fix UX for nested nav in mobile
• Remove duplicated top menu items (blog, about, and community)
• change “readdocs” to “docs”
• Update icons to match accordingly
• Polish website to be pixel perfect (conform text colors & unit to match design)
• modify old version banner
• Remove second paragraph from Kelsey testimonial on front page
• Update card background to match page background color with outlines
• Update Knative diagram image to the latest one with eventing icon as spiral
• make kelsey testimonial card clickable
• Put Kelsey testimonials in quote and make quote prominent
• Cleanup code

Fixes #6277

[netlify]

✅ Deploy Preview for knative ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ff983e1
🔍 Latest deploy log	https://app.netlify.com/projects/knative/deploys/68931a2629a73f0008b50ee5
😎 Deploy Preview	https://deploy-preview-6286--knative.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 project configuration.

[knative-prow]

Welcome @thisisobate! It looks like this is your first PR to knative/docs 🎉

[evankanderson]

It seems like my desktop monitor is doing something that maps certain shades of grey to white. I've verified on a different screen that the "why serverless containers" section now has white backgrounds.

Could we do the same for "Knative Components"? It also feels like the "Knative Components" diagram gets shrunken too much at most screen sizes -- can we remove the rounded corners and margins on the SVG, change the SVG to transparent background, and instead use the components-content class on the surrounding div to add similar styles to the boxes above and below:

div.components-context {
    border: 1px solid #dadce0;
    border-radius: 0.7rem;
    padding: 0px 20px;
    margin: 0 50px;
}

I'm wondering if we should split the card style used for the "why serverless containers" into a card (rounded edges + outline) and a feature style (sizing for the features). The card would contain most of the above, except for the margin, which would be different between the full-width items (components and kelsey quote) and the feature style for the case studies and "why serverless containers".

I'm willing to approve the design as-is and iterate, but a couple options I'd like to see how others like for the cards (I know @dprotaso had opinions):

• Set --md-primary-bg-color to #fff (white) and one of:
  • border: 1px solid #dadce0 (Standard border, like we have on components now)
  • filter: drop-shadow(2px 2px 4px var(--md-accend-fg-color) (To get a "Knative blue" halo around the cards for a material sort of effect)

[evankanderson]

The "Knative Components" diagram seems to do a bit better on smaller screens now, so this LGTM.

/approve

[evankanderson]

I'm happy to let this merge. I'll either let @Cali0707 do the /lgtm or add one in a day or so.

[Cali0707]

Overall this is looking really good, I've just noticed a few small issues we should fix before this can merge. If you look at the image below, the body text is not aligned on the left with the title text for each card, but these should be aligned (and are in the figma design).

There are also some issues with the hover effects on the case studies/testimonials cards. First, when hovering on the Kelsey quote, the case studies cards are all shifted on the page:

Screen.Recording.2025-08-05.at.11.26.23.mov

Also, when hovering on the PNC case study, the text shifts inside the card. Additionally, this card is a different size from the other cards, when they should all be the same size:

Screen.Recording.2025-08-05.at.11.24.43.mov

[thisisobate]

Fixed all the issues @Cali0707
It works better now

[Cali0707]

/lgtm
/approve

Thanks for driving this @thisisobate ❤️

[knative-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Cali0707, evankanderson, thisisobate

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [Cali0707,evankanderson]

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

[evankanderson]

/cherrypick release-1.19
/cherrypick release-1.18

[knative-prow-robot]

@evankanderson: #6286 failed to apply on top of branch "release-1.18":

Applying: chore: change theme font to satoshi font
Applying: chore: create hero section
.git/rebase-apply/patch:123: trailing whitespace.
                  
.git/rebase-apply/patch:129: trailing whitespace.
                 
.git/rebase-apply/patch:157: trailing whitespace.
            
.git/rebase-apply/patch:162: trailing whitespace.
           
error: patch failed: overrides/assets/stylesheets/home.css:1
error: overrides/assets/stylesheets/home.css: patch does not apply
error: Did you hand edit your patch?
It does not apply to blobs recorded in its index.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config advice.mergeConflict false"
Using index info to reconstruct a base tree...
Patch failed at 0002 chore: create hero section

Details

In response to this:

/cherrypick release-1.19
/cherrypick release-1.18

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-sigs/prow repository.

[evankanderson]

/cherrypick release-1.19

[knative-prow-robot]

@evankanderson: #6286 failed to apply on top of branch "release-1.19":

Applying: chore: change theme font to satoshi font
Applying: chore: create hero section
.git/rebase-apply/patch:123: trailing whitespace.
                  
.git/rebase-apply/patch:129: trailing whitespace.
                 
.git/rebase-apply/patch:157: trailing whitespace.
            
.git/rebase-apply/patch:162: trailing whitespace.
           
error: patch failed: overrides/assets/stylesheets/home.css:1
error: overrides/assets/stylesheets/home.css: patch does not apply
error: Did you hand edit your patch?
It does not apply to blobs recorded in its index.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config advice.mergeConflict false"
Using index info to reconstruct a base tree...
Patch failed at 0002 chore: create hero section

Details

In response to this:

/cherrypick release-1.19

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-sigs/prow repository.

[evankanderson]

I'll cherry pick this by hand