Tiered sponsors

README.md

@@ -58,18 +58,20 @@ yarn add react-tooltip
 
 ## Sponsors
 
+### Gold Sponsors 🌟
+
 <a href="https://frigade.com/?source=react-tooltip">
   <img alt="Frigade" style="height: 250px" src="docs/static/img/sponsors/frigade.png" />
 </a>
 
 React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.
 
+#### Silver Sponsors ✪
+
 <a href="https://dopt.com/?source=react-tooltip">
-  <img alt="Dopt" style="height: 250px" src="docs/static/img/sponsors/dopt.png" />
+  <img alt="Dopt" style="height: 200px" src="docs/static/img/sponsors/dopt.png" />
 </a>
 
-[Dopt](https://dopt.com/?source=react-tooltip) gives developers UI components and SDKs to build seamless onboarding and education experiences in minutes.
-
 ## Usage
 
 1 . Import the CSS file to set default styling.

docs/src/components/AdsContainer/index.tsx

@@ -6,10 +6,10 @@ import './styles.css'
 
 const AdsContainer = () => {
   return (
-    <div className="fixed">
-      <BannerSponsor sponsorKey="frigade" />
-      <BannerSponsor sponsorKey="dopt" />
+    <div className="ads-container fixed">
+      <BannerSponsor sponsorKey="frigade" tier="gold" />
       <AdsContainerElement />
+      <BannerSponsor sponsorKey="dopt" tier="silver" />
     </div>
   )
 }

docs/src/components/AdsContainer/styles.css

@@ -1,3 +1,14 @@
 .fixed {
   position: fixed;
 }
+
+.ads-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  #carbonads {
+    width: 100%;
+    max-width: 341px;
+  }
+}

docs/src/components/BannerSponsor/index.tsx

@@ -28,9 +28,10 @@ const SPONSORS = {
 
 interface BannerSponsorProps {
   sponsorKey: keyof typeof SPONSORS
+  tier: 'gold' | 'silver'
 }
 
-const BannerSponsor = ({ sponsorKey }: BannerSponsorProps) => {
+const BannerSponsor = ({ sponsorKey, tier }: BannerSponsorProps) => {
   const sponsor = SPONSORS[sponsorKey]
 
   const onClickSponsorBannerEventHandler = () => {
@@ -47,7 +48,7 @@ const BannerSponsor = ({ sponsorKey }: BannerSponsorProps) => {
   }
 
   return (
-    <div className="sponsor-banner">
+    <div className={`sponsor-banner sponsor-banner-${tier}`}>
       <a
         href={`${sponsor.href}?source=react-tooltip`}
         title={sponsor.title}

docs/src/components/BannerSponsor/styles.css

@@ -5,5 +5,17 @@
   flex-direction: column;
   min-inline-size: 130px;
   max-inline-size: calc(130px + var(--sponsor-max-char) + 8ch);
-  max-width: 377px;
+  height: fit-content;
+
+  a {
+    display: flex;
+  }
 }
+
+.sponsor-banner-gold {
+  max-width: 341px;
+}
+
+.sponsor-banner-silver {
+  max-width: 163px;
+}

docs/src/components/HomepageSponsored/index.tsx

@@ -16,6 +16,10 @@ type FeatureItem = {
   link: string
 }
 
+type SponsorItem = FeatureItem & {
+  tier: 'gold' | 'silver'
+}
+
 const FeatureList: FeatureItem[] = [
   {
     title: 'Digital Ocean',
@@ -29,18 +33,20 @@ const FeatureList: FeatureItem[] = [
   },
 ]
 
-const SponsorList: FeatureItem[] = [
+const SponsorList: SponsorItem[] = [
   {
     title: 'Frigade',
     src: require('@site/static/img/sponsors/frigade.png').default,
     link: 'https://frigade.com/?source=react-tooltip',
     eventTitle: 'frigade',
+    tier: 'gold',
   },
   {
     title: 'Dopt',
     src: require('@site/static/img/sponsors/dopt.png').default,
     link: 'https://dopt.com/?source=react-tooltip',
     eventTitle: 'dopt',
+    tier: 'silver',
   },
 ]
 
@@ -70,33 +76,63 @@ export default function HomepageSponsored(): JSX.Element {
     return true
   }
 
+  const goldSponsors = SponsorList.filter(({ tier }) => tier === 'gold')
+  const silverSponsors = SponsorList.filter(({ tier }) => tier === 'silver')
+
   return (
     <section className={styles.features}>
       <div className="container">
-        <h3 className={styles.sponsoredTitle}>Sponsored by</h3>
-        <div className="row">
-          {SponsorList.map(({ link, title, src, eventTitle }, idx) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <div key={idx} className={clsx(`col col--${12 / SponsorList.length}`)}>
-              <div className="text--center">
-                <a
-                  href={link}
-                  title={title}
-                  target="_blank"
-                  rel="noreferrer"
-                  onClick={() => {
-                    onClickSponsorBannerEventHandler(eventTitle)
-                  }}
-                >
-                  <img src={src} alt={title} width={480} />
-                </a>
-              </div>
+        <div className={styles.sponsoredBy}>
+          <div>
+            <h1 className={styles.sponsoredTitle}>Gold Sponsors 🌟</h1>
+            <div className="row">
+              {goldSponsors.map(({ link, title, src, eventTitle }, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={idx} className={clsx(`col col--${12 / goldSponsors.length}`)}>
+                  <div className="text--center">
+                    <a
+                      href={link}
+                      title={title}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={() => {
+                        onClickSponsorBannerEventHandler(eventTitle)
+                      }}
+                    >
+                      <img src={src} alt={title} width={480} />
+                    </a>
+                  </div>
+                </div>
+              ))}
             </div>
-          ))}
+          </div>
+          <div>
+            <h2 className={styles.sponsoredTitle}>Silver Sponsors ✪</h2>
+            <div className="row">
+              {silverSponsors.map(({ link, title, src, eventTitle }, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={idx} className={clsx(`col col--${12 / silverSponsors.length}`)}>
+                  <div className="text--center">
+                    <a
+                      href={link}
+                      title={title}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={() => {
+                        onClickSponsorBannerEventHandler(eventTitle)
+                      }}
+                    >
+                      <img src={src} alt={title} width={200} />
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
       <div className="container">
-        <h3 className={styles.sponsoredTitle}>Powered by</h3>
+        <h1 className={styles.sponsoredTitle}>Powered by</h1>
         <div className="row">
           {FeatureList.map((props, idx) => (
             // eslint-disable-next-line react/no-array-index-key

docs/src/components/HomepageSponsored/styles.module.css

@@ -1,6 +1,7 @@
 .features {
   display: flex;
   flex-direction: column;
+  gap: 25px;
 }
 
 .featureSvg {
@@ -9,11 +10,16 @@
 }
 
 .sponsoredTitle {
-  font-size: xx-large;
   display: flex;
   justify-content: center;
 }
 
+.sponsoredBy {
+  display: flex;
+  flex-direction: column;
+  gap: 21px;
+}
+
 @media screen and (min-width: 1024px) {
   .features {
     display: flex;