[website] Add buzzoid and twicsy as gold sponsors (#43368)

Signed-off-by: Raffaella Luzi Stoutland <[email protected]>
Signed-off-by: Olivier Tassinari <[email protected]>
Co-authored-by: zanivan <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>

docs/data/material/discover-more/backers/backers.md

@@ -30,6 +30,15 @@ via [Open Collective](https://opencollective.com/mui-org) or via [the for-profi
   <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="goread.io" href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="110" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/96.png" srcset="https://images.opencollective.com/goread_io/eb6337d/logo/288.png 3x" alt="goread.io" title="Goread.io: Instagram followers, likes, views, and comments." loading="lazy" /></a>
 </p>
 
+<!--
+List gold sponsors that regular sponsors could feel uncomfortable being listed next to.
+For example, it could be because the service breaks another service's Terms of service and hence is a moral minefield.
+-->
+<p style="display: flex; justify-content: start; align-items: center; flex-wrap: wrap;">
+  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="buzzoid.com" href="https://buzzoid.com/" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="24" width="24" src="https://images.opencollective.com/buzzoidz/d23d9bb/logo/24.png" srcset="https://images.opencollective.com/buzzoidz/d23d9bb/logo/72.png 3x" alt="buzzoid.com" title="Buzzoid: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Buzzoid</a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="twicsy.com" href="https://twicsy.com/" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="24" width="24" src="/static/sponsors/twicsy-square.svg" alt="twicsy.com" title="Twicsy: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Twicsy</a>
+</p>
+
 Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold).
 
 ## Silver sponsors

docs/src/components/home/BacklinkSponsor.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Link } from '@mui/docs/Link';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+
+export default function BacklinkSponsor(props: {
+  item: {
+    name: string;
+    description: string;
+    href: string;
+  };
+}) {
+  const { item } = props;
+  // Keep it under two rows maximum.
+  if (item.description.length > 50) {
+    throw new Error(
+      `${item.name}'s description is too long (${item.description.length} characters). It must fit into two line, so under 50 characters.`,
+    );
+  }
+
+  return (
+    <Link
+      data-ga-event-category="sponsor"
+      data-ga-event-action="homepage"
+      data-ga-event-label={new URL(item.href).hostname}
+      href={item.href}
+      title={item.description}
+      target="_blank"
+      rel="sponsored noopener"
+      sx={{ mr: { xs: 2, md: 3 }, mt: { xs: 2, md: 3 } }}
+    >
+      {item.name}
+      <OpenInNewRoundedIcon sx={{ fontSize: 16, ml: 1, verticalAlign: 'middle' }} />
+    </Link>
+  );
+}

docs/src/components/home/GoldSponsors.tsx

@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import AddRounded from '@mui/icons-material/AddRounded';
 import Grid from '@mui/material/Grid2';
 import SponsorCard from 'docs/src/components/home/SponsorCard';
+import BacklinkSponsor from 'docs/src/components/home/BacklinkSponsor';
 import { Link } from '@mui/docs/Link';
 import ROUTES from 'docs/src/route';
 
@@ -64,6 +65,18 @@ const GOLDs = [
     href: 'https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=homepage',
   },
 ];
+const BACKLINKs = [
+  {
+    name: 'Buzzoid',
+    description: 'Instant delivery Instagram followers.',
+    href: 'https://buzzoid.com/',
+  },
+  {
+    name: 'Twicsy',
+    description: 'Instant delivery Instagram followers.',
+    href: 'https://twicsy.com/',
+  },
+];
 
 export default function GoldSponsors() {
   const { ref, inView } = useInView({
@@ -142,6 +155,11 @@ export default function GoldSponsors() {
           </Paper>
         </Grid>
       </Grid>
+      <div>
+        {BACKLINKs.map((item) => (
+          <BacklinkSponsor key={item.name} item={item} />
+        ))}
+      </div>
     </div>
   );
 }