diff --git a/blog/config/nav.yml b/blog/config/nav.yml index 7bc619bcba9..78fb2f7d9ac 100644 --- a/blog/config/nav.yml +++ b/blog/config/nav.yml @@ -1,7 +1,6 @@ nav: - - Home: /docs/ - - Tutorial: /docs/getting-started/ - Concepts: /docs/concepts/ + - Tutorial: /docs/getting-started/ - Installing: /docs/install/ - Functions: /docs/functions/ - Serving: /docs/serving/ diff --git a/config/nav.yml b/config/nav.yml index 8ac04c875e0..223c461514f 100644 --- a/config/nav.yml +++ b/config/nav.yml @@ -1,10 +1,6 @@ INHERIT: redirects.yml nav: -############################################################################### - # Home page -############################################################################### - - Home: index.md ############################################################################### # Concepts ############################################################################### diff --git a/docs/images/home-images/blue_autoscaling_icon.svg b/docs/images/home-images/blue_autoscaling_icon.svg deleted file mode 100644 index 4ea3b502d65..00000000000 --- a/docs/images/home-images/blue_autoscaling_icon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/docs/images/home-images/blue_event_based_icon.svg b/docs/images/home-images/blue_event_based_icon.svg new file mode 100644 index 00000000000..b13ab7fe78e --- /dev/null +++ b/docs/images/home-images/blue_event_based_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/images/home-images/blue_event_intergrations_icon.svg b/docs/images/home-images/blue_event_intergrations_icon.svg index 9b0a2f0113a..799f14c4988 100644 --- a/docs/images/home-images/blue_event_intergrations_icon.svg +++ b/docs/images/home-images/blue_event_intergrations_icon.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/docs/images/home-images/blue_functions_icon.svg b/docs/images/home-images/blue_functions_icon.svg new file mode 100644 index 00000000000..e5541e8597e --- /dev/null +++ b/docs/images/home-images/blue_functions_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/images/home-images/blue_handle_events_icon.svg b/docs/images/home-images/blue_handle_events_icon.svg deleted file mode 100644 index b1ab40b4afb..00000000000 --- a/docs/images/home-images/blue_handle_events_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs/images/home-images/blue_http_first_icon.svg b/docs/images/home-images/blue_http_first_icon.svg new file mode 100644 index 00000000000..48b39a50c6b --- /dev/null +++ b/docs/images/home-images/blue_http_first_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/images/home-images/blue_kubernetes_integrated_icon.svg b/docs/images/home-images/blue_kubernetes_integrated_icon.svg new file mode 100644 index 00000000000..be8c9eab738 --- /dev/null +++ b/docs/images/home-images/blue_kubernetes_integrated_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/images/home-images/blue_plugable_icon.svg b/docs/images/home-images/blue_plugable_icon.svg index 3d05873ce28..34c5cb482e5 100644 --- a/docs/images/home-images/blue_plugable_icon.svg +++ b/docs/images/home-images/blue_plugable_icon.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/docs/images/home-images/blue_progressive_rollouts_icon.svg b/docs/images/home-images/blue_progressive_rollouts_icon.svg deleted file mode 100644 index 1c9f97959c9..00000000000 --- a/docs/images/home-images/blue_progressive_rollouts_icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/docs/images/home-images/blue_simple_abstractions_icon.svg b/docs/images/home-images/blue_simple_abstractions_icon.svg deleted file mode 100644 index 8a15db4eaf1..00000000000 --- a/docs/images/home-images/blue_simple_abstractions_icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/docs/images/home-images/hero-bg.svg b/docs/images/home-images/hero-bg.svg new file mode 100644 index 00000000000..b946d13469e --- /dev/null +++ b/docs/images/home-images/hero-bg.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/home-images/kelsey.png b/docs/images/home-images/kelsey.png new file mode 100644 index 00000000000..ac6ccf1377f Binary files /dev/null and b/docs/images/home-images/kelsey.png differ diff --git a/docs/images/home-images/knative_flowchart_graphic.svg b/docs/images/home-images/knative_flowchart_graphic.svg index e51e5bc6175..6be8631809f 100644 --- a/docs/images/home-images/knative_flowchart_graphic.svg +++ b/docs/images/home-images/knative_flowchart_graphic.svg @@ -1,80 +1,62 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index df29f63b0bc..3fcd74bb653 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,9 +1,80 @@ +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 400; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Regular.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 400; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Italic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 300; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Light.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 300; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-LightItalic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 500; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Medium.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 500; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-MediumItalic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 700; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Bold.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 700; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-BoldItalic.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: normal; + font-weight: 900; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-Black.woff') format('woff'); +} +@font-face { + font-family: 'Satoshi'; + font-style: italic; + font-weight: 900; + src: local('Satoshi'), url('https://fonts.cdnfonts.com/s/85546/Satoshi-BlackItalic.woff') format('woff'); +} + :root { --md-primary-fg-color: #f3f1f2; --md-primary-fg-color--dark: #0D4984; --md-primary-fg-color--light: #6593C8; --nav-item-color: #4d4d4d; --md-footer-bg-color: #081729; + --md-text-font: 'Satoshi'; +} + +header > nav > ul > li { + color: black; + font-weight: bold; +} + +.mr-30 { + margin-right: 30px; } .md-clipboard { @@ -108,37 +179,6 @@ a.md-header__button.md-logo img { font-weight: bold; } -.md-tabs__list li:nth-last-child(3) { - margin-left: auto; -} - -.md-tabs__list li:nth-last-child(1), -.md-tabs__list li:nth-last-child(2), -.md-tabs__list li:nth-last-child(3) { - background-color: var(--md-primary-fg-color--dark); - color: white; - padding: 0 2em; -} -.md-tabs__list li:nth-last-child(3){ -border-radius: 0.7rem 0 0 0 ; -} -.md-tabs__list li:nth-last-child(1){ - border-radius:0 0.7rem 0 0 ; - } - - -.md-tabs__list li:nth-last-child(1) a, -.md-tabs__list li:nth-last-child(2) a, -.md-tabs__list li:nth-last-child(3) a { - opacity: 1; -} - -.md-tabs__list li:nth-last-child(1) a:hover, -.md-tabs__list li:nth-last-child(2) a:hover, -.md-tabs__list li:nth-last-child(3) a:hover { - color: var(--md-accent-fg-color); -} - .md-nav__title .md-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo svg { width: auto; diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css index 30947655de2..b48b475cab3 100644 --- a/overrides/assets/stylesheets/home.css +++ b/overrides/assets/stylesheets/home.css @@ -1,3 +1,21 @@ +.hero { + background-image: url("../../images/home-images/hero-bg.svg"); + background-repeat: no-repeat; + background-position: bottom; + background-size: cover; + background-color: #fff; + height: 25rem; + margin-top: -50px; +} + +.mr-30 { + margin-right: 30px; +} + +.font-bold { + font-weight: bold; +} + .md-main__inner { margin: 0; max-width: 100%; @@ -50,8 +68,19 @@ text-align: center; } -.why-serverless-container, .need-to-know-more-container, -.knative-components-container, .trying-it-all-container, +.main-headline { + padding-top: 2rem; + color: black !important; +} + +.call-to-action { + display: inline-flex; + margin-top: 2rem; + gap: 5px; +} + +.need-to-know-more-container, +.trying-it-all-container, .whats-next-container, .whats-next-container, .case-studies-container, .cncf-notice-container { text-align: center; @@ -100,6 +129,11 @@ body { margin-left: 0.5rem; } +.md-button--secondary { + background-color: var(--md-primary-fg-color--dark); + border: none !important; +} + .home-container .md-button, .need-to-know-more-container .md-button { background-color: var(--md-primary-fg-color--light); @@ -114,9 +148,20 @@ body { border-radius: 8px; } -h2.secondary-headline, h3.trusted-by { - color: black; +h3.trusted-by { + color: white; font-weight: 700; + font-size: 1.3rem; + text-align: center; +} + +h2.secondary-headline { + color: var(--nav-item-color); + font-weight: 500; + font-size: 1rem; + max-width: 70%; + margin: 0 auto; + text-align: center; } .home-container h1 { @@ -171,6 +216,10 @@ h2.secondary-headline, h3.trusted-by { } } +.trusted-by-container { + margin-bottom: 40px; +} + .trusted-by-container #usedby { display: flex; justify-content: center; @@ -215,6 +264,19 @@ h2.secondary-headline, h3.trusted-by { } @media screen and (max-width: 480px) { + .main-headline { + font-size: 1.5rem !important; + } + + .h2.secondary-headline { + font-size: 0.7rem; + } + + .call-to-action { + flex-direction: column-reverse; + margin-top: 1rem; + } + .home-container h1 { font-size: 1.5em; padding: 0.5rem; @@ -234,17 +296,21 @@ h2.secondary-headline, h3.trusted-by { /* need to know more section css */ .need-to-know-more-container, .knative-components-container, .whats-next-container { - background-color: var(--md-primary-fg-color--dark); - padding: 2rem 1rem; + background-color: white; + color: var(--nav-item-color); text-align: center; } +.need-to-know-more-container { + padding: 5em 1em 0em 1em; +} + .need-to-know-more-container h1, .whats-next-container h1 { - color: white; + color: var(--md-primary-fg-color--dark); font-size: 2em; } -.need-to-know-more-container .md-button { +/* .need-to-know-more-container .md-button { margin: 1em 0; color: white; border-radius: 0.5rem; @@ -254,7 +320,7 @@ h2.secondary-headline, h3.trusted-by { font-size: large; padding: 0.525em 1em; min-width: fit-content; -} +} */ @media screen and (max-width: 768px) { .need-to-know-more-container { @@ -302,11 +368,20 @@ h2.secondary-headline, h3.trusted-by { } /* why serverless container css */ +.serverless-outer { + background-color: #fff; +} + +.why-serverless-container { + display: flex; + justify-content: space-between; +} + .why-serverless-container, .trying-it-all-container { + margin-top: -2px; background-color: white; color: var(--md-primary-fg-color--light); - padding: 2em 1em; - text-align: center; + padding: 8em 1em; } .why-serverless-container h1, .trying-it-all-container h1, @@ -332,6 +407,29 @@ h2.secondary-headline, h3.trusted-by { font-size: 1rem; } +.serverless-content-block { + flex: 1; + justify-content: space-between; +} + +.serverless-feature-block { + flex: 2; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + row-gap: 40px; +} + +.card { + width: 400px; + min-width: 40%; + max-width: 100%; + height: 200px; + background-color: #F3F3F3; + border-radius: 0.7rem; + padding: 0px 20px; +} + .img-table { margin: 1rem auto -1rem; } @@ -354,9 +452,9 @@ h2.secondary-headline, h3.trusted-by { } .img-wrapper { - position: relative; - width: 120px; - height: 120px; + display: flex; + justify-content: end; + margin-top: 15px; } .reason-img img { @@ -385,6 +483,14 @@ h2.secondary-headline, h3.trusted-by { } @media screen and (max-width: 768px) { + .serverless-content-block { + text-align: center; + } + + .why-serverless-container { + flex-direction: column; + } + .why-serverless-container h1 { font-size: 1.5em; } @@ -412,6 +518,11 @@ h2.secondary-headline, h3.trusted-by { } @media screen and (max-width: 480px) { + .why-serverless-container { + flex-direction: column; + padding: 3em 1em; + } + .why-serverless-container h1 { font-size: 1.2em; } @@ -430,14 +541,14 @@ h2.secondary-headline, h3.trusted-by { } .img-wrapper { - width: 80px; - height: 80px; + width: 60px; + height: 60px; } } /* knative components container css */ .knative-components-container h1 { - color: white; + color: var(--md-primary-fg-color--dark); } .knative-components-container .text-table .normal-text { @@ -468,54 +579,14 @@ h2.secondary-headline, h3.trusted-by { justify-content: center; } -.knative-components-container-mobile , .text-upper-right , .text-lower-left , .svg-diagram{ - display: none; -} - @media only screen and (max-width: 425px){ - .knative-components-container-mobile , .text-upper-right , .text-lower-left , .svg-diagram{ - display: block; - } - - .text-table { - display: none; - } - - .components-img { - display: none; - } - .knative-components-container-mobile { position: relative; width: 80%; max-width: 1200px; padding: 20px; } - -.text-upper-right { - position: absolute; - top: 20px; - right: -75px; - width: 180px; - font-size: 12px; -} - -.text-lower-left { - position: absolute; - bottom: 50px; - width: 165px; - left: -10px; - font-size: 12px; -} - -.svg-diagram img { - width: 120%; - height: auto; - display: flex; - justify-content: center; - align-items: center; -} } @media only screen and (max-width: 375px){ @@ -603,14 +674,26 @@ position: relative; /* case studies container css */ .case-studies-container { text-align: center; - justify-content: center; color: black; - display: flex; - background-color: var(--md-primary-fg-color); + background-color: white; padding: 1rem; cursor: pointer; - flex-wrap: wrap; padding-bottom: 0; + padding-top: 4rem; +} + +.kelsey-testimonial { + display: flex; + justify-content: center; + align-items: center; + padding: 3rem 1rem; + background-color: var(--md-primary-fg-color); + border-radius: 0.7rem; + margin-top: 2rem; + margin-right: 50px; + margin-left: 50px; + text-align: left; + gap: 30px; } .md-typeset>h1:first-of-type { @@ -637,7 +720,7 @@ position: relative; } .case-studies-container .cases-table .col { - background-color: white; + background-color: var(--md-primary-fg-color); padding: 1.5rem; margin: 1rem 0.5rem; border-radius: 0.7rem; @@ -680,12 +763,6 @@ position: relative; font-size: .95rem; } -.case-studies-container hr { - border-bottom: 2px solid black; - display: flow-root; - margin: .4em 5em -4px 2em; -} - /* Responsive Styles */ @media (max-width: 1370px) { @@ -737,6 +814,10 @@ position: relative; } @media (max-width: 600px) { + .case-studies-container { + padding-top: 2.5rem; + } + .case-studies-container .cases-table a { flex: 1 1 90vw; min-width: 650px; @@ -755,6 +836,13 @@ position: relative; .case-studies-container .normal-text { padding: 0 1em; } + + .kelsey-testimonial { + flex-direction: column; + margin-left: 0px; + margin-right: 0px; + text-align: center; + } } @media (max-width: 375px){ @@ -815,6 +903,14 @@ position: relative; gap: 50px; } +.md-typeset .md-button.black { + color: black; +} + +.md-typeset .md-button.black:hover { + color: white; +} + .md-typeset .md-button.white { color: white; } @@ -851,7 +947,7 @@ position: relative; } .knative-components-container { - padding: 3em 1em; + padding: 2em 1em; } .knative-components-container .components-content .components-img { @@ -859,6 +955,12 @@ position: relative; } } +@media (max-width: 600px) { + .knative-components-container .components-content .components-img { + padding: 10px 5px; + } +} + /* No next/prev links on home page so make sure next/prev area of footer collapses nicely */ footer nav.md-footer__inner { padding: 0; diff --git a/overrides/home.html b/overrides/home.html index b039b238d5e..c83636680e6 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -2,7 +2,7 @@
-
+ +
- +
+ --> +
+
+
+
+

