ref(website): Revise "About Spotlight" pieces (#760)

Refs #561

Also adds a glow animation to the Spotlight trigger button until it is
opened once.

Author: BYK

packages/website/src/components/Hero.astro

@@ -81,10 +81,11 @@ import ButtonLink from './ButtonLink.astro';
 </style>
 
 <div class="wrapper">
-  <h1 class="neon-header">Sentry for Development</h1>
-  <div class="sub-heading mb-4">Spotlight is a highly customizable debug tool embedded in your web app.</div>
+  <h1 class="neon-header">Debuggability Elevated</h1>
+  <div class="sub-heading mb-4">Spotlight is a debugging tool that can be embedded in your web app</div>
   <div class="flex flex-col items-center justify-center gap-2 py-4 mb-4">
-    <ButtonLink href="/about/">Get Started</ButtonLink>
+    <ButtonLink href="/about/">Learn More</ButtonLink> or
+    <button class="inline-flex items-center justify-center px-2 py-2 mx-2 text-base text-s text-white bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 cursor-pointer"
+    onclick="Spotlight.openSpotlight()">See It in Action</button>
   </div>
-  <img src="/images/trace.png" alt="Spotlight Hero" class="hero-image" />
 </div>

packages/website/src/components/LandingPage.astro

@@ -67,3 +67,34 @@ import { Content as CodeBlock } from './codeblock.mdx';
 
 <DocsCta />
 <Footer />
+<script is:inline>
+  (function spotlightGlow() {
+    const host = document.querySelector('#sentry-spotlight-root');
+    if (!host) {
+      setTimeout(spotlightGlow, 500);
+      return;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync( `
+      .shadow-pulse {
+        animation: pulse 4s 10;
+      }
+      @keyframes pulse {
+        0% {
+          box-shadow: 0 0 0 0 rgba(0,0,0,0);
+        }
+        40% {
+            box-shadow: 0 0 105px 35px rgba(79, 70, 229, 1);
+        }
+        100% {
+            box-shadow: 0 0 0 0 rgba(0,0,0,0);
+        }
+    `)
+    host.shadowRoot.adoptedStyleSheets.push(sheet);
+    const trigger = host.shadowRoot.querySelector('#spotlight-overlay-trigger');
+    Spotlight.onOpen(() => {
+      trigger.classList.remove('shadow-pulse');
+    });
+    trigger.classList.add('shadow-pulse');
+  })();
+</script>

packages/website/src/content/docs/about.mdx

@@ -13,45 +13,26 @@ Spotlight started out as a [Hackweek project](https://syntax.fm/show/666/hackwee
 > Spotlight is Sentry for Development. Inspired by an old project, Django Debug Toolbar, Spotlight brings a rich debug
 overlay into development environments, and it does it by leveraging the existing power of Sentry's SDKs.
 
-One of the great benefits of this approach is you get the power of Sentry's telemetry without needing to utilize Sentry's production monitoring. To added benefit, if you do decide you need production monitoring, you can simply configure the already-present SDKs with an upstream API key and you're off to the races!
+You get the power of Sentry's telemetry (through its SDKs) without needing Sentry's production monitoring. If you already use Sentry, that's great. All you need is enabling Spotlight in your SDK and run Spotlight. If you are not using Sentry, you need to install the free and open source Sentry SDKs to get started. If you want to use Sentry later on, this saves you the initial setup. Just add your Sentry DSNs into your projects and off you go!
 
-At a high level, Spotlight consists of two components:
+Spotlight can show you errors, traces (including distributed traces), profiling data, configurations settings, installed dependencies, you name it. Spotlight is developed with customizablity in mind, so you can add your own integrations to it.
+The main differences between Spotlight and Sentry are:
 
-1. An overlay (`@spotlightjs/overlay`) that renders inside of your application. The overlay is a simple React application, and can
-   seamlessly run in any web application (or even independently!).
+1. Spotlight runs locally on your system
+2. Spotlight shows you everything and in realtime whereas Sentry is all about aggregation
+3. Spotlight is completely free and open source, whereas Sentry is a commercial product (with a free tier and self-hosting options)
 
-2. A proxy server (`@spotlightjs/sidecar`) which enables push-based communication to the overlay. This is achieved via a simple HTTP relay,
-   allowing SDKs to push events to it, and allowing the overlay to receive events using [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events).
+## Quick Start
 
-For convenience, these packages are combined in a single package (`@spotlightjs/spotlight`), which is the recommended way to use Spotlight.
-This means that adoption in most projects is as simple as adding a single dependency:
+If you are already using Sentry SDKs in your application try the following:
 
-```shell
-npm add @spotlightjs/spotlight
-```
+1. Set `SENTRY_SPOTLIGHT=1` in your env[^1]
+2. Run `npx @spotlightjs/spotlight`[^2]
+3. Run your application
+4. Go to [http://localhost:8969](http://localhost:8969)
+5. Observe the traces and errors coming to your local Spotlight instance
 
-Registering Spotlight in your frontend application:
-
-```typescript
-import * as Spotlight from '@spotlightjs/spotlight';
-
-// only load Spotlight in dev
-if (process.env.NODE_ENV === "development") {
-  Spotlight.init();
-}
-```
-
-Running the sidecar in the background:
-
-```shell
-npx @spotlightjs/spotlight
-```
-
-The overlay itself behaves a little differently from Sentry. That's intentional both because this is for local
-development, but also because the project is completely independent of Sentry (other than our guaranteed support).
-
-Alternatively, we provide an Electron-based application that can be used to run the Sidecar as well as a dedicated instance of the overlay. There are some limitations to this method, but it is particularly useful [for headless or mobile environments](/setup/headless/).
-
-<DownloadButton>Download for Mac</DownloadButton>
+---
 
-Spotlight can show you errors, traces, configurations settings, installed dependencies, you name it. Spotlight is developed with customizablity in mind, so you can add your own integrations to it.
+[^1]: Currently Python, Ruby, PHP, and all JS-based SDKs support this env variable. If your choice of SDK doesn't support it, you can still use Spotlight by enabling the `spotlight` option in its init configuration. Also you can let us know of your interest and we'll add support for the env variable.
+[^2]: If you don't have `npx` around, you can use `docker run -p 8969 ghcr.io/getsentry/spotlight:latest`, or head over to our [GitHub Releases page](https://github.com/getsentry/spotlight/releases/latest) and download a binary for your system. Alternatively, we provide an Electron-based application that can be used to run the Sidecar as well as a dedicated instance of the overlay. There are some limitations to this method, but it is particularly useful [for headless or mobile environments](/setup/headless/). <DownloadButton>Download for Mac</DownloadButton>

packages/website/src/content/docs/architecture.mdx

@@ -3,19 +3,41 @@ title: Architecture of Spotlight
 ---
 import { LinkCard } from '@astrojs/starlight/components';
 
-import Architecture from "../../../public/images/architecture.png"; 
+import Architecture from "../../../public/images/architecture.png";
 
 <img src={Architecture.src} width="80%" alt="Spotlight Architecture" />
 
 ### Description
 
-Spotlight consists of 2 main components. The UI that is embedded in your Website. 
-And a Sidecar (Proxy) that streams incoming events to the UI.
+At a high level, Spotlight consists of two components:
+
+1. An overlay (`@spotlightjs/overlay`) that renders inside of your application. The overlay is a simple React application, and can
+   seamlessly run in any web application (or even independently!).
+
+2. A proxy server (`@spotlightjs/sidecar`) which enables push-based communication to the overlay. This is achieved via a simple HTTP relay,
+   allowing SDKs to push events to it, and allowing the overlay to receive events using [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events).
+
+For convenience, these packages are combined in a single package (`@spotlightjs/spotlight`), which is the recommended way to use Spotlight.
+This means that adoption in most projects is as simple as adding a single dependency:
+
+```shell
+npm add @spotlightjs/spotlight
+```
+
+Registering Spotlight in your frontend application:
+
+```typescript
+import * as Spotlight from '@spotlightjs/spotlight';
+
+// only load Spotlight in dev
+if (process.env.NODE_ENV === "development") {
+  Spotlight.init();
+}
+```
 
 You can send any kind of events to the Sidecar, it forwards it to Spotlight and the integrations within Spotlight need to understand what to do with it.
 
 <LinkCard title="Sidecar" description="Understand what the sidecar does" href="/sidecar/" />
 
 Spotlight by default has a Sentry integration, if you are using a Sentry SDK and enable the Spotlight connection (only required on the Server), Spotlight is able
 to render Traces/Errors and more in your frontend.
-