Add buzzwords link

src/components/index/ActionButtons.js

@@ -6,11 +6,21 @@ const getButtonClasses = (isClient) =>
   classnames(
     "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline",
     isClient
-      ? 'text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2'
+      ? "text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2"
-      : 'text-gray-200'
+      : "text-gray-200"
   );
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
+  <div className="flex flex-col">
+    <div className="p-4 m-4 bg-buzzwordsPrimary bg-opacity-50 rounded-xl flex flex-col text-center">
+      <h3>Try the game I&apos;m making!</h3>
+      <a
+        className={getButtonClasses(isClient)}
+        href="https://buzzwords.gg"
+      >
+        Buzzwords
+      </a>
+    </div>
     <div className="flex mx-6 mb-6">
       <Link
         className={getButtonClasses(isClient, "muted")}
@@ -43,6 +53,7 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
         Photography Gallery
       </Link>
     </div>
+  </div>
 );
 
 export default ActionButtons;

tailwind.config.js

@@ -39,6 +39,7 @@ module.exports = {
         'huge-2': 'max(7.8vw, 120px)'
       },
       colors: {
+        buzzwordsPrimary: '#F6C54B',
         vibrant: {
           DEFAULT: ({ opacityVariable, opacityValue }) => {
             if (opacityValue !== undefined) {