Splash Page Updates (#27)

Updates the colors and background of logo
Updates the splash page theme colors (inc. dark mode)

site/docusaurus.config.js

@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer').themes.dracula;
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Retina',
-  tagline: 'REal-TIme Network Analytics',
+  tagline: 'Kubernetes Network Observability',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here

site/src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #0078d4;
+  --ifm-color-primary-dark: #006cbf;
+  --ifm-color-primary-darker: #0061aa;
+  --ifm-color-primary-darkest: #005595;
+  --ifm-color-primary-light: #0088e0;
+  --ifm-color-primary-lighter: #0098ec;
+  --ifm-color-primary-lightest: #00a8f8;
   --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: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #0078d4;
+  --ifm-color-primary-dark: #006cbf;
+  --ifm-color-primary-darker: #0061aa;
+  --ifm-color-primary-darkest: #005595;
+  --ifm-color-primary-light: #0088e0;
+  --ifm-color-primary-lighter: #0098ec;
+  --ifm-color-primary-lightest: #00a8f8;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
+}

site/src/pages/index.js

@@ -37,8 +37,8 @@ export default function Home() {
             <div className={styles.columns}>
               <div className={styles.column1}>What is Retina?</div>
               <div className={styles.column2}>              
-                <div className={styles.paragraph1}>Retina is a cloud- and vendor-agnostic Kubernetes Network Observability platform which helps customers with enterprise grade DevOps, SecOps and compliance use cases.</div>
-                <div>It is designed to cater to cluster network administrators, cluster security administrators and DevOps engineers by providing a centralized platform for monitoring application and network health and security. Retina is capable of collecting telemetry, exporting it to multiple destinations (such as Prometheus, Azure Monitor, and other vendors), and visualizing the data in a variety of ways (like Grafana, Azure Monitor, Azure Log Analytics, etc.).</div>
+                <div className={styles.paragraph1}>Retina is a cloud-agnostic, open-source Kubernetes Network Observability platform which helps with DevOps, SecOps and compliance use cases. It provides a centralized hub for monitoring application and network health and security, catering to Cluster Network Administrators, Cluster Security Administrators and DevOps Engineers.</div>
+                <div>Retina collects customizable telemetry, which can be exported to multiple storage options (such as Prometheus, Azure Monitor, and other vendors) and visualized in a variety of ways (like Grafana, Azure Log Analytics, and other vendors).</div>
                 </div>
             </div>
         <img className={styles.features} src={featuresImage} alt={"Retina features"}/>