diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index c26183bb69..a7497cbdcf 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -71,6 +71,21 @@ module.exports = {
colorMode: {
respectPrefersColorScheme: true,
},
+ announcementBar: {
+ id: 'redux-dev-course',
+ content: `
+
+
+
+ `,
+ backgroundColor: '#fafbfc',
+ textColor: '#091E42',
+ isCloseable: false,
+ },
navbar: {
title: 'Redux Toolkit',
logo: {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index d3d0769ff3..1120329d0d 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -272,3 +272,15 @@ table.checkbox-table tbody td {
color: var(--ifm-color-info);
position: relative;
}
+
+/* course callout on home page */
+.course-callout.home-mid {
+ max-width: 900px;
+ margin: 1rem auto 2rem;
+}
+
+div[class*='announcementBar_'] {
+ /* Intentionally override the theme behavior,
+ so that the course banner image is effectively cropped*/
+ z-index: calc(var(--ifm-z-index-fixed) -1) !important;
+}
\ No newline at end of file
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index f7b43f5343..b500ea3640 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -176,6 +176,14 @@ function Home() {
)}
+
+
+
+
+
{otherLibraries && otherLibraries.length && (
diff --git a/website/static/img/course-callout-mid.svg b/website/static/img/course-callout-mid.svg
new file mode 100644
index 0000000000..9273e4d921
--- /dev/null
+++ b/website/static/img/course-callout-mid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/website/static/img/course-callout-narrow.svg b/website/static/img/course-callout-narrow.svg
new file mode 100644
index 0000000000..4fe12ad40b
--- /dev/null
+++ b/website/static/img/course-callout-narrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/website/static/img/course-callout-wide.svg b/website/static/img/course-callout-wide.svg
new file mode 100644
index 0000000000..111ed9c152
--- /dev/null
+++ b/website/static/img/course-callout-wide.svg
@@ -0,0 +1 @@
+
\ No newline at end of file