Updated code snippet, created partial for reuse, updated positioning.

Author: kemister85

modules/ROOT/pages/getting-started.adoc

@@ -23,4 +23,8 @@ Learn how to install {productname} via {cloudname}, package managers, self-hoste
 // Empty cell to even out rows
 // | 
 
-|===
+|===
+
+include::partial$misc/admon-getting-started-with-tinymce.adoc[]
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]

modules/ROOT/pages/invalid-api-key.adoc

@@ -68,3 +68,8 @@ You can view the list of approved domains by logging into https://www.tiny.cloud
 * If you want to self-host {productname} and use our Premium features, https://www.tiny.cloud/contact/[get in touch with our Sales team] for a custom quote.
 
 TIP: For additional information on Troubleshooting Tiny Cloud visit: xref:cloud-troubleshooting.adoc[Cloud Troubleshooting].
+
+
+include::partial$misc/admon-getting-started-with-tinymce.adoc[]
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]

modules/ROOT/pages/usage-based-billing.adoc

@@ -71,4 +71,6 @@ If you have an annual plan, your editor loads are calculated on a monthly basis
 
 You will not automatically be upgraded. You will remain on your current plan and will automatically be charged $40 USD for each additional block of 1,000 editor loads over your plan limit. To avoid these charges, we encourage you to periodically review your editor load count to ensure you’re on the most appropriate pricing plan. You can always upgrade your plan in our Customer Portal > Settings > Billing Portal > Change Plans.
 
+include::partial$misc/admon-getting-started-with-tinymce.adoc[]
+
 include::partial$misc/admon-account-creation-and-social-option.adoc[]

modules/ROOT/partials/install/basic-quickstart-base.adoc

@@ -34,6 +34,8 @@ endif::[]
 
 {productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using {sourcename}.
 
+include::partial$misc/admon-account-creation-and-social-option.adoc[]
+
 ifeval::["{productSource}" == "composer"]
 
 To add {productname} to a PHP project using Composer, run the following on a command line:

modules/ROOT/partials/misc/admon-account-creation-and-social-option.adoc

@@ -3,9 +3,9 @@
   <p style="margin-bottom: 16px;">
     It only takes 2 minutes to create your free Tiny account and get the API key:
   </p>
-  <div class="account-creation-buttons">
+  <div>
     <a href="https://tiny.cloud/signup?_gl=1*1m4fqt3*_ga*NDE5MTIxMjQwLjE3MzIxOTkwODE.*_ga_GQ50XYHWQZ*MTczMjI2OTAwMi4yLjEuMTczMjI2OTQwNy40LjAuMA..*_gcl_au*NTYyNTc2NTQyLjE3MzIxOTkwODE." class="account-creation-button" target="_blank" title="Sign up with Google">
-      Sign up with email
+      Sign up<span class="account-creation-button--full-text">&nbsp;with email</span>
       <span class="social-signup">
         <img src="https://www.tiny.cloud/images/icons/google.svg" alt="Google" width="24" height="24">
         <img src="https://www.tiny.cloud/images/icons/github.svg" alt="GitHub" width="24" height="24">
@@ -14,16 +14,18 @@
     </a>
   </div>
 </div>
+
 <style>
 .signup-promo {
   --radius: 3px;
   position: relative;
-  padding: 16px;
+  padding: 1rem;
   background: #f9f9fb;
-  margin-bottom: 16px;
+  margin: 1rem 0;
   border: 1px solid #e2e5ed;
   border-radius: var(--radius) 0 0 var(--radius)
 }
+
 .signup-promo::before {
   content: '';
   position: absolute;
@@ -32,37 +34,36 @@
   background: linear-gradient(to bottom, #F66 15%, #4D66CB 85%);
   border-radius: var(--radius) 0 0 var(--radius)
 }
-.signup-promo .account-creation-buttons {
-  display: flex; 
-  gap: 10px;
-  --options-gap: 10px;
-}
+
 .signup-promo .account-creation-button {
-  --shine-size: 120px;
+  --options-gap: 10px;
   text-decoration: none !important;
   padding: 8px 16px;
-  background: #0c132c linear-gradient(120deg, #0c132c 45%, #335dff 55%) 0 0 / calc(200% + var(--shine-size)) 100% no-repeat;
+  background: #0c132c;
   color: #fff;
   border-radius: 2px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   transition: background-color 0.15s;
   font-family: Fira Code;
   font-variant-ligatures: common-ligatures;
-  transition: background-position .15s;
 }
+
 .signup-promo .account-creation-button:hover {
-  background-position: calc(-1 * var(--shine-size)) 0;
+  background-color: #335dff;
   color: #fff;
 }
+
 .signup-promo .account-creation-button:active {
   background-position: 100% 0;
   color: #fff;
 }
+
 .signup-promo .account-creation-button .social-signup {
   display: flex;
   margin: 0 12px 0 0;
 }
+
 .signup-promo .account-creation-button .social-signup img {
   width: 16px;
   height: 16px;
@@ -72,5 +73,11 @@
   border-left: 1px solid #0008;
   box-sizing: content-box;
 }
+
+@media screen and (max-width: 700px) {
+  .signup-promo .account-creation-button .account-creation-button--full-text {
+    display: none;
+  }
+}
 </style>
 ++++

modules/ROOT/partials/misc/admon-getting-started-with-tinymce.adoc

@@ -0,0 +1,4 @@
+== Getting Started with {productname}
+
+{productname} is a powerful, flexible rich text editor for web applications. This quick-start guide explains how to integrate {productname} into a web page with {companyname} Cloud.
+Install {productname} to add a feature-rich, sleek, and intuitive editor to your app with just a few lines of code. After registering, you'll receive a personalized code snippet with your API key and a guide to help you integrate {productname}.

modules/ROOT/partials/what-is-tinymce.adoc

@@ -10,4 +10,6 @@ The output created is in HTML5 and can include lists, tables, and other useful e
 * Installed with a package manager (self-hosted).
 * Extracted from a .zip file (self-hosted).
 
+include::partial$misc/admon-getting-started-with-tinymce.adoc[]
+
 include::partial$misc/admon-account-creation-and-social-option.adoc[]