[docs] Add Octopus diamond sponsor (#22178)

Author: oliviertassinari

README.md

@@ -48,7 +48,11 @@ Please note that `@next` will only point to pre-releases; to get the latest stab
 
 ### Diamond 💎
 
-Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.
+<p style="display: flex; justify-content: center;">
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="octopus" href="https://octopus.com/?utm_source=materialui&utm_medium=referral" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
+</p>
+
+Diamond Sponsors are those who have pledged \$1,500/month or more to Material-UI.
 
 ### Gold 🏆
 

docs/public/static/in-house/octopus-dark.png

@@ -33,46 +33,35 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-// Persisted for the whole session.
-// The state is used to avoid layout jumps during the session (navigation between different pages).
-const randomSession = Math.random();
-
 export default function DiamondSponsors(props) {
   const classes = useStyles();
   const { spot } = props;
   const theme = useTheme();
   const t = useSelector((state) => state.options.t);
-  const [randomSencha, setRandomSencha] = React.useState(1);
-
-  React.useEffect(() => {
-    setRandomSencha(randomSession);
-  }, []);
 
   return (
     <div className={classes.root}>
       <Typography variant="caption" color="textSecondary" display="block" gutterBottom>
         {t('diamondSponsors')}
       </Typography>
-      {randomSencha < 0.001 ? (
-        <a
-          data-ga-event-category="sponsor"
-          data-ga-event-action={spot}
-          data-ga-event-label="sencha"
-          href="https://www.sencha.com/products/extreact/extreact-for-material-ui/?utm_source=materialui&utm_medium=referral&utm_content=product-200429-extreactmaterialui"
-          rel="noopener noreferrer sponsored"
-          target="_blank"
-          style={{ marginLeft: 8, width: 125, height: 35 }}
-        >
-          <img
-            width="125"
-            height="35"
-            src={`/static/in-house/sencha-125x35-${theme.palette.type}.svg`}
-            alt="sencha"
-            title="UI Components for Productive Dev Teams"
-            loading="lazy"
-          />
-        </a>
-      ) : null}
+      <a
+        data-ga-event-category="sponsor"
+        data-ga-event-action={spot}
+        data-ga-event-label="octopus"
+        href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
+        rel="noopener noreferrer sponsored"
+        target="_blank"
+        style={{ width: 125, height: 35 }}
+      >
+        <img
+          width="125"
+          height="35"
+          src={`/static/in-house/octopus-${theme.palette.type}.png`}
+          alt="octopus"
+          title="Repeatable, reliable deployments"
+          loading="lazy"
+        />
+      </a>
       <a
         style={{ marginTop: 8 }}
         aria-label={t('diamondSponsors')}

docs/public/static/in-house/octopus-light.png

@@ -8,7 +8,11 @@ The core of Material-UI is a crowd-funded open-source project, licensed under th
 
 ### Diamond 💎
 
-*3/3 slots available*
+<p style="display: flex; justify-content: center;">
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="octopus" href="https://octopus.com/?utm_source=materialui&utm_medium=referral" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
+</p>
+
+_2/3 slots available_
 
 Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.
 Please contact us at [email protected] to subscribe to this tier.

docs/public/static/in-house/sencha-125x35-dark.svg

@@ -22,6 +22,11 @@ const backers = [
     alt: 'callemall',
     title: 'Call-Em-All - The easy way to message your group',
   },
+  {
+    href: 'https://octopus.com/?utm_source=materialui&utm_medium=referral',
+    alt: 'octopus',
+    title: 'Octopus - Repeatable, reliable deployments',
+  },
 ];
 
 const useStyles = makeStyles(

docs/public/static/in-house/sencha-125x35-light.svg

@@ -4,7 +4,11 @@ The continued development and maintenance of Material-UI is made possible by the
 
 ### Diamond 💎
 
-*3/3 slots available*
+<p style="display: flex; justify-content: center;">
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="octopus" href="https://octopus.com/?utm_source=materialui&utm_medium=referral" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
+</p>
+
+_2/3 slots available_
 
 ### Gold 🏆