Add link to course

src/library/library.jsx

@@ -2,12 +2,16 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import Category from '../piece/category';
 import useLibraryCategories from './use-library-categories';
+import SoftAd from '../soft-ad/soft-ad';
 import styles from './library.module.scss';
 
 const Library = () => {
   const categories = useLibraryCategories();
   return (
     <>
+      <SoftAd href="https://alexbainter.gumroad.com/l/generative-music-systems">
+        "Building Generative Music Systems" course available now
+      </SoftAd>
       <Category
         title={'Recently played'}
         pieceIds={categories.history.orderedPieceIds}

src/soft-ad/soft-ad.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './soft-ad.module.scss';
+
+const SoftAd = ({ children, href }) => {
+  return (
+    <a
+      className={styles['soft-ad']}
+      href={href}
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      {children}
+    </a>
+  );
+};
+
+export default SoftAd;

src/soft-ad/soft-ad.module.scss

@@ -0,0 +1,13 @@
+@import '@generative.fm/web-ui/styles/_theme.scss';
+
+.soft-ad {
+  color: $color-grey;
+  display: block;
+  text-align: center;
+  padding: 1rem 1rem 0;
+  margin: 0 auto;
+  line-height: 1.5;
+
+  @include type-normal();
+  font-size: 0.9rem;
+}