docs: add cta block

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/>

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>
+  )
+}

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;
+  }
+}

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>
+  )
+}

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;
+  }
+}