diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..5e1b180 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -3,13 +3,6 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
@@ -21,3 +14,18 @@
   align-items: center;
   justify-content: center;
 }
+
+.introductionBlock {
+  background: linear-gradient(56.02deg, #2c56dd 49.2%, #30daad 95.07%), #2c56dd;
+  padding: 6rem;
+  text-align: center;
+  width: 100%;
+}
+
+.forceColor {
+  color: var(--ifm-color-content-inverse);
+}
+
+html[data-theme="dark"] .forceColor {
+  color: var(--ifm-font-color-secondary);
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 64be3c1..75cf1b5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,10 +10,14 @@ import styles from "./index.module.css";
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={clsx(styles.introductionBlock)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className={clsx("hero__title", styles.forceColor)}>
+          {siteConfig.title}
+        </h1>
+        <p className={clsx("hero__subtitle", styles.forceColor)}>
+          {siteConfig.tagline}
+        </p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"