docs(get-started): update overview page

kubeshop · Oct 22, 2024 · d7de9ab · d7de9ab
1 parent 9612b0b
commit d7de9ab
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 34 deletions.
diff --git a/docs/docs/getting-started/overview.mdx b/docs/docs/getting-started/overview.mdx
@@ -17,26 +17,24 @@ image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_T
 ---
 
 ```mdx-code-block
-import {TracetestGettingStartedGuideCardsRow, TracetestCoreGettingStartedGuideCardsRow} from '@site/src/components/GettingStartedGuide';
+import {TracetestCoreGettingStartedGuideCardsRow, TracetestCloudGettingStartedGuidesRow, TracetestOnPremGettingStartedGuidesRow} from '@site/src/components/GettingStartedGuide';
 ```
 
-Tracetest is a cloud-native application, designed to run in the cloud. Get started in three ways.
+There are three ways to set up your development environment and install Tracetest. Testing locally with Tracetest CLI installed on your computer and using Cloud-based Managed Tracetest for test and trace artifact storage is the most common scenario.
 
-- **[Cloud-based Managed Tracetest](https://app.tracetest.io/) (Free to get started!)**: Use managed infrastructure with collaboration for teams, and additional features on top of Tracetest Core.
-- **[Enterprise Self-hosted Tracetest](https://tracetest.io/on-prem-installation) (Free trial, no credit card required)**: Same experience as with Cloud-based Managed Tracetest but self-hosted in your own infrastructure. **([Request a demo!](https://dub.sh/tracetest-demo))**
-- **[Hobby Self-hosted Open-source Tracetest Core](/core/getting-started/overview)**: Deploy a hobby instance in your own infrastructure with Docker or Kubernetes. Not suitable for production workloads.
+```mdx-code-block
+<TracetestCloudGettingStartedGuidesRow />
+<TracetestOnPremGettingStartedGuidesRow />
+<TracetestCoreGettingStartedGuideCardsRow />
+```
 
 ## Cloud-based Managed Tracetest and Enterprise Self-hosted Tracetest
 
-**We recommend using [Cloud-based Managed Tracetest](https://app.tracetest.io/)**. It's the easiest way to test microservices and distributed apps with OpenTelemetry distributed traces. Tracetest provides managed infrastructure, [collaboration for teams](/concepts/environments), [RBAC](/concepts/roles-and-permissions), [organizations](/concepts/organizations), [dependency-free config](/concepts/agent), [agentless serverless config](/concepts/cloud-agent), and much more.
+**We recommend using [Cloud-based Managed Tracetest](https://app.tracetest.io/)**. It's the easiest way to test web apps, APIs, microservices, and distributed apps with OpenTelemetry distributed traces. Tracetest provides managed infrastructure, [collaboration for teams](/concepts/environments), [RBAC](/concepts/roles-and-permissions), [organizations](/concepts/organizations), [dependency-free config](/concepts/agent), [agentless serverless config](/concepts/cloud-agent), and much more.
 
-Get started with the installation guide below, tailored for microservice and distributed app developers. You may find it insightful even if you have [one of many other supported use cases](/examples-tutorials/recipes).
+If your organization requires you to keep data on-prem, you can use **[Enterprise Self-hosted Tracetest](https://tracetest.io/on-prem-installation) and deploy it in your own infrastructure**. It contains the same features as Cloud-based Managed Tracetest.
 
-If your organization requires you to keep data on-prem, you can use Enterprise Self-hosted Tracetest and deploy it in your own infrastructure. It contains the same features as Cloud-based Managed Tracetest. [Request a license key for Enterprise Self-hosted Tracetest, here.](https://tracetest.io/on-prem-installation)
-
-```mdx-code-block
-<TracetestGettingStartedGuideCardsRow />
-```
+You can view [examples and many other supported use cases, here](/examples-tutorials/recipes).
 
 ### Features Available in Cloud-based Managed Tracetest and Enterprise Self-hosted Tracetest
 
@@ -56,10 +54,6 @@ If your organization requires you to keep data on-prem, you can use Enterprise S
 
 Tracetest Core is a cloud-native application, packaged and distributed as a Docker image and designed to run in a containerized environment.
 
-```mdx-code-block
-<TracetestCoreGettingStartedGuideCardsRow />
-```
-
 ### Features Available in Open-source Tracetest Core
 
 #### Tracetest Core functionality

diff --git a/docs/src/components/GettingStartedGuide/index.tsx b/docs/src/components/GettingStartedGuide/index.tsx
@@ -5,48 +5,64 @@ import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 import Heading from '@theme/Heading';
 
-const TracetestGettingStartedGuides = [
+const TracetestCoreGettingStartedGuides = [
   {
-    name: 'Tracetest 🚀',
+    name: 'Option 3: I have a non-production environment and want to try trace-based testing',
+    url: '/core/getting-started/overview',
+    title: 'Hobby Self-hosted Tracetest Core (Open Source)',
+    description: (
+      <Translate>
+        Deploy a hobby instance in your own infrastructure with Docker or Kubernetes. Not suitable for production workloads.
+      </Translate>
+    ),
+  },
+];
+
+const TracetestCloudGettingStartedGuides = [
+  {
+    name: 'Option 1: I want to create tests without managing infrastructure (Most Popular)',
     url: '/getting-started/create-tracetest-account',
+    title: 'Cloud-based Managed Tracetest (Free to get started!)',
     description: (
-      <Translate >
-        Set up Tracetest and start trace-based testing your distributed system.
+      <Translate>
+        Use managed infrastructure with collaboration for teams, and additional features on top of Hobby Tracetest Core.
       </Translate>
     ),
-    button: 'Start',
   },
 ];
 
-const TracetestCoreGettingStartedGuides = [
+const TracetestOnPremGettingStartedGuides = [
   {
-    name: 'Tracetest Core 🪨 ',
-    url: '/core/getting-started/overview',
+    name: 'Option 2: I need something secure, controlled, in my own infrastructure',
+    url: 'https://tracetest.io/on-prem-installation',
+    title: 'Enterprise Self-hosted Tracetest (Free trial, no credit card required)',
     description: (
       <Translate>
-        Use the open-source Tracetest Core in your own infrastructure.
+        Same experience as with Cloud-based Managed Tracetest but self-hosted in your own infrastructure.
       </Translate>
     ),
-    button: 'Go to Core',
   },
 ];
 
 interface Props {
   name: string;
   url: string;
-  button: string;
+  title: string;
   description: JSX.Element;
 }
 
-function GettingStartedGuideCard({name, url, description, button}: Props) {
+function GettingStartedGuideCard({name, url, title, description}: Props) {
   return (
-    <div className="col col--6">
+    <div className="col col--12">
       <div className="gs__card">
       <div className="card">
         <Link to={url}>
           <div className="card__body">
             <Heading as="h3">{name}</Heading>
-            <p>{description}</p>
+            <p>
+              <b>{title}:&nbsp;</b>
+              {description}
+            </p>
           </div>
         </Link>
       </div>
@@ -55,20 +71,30 @@ function GettingStartedGuideCard({name, url, description, button}: Props) {
   );
 }
 
-export function TracetestGettingStartedGuideCardsRow(): JSX.Element {
+export function TracetestCoreGettingStartedGuideCardsRow(): JSX.Element {
   return (
     <div className="row">
-      {TracetestGettingStartedGuides.map((gettingStartedGuide) => (
+      {TracetestCoreGettingStartedGuides.map((gettingStartedGuide) => (
         <GettingStartedGuideCard key={gettingStartedGuide.name} {...gettingStartedGuide} />
       ))}
     </div>
   );
 }
 
-export function TracetestCoreGettingStartedGuideCardsRow(): JSX.Element {
+export function TracetestCloudGettingStartedGuidesRow(): JSX.Element {
   return (
     <div className="row">
-      {TracetestCoreGettingStartedGuides.map((gettingStartedGuide) => (
+      {TracetestCloudGettingStartedGuides.map((gettingStartedGuide) => (
+        <GettingStartedGuideCard key={gettingStartedGuide.name} {...gettingStartedGuide} />
+      ))}
+    </div>
+  );
+}
+
+export function TracetestOnPremGettingStartedGuidesRow(): JSX.Element {
+  return (
+    <div className="row">
+      {TracetestOnPremGettingStartedGuides.map((gettingStartedGuide) => (
         <GettingStartedGuideCard key={gettingStartedGuide.name} {...gettingStartedGuide} />
       ))}
     </div>

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -117,6 +117,7 @@ html[data-theme='dark'] .card .button:hover {
 }
 
 div[class^='gs__card'] .card {
+  margin: 10px 0;
   background-color: var(--ifm-background-surface-color);
   color: var(--ifm-font-color-base);
   border: 1px solid var(--ifm-color-emphasis-300);
@@ -131,6 +132,11 @@ div[class^='gs__card'] .card:hover {
   box-shadow: none;
 }
 
+div[class^='gs__card'] .card h3 {
+  margin-bottom: 10px;
+  line-height: 2rem;
+}
+
 div[class^='gs__card'] .card a {
   color: var(--ifm-font-color-base);
   text-decoration: inherit;