@widlarzgroup/docusaurus-ui 0.0.1

package/src/components/PlusBadge/PlusBadge.tsx

@@ -0,0 +1,23 @@
+import styles from './PlusBadge.module.css';
+
+interface PlusBadgeProps {
+  tooltip?: string;
+}
+
+const PlusBadge = ({ tooltip = 'Pro feature' }: PlusBadgeProps) => {
+  return (
+    <span className={styles.badge} title={tooltip}>
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={styles.icon}
+      >
+        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+      </svg>
+    </span>
+  );
+};
+
+export default PlusBadge;

package/src/components/ProBadge/ProBadge.module.css

@@ -0,0 +1,8 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 6px;
+  color: #a855f7;
+  flex-shrink: 0;
+}

package/src/components/ProBadge/ProBadge.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './ProBadge.module.css';
+
+export default function ProBadge() {
+  return (
+    <span className={styles.badge} title="Pro Player feature">
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0z" />
+      </svg>
+    </span>
+  );
+}

package/src/components/ProFeature/ProFeature.module.css

@@ -0,0 +1,89 @@
+.container {
+  margin: 1.5rem 0;
+  padding: 1.25rem 1.5rem;
+  background: rgba(150, 201, 235, 0.08);
+  border: 1px solid rgba(150, 201, 235, 0.2);
+  border-left: 4px solid #96c9eb;
+  border-radius: 8px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.6rem;
+  background: linear-gradient(135deg, #96c9eb 0%, #76b8e5 100%);
+  border-radius: 4px;
+}
+
+.icon {
+  color: #171717;
+}
+
+.badgeText {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #171717;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.description {
+  margin: 0 0 1rem 0;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary, #b4b4b4);
+  line-height: 1.6;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.primaryButton {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: #96c9eb;
+  color: #171717;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-radius: 6px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.primaryButton:hover {
+  background: #76b8e5;
+  color: #171717;
+  text-decoration: none;
+}
+
+.secondaryButton {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  color: #96c9eb;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border: 1px solid rgba(150, 201, 235, 0.3);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.secondaryButton:hover {
+  background: rgba(150, 201, 235, 0.1);
+  border-color: rgba(150, 201, 235, 0.5);
+  color: #96c9eb;
+  text-decoration: none;
+}
+

package/src/components/ProFeature/ProFeature.tsx

@@ -0,0 +1,51 @@
+import styles from './ProFeature.module.css';
+
+interface ProFeatureProps {
+  title?: string;
+  description?: string;
+}
+
+const ProFeature = ({
+  title = 'Pro Feature',
+  description = 'This feature is part of our commercial offering. Start a free trial to explore all Pro features.',
+}: ProFeatureProps) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.badge}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className={styles.icon}
+          >
+            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+          </svg>
+          <span className={styles.badgeText}>{title}</span>
+        </div>
+      </div>
+      <p className={styles.description}>{description}</p>
+      <div className={styles.actions}>
+        <a
+          href="https://sdk.thewidlarzgroup.com/signup?utm_source=rnv&utm_medium=docs&utm_campaign=pro-feature"
+          target="_blank"
+          rel="noreferrer"
+          className={styles.primaryButton}
+        >
+          Start Free Trial
+        </a>
+        <a
+          href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=pro-feature#Contact"
+          target="_blank"
+          rel="noreferrer"
+          className={styles.secondaryButton}
+        >
+          Contact Sales
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default ProFeature;

package/src/components/StatusBadge/StatusBadge.module.css

@@ -0,0 +1,26 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  padding: 2px 6px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-size: 0.7em;
+  font-weight: 500;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.badgePlanned {
+  background: var(--color-accent-subtle);
+  border-color: var(--color-accent-glow);
+  color: var(--color-accent);
+}
+
+.badgeNew {
+  background: var(--color-secondary-subtle);
+  border-color: var(--color-secondary-glow);
+  color: var(--color-secondary);
+}
+

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './StatusBadge.module.css';
+
+type StatusBadgeType = 'planned' | 'new';
+
+interface StatusBadgeProps {
+  type: StatusBadgeType;
+}
+
+const config = {
+  planned: {
+    label: 'Planned',
+    title: 'Planned feature',
+    className: 'badgePlanned',
+  },
+  new: {
+    label: 'New',
+    title: 'New feature',
+    className: 'badgeNew',
+  },
+};
+
+export default function StatusBadge({ type }: StatusBadgeProps) {
+  const { label, title, className } = config[type];
+
+  return (
+    <span className={clsx(styles.badge, styles[className])} title={title}>
+      {label}
+    </span>
+  );
+}

package/src/components/TWGBadge/TWGBadge.module.css

@@ -0,0 +1,107 @@
+.extraContainer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.5rem;
+    text-align: center;
+    padding: 1.5rem 1rem;
+    gap: 1rem;
+    border-radius: 0.75rem;
+    background: var(--color-secondary-subtle);
+    overflow: hidden;
+}
+
+.extraContainer::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 200px;
+    height: 200px;
+    background: var(--color-secondary-glow);
+    border-radius: 50%;
+    opacity: 0.2;
+    z-index: 0;
+}
+
+.extraContainer::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -10%;
+    width: 150px;
+    height: 150px;
+    background: var(--color-secondary-glow);
+    border-radius: 50%;
+    opacity: 0.2;
+    z-index: 0;
+}
+
+.extraText {
+    position: relative;
+    z-index: 1;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-weight: 600;
+    text-wrap: nowrap;
+    font-size: 0.95rem;
+    color: var(--color-text-primary);
+    line-height: 1.4;
+}
+
+.extraButton {
+    position: relative;
+    z-index: 1;
+    width: 90%;
+    border: 1.5px solid var(--color-secondary);
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    background-color: var(--ifm-background-color);
+    transition: all 0.3s ease;
+    color: var(--color-text-primary);
+    border-radius: 0.5rem;
+    text-decoration: none;
+}
+
+.extraButton:hover {
+    transform: scale(1.05);
+    border-color: var(--color-secondary-dim);
+    border-width: 2px;
+}
+
+[data-theme='dark'] .extraContainer {
+    background: var(--color-secondary-subtle);
+}
+
+[data-theme='dark'] .extraContainer::before,
+[data-theme='dark'] .extraContainer::after {
+    background: var(--color-secondary-glow);
+    opacity: 0.1;
+}
+
+
+@media (min-width: 1280px) {
+    .visibleOnLarge {
+        display: flex;
+    }
+    .visibleOnSmall {
+        display: none;
+    }
+    .extraContainer {
+        margin: 1rem;
+    }
+}
+
+@media (max-width: 1279px) {
+    .visibleOnLarge {
+        display: none;
+    }
+    .visibleOnSmall {
+        display: flex;
+    }
+    .extraContainer {
+        margin: 2rem 0.2rem 0.2rem 0.2rem;
+    }
+}

package/src/components/TWGBadge/TWGBadge.tsx

@@ -0,0 +1,27 @@
+import styles from './TWGBadge.module.css';
+
+interface TWGBadgeProps {
+  visibleOnLarge?: boolean;
+}
+
+const TWGBadge = ({ visibleOnLarge }: TWGBadgeProps) => {
+  const visibilityClass = visibleOnLarge
+    ? styles.visibleOnLarge
+    : styles.visibleOnSmall;
+
+  return (
+    <div className={[styles.extraContainer, visibilityClass].join(' ')}>
+      <span className={styles.extraText}>We are TheWidlarzGroup</span>
+      <a
+        target="_blank"
+        href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=badge&utm_id=enterprise#Contact"
+        className={styles.extraButton}
+        rel="noreferrer"
+      >
+        Premium support →
+      </a>
+    </div>
+  );
+};
+
+export default TWGBadge;