From d05f2208b74888f38fd4030a7dc1e34099d72482 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Wed, 13 Nov 2024 12:25:33 -0500
Subject: [PATCH] Add get started page for AQ products (#6000)

* Add get-started page for AQ products

* Update setup.mdx

Change btn to indigo color

* Update setup.mdx

Changed button to indigo

* Update new buttons to 'indigo' instead of 'purple'

---------

Co-authored-by: Ryan Wilke <ryan@ryanwilke.com>
---
 .../get-started/introduction.mdx              |  4 +-
 docs/accessibility/get-started/setup.mdx      | 52 +++++++++++++++++
 docs/cloud/get-started/introduction.mdx       |  2 +-
 docs/ui-coverage/get-started/introduction.mdx |  4 +-
 docs/ui-coverage/get-started/setup.mdx        | 57 +++++++++++++++++++
 src/components/button/index.tsx               |  2 +-
 src/css/markdown.scss                         |  6 +-
 7 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 docs/accessibility/get-started/setup.mdx
 create mode 100644 docs/ui-coverage/get-started/setup.mdx

diff --git a/docs/accessibility/get-started/introduction.mdx b/docs/accessibility/get-started/introduction.mdx
index ce4dcd55c8..e4e1f1ae81 100644
--- a/docs/accessibility/get-started/introduction.mdx
+++ b/docs/accessibility/get-started/introduction.mdx
@@ -15,7 +15,7 @@ Looking for a general guide for Accessibility testing in Cypress App? [Go here](
 
 <Btn
   label="Request trial ➜"
-  variant="purple-dark"
+  variant="indigo-dark"
   href="https://www.cypress.io/accessibility?utm_medium=intro-cta&utm_source=docs.cypress.io&utm_content=Request%20trial"
 />
 <Btn
@@ -42,6 +42,8 @@ You'll start your [free trial](https://www.cypress.io/accessibility?utm_medium=i
 from our sales team and your existing test data to instantly see full accessibility reports for all your Cypress projects.
 From there, you can integrate with CI to set your own standards for handling the results.
 
+[Get started with Cypress Accessibility ➜](/accessibility/get-started/setup)
+
 ## How it Works
 
 Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see [our guide on this topic](/app/guides/accessibility-testing).
diff --git a/docs/accessibility/get-started/setup.mdx b/docs/accessibility/get-started/setup.mdx
new file mode 100644
index 0000000000..c26965b322
--- /dev/null
+++ b/docs/accessibility/get-started/setup.mdx
@@ -0,0 +1,52 @@
+---
+sidebar_label: Get Started
+title: 'Get Started | Cypress Accessibility Documentation'
+description: 'Set up Cypress Accessibility by recording a run. No code changes or configuration required.'
+sidebar_position: 20
+---
+
+# Get Started
+
+You don't need to make any changes to your code or your test setup. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using Cypress Accessibility.
+You'll start your free trial with personalized support from our sales team and your existing test data to instantly see full accessibility reports for all your Cypress projects.
+From there, you can integrate with CI to set your own standards for handling the results.
+
+## 1. Request a trial
+
+Get started with a free trial of Cypress Accessibility. You'll receive a personalized demo using your existing test data to see where testing gaps exist for all of your Cypress projects.
+
+<Btn
+  label="Request trial ➜"
+  variant="indigo-dark"
+  href="https://www.cypress.io/accessibility?utm_medium=get-started-page&utm_source=docs.cypress.io&utm_content=Request%20trial"
+/>
+
+## 2. Record a run
+
+Cypress Accessibility generates reports using [Test Replay](/cloud/features/test-replay) data and requires Cypress v13+. No additional configuration or instrumentation is required to get started.
+
+[Record a run](/cloud/get-started/setup) to the Cypress Cloud with Test Replay to start using Cypress Accessibility.
+
+## 3. View your Accessibility results
+
+After recording a test run, you can view your Accessibility results in the Cypress Cloud via the **Accessibility** tab.
+
+<DocsImage
+  src="/img/accessibility/core-concepts/cypress-accessibility-views-dashboard.png"
+  alt="The Cypress Accessibility Views List, in context in Cypress Cloud, reflecting a run of the Cypress Realworld App where violations of accessibility rules were detected on multiple pages."
+/>
+
+## 4. Customize your results
+
+Cypress Accessibility provides flexible configuration options to customize your reports. You can configure:
+
+- [Element filters](/accessibility/configuration/elementfilters): specify selectors for elements that should be excluded from Accessibility scans
+- [View filters](/accessibility/configuration/viewfilters): specify URL patterns for URLs that should be excluded from Accessibility scans. Excluding a URL also excludes all links to that URL.
+- [Views](/accessibility/configuration/views): specify URL patterns that represent views
+
+To add or modify the configuration for your project, navigate to the **App Quality** tab in your project settings.
+
+<DocsImage
+  src="/img/accessibility/configuration/cypress-accessibility-configuration-editor.png"
+  alt="The Cypress Cloud UI showing the configuration editor"
+/>
diff --git a/docs/cloud/get-started/introduction.mdx b/docs/cloud/get-started/introduction.mdx
index 2a38c00942..46895f0ea9 100644
--- a/docs/cloud/get-started/introduction.mdx
+++ b/docs/cloud/get-started/introduction.mdx
@@ -10,7 +10,7 @@ Cypress Cloud unlocks the full potential of Cypress test automation tools in you
 
 <Btn
   label="Sign up ➜"
-  variant="purple-dark"
+  variant="indigo-dark"
   href="https://cloud.cypress.io/signup"
 />
 <Btn
diff --git a/docs/ui-coverage/get-started/introduction.mdx b/docs/ui-coverage/get-started/introduction.mdx
index a96d65e8ae..e275d800fe 100644
--- a/docs/ui-coverage/get-started/introduction.mdx
+++ b/docs/ui-coverage/get-started/introduction.mdx
@@ -12,7 +12,7 @@ Easily track, monitor, and visualize the test coverage of your UI to prevent reg
 
 <Btn
   label="Request trial ➜"
-  variant="purple-dark"
+  variant="indigo-dark"
   href="https://www.cypress.io/ui-coverage?utm_medium=intro-cta&utm_source=docs.cypress.io&utm_content=Request%20trial"
 />
 <Btn
@@ -38,6 +38,8 @@ UI Coverage works instantly, with no setup or code instrumentation required. If
 You'll start your free trial with personalized support from our sales team and your existing test data to instantly see where testing gaps exist for all of your Cypress projects.
 From there, you can easily customize reports to fit your needs with flexible configuration options.
 
+[Get started with UI Coverage ➜](/ui-coverage/get-started/setup)
+
 ## How it Works
 
 :::caution
diff --git a/docs/ui-coverage/get-started/setup.mdx b/docs/ui-coverage/get-started/setup.mdx
new file mode 100644
index 0000000000..87ad0d3964
--- /dev/null
+++ b/docs/ui-coverage/get-started/setup.mdx
@@ -0,0 +1,57 @@
+---
+title: 'Get Started | UI Coverage Documentation'
+description: 'Set up UI Coverage by recording a run. No setup or instrumentation is required.'
+sidebar_label: Get Started
+sidebar_position: 20
+---
+
+# Get Started
+
+UI Coverage works instantly, with no setup or code instrumentation required. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using UI Coverage.
+You'll start your free trial with personalized support from our sales team and your existing test data to instantly see where testing gaps exist for all of your Cypress projects.
+From there, you can easily customize reports to fit your needs with flexible configuration options.
+
+## 1. Request a trial
+
+Get started with a free trial of UI Coverage. You'll receive a personalized demo using your existing test data to see where testing gaps exist for all of your Cypress projects.
+
+<Btn
+  label="Request trial ➜"
+  variant="indigo-dark"
+  href="https://www.cypress.io/ui-coverage?utm_medium=get-started-page&utm_source=docs.cypress.io&utm_content=Request%20trial"
+/>
+
+## 2. Record a run
+
+UI Coverage generates reports using [Test Replay](/cloud/features/test-replay) data and requires Cypress v13+. No additional configuration or instrumentation is required to start using UI Coverage.
+
+[Record a run](/cloud/get-started/setup) to the Cypress Cloud with Test Replay to start using UI Coverage.
+
+## 3. View your UI Coverage results
+
+After recording a test run, you can view your UI Coverage results in the Cypress Cloud via the **UI Coverage** tab.
+
+<DocsImage
+  src="/img/ui-coverage/get-started/uicov-docs-1.gif"
+  alt="UI Coverage demo showing a mouse hovering and interacting with the UI of the Cloud product"
+  noBorder="true"
+/>
+
+## 4. Customize your results
+
+UI Coverage provides flexible configuration options to customize your reports. You can configure:
+
+- [Attribute filters](/ui-coverage/configuration/attributefilters): specify patterns for attributes and their values that should not be used for identifying and grouping elements
+- [Element filters](/ui-coverage/configuration/elementfilters): specify selectors for elements that should be excluded from UI Coverage
+- [Element groups](/ui-coverage/configuration/elementgroups): groups elements that are related to one another
+- [Elements](/ui-coverage/configuration/elements): specify selectors to uniquely identify elements
+- [Significant Attributes](/ui-coverage/configuration/significantattributes): prioritize the identification and grouping of specific attributes
+- [View filters](/ui-coverage/configuration/viewfilters): specify URL patterns for URLs that should be excluded from UI Coverage. Excluding a URL also excludes all links to that URL.
+- [Views](/ui-coverage/configuration/views): specify URL patterns that represent views
+
+To add or modify the configuration for your project, navigate to the **App Quality** tab in your project settings.
+
+<DocsImage
+  src="/img/accessibility/configuration/cypress-accessibility-configuration-editor.png"
+  alt="The Cypress Cloud UI showing the configuration editor"
+/>
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index c9bf96ade5..3c9f02d5d5 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -22,7 +22,7 @@ interface BtnProps {
 // Build the Button component with the specified props
 const Btn: React.FC<BtnProps> = ({ 
     size = 32, // The size of the button
-    variant = 'outline-purple', // The variant of the button
+    variant = 'outline-indigo', // The variant of the button
     disabled = false, // Whether the button should be disabled
     target = '_self', // The target of the button link
     className, // Custom classes for the button
diff --git a/src/css/markdown.scss b/src/css/markdown.scss
index 0620b0044f..5324d62941 100644
--- a/src/css/markdown.scss
+++ b/src/css/markdown.scss
@@ -70,10 +70,10 @@ div.markdown {
       color: white;
     }
 
-    &.border-purple-500:hover {
-      color: var(--ifm-color-purple-600);
+    &.border-indigo-500:hover {
+      color: var(--ifm-color-indigo-600);
 
-      &.bg-purple-500 {
+      &.bg-indigo-500 {
         color: white;
       }
     }