From 8ab3c21b347f2870de9b712116d35850dd525d36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Moska=C5=82a?=
 <91079590+moskalakamil@users.noreply.github.com>
Date: Thu, 10 Oct 2024 12:22:10 +0200
Subject: [PATCH] docs: highlight maintainer services (#281)

* docs: add cta block

* docs: convert text to TWG site link
---
 README.md                                     |  2 +-
 .../default-variants.md                       |  2 +
 docs/src/theme/TOC/index.js                   | 21 +++++++
 docs/src/theme/TOC/styles.module.css          | 16 ++++++
 .../PremiumSupport/PremiumSupport.js          | 18 ++++++
 .../PremiumSupport/PremiumSupport.style.css   | 57 +++++++++++++++++++
 6 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/theme/TOC/index.js
 create mode 100644 docs/src/theme/TOC/styles.module.css
 create mode 100644 docs/src/theme/components/PremiumSupport/PremiumSupport.js
 create mode 100644 docs/src/theme/components/PremiumSupport/PremiumSupport.style.css

diff --git a/README.md b/README.md
index b7b596ba..42a663ed 100644
--- a/README.md
+++ b/README.md
@@ -92,7 +92,7 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 
 ## 🏢 Built with ♥️ and ⌨️ at TheWidlarzGroup
 
-Built at TheWidlarzGroup - the group of React Native Developers and Designers who has built this project for you.
+Built at [TheWidlarzGroup](https://www.thewidlarzgroup.com/?utm_source=rnnotif&utm_medium=readme) - the group of React Native Developers and Designers who has built this project for you.
 If you like it -> give it a star!
 
 E-mail if you have any questions or just want to talk <hello@thewidlarzgroup.com>
diff --git a/docs/docs/intro/default-variants-config/default-variants.md b/docs/docs/intro/default-variants-config/default-variants.md
index 59030a41..bb3a080c 100644
--- a/docs/docs/intro/default-variants-config/default-variants.md
+++ b/docs/docs/intro/default-variants-config/default-variants.md
@@ -4,6 +4,8 @@ sidebar_position: 1
 
 # 🖼️ Default Variants
 
+## 🖌️ Default Notification Styling
+
 <br/>
 
 At the start, you receive from us default styling, for all 4 types of notifications (`success` / `error` / `warning` / `info`). <br/>
diff --git a/docs/src/theme/TOC/index.js b/docs/src/theme/TOC/index.js
new file mode 100644
index 00000000..44643e28
--- /dev/null
+++ b/docs/src/theme/TOC/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import clsx from 'clsx'
+import TOCItems from '@theme/TOCItems'
+import styles from './styles.module.css'
+import { PremiumSupport } from '../components/PremiumSupport/PremiumSupport'
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight'
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active'
+export default function TOC({ className, ...props }) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+      <PremiumSupport />
+    </div>
+  )
+}
diff --git a/docs/src/theme/TOC/styles.module.css b/docs/src/theme/TOC/styles.module.css
new file mode 100644
index 00000000..4b5d9f46
--- /dev/null
+++ b/docs/src/theme/TOC/styles.module.css
@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
diff --git a/docs/src/theme/components/PremiumSupport/PremiumSupport.js b/docs/src/theme/components/PremiumSupport/PremiumSupport.js
new file mode 100644
index 00000000..b09aa472
--- /dev/null
+++ b/docs/src/theme/components/PremiumSupport/PremiumSupport.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import './PremiumSupport.style.css'
+
+export const PremiumSupport = () => {
+  return (
+    <div className="premium-support__container">
+      <span className="premium-support__text">We are TheWidlarzGroup</span>
+      <a
+        target="_blank"
+        href="https://www.thewidlarzgroup.com/?utm_source=rnnotif&utm_medium=docs#Contact"
+        className="premium-support__link"
+        rel="noreferrer"
+      >
+        Premium support →
+      </a>
+    </div>
+  )
+}
diff --git a/docs/src/theme/components/PremiumSupport/PremiumSupport.style.css b/docs/src/theme/components/PremiumSupport/PremiumSupport.style.css
new file mode 100644
index 00000000..88bc69b2
--- /dev/null
+++ b/docs/src/theme/components/PremiumSupport/PremiumSupport.style.css
@@ -0,0 +1,57 @@
+.premium-support__container {
+  display: none;
+  flex-direction: column;
+  text-align: center;
+  background-color: #171717;
+  padding: 1rem;
+  margin: 1rem;
+  gap: 1rem;
+  border-radius: 0.5rem;
+}
+
+.premium-support__text {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-weight: bold;
+  color: #fff;
+}
+
+.premium-support__link {
+  width: 90%;
+  border-radius: .25rem;
+  margin: 0 auto;
+  border: none;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  background-color: #f9d85b;
+  color: #171717;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  text-align: center;
+  display: inline-block;
+}
+
+.premium-support__link:hover {
+  transform: scale(1.05);
+  background-color: #fff;
+  color: #171717;
+  text-decoration: none;
+}
+
+html[data-theme="dark"] .premium-support__container {
+  background-color: #87ccef;
+}
+
+html[data-theme="dark"] .premium-support__text {
+  color: #171717;
+}
+
+html[data-theme="dark"] .premium-support__link {
+  background-color: #171717;
+  color: #fff;
+}
+
+@media (min-width: 1516px) {
+  .premium-support__container {
+    display: flex;
+  }
+}