+ Providing the building blocks for
+ creating modern, cloud-based applications +

+

+ The easiest way to build and run serverless workloads on Kubernetes. + Built by the community, for modern cloud-native teams +

+

+ Try the tutorial + Install Knative on your cluster +

+
+
+
+
+

Trusted by

+
+
+
+
+
+
+
-

Need to know more?

+

What is Knative?

- Learn about how Knative works with Kubernetes and the underlying ideas behind containers
+ Learn about how Knative works with Kubernetes and the underlying ideas + behind containers
and serverless infrastructure.

- - Explore Knative - +
-
+ +
+
+
+

Why serverless containers?

+

+ Express scalable application architecture without distractions. Serverless gives you a vocabulary for expressing web and event-based applications without getting mired in the details of scaling and infrastructure libraries. Behind the scenes, Knative optimizes your deployment to match demand. +

+
+
+
+
+ +
+
+

Functions

+

Application template patterns you can version and update

+
+
+
+
+ +
+
+

HTTP-first

+

Serve and scale HTTP/2, gRPC, and MCP

+
+
+
+
+ +
+
+

Event-based

+

+ Route and handle asynchronous events just like HTTP +

+
+
+
+
+ +
+
+

Event Integrations

+

Extract events from existing services or define your own

+
+
+
+
+ +
+
+

