feat: updates README and splash page (microsoft#61)

Updates README to align with Retina summary in docs intro, including the
quick start guide.
Adds main feature list to splash page.

Top of splash page:
<img width="1238" alt="Screenshot 2024-03-15 170440"
src="https://github.com/microsoft/retina/assets/157858178/ae984939-ca91-4c5a-b4e8-04876084e40a">

Bottom of splash page:
<img width="1236" alt="Screenshot 2024-03-15 170447"
src="https://github.com/microsoft/retina/assets/157858178/c11f9f20-eba2-42c6-bf4d-7ca32226fbef">

---------

Signed-off-by: Evan Baker <rbtr@users.noreply.github.com>
Co-authored-by: Evan Baker <rbtr@users.noreply.github.com>

README.md

@@ -6,9 +6,45 @@
 
 ## Overview
 
-Retina is a cloud and vendor agnostic container workload observability platform which helps customers with enterprise grade DevOps, SecOps and compliance use cases. 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 data from multiple sources and aggregating it into a single time-series database. Retina is also capable of sending data 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, and more.
+Retina is a cloud-agnostic, open-source **Kubernetes network observability platform** that provides a **centralized hub for monitoring application health, network health, and security**. It provides actionable insights to cluster network administrators, cluster security administrators, and DevOps engineers navigating DevOps, SecOps, and compliance use cases.
 
-![Retina features](/site/static/img/retina-features.png)
+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).
+
+## Features
+
+- **[eBPF](https://ebpf.io/what-is-ebpf#what-is-ebpf)-based** Network Observability platform for Kubernetes workloads.
+- **On-Demand** and **Configurable**.
+- Actionable, industry-standard **Prometheus metrics**.
+- Streamlined **Packet Captures** for deep dives.
+- **Cloud-agnostic**, supporting multiple OS (like Linux, Windows, Azure Linux).
+
+## Why Retina?
+
+Retina lets you **investigate network issues on-demand** and **continuously monitor your clusters**. For scenarios where Retina shines, see the intro docs [here](https://retina.sh/docs/intro)
+
+## CLI Setup
+
+Currently, Retina CLI only supports Linux.
+
+For CLI usage, see [Capture with Retina CLI](../captures/cli.md).
+
+## Option 1: Download from Release
+
+Download `kubectl-retina` from the latest [Retina release](https://github.com/microsoft/retina/releases).
+Feel free to move the binary to `/usr/local/bin/`, or add it to your `PATH` otherwise.
+
+## Option 2: Build from source
+
+Clone the Retina repo and execute:
+
+```shell
+make install-kubectl-retina
+```
+
+Requirements:
+
+- go 1.21 or newer
+- GNU make
 
 ## Documentation
 

site/src/pages/index.js

@@ -18,7 +18,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Get Started 
+            Get Started
           </Link>
         </div>
       </div>
@@ -36,12 +36,22 @@ export default function Home() {
       <main>
             <div className={styles.columns}>
               <div className={styles.column1}>What is Retina?</div>
-              <div className={styles.column2}>              
+              <div className={styles.column2}>
                 <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>
+            <div className={styles.columns2}>
         <img className={styles.features} src={featuresImage} alt={"Retina features"}/>
+<ul className={styles.featurelist}>
+ <li>Traffic Insights</li>
+ <li>eBPF Based</li>
+ <li>Metric & Flow Logs</li>
+ <li>Distributed Packet Captures</li>
+ <li>Any CNI</li>
+ <li>Any Kubernetes Platform</li>
+</ul>
+            </div>
       </main>
     </Layout>
   );

site/src/pages/index.module.css

@@ -19,15 +19,15 @@
 @media only screen and (max-width: 600px) {
   .columns {
     display: flex;
-    align-items: center; 
+    align-items: center;
     word-break: break-word;
     padding: 4rem 1.5rem;
+  }
 
-} 
-.column2 {
-  flex-grow: 2; 
-  font-size: 0.75rem;
-}
+  .column2 {
+    flex-grow: 2;
+    font-size: 0.75rem;
+  }
 }
 
 .buttons {
@@ -37,33 +37,45 @@
 }
 
 .columns {
-    display: flex;
-    align-items: center; 
-    padding: 4rem 1.5rem;
-    word-break: break-word
+  display: flex;
+  align-items: center;
+  padding: 4rem 1.5rem;
+  word-break: break-word
 }
 
 .column1 {
   text-align: center;
-  flex: none; 
+  flex: none;
   width: 33.3333%;
-  font-weight: 600; 
+  font-weight: 600;
   font-size: calc(1rem + 1.8vw);
 }
 
 .column2 {
-  flex-grow: 2; 
+  flex-grow: 2;
   font-size: calc(1rem + 0.3vw);
 }
 
 .paragraph1 {
-   margin: 0 0 20px
+  margin: 0 0 20px
 }
 
 .features {
-  display: block;
-  margin: 20px auto;
-  width: 100%;
-  max-width: 1226px;
-  height: auto;
-}
+  margin: 0 2vw;
+  width: 50%;
+}
+
+.columns2 {
+  display: flex;
+  align-items: center;
+  padding: 4rem 1.5rem;
+  word-break: break-word;
+  margin: 0 calc(0rem + 5vw);
+}
+
+.featurelist {
+  font-size: calc(0rem + 2vw);
+  flex-grow: 1;
+  margin-left: calc(0rem + 3vw);
+  list-style-position: inside;
+}