changed related resources in components (#1714)

Co-authored-by: Piotr Gusciora <pgusciora@mdbootstrap.com>
mdbootstrap · Jun 22, 2023 · 3f750c4 · 3f750c4
1 parent 8c44497
commit 3f750c4
Show file tree

Hide file tree

Showing 32 changed files with 1,701 additions and 455 deletions.
diff --git a/site/content/docs/standard/components/accordion/index.html b/site/content/docs/standard/components/accordion/index.html
@@ -1286,13 +1286,41 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/faq/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >FAQ component / section</a
+      >Icons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >Dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >Spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >Buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >Rounded corners</a
     >
 
     <!-- Main docs -->
@@ -1307,13 +1335,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/components/accordion/"
-    >Bootstrap Accordion</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/components/alerts/index.html b/site/content/docs/standard/components/alerts/index.html
@@ -1024,12 +1024,61 @@ <h4 class="mb-2 text-2xl font-medium leading-tight">Well done!</h4>
 
 <hr class="mb-5 dark:border-neutral-600" />
 
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/components/alerts/"
-    >Bootstrap Alerts</a
-  >
-  from MDBootstrap.
-</p>
+<!-- Section: Related resources -->
+<section id="section-related-resources">
+  <!-- Title -->
+  <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
+    Related resources
+  </h2>
+
+  <!-- Resources -->
+  <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >Icons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/hsla-colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >hsla colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+
+    <!-- Main docs -->
+  </div>
+  <!-- Resources -->
+</section>
+<!-- Section: Related resources -->
diff --git a/site/content/docs/standard/components/avatar/index.html b/site/content/docs/standard/components/avatar/index.html
@@ -463,21 +463,55 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/avatar/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/arbitrary-values/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Bootstrap Avatar</a
+      >Iarbitrary valuescons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/flexbox/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >flexbox</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
     >
-
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/testimonials/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/masks/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Bootstrap Testimonials / Reviews</a
+      >masks</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/ripple-effect/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >ripple effect</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/shadows/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >shadows</a
     >
 
     <!-- Main docs -->
@@ -516,13 +550,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/extended/avatar/"
-    >Bootstrap Avatar</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/components/badges/index.html b/site/content/docs/standard/components/badges/index.html
@@ -700,12 +700,61 @@ <h6 class="text-base font-medium leading-tight">
 
 <hr class="mb-5 dark:border-neutral-600" />
 
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/components/badges/"
-    >Bootstrap Badges</a
-  >
-  from MDBootstrap.
-</p>
+<!-- Section: Related resources -->
+<section id="section-related-resources">
+  <!-- Title -->
+  <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
+    Related resources
+  </h2>
+
+  <!-- Resources -->
+  <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/hsla-colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >hsla colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+
+    <!-- Main docs -->
+  </div>
+  <!-- Resources -->
+</section>
+<!-- Section: Related resources -->