lp: fix for gradient in the banner.

web/src/components/Hero.js

@@ -111,7 +111,7 @@ page MainPage {
             </h1>
 
             <p className='mt-4 sm:mt-5 text-xl lg:text-xl text-neutral-500'>
-              Rails-like open source framework for React, Node.js and Prisma. Build your app in a day and deploy it anywhere with a single command.
+              Rails-like open-source framework for React, Node.js and Prisma. Build your app in a day and deploy it anywhere with a single command.
             </p>
           </div> {/* EOF Hero title and subtitle */}
 

web/src/components/Nav/Announcement.js

@@ -1,7 +1,10 @@
 import React from 'react'
+import classNames from 'classnames'
 import { useHistory } from '@docusaurus/router'
 import { ChevronRight, X } from 'react-feather'
 
+import styles from '../../pages/styles.module.css'
+
 const Announcement = () => {
   let history = useHistory()
 
@@ -15,14 +18,12 @@ const Announcement = () => {
   return (
     <div
       onClick={handleLink}
-      className={`
+      className={classNames(styles.gradientBackground, `
         overflow-hidden
         cursor-pointer flex-row
         space-x-3
         text-white
-
-        bg-gradient-to-r from-fuchsia-600 to-[#ffcc00]
-      `}
+      `)}
     >
       <div
         className={`

web/src/pages/styles.module.css

@@ -58,3 +58,10 @@
   will-change: filter;
   mix-blend-mode: normal;
 }
+
+/* NOTE(matija): for some reason I couldn't get tailwind gradient to work when docusaurus build,
+ * so I resorted to doing it manually.
+ */
+.gradientBackground {
+  background-image: linear-gradient(to right, #d946ef, #ffcc00);
+}