docs: move CreemEmbeddedCheckout (#128)

* docs: move CreemEmbeddedCheckout

* docs: add CreemPaymentLink

Author: vonovak

docs/install.mdx

@@ -3,7 +3,7 @@ sidebar_position: 1
 description: 'Install `@react-native-google-signin/google-signin`. Covers paid (Universal Sign In) and free (Original) versions, requirements, and package manager setup.'
 ---
 
-import CreemEmbeddedCheckout from '@site/src/components/CreemEmbeddedCheckout';
+import CreemPaymentLink from '@site/src/components/CreemPaymentLink';
 
 # Installation
 
@@ -13,7 +13,7 @@ Why paid? According to the [State of React Native Survey](https://results.2024.s
 
 [//]: # '🌟'
 
-<CreemEmbeddedCheckout checkoutUrl="https://www.creem.io/payment/prod_2zElFBVDXGigzZTiK4MvYX" />
+<CreemPaymentLink paymentUrl="https://www.creem.io/payment/prod_2zElFBVDXGigzZTiK4MvYX" />
 
 ### Universal Sign In (premium) {/* #premium */}
 

docs/license.md docs/license.mdxdocs/license.md renamed to docs/license.mdx

@@ -2,8 +2,12 @@
 sidebar_position: 80
 ---
 
+import CreemEmbeddedCheckout from '@site/src/components/CreemEmbeddedCheckout';
+
 # License
 
+<CreemEmbeddedCheckout checkoutUrl="https://www.creem.io/payment/prod_2zElFBVDXGigzZTiK4MvYX" />
+
 The Original module is licensed as MIT, the Universal sign in module has [this license](https://universal-sign-in.com/license).
 
 Please [get in touch](mailto:hello@universal-sign-in.com) if you have any questions or concerns about the license!

src/components/CreemPaymentLink/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import './styles.css';
+
+type CreemPaymentLinkProps = {
+  paymentUrl: string;
+};
+
+export default function CreemPaymentLink({ paymentUrl }: CreemPaymentLinkProps) {
+  return (
+    <section className="creem-payment" aria-labelledby="creem-payment-title">
+      <div>
+        <p className="creem-payment__eyebrow">Universal Sign In license</p>
+        <h2 id="creem-payment-title">Ready to install Universal Sign In?</h2>
+        <p>
+          Buy a license, then use the private npm registry setup below to add
+          the package to your app.
+        </p>
+      </div>
+      <a
+        className="button button--primary creem-payment__button"
+        href={paymentUrl}
+        rel="noreferrer"
+        target="_blank"
+      >
+        Buy license
+      </a>
+    </section>
+  );
+}

src/components/CreemPaymentLink/styles.css

@@ -0,0 +1,43 @@
+.creem-payment {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 2rem 0;
+  padding: 1rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color);
+}
+
+.creem-payment__eyebrow {
+  margin: 0 0 0.25rem;
+  color: var(--ifm-color-primary);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.creem-payment h2 {
+  max-width: 32rem;
+  margin: 0 0 0.5rem;
+}
+
+.creem-payment p {
+  margin: 0;
+}
+
+.creem-payment__button {
+  flex-shrink: 0;
+}
+
+@media (max-width: 700px) {
+  .creem-payment {
+    flex-direction: column;
+  }
+
+  .creem-payment__button {
+    width: 100%;
+  }
+}