Update sponsors section

index.html

@@ -25,7 +25,7 @@ <h2 class="ui inverted header">
     </h2>
     <div class="ui text container">
       <h1>
-        <p><a href="https://faisalman.github.io/ua-parser-js">{UAParser.js}</a> detect <u>Browser</u>, <u>Engine</u>, <u>OS</u>, <u>CPU</u>, and <u>Device</u> type/model from User-Agent & Client-Hints with relatively small footprint (~17KB minified, ~7KB gzipped) that can be used either in browser (client-side) or node.js (server-side).</p></h1> 
+        <p><a href="https://faisalman.github.io/ua-parser-js">{UAParser.js}</a> is a JavaScript library to detect user's <u>Browser</u>, <u>Engine</u>, <u>OS</u>, <u>CPU</u>, and <u>Device</u> type/model, either in browser (client-side) or node.js (server-side).</p></h1> 
         <div class="ui massive buttons">
             <a href="#try" class="ui violet button"><i class="magic icon"></i>Try The Demo</a>
             <div class="or"></div>
@@ -40,50 +40,21 @@ <h1>
     <div class="ui horizontal divider">
       FROM OUR SPONSORS :
     </div>
-    <div class="ui stackable two column grid">
-      <div class="column">
-        <div class="ui fluid red card">
-          <div class="content">
-            <img class="floated small ui image"
-              src="https://github.com/faisalman/ua-parser-js/raw/master/images/51degrees.svg">
-            <div class="header">
-              51Degrees
-            </div>
-            <div class="meta">
-              <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">@51degrees/ua-parser-js</a>
-            </div>
-            <div class="description">
-              <p>UAParser.js has been upgraded to detect comprehensive device data based on the User-Agent and User-Agent
-                Client Hints.</p>
-
-              <p>This package supports all device types including Apple and Android devices and can be used either in a
-                browser (client-side) or Node.js environment (server-side).</p>
-
-              <p><a href="https://www.npmjs.com/package/@51degrees/ua-parser-js">Visit 51Degrees UAParser</a> to get
-                started.</p>
-            </div>
-          </div>
-          <div class="extra content">
-            <a href="https://www.npmjs.com/package/@51degrees/ua-parser-js"
-              class="ui right floated large labeled icon red button">
-              <i class="external alternate icon"></i>@51degrees/ua-parser-js</a>
-          </div>
-        </div>
-      </div>
+    <div class="ui stackable grid">
       <div class="column">
         <div class="ui fluid black card">
           <div class="content">
             <div class="header">
             </div>
             <div class="meta">
             </div>
-            <div class="description" style="height:288px">
+            <div class="description">
             </div>
           </div>
           <div class="extra content">
-              <a href="https://opencollective.com/ua-parser-js"
-              class="ui right floated large labeled icon white button">
-              <i class="external alternate icon"></i>Become a Sponsor</a>
+            <a href="https://opencollective.com/ua-parser-js"
+            class="ui right floated large labeled icon button">
+            <i class="dollar sign icon"></i>BECOME A SPONSOR</a>
           </div>
         </div>
       </div>
@@ -99,7 +70,7 @@ <h1>
       <div class="ui basic segment">
         <p id="ua-txt-info">
           {UAParser.js} abstracts away the hassle of User-Agent detection by turning them into a set of simple & meaningful data. As an example, this is what we get from your browser's User-Agent information: </p>
-        <div class="ui black massive label"><p id="ua-txt"></p><button id="btn-clipboard" class="ui right floated labeled icon violet tiny button" data-clipboard-target="#ua-txt"><i class="clipboard icon"></i>COPY TO CLIPBOARD</button></div>
+        <div class="ui black massive label"><p id="ua-txt"></p><button id="btn-clipboard" class="ui right floated labeled icon violet large button" data-clipboard-target="#ua-txt"><i class="clipboard icon"></i>COPY TO CLIPBOARD</button></div>
       </div>
       <div class="ui basic segment">
       <p>
@@ -927,6 +898,15 @@ <h2 class="ui dividing header">Backers & Sponsors <div class="sub header">Those
           <img class="ui centered image" src="https://opencollective.com/ua-parser-js/individuals.svg?avatarHeight=128"/></a>
         </div>
       </div>
+      <div class="ui basic left aligned segment">
+        <h3 class="ui dividing header">Contribute to UAParser.js<div class="sub header">It's free to use, but feel free to contribute if you find it useful</div></h3>
+        <a href="https://opencollective.com/ua-parser-js/donate?interval=oneTime" class="ui labeled icon red button">
+        <i class="dollar sign icon"></i>ONE-TIME SPONSOR</a>
+        <a href="https://opencollective.com/ua-parser-js/donate?interval=month" class="ui labeled icon violet button">
+        <i class="sync icon"></i>MONTHLY SPONSOR</a>
+        <a href="https://github.com/sponsors/faisalman" class="ui labeled icon black button">
+        <i class="github alternate icon"></i>GITHUB SPONSOR</a>
+      </div>
       <div class="ui basic centered segment">
         <h2 class="ui dividing header">Contributors <div class="sub header">Those who collaborate and continuosly improve this library to be awesome</div></h2>
         <a href="https://github.com/faisalman/ua-parser-js/graphs/contributors"><img class="ui centered image" src="https://opencollective.com/ua-parser-js/contributors.svg?avatarHeight=64&width=640"/></a>