refactor: make twg badge visible on smaller screens (#4345)

docs/components/TWGBadge/TWGBadge.module.css

@@ -0,0 +1,62 @@
+.extraContainer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.5rem;
+    text-align: center;
+    background-color: #171717;
+    padding: 1rem;
+    gap: 1rem;
+    border-radius: 0.5rem;
+}
+
+.extraText {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-weight: bold;
+    color: #fff;
+}
+
+.extraButton {
+    width: 100%;
+    border: none;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    background-color: #f9d85b;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.extraButton:hover {
+    transform: scale(1.05);
+    background-color: #fff;
+}
+
+:is(html[class~=dark]) .extraContainer {
+    background-color: #87ccef;
+}
+
+:is(html[class~=dark]) .extraText {
+    color: #171717;
+}
+
+:is(html[class~=dark]) .extraButton {
+    background-color: #171717;
+}
+
+
+@media (min-width: 1280px) {
+    .visibleOnLarge {
+        display: inherit;
+    }
+    .visibleOnSmall {
+        display: none;
+    }
+}
+
+@media (max-width: 1279px) {
+    .visibleOnLarge {
+        display: none;
+    }
+    .visibleOnSmall {
+        display: flex;
+    }
+}

docs/components/TWGBadge/TWGBadge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+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#Contact"
+        className={styles.extraButton}
+        rel="noreferrer">
+        Premium support →
+      </a>
+    </div>
+  );
+};
+
+export default TWGBadge;