Kubernetes-integrated

+

Trigger handlers from the event broker

+
+
+
+
+ +
+
+

Plugable

+

+ Kubernetes native to be integrated and extended +

+
+
+
+
- +

Knative Components

- Knative has two main components that empower teams working with Kubernetes. Serving and
+ Knative has two main components that empower teams working with + Kubernetes. Serving and
Eventing work together to automate and manage tasks and applications.

- -
-

- Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, - autoscaling (even to zero), and revision tracking. Teams can focus on core logic using any programming - language. -

-

- Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data - stream with declarative event connectivity and developer friendly object models. -

-
+
-
-
-

Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, autoscaling (even to zero), and revision tracking.

-
-
- -
-
-

Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data stream with declarative event connectivity and developer-friendly object models.

-
-
-
- -
-
-

Trying it all together

-
-
-
-
- -
-
-

Developers focus on code

-

- From container to URL
- with less YAML config -

-
-
- -
-
- -
-
-

Scale up and down

-

- Scale down to zero
- based on traffic patterns -

-
-
- -
-
- -
-
-

Cloud agnostic

-

- Control traffic shifting
- for smoother rollouts -

-
-
-
-
- - Deploy Knative Today - -

- Case Studies + Case Studies & Testimonies

+
+ Kelsey Hightower +
+

