Redesign hero banner

Author: soareschen

src/css/custom.css

@@ -22,6 +22,18 @@
   --ifm-link-color: #FCF7E9;
 }
 
+[data-theme='light'] {
+  --ifm-color-primary: #5D0705;
+  --ifm-color-primary-dark: #4A0504;
+  --ifm-color-primary-darker: #370304;
+  --ifm-color-primary-darkest: #240202;
+  --ifm-color-primary-light: #D4A5A0;
+  --ifm-color-primary-lighter: #E8D4CF;
+  --ifm-color-primary-lightest: #F5E9E6;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-color-primary: #E8A89A;

src/pages/index.module.css

@@ -4,7 +4,7 @@
  */
 
 .hero {
-  background-color: #e87567;
+  background-color: #fcefe1;
 }
 
 .heroInner {
@@ -18,7 +18,7 @@
 }
 
 .heroProjectTagline {
-  color: #fff;
+  color: var(--ifm-color-primary-dark);
   font-size: 3rem;
   margin: 0;
 }
@@ -36,7 +36,7 @@
 }
 
 .heroTitleTextHtml b {
-  color: var(--ifm-color-primary-light);
+  color: #911f1c;
 }
 
 .indexCtas {
@@ -106,8 +106,15 @@
 }
 
 .getStartedButton {
-  --ifm-button-background-color: var(--ifm-color-primary-darkest);
+  --ifm-button-background-color: var(--ifm-color-primary-dark);
   --ifm-button-border-color: var(--ifm-color-primary-darkest);
+
+  color: white;
+}
+
+.tutorialButton {
+  --ifm-button-background-color: var(--ifm-color-primary-lighter);
+  --ifm-button-border-color: var(--ifm-color-primary-lighter);
 }
 
 /* Responsive adjustments */

src/pages/index.tsx

@@ -12,7 +12,7 @@ import styles from './index.module.css';
 
 function HeroBanner() {
   return (
-    <div className={styles.hero} data-theme="dark">
+    <div className={styles.hero} data-theme="light">
       <div className={styles.heroOuter}>
         <img
           alt="Context-Generic Programming"
@@ -32,7 +32,7 @@ function HeroBanner() {
               Get Started
             </Link>
             <Link
-              className="button button--secondary button--lg margin-left--md"
+              className={clsx("button button--secondary button--lg margin-left--md", styles.tutorialButton)}
               to="/docs/tutorials/hello">
               Tutorial - 10 min ⏱️
             </Link>