feat: sponsors

src/components/Sponsors/TopBanner.js

@@ -0,0 +1,28 @@
+export const TopBanner = ({ items }) => {
+  return (
+    <div className="pb-4">
+      {items.map((item) => (
+        <>
+          <div className="mb-2">
+            <div className="text-xs text-gray-500 dark:text-gray-400 font-bold underline mb-1">
+              Sponsored by {item.name}
+            </div>
+
+            <a href={item.url} target="_blank">
+              <img
+                className="w-full rounded-xl"
+                loading="lazy"
+                alt={item.name}
+                src={item.imgSrc}
+              />
+            </a>
+
+            <div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold -mt-1 line-clamp-1">
+              {item.description}
+            </div>
+          </div>
+        </>
+      ))}
+    </div>
+  );
+};

src/css/custom.css

@@ -3,6 +3,9 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");