Add badges for Cloud-related plans (#1873)

* Add proposal for badges for Cloud-related plans

* Remove example badges

docusaurus/src/components/Badge.js

@@ -62,6 +62,25 @@ export function EnterpriseBadge(props) {
   );
 }
 
+export function CloudProBadge(props) {
+  return (
+    <Badge
+      variant="Strapi Cloud Pro"
+      link="https://strapi.io/pricing-cloud"
+      {...props}
+    />
+  );
+}
+
+export function CloudTeamBadge(props) {
+  return (
+    <Badge
+      variant="Strapi Cloud Team"
+      link="https://strapi.io/pricing-cloud"
+      {...props}
+    />
+  );
+}
 
 export function NewBadge(props) {
   return (

docusaurus/src/scss/badge.scss

@@ -43,6 +43,16 @@
     --custom-badge-color: rgb(229, 136, 41);
   }
 
+  &--strapicloudpro {
+    --custom-badge-background-color: rgb(55, 34, 254);
+    --custom-badge-color: #fff;
+  }
+
+  &--strapicloudteam {
+    --custom-badge-background-color: rgb(154, 53, 242);
+    --custom-badge-color: #fff;
+  }
+
   &--new {
     --custom-badge-background-color: var(--strapi-warning-100);
     --custom-badge-border-color: var(--strapi-warning-200);

docusaurus/src/theme/MDXComponents.js

@@ -18,7 +18,7 @@ import FeedbackPlaceholder from '../components/FeedbackPlaceholder';
 import CustomDocCard from '../components/CustomDocCard';
 import CustomDocCardsWrapper from '../components/CustomDocCardsWrapper';
 import { InteractiveQueryBuilder } from '../components/InteractiveQueryBuilder/InteractiveQueryBuilder';
-import { AlphaBadge, BetaBadge, EnterpriseBadge } from '../components/Badge';
+import { AlphaBadge, BetaBadge, EnterpriseBadge, CloudProBadge, CloudTeamBadge } from '../components/Badge';
 import { SideBySideColumn, SideBySideContainer } from '../components';
 import ThemedImage from '@theme/ThemedImage';
 import {
@@ -48,6 +48,8 @@ export default {
   AlphaBadge,
   BetaBadge,
   EnterpriseBadge,
+  CloudProBadge,
+  CloudTeamBadge,
   Columns,
   ColumnLeft,
   ColumnRight,