Update key documentation pages with information about the Cloud account creation and the social login option.

modules/ROOT/pages/cloud-quick-start.adoc

@@ -6,3 +6,5 @@
 :productSource: cloud
 
 include::partial$install/basic-quickstart-base.adoc[]
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]

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

@@ -11,6 +11,9 @@
 Affected users will receive a xref:cloud-troubleshooting.adoc#A-valid-API-key-is-required-starting-2024-to-continue-using-TinyMCE.-Please-alert-your-admin-to-sign-up-to-get-your-free-API-key.[notification in their editor]. If you receive this notification, please contact the Administrator for your application/site. Admins will need to https://www.tiny.cloud/my-account/integrate/[get a valid API key] and paste it into the code to continue using {productname}.
 ====
 
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]
+
 == How will I know if this change affects me?
 
 If {productname} detects an invalid API key, it will display a notification. If you know or suspect you have been actively hiding or suppressing this notification, please remove these overrides. If you then see a notification, please follow the instructions to resolve the issue. If no notification appears, you are not affected. 
@@ -65,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

@@ -6,7 +6,9 @@
 
 
 [NOTE]
-The below information is only relevant to Tiny Cloud users. Users who self-host the open source version of {productname} are not subject to Usage-Based Billing terms, but are required to comply with the open source license terms. 
+The below information is only relevant to Tiny Cloud users. Users who self-host the open source version of {productname} are not subject to Usage-Based Billing terms, but are required to comply with the open source license terms.
+
+include::partial$misc/admon-account-creation-and-social-option.adoc[]
 
 == Definitions
 
@@ -67,4 +69,8 @@ If you have an annual plan, your editor loads are calculated on a monthly basis
 
 === If I’m on the Essential plan and reach 5,000 editor loads, will I automatically be upgraded to the Professional plan?
 
-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.
+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

@@ -0,0 +1,84 @@
+++++
+<div class="signup-promo">
+  <p style="margin-bottom: 16px;">
+    It only takes 2 minutes to create your free Tiny account and get the API key:
+  </p>
+  <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
+      <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">
+      </span>
+      -&gt;
+    </a>
+  </div>
+</div>
+
+<style>
+.signup-promo {
+  --radius: 3px;
+  position: relative;
+  padding: 1rem;
+  background: #f9f9fb;
+  margin: 1rem 0;
+  border: 1px solid #e2e5ed;
+  border-radius: var(--radius) 0 0 var(--radius)
+}
+
+.signup-promo::before {
+  content: '';
+  position: absolute;
+  top: -1px; bottom: -1px; left: -1px;
+  width: 5px;
+  background: linear-gradient(to bottom, #F66 15%, #4D66CB 85%);
+  border-radius: var(--radius) 0 0 var(--radius)
+}
+
+.signup-promo .account-creation-button {
+  --options-gap: 10px;
+  text-decoration: none !important;
+  padding: 8px 16px;
+  background: #0c132c;
+  color: #fff;
+  border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
+  transition: background-color 0.15s;
+  font-family: Fira Code;
+  font-variant-ligatures: common-ligatures;
+}
+
+.signup-promo .account-creation-button:hover {
+  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;
+  filter: invert(1) brightness(100);
+  padding-left: var(--options-gap);
+  margin-left: var(--options-gap);
+  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,3 @@
+== Getting Started with {productname}
+
+{productname} is a rich text editor designed for web applications. To install {productname}, include the required script and initialize the editor with a minimal configuration. Upon registration, an API key is provided along with a corresponding code snippet for integration.

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

@@ -1,9 +1,15 @@
 {productname} is a rich-text editor that allows users to create formatted content within a user-friendly interface.
 
+include::partial$misc/admon-account-creation-and-social-option.adoc[]
+
 liveDemo::default-editor[]
 
 The output created is in HTML5 and can include lists, tables, and other useful elements, depending on your configuration. The functionality of the editor can be extended through plugins and customizations, or limited to suit your use-case. {productname} can also be customized to look and feel like part of your application or webpage by customizing the user interface. {productname} can be integrated into a range of frameworks and Content Management Systems (CMSs), and can be either:
 
 * Loaded from the {cloudname} CDN (Content Delivery Network), which will ensure {productname} is always using the latest version.
 * 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[]