website: updates

Author: ilg-ul

website/docusaurus.config.ts

@@ -266,7 +266,7 @@ const config: Config = {
         },
         {
           type: 'dropdown',
-          label: 'Getting Started',
+          label: 'Documentation',
           to: 'docs/getting-started',
           position: 'left',
           items: [

website/src/components/HomepageFeatures/index.tsx

@@ -78,14 +78,19 @@ function Feature({title, Svg, description}: FeatureItem) {
 
 export default function HomepageFeatures(): JSX.Element {
   return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
+    <>
+      <section className={styles.features}>
+        <div className="container">
+          <div className="row">
+            {FeatureList.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </div>
         </div>
+      </section>
+      <div className="text--center">
+        <h2><Link to="/docs/getting-started/"><span className="getting-started-link">Getting Started!</span></Link></h2>
       </div>
-    </section>
-  );
+    </>
+);
 }

website/src/css/custom.css

@@ -93,6 +93,46 @@ h2[class*="title"]
     no-repeat;
 }
 
+.getting-started-link::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  vertical-align: bottom;
+  margin-right: 0.5em;
+  background: url("/img/bulb-on-svgrepo-com.svg") no-repeat;
+}
+
+.getting-started-link::after {
+  content: '\0000a0 ';
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  vertical-align: bottom;
+  margin-left: 0.5em;
+  background: url("/img/bulb-on-svgrepo-com.svg") no-repeat;
+}
+
+[data-theme='dark'] .getting-started-link::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  vertical-align: bottom;
+  margin-right: 0.5em;
+  background: url("/img/bulb-on-svgrepo-com-dark.svg") no-repeat;
+}
+
+[data-theme='dark'] .getting-started-link::after {
+  content: '\0000a0 ';
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  vertical-align: bottom;
+  margin-left: 0.5em;
+  background: url("/img/bulb-on-svgrepo-com-dark.svg") no-repeat;
+}
+
 /* --- */
 
 .header-github-link:hover {