The introduction of the ML training infrastructure using Knative Eventing has enabled us to establish a well-defined operational boundary. If Kubernetes is an electrical grid, then Knative is its light switch."

+

- Kelsey Hightower

+
+
-

- "Knative allowed the team to centralize their system, scale, audit, and - even select events while enforcing policies and simplifying the architecture"
+ "Knative allowed the team to centralize their system, scale, + audit, and even select events while enforcing policies and + simplifying the architecture"
-

- "The introduction of the ML training infrastructure using Knative Eventing - has enabled us to establish a well-defined operational boundary for the service teams."
+ "The introduction of the ML training infrastructure using Knative + Eventing has enabled us to establish a well-defined operational + boundary for the service teams."
-

- "The power of Knative’s eventing and serverless features allows PNC to bridge processes - between Apache Kafka and CI/CD toolchain events and achieve this automated state."
+ "The power of Knative’s eventing and serverless features allows + PNC to bridge processes between Apache Kafka and CI/CD toolchain + events and achieve this automated state."
-
-

Knative is a Cloud Native Computing Foundation incubation project

- +

+ Knative is a + Cloud Native Computing Foundation + incubation project +

+
-{% endblock %} - -{% block scripts %} -{{ super() }} +{% endblock %} {% block scripts %} {{ super() }}